When trying new, modern frameworks, developers often face problems like poor official documentation and a lack of real-world examples. A guide that explains using the framework according to best practices/approaches may also be absent. In this article, I provide an overview of Ampersand.js, a more or less modern framework, that could be a solution to many such problems. I encourage those who interact with the client side to try Ampersand. It is well-equipped and developer-friendly, so some of its approaches can be helpful when improving existing frameworks or creating your own.
What is Ampersand, and how does it work?
Ampersand can be seen as a successor or an improved version of Backbone. If you are familiar with Backbone, you will find many similar components. The creators of this product, &yet, describe Ampersand as a “non-frameworky framework.” This means you are able to assemble the framework from the components they provide. The creators also describe Ampersand as “highly modular” and “loosely coupled.” If you don’t need a certain component, you just don’t use it. In other words, you can use Ampersand as the main UI framework for your web application, or for only one part or module, like the wizard.
The creators chose to base their framework on Backbone because they wanted a stable, well-tried, popular basis for their product. Although Ampersand and Backbone share similar components, Ampersand does have some differences:
- ampersand-state is the most significant change. It’s similar to Backbone’s model, but it forces you to define properties and their types in the initial state. This helps you avoid issues when debugging.
- ampersand-model extends ampersand-state by adding methods to work with RESTful services.
- ampersand-collection is similar to Backbone’s collections.
- ampersand-rest-collection is like ampersand-state->ampersand-model. It extends ampersand-collection with methods to work with RESTful services.
- ampersand-view is similar to Backbone’s views.
- ampersand-form-view simplifies form creation, as the name implies.
- ampersand-router is similar to Backbone’s router.
Why is Ampersand better than Backbone?
Ampersand out of the box solves most of the issues that Backbone has, and therefore it may be worth the time and effort to switch legacy code from Backbone to Ampersand. Ampersand-state does not have Backbone’s properties problem because it forces you to define them in the initial state. Ampersand-view includes subview creation, an equivalent to Marionette’s CollectionView. You can also more easily decouple the strong binding of components and introduce new modules.
Furthermore, Backbone has not been modified much recently. It became popular a few years ago, and many projects still use it. Adding new components while maintaining full backward compatibility would be quite difficult. Ampersand, on the other hand, is still being actively developed.
I would also like to emphasize Ampersand’s excellent documentation and scaffolding features that allow you to quickly generate required components.
How can I get started using Ampersand?
To create an app with Ampersand yourself, you need to install the npm.
Install Ampersand: npm install ampersand -g
Type in ampersand .
This will lead you through instructions on how to generate a sample application to play with. The program contains enough base structure for you to easily understand how to follow best practices when creating applications. The sample contains a fake API that mocks HTTP responses from the client side and allows you to imagine interaction with real RESTful services. Also, the application has a pretty nice UI:
Sample Application
Using this documentation, I created a tic-tac-toe game with Ampersand UI and Sinatra API available here: https://github.com/DevMike/tictactoe-sinatra-ampersandjs
Sinatra is responsible only for authentication and data/statistics saving. The game logic is developed by Ampersand on the JS side: https://github.com/DevMike/tictactoe-sinatra-ampersandjs/tree/master/ui
I would also like to note two components that I used in my application. They are not coupled with Ampersand, but work well with it:
- Jade functions as an app template engine.
- Jasmin is a testing framework that covers most tasks.
When you open my game app, you will see a simple form to enter players’ names. (Ampersand’s form component was used for this.) After completing this step, you are directed to the game board.
The board’s UI is pretty simple and based on Ampersand’s sample markup:
The main file is app.js, which includes all the required components: the router, the view, the config, the libraries, and the models. For my game, it initializes instances of respective models: Game (3×3 matrix) and Players (for collection). Most models contain respective properties only in the initial state. The router navigates the application to these pages. Most of the game logic is located within the game page component. Here we can switch players, check for the winner and/or determine winning combinations. When the game is finished, it updates the statistics in the DB and displays them on the homepage.
Most of Ampersand’s significant framework components are evident in this example.
You can see official examples related to best practices here:
https://github.com/AmpersandJS/examples
The following articles provide further examples:
https://iamsim.me/building-an-app-with-ampersand-js/
https://blog.neerajk.com/articles/2014-09-25-How-To-Wire-Up-Ruby-On-Rails-And-Ampersandjs-As-A-Single-Page-Application/
What are Ampersand’s advantages?
I would recommend Ampersand when you need to build a small, single-page app that isn’t going to become large and complex. It would also work well for a project that was built with JQuery which requires some parts to function like a single-page app (wizard, etc.). In addition, Ampersand can be used when you need to replace code written with Backbone, as long as you are not changing the overall approach.
As mentioned above, Ampersand has very good, detailed, official documentation that allows you to create your new app really quickly. I don’t want to compare it with, for example, React.js, because Ampersand is more of a framework than React, but from my own experience, the documentation is much better, and creating an app from scratch takes much less time. Furthermore, like Ember.js, Ampersand has taken an “unobtrusive forcing” approach towards the best practices of building apps. You can reference their guide at https://ampersandjs.com/learn/quick-start-guide/.
Another positive attribute is that the app you create is relatively easy to test, even if you are a fan of TDD. You just need to install Jasmine (see above).
Here is an article that further describes testing with Ampersand:
https://silvdb.github.io/2015/06/16/unit-testing-ampersand-with-jasmine/
For more information on Ampersand’s positive attributes, see
https://blog.andyet.com/2014/06/25/introducing-ampersand-js/
What are Ampersand’s disadvantages?
Ampersand’s approach is somewhat outdated. It worked well several years ago when many sites were building with JQuery. Back then, only part of an application required a single-page approach like Ampersand has. Now, however, other popular frameworks and libraries like React are more progressive and well-equipped.
Another drawback is that not many big projects are using Ampersand now, or at least the Ampersand community doesn’t share this information. Although it is being actively developed, you cannot be sure Ampersand will provide you with a module you might need for a specific task, and then you will have to implement it yourself. This is a weakness common to less popular frameworks.
Summary
Although Ampersand is not suitable for every circumstance, it works well for mid-sized projects or when modifying isolated components on existing apps. It is a good example of what a framework should be. It truly makes the development process a pleasure due to its ease of use and effective design.
