21st century Magento with AngularJS

Those looking for a modern ecommerce platform for the web, might find disappointment in Magento; crufty Javascript, heavy SOAP API’s and a default interface as a labyrinth. Magento on Angular, Moa in short, tries to solve this.

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

Some praise it as the future and others as a trendy gimmick; AngularJS is an MVC JavaScript framework which enhances HTML so it can be properly used for single-page web-application development. Instead of serving “catalog/product/view/id/x” and “catalog/category/view/id/x” as separate pages, AngularJS will only ever serve the index page to the browser. All other content, like a category or product view, will be served dynamically. This doesn’t mean that you cannot have permalinks to content or that your single-page web-app cannot be indexed by search engines like Google, it will just work a little bit different than you are used to.

A massive advantage of an MVC Javascript framework like AngularJS is, that it brings a native feel to your website. Whereas currently customers are traversing through the store as if it were a book, from page to page, they will now go from view to view. So instead of refreshing the entire page when you go from a category to a product view, only the relevant sections will be updated. This makes the entire experience a lot more seamless; as if the website was a stand-alone application.

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)

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.

Final words

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.

However, if Moa (on Github) keeps up this pace, it shouldn’t take too long before developers can enjoy an alternative to the current Magento set-up. One which doesn’t include “Badly written JavaScript” and “Untested third-party modules”. We keep our fingers crossed!


Moa 0.2.8 on Vimeo

  • Adam

    An excellent write up! Thank you so much.

  • Nekait Arora

    Good article.
    However since this article was written, a lot have changed in both the technologies.
    Can you update this article to recent Magento 2 and Angular 2/4?