Destructuring the Development Process
Tags: Development, Web App Development, Website Development, Frontend Development, Development Process

It is crucial to understand the process when it comes to creating websites. You must have sound knowledge of it even if you hire someone else to do the job. From gathering bits and pieces of information from the client to deploying a full-fledged website, each step requires the efforts of many professionals having expertise across domains.

Covering the entirety of the website development process will be impossible in one single blog. So, instead, we will cover a micro process: the process and efforts we follow at Frontendone to build a robust front-end of a website.

The Frontendone Blueprint

Jotting: The first thing we do is gather and jot down all the information you share. This may sound simple enough but it is a complex process. While listening to your requirements, we also need to decode the process of converting what you want into a real-world project.

For example: Taking into account the kind of stack that will be helpful, how much time it will require and planning for any challenges that may arise are just a few. Setting up: After the initial stage of requirement-gathering and project finalisations, we begin setting up. This stage is a bit like collecting the necessary ingredients/resources and adding them at the right points. Creating a Github repository, defining folder structures, installing necessary libraries and frameworks, and deploying to a testing domain happen in this step. Extracting: In this phase, we start extracting assets from the design file you shared. We define common CSS variables (colours, typography, fonts, spacing, etc.), add content to a separate doc, write a readme file, and document each part of the project. Coding: When all the pieces are in place, our developers begin adding life to your designs — observing and transforming them into code pixel by pixel. Coding, documenting and testing happen continuously. Every developer on the project works on a specific part and then gets it reviewed by fellow developers.

Most of our challenges appear in this stage. Changes in requirements and design create the most impact, recreating/editing the structures already built and reviewed needs one to go back in time and recreate it. Once the designs are coded, it gets ready for testing. Testing: The most important and underrated part of the process is testing. Many agencies leave this process incomplete either due to lack of knowledge or time constraints. At Frontendone, we define a separate funnel in which each part of the project goes through a predefined set of snapshot, performance, code quality, and documentation tests to name a few. We automate and also test manually. Every addition of a new component restarts this process and checks for compatibility with others. Deploying: Once the project is built to its desired version, we start structuring the deployment process. A ‘build version’ of the project is created which reduces the size of the bundle by trimming the spaces and comments, and converting javascript code to the compatible version supported by the browser. We also set up auto-deployment to make sure that we don’t have to keep putting in additional efforts while also testing the whole bundle before deploying it to the server.

These steps don’t happen in succession, they happen parallelly. It takes some time to get the project to its fully-functional version as the requirements and designs keep changing. As the front-end is a micro process within the larger website development process, various other factors from different micro processes can make the overall task more challenging. But the experience and the effort that we put in help us to overcome these challenges.

If you’d like to add any more steps to the above processes or make suggestions of your own, then do add them in the comments. At the same time, in case you require guided expertise with your own website projects or need your designs coded then mail us your requirements at info@frontendone.com.