Modern Front-end Development Workflow

Over the past couple of decades, the internet as evolved beyond just a tool for search information on desktop computers at work, colleges and universities to a tool that is now integral to our everyday life. At its birth, the possibility of having the internet on mobile devices and watches would have been viewed as science fiction; this is now reality and the future is even more exciting.

At the centre of the continual growth of the internet are ever evolving protocols, standards and technologies. HTML, CSS and JavaScript in all their flavours are still core to the delivery of the internet, working together to present a familiar interface to the user. To a typical non-technical user, a website page is the internet so developing modern practices are essential to the growth of the internet.

Modern front-end development workflow covers the practices being utilised by developers today. It allows the developer to build User Interface (UI) based on the industry standards, with reduce time for delivery, high performance, reusable and easy to maintain code.

A typical front-end developer stack consists of HTML, CSS and JavaScript. Modern front-end development workflow enforces best practises, automation and consistency between build applications.

The workflow for application development can be categorised into six phases

  1. Scaffold is the setup of a web project – the files structure, download libraries and dependencies
  2. Develop is the phase where the application is actually coded. Code review among developers is good practice at this phase
  3. Test is where the developed code is tested. This phase will help identify bugs and fixes. It is common to bounce between the Test and Develop phases until all bugs are identified and fixed
  4. Integrate – at this phase the unit code is integrated with the rest of the application
  5. Optimise – at this phase, the code is debugged, integrated and ready for deployment to the production environment, additional tests are carried out to ensure the application performance is optimised, for example page load timing and object caching
  6. Deploy is where the code is pushed onto the production environment so it is available to be viewed by the users of the application

Each of these phases can be automated to improve consistency and efficiency. Suggestions on tools and practises to help automate these phases are described below –

  1. Automating Scaffold – There are a number of tools available to accomplish this. Dependency managers like NPM and Bower offer features that will help automate scaffolding. The main difference between both is that NPM is used for installing NodeJS modules but Bower is used for managing front-end components like HTML, CSS, JS etc
  2. Automating Development – Tools like Grunt and Gulp will help achieve automation in this phase. There is a command line dependency when using this tool
  3. Automating Testing –3 types of testing can be automated:
    – Code format tests. The code formatting is checked to see if they follow industry best practices.  We can use tools like JShint or SCSSLint
    – Unit tests. The code is checked against tests to make sure it works correctly and that new code doesn’t break the functionality of other parts of the site. These tests are usually JavaScript-oriented. Tools like Jasmine can be used. (Jasmine is a behaviour-driven development (BDD) framework for testing JavaScript.)
     – CSS Regression testing. The output of the browser is checked to see whether it breaks part of the page that was previously coded. It allows us to make visual comparisons between the correct (baseline) versions of our site, versions in development or just about to be deployed (new). Tools like PhantomCSS can help with this type of test
  4. Automating Integration – A version control tool like Git can help accomplish integration automation. It allows developers to push, pull and merge code from different sources into a single repository (repo). It is also possible to enforce standard before a code merge to ensure that the merged code conforms to set standards. To do this, continuous integration (CI) can be setup to automate testing after codebase integration
  5. Automating Optimization – The automation here is about getting the code ready for the production environment and ensuring the code is optimised for best performance. This may involve processes like minifying and concatenating CSS and JavaScript, optimizing images and SVGs. Build tools like Grunt or Gulp can be used in to automate the optimize phase
  6. Automating Deployment – The final phase is pushing the optimised code into the production environment to be viewed by the public. To achieve this, a post-receive hook may be created. This will make the server automatically pull new changes whenever there is an update.

In summary, modern front-end development workflows can be a very effective tools in the successful development of web applications if implemented and utilised properly in the development lifecycle. The tools described above are not the only ones available on the market to accomplish automation. Different companies and individual developers will have their preferences to suit the way they work. To fully take advantage of the benefits of modern front-end development workflows, it is essential that organisations invest in training their developers. If the developer’s skill set is kept up to date, the organisation will see a direct improvement in its productivity and the quality of the code.

What are your experiences in this area? Contact me by email or leave a reply below.

Published by

Angel Kalenga

Experienced front-end UI developer who enjoyed building simple, human-friendly, rich applications on the web

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.