Basics of Modern frontend development
Earlier, frontend development means only writing HTML, CSS, and JS just to make the UI and communication with the server. Long gone are those days when we just need to connect with FTP and edit our main.js file.
Nowadays, due to advancement in technology, the number of internet users has been increased and most of them use mobile phones to surf the web. In this blog, we will be talking about some challenges that modern day websites face and how we can solve them.
Some of the challenges are:
1. Responsive and fast: Increased usage of mobile phones led to the requirement of sites which can be displayed nicely on the mobile and also they have to be fast enough to load on the mobile internet connection.
2. SPAs: As the number of users has been increased, the websites need to be smarter. Server requests should be minimum, which led to the popularity of Single Page Applications (SPAs).
3. Minification and Transpilation: The minified version of code should be shipped to the production environment, which is smaller in size and unreadable version of the code. Also as new version of JS is getting released every year, there is a need to transpile our code so that browser can understand it.
4. Lazy loading: To increase the performance, only required code and assets should be downloaded, rather than loading all of them at once. Choosing a good module bundler will help in achieving lazy loading efficiently.
5. Standardisation: Most of the companies have their separate frontend team, which means more people are working on same code, so for that, we need to follow some coding standards.
6. Testing: Unit testing of application along with continuous integration, so that we can catch errors before shipping our code to the production.
7. Microservice architecture: Our frontend and backend code should be deployed separately and should not depend on each other, which helps in quick bug fixes on production.
8. Mock HTTP calls: For fast and independent development there is a need to use the dummy data so that our frontend development does not block because of backend development. eg. Json server, api-mock, faker.js, chance.js These are some of the tools that we can use to mock our API requests. I have created a mock JSON data which you can access via GET calls. Here is the link http://inventory-db.herokuapp.com/db
9. Error logging: As our applications are growing bigger in size, we cannot replicate every production issue on our local environment. So there is a need for a good error logging tool which can help us in debugging. eg. trackJs
You can refer to the code references from my github repository.
I will not include HTML and CSS part and will concentrate only on the right side of the above image. But as a frontend developer you should know the basics about HTML and CSS.
So, let’s start with analysing some tools and techniques we can use in order to solve some of the above mentioned challenges.
Responsive and fast
First, we need to decide the CSS framework we want to go with to get a good performance on desktop and mobile site as well. To create a responsive website you can use any CSS framework, which will make your site responsive for all screen sizes. Some of the frameworks available are: Bootstrap, Google material design My personal favorite is bootstrap as it has a large community with easy to understand documentation. Currently, bootstrap v4 is out which you can try and it also supports SCSS (a CSS pre-processor).
My pick: bootstrap
Some frameworks that follows SPA principles: AngularJs, VueJs, reactJsMy pick: Well it depends on the type of application
Minification and Transpilation
Minification: It is process to combine our code or component into a single file and minify that file before moving it to the production. Minification is a combination of multiple processes- concatenation and minification. The file generated can also be called as a bundle.Minification is the process of removing all unnecessary characters from sourcecodewithout changing its functionality.
There are multiple tools/task runners available nowadays to achieve the minification process.
Grunt Gulp npm with webpack
First two are basically task runners which help in running multiple tasks using a single command but due to wide popularity of npm(node package manager), we don’t require any task runner any more. We can create tasks using npm scripts defined in package.json file.
I am using webpack in my project, which helps in creating bundles of code and it provide some more functionality apart from bundling which we will see in the coming sections.
Advantages of webpack over grunt and gulp:
Webpack is such a powerful tool that it can already perform the vast majority of the tasks you’d otherwise do through a task runner.Webpack can be run as middleware through a custom server(express in case of nodeJs) called webpack-dev-server, which supports both live reloading and hot reloading.We can transpile our code from ES6/7 to ES5 using webpack.
My pick: npm with webpack
Transpilation: As new versions of JS are already out there, but our browsers yet not support all of the new features completely (except latest versions). But this does not mean that you cannot leverage the benefits of new version. In order to use new version you need to transpile your code into the version that browser can understand. Don’t worry you don’t have to do that manually, there are lots of transpilers available you just need to choose one and start coding.
Babel can be configured using package.json or .babelrc file.
My pick: Babel
Unit testing plays a crucial role while developing a production level application. So it is better to create automated testing suits rather than performing manual testing. It not only gives the confidence to the developer but also saves time in future.
We need to decide these six points before writing test cases:
1. Framework Some of them are :
- Mocha – It is highly configurable and has large ecosystem.
- Jasmine – It has a built in assertion library.
- Tape – It is very simple to setup and use with minimal configuration.
- Qunit – It is one of the oldest testing framework, created for and by jQuery.
- AvaJs – It is very fast and can run test cases parallely.
- Jest – Created by facebook, also has built in assertion library.
2. Assertion Library Assertion libraries are tools to verify that things are correct. –
3. Helper Library –
- JSDom – It helps to simulate the browser’s DOM. We can run tests that relies on DOM without opening browser.
- cheerio – Highly used for jQuery selectors
4. Where to run test cases ?
- Browser – Karma is a testing environment that helps in running the test cases in the browser.
- Headless browser – phantomJS, test your application without opening up the browser.
- In-memory DOM – JSDom
5. Where to place test files ? We have two options, we can either place all the test cases in a centralised place or we can place them alongside that particular feature. That is entirely depends on your code structure.
6. When to run test cases ? – on every time you save file > but this will make the development process very slow. – on each time you commit your code > this is a good approach to develop and test. But for this we need to use some kind of continuous integration tool which will be linked to our repository, it will run our test cases as soon as we commit and we will get immediate feedback whether our build is passed or failed.
I am currently using travis as a CI tool.
Our backend and frontend code should be separate from each other which will make deployment easier.
Some of the advantages of having separate UI and backend:
1. Simple and low risk
2. Separation of concerns
3. Cheap UI hosting
4. We can also serve UI via CDN which is fast
We can also host our frontend application over cloud. Some of the cloud hosting providers that we can use- AWS, Azure, Heroku, Firebase
In case you want to serve static files only, then some options are:
Netlify, Github, Surge
So this is just a basic introduction about modern frontend development. There are lot more things other than these.
So if you think you know all this then explore more and if you have any issues with any of these concepts than feel free to connect 🙂