THE DEFINITIVE GUIDE
Scoring 100% in Google’s Performance, SEO and PWA Test
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”.
Before we proceed, I would like to recall for you what we have discussed in :
Part 2- How to choose a Tech Stack for your project and FAQ’s on starting project development ( Includes deployment questions)
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 start 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.
- 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, RReact-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:
//Example- For Vue
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.
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!
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.
With Apexcharts you can add elegant animated graphs to your application. Most Useful for showing analytics.
Top 3 development lessons I learned through this project:
- Find solutions on StackOverflow and Github only in the utmost necessity. Instead, understand the problem well by breaking it down and try to solve it your way. It will sharpen your problem-solving skills.
- You will understand the concept only if you implement it yourself, copying what youtube tutorials tell will get the job done but that will never make you a better developer.
- Taking some timeout from the development environment will help you to understand the project flow, future issues, time management better.
In the last part of this series ( PART 4 ), I will talk about Speed improvements and hacks to take your web application to the next level.