Frontend freedom with a moltin-powered ReactJS store

Leanne Clegg
moltin
Published in
4 min readMar 9, 2017

Built by Facebook developers, and used by tech giants like Netflix, Airbnb, and Instagram amongst hundreds of others, ReactJS is seen as the new and trendy JavaScript framework. Teaming React JS with Moltin, a set of API microservices for commerce, you can power a flexible, scalable JavaScript store from scratch.

Background on moltin

Moltin is the eCommerce platform of choice with a suite of simple eCommerce APIs to power modern JavaScript applications. With a rich feature set including inventory, carts, categorization, search, checkout and more, and the ability to install in seconds, use the framework-optimized JavaScript SDK you prefer to create a beautiful JS powered store in minutes.

To learn more about why moltin is great for JavaScript stores, visit the site.

Background on ReactJS

Before we delve into what we’ve been doing with it, for those of you unfamiliar with ReactJS, here’s a little background, described best by The New Stack.

‘ReactJS works by storing the state of your application internally, and only re-rendering your content into the browser (the DOM manipulation) when the state changes. You interact with ReactJS by telling it when the state has changed and ReactJS handles all the visual changes to your application for you. This abstraction is brilliant. The implementation is similar to AngularJS which handles DOM manipulation for you through two-way data binding, but ReactJS takes things a step further because it knows when things have changed and when they have not, which makes a difference in large applications. AngularJS relies on dirty checking and a digest loop, and my own experience is that the AngularJS interface does not have the ability to be as intelligent in determining when a change to the DOM is unnecessary and skip the DOM manipulation.’

‘In essence, the ReactJS interface is different than other JS libraries which are more imperative, meaning you tell them to change the DOM directly. Jquery is like this. ReactJS is more like: here is my state, and here is how you should interpret my state and how it will change. Now, I can sit back and let ReactJS handle the expensive and complicated task of making this visible to the user in the browser.’

ReactJS + Moltin = Flexible, Beautiful, Freedom

With flexible, reusable components to make development workflows efficient and giving freedom to your store’s UI, it’s simple to learn and use and fits in with Philosophies at moltin perfectly. The framework allows you easily create and integrate a beautiful eCommerce experience, and that’s exactly what Tarik, a freelance engineer who built an example store using ReactJS and moltin did.

A bit of background on Tarik

After coming across moltin two years ago, Tarik originally recommended it to a friend who built an Angular implementation for one of his clients. This project became proof that moltin was a good fit for JavaScript framework projects.

Fast forward to 2017 and with AngularJS becoming depreciated and Angular 2 having an entirely different API, Tarik took advantage of switching and experimenting with ReactJS. This gave him the perfect opportunity to revisit moltin and create a sample project.

The store

Choosing to use no additional tools for this project and therefore only needing to rely on moltin to create it, the store only took one week of build time, spanning over a month, which included following some very precise designs. He estimates that if you simply want a boilerplate site, you could probably build this within just an hour or two! Great news for people wanting to get you who want to get a store off the ground quickly.

Tarik’s sample store can be seen at https://react-moltin.firebaseapp.com/ and demonstrates the power and freedom that ReactJS gives frontend developers. Including the ability to build beautiful stores whilst still maintaining a simple, yet powerful customer journey.

Tarik’s example store

Creating your own ReactJS store

To get started on building your own store, sign up for a moltin account if you haven’t already got one and check out our JS SDK.

You can also deploy the example frontend in minutes with Heroku, here https://github.com/matthew1809/react-moltin-ecommerce.

Or to reach out to Tarik about building a ReactJS storefront for you, learn more about him or Tweet directly.

--

--