Whilst Magento is known for its proven architecture, we can’t deny it has got rusty over time. This is partially why clean and modern ecommerce platforms like Shopify, Bigcommerce and Sylius are stealing away market share from Magento real quick. Magento on Angular attempts to bring Magento to the 21st century by using a combination of AngularJS, Laravel and even node.js.
AngularJS on the client
So what makes it different from a DOM-manipulating library like jQuery? Well, let’s just say that jQuery is exactly that: a library for working with the DOM. It was never intended to be used as framework for building web applications. AngularJS fills that gap by introducing an MVC structure. In fact, AngularJS can use – but does not depend on – jQuery. Explaining the entirety of AngularJS is beyond the scope of this article, but we will look at a quick snippet : (those looking for a comprehensive guide should follow the tutorial)
Add to Basket</div>
Here we see a basic div with a few directives. ng-class changes the div its class depending on an expression. It will have the “selectable” class if there is a productId in the current scope and it is not already being added to the basket (waiting from a response from the server). ng-click attaches a click-handler to the div. ng-show will show the element depending on an expression. Summarizing: the “btn” is selectable if it is not being added to the basket and will show either “Adding…” or “Add to Basket” as its text.
An API with Laravel
To get Magento data on the client, communication with the Magento server-side models is mandatory. The Magento API exists, but the RESTful resources are limited in functionality (no eager loading or caching, for example). That is why Moa introduces its own API built with the Laravel PHP framework.
Not only does this offer a whole new form of flexibility, it also makes the API properly testable (as in unit tests). One could argue that this is reinventing the wheel, but as Moa is also completely redefining the bicycle its frame by making use of a decoupled AngularJS front-end, the existing wheel would be very hard to fit. With this approach, the new wheel is very modular and can easily be put on a different frame, i.e. one with Meteor or Ember.js on the front-end.
node.js into the mix
What would a 21st century Magento be without node.js? Clichés aside, node.js actually has its purpose here. Just because the Magento data collection is eager loaded on the server, does not mean you want to pass all that data to the client immediately. This is why Snapshot.js, served via node.js, is taking care of lazy loading for the clients. Because all data is cached, Snapshot.js can easily traverse through that data and return specific subsets of it depending on things like pagination, categorization and applied filters.
At first, we thought that using node.js might be for some sort of novelty purpose. However, when you are developing a single-page web-application, constant AJAX requests are just not going to cut it anymore; you want an asynchronous data-connection to the server. Snapshot.js, of the same author as Moa, makes a very fast and effective approach to data slicing. Because all data is cached appropriately, it is blazing fast.
Even though Moa is still in its early stages, it is really one of these projects to keep an eye on. Currently a little more than a proof-of-concept, Moa is still in active development. There is a real product there and the video at the end of this post should convince you of that. That does not mean it is ready for production. The alternative API only has a few endpoints yet and the front-end is still very limited.