How I Built the Fastest E-commerce Store for a Home Decor Brand [PART 3]
By: Swanand Kadam
Tags: JavaScript, Web Development, Technology, Programming, Hackernoon Top Story

Welcome Back! This is the third part of a series of exciting articles I will be writing about how I built the fastest E-commerce for a home decor brand named “Aprakrta”.

This article will help you with what you need to know about the development and tools I used to build Aprakrta.com. Topics covered in this chapter are :

Basic steps to implement before building a webpage

Which Js framework concepts are most important to learn?

List of useful Libraries or NPM packages you must know about

Top 3 development lessons I learned through this project!

Before starting anything, First prepare a step by step plan on how you are going to approach project development. This might seem boring but actually does save a lot of your time in the long run.

Now, Suppose you want to build a Homepage of your Web Application!

Visit various web applications that are in the context of your application domain and make a list of 5 things that you liked the most. It might be UI related or any specific tweak or hack you noticed. Remember, This is only for building the mental model of your proposed homepage, You are definitely not supposed to copy. The next step is where you will utilize this mental model to start prototyping. Now, finalize UI mockup ( Prototype ) and then start developing. If you are planning to design while developing its gonna cost you a lot of time and effort. This video by Google engineers will definitely help- Sketching and Paper Prototyping Understanding SEO concepts before developing a webpage will certainly help. If you are facing any issue with UI related concept or terminology which is eating your brain out. Just relax, It happens! Don’t crawl the whole of the internet searching for the solution. Instead, Understand the concept well, Write it down and give it some time and witness a solution magically appearing in your mind. To understand any web development related concept well, I highly recommend you to visit- https://developer.mozilla.org/en-US/docs/Learn/JavaScript Also, Make sure the CSS class naming is understandable. ‘Heading-text-1’ is a much better way to do than ‘Headingtext1’. In short, try to implement better coding practices if not the best.

Which Js framework concepts are most important to learn?

Store ( Vue- Vuex, React-Redux Angular- Ngrx )

Store is where state management of your web application happens. State management makes the state of your app clear and definite in the form of a data structure that you can read from and write to. Basically, Store is your centralized data storage from where you can pass the data to different components.

2. Lifecycle Hooks

A modern Js framework creates a component, renders it, creates and renders its children, checks it when its data-bound properties change and destroy it before removing it from the DOM. All of these above phases are defined as lifecycle hooks. You can add your custom code as per your applications’ needs to each lifecycle hook.

We have different Lifecycle Hooks defined for different Frameworks: Angular- https://angular.io/guide/lifecycle-hooks React- https://reactjs.org/docs/state-and-lifecycle.html Vue- https://vuejs.org/v2/guide/instance.html

//Example- For Vue created()

{ doSomethingCool(); }

List of useful Libraries or NPM packages you must know about:

Be it hosting, database or authentication firebase got you covered. I highly recommend you to visit Firebase. As they say, it is indeed a comprehensive mobile development platform.

2. Workbox

Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps. Writing Service Workers used to be a complex task. Thanks to Workbox, Now It’s not!

3. Prerender-spa-plugin

Server-Side Rendering of Apps is mainly used for better search results ranking but that introduces again the same problems that were valid for PHP, ASP, JSP, (and such) sites are valid for server-side rendering today. It’s slow, breaks fairly easily, and is difficult to implement properly. To solve this issue, We can use Pre-rendering. Prerendering is basically firing up a headless browser ( a web browser without a graphical user interface ), loading your app’s routes, and saving the results to a static HTML file. You can then serve it with whatever static-file-serving solution you were using previously. The best thing, you can achieve pre-rendering in your app is by using this plugin.

4. Element UI

A Flexible and Beautiful UI framework. Their grid system, forms, and buttons will surely convince you to use it. Here are some examples from Aprakrta App. Material-UI is also a great option but some elements were such a pain to use.