In this post, we’ve gathered all necessary information about MOA – Magento on Angular. Standard Magento can disappoint you because of its crufty Javascript, tangled interface, and heavy SOAP APIs. Magento on Angular or MOA tries to solve these problems. AngularJS, Angular in short, is an open-source web app framework. It is maintained by Google and a wide community. MOA was designed to simplify development and testing by providing a framework for client-side MVC (model–view–controller) architecture along with other components.

Magento API Wrappers

The library works by:

• reading the HTML page embedded into additional custom tag attributes;

• interpreting those attributes as directives;

• telling Angular to bind both input and output parts of the page to a model represented by standard JS variables.

You can set values of those JavaScript variables within the code manually or retrieve them from both static and dynamic JSON resources.

In addition to Angular, we should also mention Leveler, which is another free and open source web app framework designed for the development of MVC web apps. Laravel is PHP based and it is released under the MIT License. Key features of Laravel are: Bundles (a modular packaging system); Eloquent ORM (object-relational mapping); Application logic; Reverse routing (relationship between links and routes); Restful controllers (additional way to separate the logic behind HTTP GET and POST requests); Class autoloading (automated loading of PHP classes); View composers; IoC container (generation of new objects by following the control principle inversion); Migrations (version control system for database schemas); Unit testing; Automatic pagination; Form request.

While Magento is known for its reliable architecture, we can’t deny it has a lot of problems. This is why e-commerce platforms like Bigcommerce, Shopify, and Sylius are stealing Magento’s market share with ease. MOA attempts to solve this by using  AngularJS, Laravel and node.js.

AngularJS

Instead of serving “catalog/product (or category) /view/id/x” as separate page, Angular only serves the index page to the browser. Category and product views are served dynamically. At the same time you can have permalinks to the content, and single-page web-apps can be indexed by search engines. AngularJS and other frameworks bring a native feel to the website. Instead of refreshing the entire page when going from a category to a product view, the relevant sections are updated. As a result, the entire experience becomes more seamless, and the website turns into a stand-alone application.

But don’t confuse AngularJS with DOM-manipulating libraries like jQuery. jQuery is a library for working with the DOM, and it was not desined as framework for building web apps. In its turn, AngularJS relies on an MVC structure and at the same time can use jQuery.

Laravel

Despite the fact that the Magento API exists, the RESTful resources are limited in functionality. In the process of getting Magento data on the client, communication with server-side models is compulsory. Fortunately, Magento on Angular introduces its own Laravel PHP framework based API. Besides a new form of flexibility, it also provides properly testable API and makes the system very modular.

Node.js

node.js is another important component of MOA. Snapshot.js, which is served via node.js, takes care of lazy loading for the clients. Snapshot.js can easily traverse through the cached data and return specific subsets of it. The process depends on pagination,  applied filters, categorization, and other conditions. Snapshot.js provides an effective and blazing fast approach to data slicing.

The conclusion

MOA is still in active development, but it is already very impressive. Despite the limited frontend and an alternative API with only a few endpoints, it makes a good impression. The project shows a rapid development, so it shouldn’t take too long before we will be able to enjoy an alternative to the standard Magento set-up.

Features

• One-page functionality with Angularjs front-end;
• Interacting with Magento with Laravel API;
• Separate from Magento installation API;
• Snapshot.js for product collection lazy-loaded;
• More simple PHP back-end REST API;
• Spreedly payment gateway;
• 90% unit-test code coverage for front-end and back-end tests;
• Google crawlable;
• Instant product availability with Socket.io (WebSockets);
• GZipped data packages;
• Real-time currency converter;
• Fast filtering across all models with Crossfilter.

MOA Magento on Angular on GitHub