How to build a website from scratch in 2020

Hi, I am a lazy frontend developer come from Vietnam. Today I would love to talk about an approach to build a website from scratch.

History

Just few years ago, we still work with server side language like PHP, Java or C# to make almost things for website. jQuery takes the remaining part. There is no "Frontend developer" title at that time.

For now, Javascript is eating the world. The day for "frontend developer" comes only after libraries like "React" appears. And then, "Nodejs" open a new world for lots of people.

I have started with web development from pure HTML, CSS and Javascript or exactly with jQuery. After that, I have worked with PHP for a long time after completely moved into Javascript world with React and NodeJS.

When starting working with GraphQL, I have thought that was be the biggest milestone in my journey in web development. But I was wrong. I found Hasura (https://hasura.io/) and Gatsby (https://www.gatsbyjs.org/) recently, and, for simple word, they made a revolution.

Let's go to the next part with some reminder about how did we do to build a website in the past.

Traditional Approach

Let say for a common web application or website, we usually have some parts:

• Database.
• Web server (backend code).
• Static files (CSS/JS).

Basically we should follow these steps:

• Design SQL database with all needed relationship. It would be another story with No SQL.
• Write a lot of code for CRUD and build tons of APIs in REST.
• Wait for these bullshit done, make some jQuery stuffs for events.

Note that just the development process only.

After months of that, we need to do some more things to make the website go live, now that is the job for devOps. So basically can say we have two steps to make a website: development and deployment.

The combo I want to show is something below, will help you reduce months of coding to days or even hours.

• Hasura (https://hasura.io/), basically my backend.
• Gatsby (https://www.gatsbyjs.org/) is my frontend.
• Netlify (https://www.netlify.com/) is a comprehensive tool for building, deployment and more.

When working with SQL database, almost the time, you are trying to CRUD something. We usually use "ORM" to work with database. Remember how long did you spend for writing codes for all CRUD operation? How many time you copied code from "ProductController" to "OrderController" and just only change the table name? The problem is, you would continue to do these boring things for years, for multiple projects as long as everything relies on a SQL database. After you done with it, you will have for example, 200 files of source code equal to 200 tables in your database.

GraphQL

You may need to read my old post about GraphQL. Basically, the most important thing that makes GraphQL good is, it changes the way how frontend developer should work with backend guys.

Hasura approach for backend development

Hasura will take you out of that boring process. Give Hasura a database, it will do the following things:

• Generate all CRUD for all tables in database.
• Build a production ready API, you can deploy anywhere you want.

After two above process done, I have a production ready API for frontend and have NO backend source code at all. How Hasura works? It will offer for you a built in UI called "Hasura Console" to let you process with the database, like exactly the way old ORM did, just without writing code.

Let's take a very basic example. You have table classes, students and classes table has relationship to students table of course. You want to have an API to allow "get list of classes with some students in each class". The API response should be something like

[
  {
    id: 1,
    name: 'class-A',
    students: [
      {
        id: 1,
        name: 'Jonh Alison'
      },
      {
        id: 2,
        name: 'Alice May'
      },
    ]
  },
  // Some more items
]

In the traditional approach, I would do in code:

• Look for the classes in classes table.
• For each class, look for student with foreign key classId equal to id of current class.

In Hasura way, you need to:

• Define relationship between two tables via "Hasura Console".
• Define what is you wanna get, in this example, that is above structure.

That's all you need to do without a line of code. Hasura automatically build the API in real time for you whenever you changes anything in the "Hasura Console". That means everything you wanna do with the database, you should do via "Hasura Console".

One very nice thing about that Hasura approach is, whenever you don't want to use Hasura anymore, nothing changes in your source code. Because, Hasura has no touch to your source code, it was built for plug-and-play style. Yes, you totally can come back to write bullshit CRUD operations.

That's the basic idea of Hasura. In a nutshell, give Hasura a database, it will build all your needed API with CRUD operations. I'll leave yourself to investigate on it, no need to talk in detail.

Gatsby approach for frontend development

I like Gatsby concept. It makes the frontend developer completely independent from backend guys. You may worked with NextJS? I worked with it, too. But I still prefer Gatsby, and never wanna come back to NextJS.

Whenever you work with NextJS, you still need a web server, for example Express. But you don't need to worry about that when you work with Gatsby or any Static Site Generator.

That lead to one more problem for me when working as a frontend developer is, I still depend on real production server if I want to test production environment for my frontend code. With Gatsby, I completely free and independent to test production environment on my local machine with gatsby serve. Because, the output of Gatsby is just static files. I forgot everything about unstable environments with Gatsby.

If you have ever worry about somebody said that "Gatsby is terrible for large site with lot of pages", please note that should be improved soon, and, "lot of pages" mean 10,000 pages or above.

Netlify part

I believe that you will love the Netlify when you give it a try. Some notable feature for free:

• Custom domain.
• Stable hosting environment.
• Deployment process won't never be a pain in the ass anymore.

I have a personal website with totally build with Gatsby and Netlify, with around 250 users active per day and 3k users per month, it still works fine.

Summary

I love technical solutions, especially which makes I change the thinking and of course, resolve problems more effectively. The combo I said before was helped me to resolve:

• Reduce months of writing boring CRUD backend code.
• Completely independent from backend guys and unstable (if not terrible) environments.
• Forget almost things related to devOps, more focus on business logic.

Now, you can easily to have your tool set, to make a new production ready website in minutes. Welcome to freelancer world!