THE DEFINITIVE GUIDE
Scoring 100% in Google’s Performance, SEO and PWA Test
Welcome Back! This is the second part of a series of exciting articles I will be writing about how I built the fastest online store for an artistic home decor brand named “Aprakrta”.
If you haven’t read the first article of this series in which I talked about the imporent things to know before building a project, I encourage you to check it out, It’s only a 4-minute read
In this article, I will share what information you need to consider before writing the first line of code for your project. In the case of Aprakrta.com, which was going to be an E-commerce Progressive Web App, I found a few helpful resources on the internet back then and didn’t have any javascript framework knowledge.
Before choosing a stack, consider what are you planning to build, In our case an E-commerce Progressive Web App. Here’s the list of primary things necessary to build it!
- Javascript Framework ( Vue, React, Angular or Ember)
- Database Service ( AWS or FireBase )
- Service Worker ( Workbox or Do It Yourself )
- Deployment ( Static Hosting )
Now take some time and consider the following things before choosing your preferred option above because nothing is worse than using a stack that you will start hating in the midway of your project development process. If you already have a decent amount of knowledge you can skip the following points.
- Write down the Project Timeline in Detail
Rough Example: 6 months to complete the project, 1.5 Month to learn a JS Framework, 20 Days to understand database services and 10 Days on Web Application deployment knowledge.
2. Write down how much of the knowledge you need to acquire
Rough Example: It's not necessary to learn the whole of a concept, It will obviously demand more time. The beautiful thing is you will know how much knowledge is good enough soon after you have started learning so that you can stop learning and start developing. Remember, You will learn more only by trying to develop by yourself.
Here is the stack I chose to build Aprakrta.com:
- Js Framework- Vue Js ( *2nd best choice- React Js )
- Database Service- Firebase ( *AWS is good but not recommended for beginners)
- Service Worker- Workbox (*I ditched my own service worker when I knew something like Workbox exists)
- Deployment- GoDaddy ( *I wish I knew ‘npm run build’ command earlier )
Now, Here are some FADQ ( Frequently asked dumb questions ) that many junior developers ask themselves:
- How and where to write a Backend code in Js Framework?
The basic backend code which you should write in javascript( This is also known as Node Js) is used for starting the server, making routing requests, receiving and sending data payload. Well, all of this basic stuff will be handled by your Js framework, you don't have to worry about anything. Just take a look at Todo App example with your chosen Js framework and you will get the idea. You will be able to find many examples on Github, Just copy the repo to your machine, Do ‘npm install’ and ‘npm run dev’ and you are good to go.
2. How to deploy a Web Application on static hosting like GoDaddy?
After completing the project, You will have to run a command ‘npm run build’. It creates a dist or a build directory with a production build of your app with index.html as your app entry point. All you will have to do is upload the contents of dist or build folder to the website hosting service and your project will be live.
Choosing a comfortable tech stack will help you enjoy the development process and that ultimately leads to a better production version of your project. It is okay to ask dumb questions to yourself, It certainly helps in the long run. You will understand how things work better than anyone. Every challenge is a new opportunity to grow. If you have any questions feel free to ask me on twitter.
In PART 3 of this series, I will talk about important Frontend and Backend development lessons from start to finish taking less than 5 minutes of your reading time.
Official Aprakrta Progressive Web App