AngularJS and e-commerce

5/27/2016 04:00:00 PM

Some time ago I started on a new project with a lot of new challenges. As an ecommerce shop you need to keep up with the pace of technology, and not only on security. As the web evolves, so do the expectations of customers.
Long page loads should be a thing of the past and in some cases page refreshes should be as well. To create an "app" like feel in certain parts of the website (checkout, search, product detail page and my account) we decided to give AngularJS a try.

PS. We are using Angular 1.5, not the current beta release 2.x

Why AngularJS?

Support and robustness

The why is quite simple: AngularJS has been around for a while now, and has grown quite a following in the open source community. This has generated quite a lot of bug reports (which get fixed) and a lot of plugins that we can use to enhance the feel of the site and in some cases decrease the time required to develop new features. A good example is a Google Analytics plugin with enhanced ecommerce, ready to go! 

Easy to learn

Another reason why we decided to go with AngularJS is that it is quite easy to get a hang off. Sure, you won't be writing excellent and performant AngularJS code right off the bat... But once you understand how to write templates and how to build up your Javascript framework based on AngularJS it is quite easy to get going at a steady pace.

'App' like feel & performance

For certain areas on a ecommerce website, especially on mobile devices, a new page load means reloading a lot of resources that don't change at all. By only changing the things on the page that need to change, and doing this asynchronously, you get the feeling that you are not waiting as long to navigate through different pages. And off course that feeling is correct in a lot of cases, in others it isn't (loading long lists).

And in pages like the "my account" area. When you are looking for your orders or managing your favorites list, which loads and responds to your command within milliseconds, like a native application, is a lot more fun to work with than waiting a few seconds between each page load and having to scroll down to where you need to be.

And on a bad internet connection, every bit of data that doesn't need to be fetched is one bit too many...

Security in e-commerce

Against traditional ways (page reloads), working with AngularJS provides its own challenges. Since AngularJS expects you to work with REST-services. This means you need to protect them from hackers and people trying to do things that aren't allowed. These services don't require you to mess with page submits and forms, you can just send "plain text" to them and try to send random data to them at higher speeds than the traditional way. 

Since REST services don't require as much CPU as full page loads, your server can take a lot more requests per second before it gives out. So in theory you could send a lot more attempts to hack a password per minute than you would with a regular site.


For any site SEO is very important. And since Google decided last year that asynchronously loaded website won't get fully indexed, you need to keep a mindful eye on how to build up your metadata and rich snippets. If you are unable to provide Google or other search engines metadata without async calls you will need to use a service like Prerender. These services will index your site with all async calls and serve those when Google visits your site.

I hope this information helps you on your way to use AngularJS in your own e-commerce projects!

You Might Also Like

0 reacties