So, now you want to start your career as a Frontend developer. You look around and see all those applications and websites with their fancy graphics, snappy animations, users’ data stored for analytics, data processing and future use. This data can be accessed anywhere, on PC or mobile phone. And you wonder, What do you need to learn to build your own website or mobile application? What languages and frameworks should you use to start Frontend development, and what tools do you need to use?
This series of articles will explore the principles of building modern websites and mobile applications. We will explore the different languages and frameworks that you can use, and we will get into details of the most common ones.
This article will kickstart the series with the fundamentals of web development, starting with frontend development, then the following articles will explore backend development, and mobile applications development.
Frontend vs Backend
When you start your development path, you will hear the following 2 terms a lot: Frontend development and Backend development, as they are the most popular terms used to describe the two main parts of web development. Frontend development describes the client-side part, which is everything the end user sees and interacts with. And Backend describes the server-side part that usually handles user requests, processes data, stores them in databases, handles file uploads and downloads, ensures data encryption, and many more other tasks.
Almost any website, mobile application or even game you develop will require these 2 parts, client-side and server-side. As long as you want to save users’ data, allow them to keep their progress, and/or communicate with other users of your application or website, you will certainly need a backend and most probably a database as well.
Different parts of your application or website need to communicate with the other parts, usually via an interface called Application Programming Interface (API for short). This API is how you send and receive data between frontend and backend, and between backend and database. Using APIs, different components of your application talk to each other in the form of requests and responses.
The following diagram shows the different parts of an application and how they communicate with each other.
Ok, so now we know what are the essential building blocks of your application or website, now how do we build these blocks? What are the different languages or frameworks that can be used to develop both the frontend and the backend?
Note: don’t be surprised if you find the terms frontend & backend written hyphenated like front-end / back-end, connected like frontend / backend, or even in 2 words format like front end / back end. These are all used by the developers community across the world, and they are all correct. So, feel free to write these terms however you want.
Frontend
A website’s frontend is its main user interface, it is what your users will see when they use your website. Frontend developer is responsible for all of that, including styling, images, text, alignment, colors and so on. And should be keen to make the user experience as easy and entertaining as possible.
To achieve this goal, the frontend developer needs to use the following languages:
HyperText Markup Language (HTML)
HTML is the programming language used to create webpages for any website. All web pages across the internet use HTML to display their content. It is the only language currently that is used for this purpose. Web browsers on the client side are used to display pages written in HTML so that they look as intended by the web developer.
HTML is very easy to learn and use, it is free and supported by multiple browsers made by several tech giants like Chrome, Edge, Firefox, Safari, and others.
However, the disadvantage of HTML is that it is a static language. Once a page is displayed in the browser, you cannot change its contents. Also, it is very limited in displaying appealing content natively.
In order to overcome those advantages, the frontend developer needs to use other languages like CSS and JavaScript, as explained in the following points.
<h3>Welcome to Tech-wire</h3>
<p>
This is an example of HTML text with a header.
</p>
<a href="#">Subscribe</a>
Cascading Style Sheets (CSS)
CSS is a descriptive programming language that is used to style HTML documents, it describes how HTML elements should be displayed in different parts of the document. It converts web pages from dull, ugly documents to a beautiful, rich experience. It also enables web developers to control how HTML pages are displayed in different screen sizes (Desktop, laptop, tablet, or mobile phone).
CSS saves a lot of time for the developer, as it enables you to write bits of code called Classes, that can be used several times across your web page or even across several web pages in your website. And It’s easy to maintain, any changes you make in CSS are applied globally in your website at once.
<style>
h3 {
font-size: 24px;
color: brown;
}
.body-style {
font-size: 20px;
color: blue;
background-color: lightgray;
padding-top: 20px;
padding-bottom: 20px;
}
.link-style {
color: red;
font-size: 20px;
}
</style>
<h3>Welcome to Tech-wire</h3>
<p class="body-style">
This is an example of HTML text with a header, formatted with CSS styles
</p>
<a href="#" class="link-style">Subscribe</a>
As CSS became more and more popular, multiple frameworks were developed to empower frontend developers, as they give developers easy to use classes without the need to code them by themselves. The most popular CSS frameworks are:
Bootstrap is the most popular CSS framework. It’s fully featured and customizable, you can build your website with minimum effort using Bootstrap, as it provides a lot of ready to use components. If you are a beginner, you might want to consider using Bootstrap to develop your first projects.
The popularity of Bootstrap might be its biggest drawback as well. Websites developed with Bootstrap have a certain distinct look, that you can easily identify which website uses Bootstrap. If you are a creative developer that wants your website to stand out, you might want to try a different framework, or you’ll need to heavily customize your CSS.
Another disadvantage of Bootstrap is that it relies heavily on jQuery (a JavaScript library) for the interactive parts, which makes it difficult to integrate with other JavaScript libraries. Luckily, Bootstrap 5 which was released recently removed the jQuery dependency, giving Bootstrap a much needed renovation.
<div class="card" style="width: 30rem;">
<img src="image.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Welcome to Tech-Wire</h5>
<p class="card-text">
This is an example of a card made by Bootstrap CSS framework.
</p>
<a href="#" class="btn btn-primary">Subscribe Now</a>
</div>
</div>
Tailwind CSS is a highly customizable CSS framework that gives you all the building blocks you might need to build a very beautiful website in an easier and faster way. And enables you to develop a unique style for your website without too much hassle.
The main drawbacks for Tailwind CSS is that it takes a bit of time to learn all of its utilities and how to use them, and that you shouldn’t use it directly. Although you can just add the framework’s files to your project. The official and best way to add them is to use special tools to add the framework to your project, doing so can reduce the file size from around 350KB to almost 25KB (compressed), which is a huge difference.
<div class="max-w-lg bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src="image.jpg">
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Welcome to Tech-Wire
</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
This is an example of a card made by Tailwind CSS framework.
</p>
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Subscribe
</a>
</div>
</div>
Materialize CSS is a framework that is based on the Material design developed by Google. It is chosen by a wide range of developers for its simplicity and the nice experience it presents to the user. It also has cool animations and visual feedback.
The main drawback of Materialize CSS is that it follows a strict design, you either follow it as google intended it to be used, or you better find yourself another more forgiving framework.
<div class="row">
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="image.jpg">
<span class="card-title">Welcome to Tech-Wire</span>
</div>
<div class="card-content">
<p>
This is an example of a card made by Bootstrap CSS Framework.
</p>
</div>
<div class="card-action">
<a href="#" class=" indigo-text">Subscribe</a>
</div>
</div>
</div>
</div>
Bulma is very similar in design to Bootstrap, it’s lightweight and very easy to use, and has an extensive range of built-in features. It gives you a bit more flexibility for customization compared to Bootstrap, and provides more control over individual projects.
It is CSS only without using any JavaScript in its components, and it contains only one CSS file. Which makes it easier to use it with JavaScript frameworks like AngularJS and React.
The main drawback for Bulma is that it’s still fairly new. The support community is not as large as other frameworks like Bootstrap, and at the time of writing this article, it is still in the development phase (but it is very solid and very usable).
Foundation framework can be the choice of experienced and advanced frontend developers. It is very versatile, and empowers you to build complex yet beautiful web pages. It doesn’t give you any specific style like some of the other frameworks, but it provides a wide range of customizable components that you can use in your projects.
The main feature of Foundation is also its main drawback, its complexity makes it hard to learn and get used to. The freedom it gives you, means you need to know what you are doing to use its tools and components. Also one of the major drawbacks is it heavily uses JavaScript in its components. Which makes it difficult to use with other JavaScript frameworks.
You Can also read more on Top 12 Best PHP Frameworks To Consider In 2022
JavaScript (JS)
JavaScript is a very popular, easy to learn programming language, that allows frontend developers to bring live to web pages. It brings dynamic actions to the pages, enables the developer to add interactivity to the pages, like animation, active maps, videos, and instantaneous data entry, where you can submit data to the server and get the response without the need to reload the page.
JavaScript also allows you to develop single page application websites (SPA) which displays all the data and different screens of your website in the same page, by dynamically rewriting the contents of the current web page with new data from the server, instead of the default method of reloading the whole page with every request. This makes your website look faster with smooth transitions, and it can even look like native apps on a mobile or PC.
A very popular technique to handle dynamic data loading in web pages using JavaScript is called AJAX, which uses asynchronous requests to a server using XML or JSON data, where JavaScript libraries receive the response from the server and uses it to manipulate the HTML of the web page or edit HTML elements to display new data to the user.
A survey performed by Stack Overflow, which is the most popular forum for developers, shows that JavaScript is the most popular programming language in 2022 for the tenth year in a row. With over 65% of the respondents stating that they use JavaScript extensively, followed by HTML/CSS.
JavaScript has several libraries and frameworks that make using the language much easier and more productive. The most common ones are:
jQuery is the most common JavaScript library, it is fast, small, feature-rich and open source with a very large support community. Its motto, “write less, do more”, explains exactly how it can help you.
jQuery wraps complex JavaScript tasks into simpler methods, which reduces the time and effort you spend dramatically.
The main advantage of jQuery is that it is easy to learn, faster to code and perform tasks than using plain JavaScript, it has a lot of plugins that adds functionality to your code and websites, and it can add animation to almost anything in your web page, including CSS styles with ease.
The below example shows the difference between plain JavaScript and jQuery code required to perform the same task (hiding and showing a DIV element). As you can see jQuery code is much smaller and easier to write and read.
The main disadvantage of jQuery compared to other more modern JavaScript frameworks is that it lacks a lot of the modern functionalities that are presented in these frameworks. The bigger the project, the bigger the code gets as well.
React.js (simply called React), is an open source JavaScript library developed by Meta (formerly Facebook) and open source community. It is one of the most popular JS libraries, and is very helpful in building user interface UI components. It can be used to build websites, single-page applications (SPA), or even mobile applications. React is built using JSX which is a combination of JavaScript and XML. UI elements are built with XML, and rendered using JavaScript.
The advantages of React.js is it makes it easy to create dynamic web applications, with less code and effort. You can use it to build reusable components, with their logic and control, and you can use it to build both web and mobile applications, with dedicated tools for debugging.
React is difficult to learn, has a steep learning curve, and its documentation can be difficult to understand. Which means beginners will need some time to get used to React and use it in their projects.
It also focuses mainly on UI, but its state management is complex, and you will need to use other libraries to help. And remember JSX we mentioned above? It can be a major pain for beginners as well.
Angular is an open source framework writing in TypeScript (which is a more strict flavor of JavaScript). It is created and maintained by Google and is used mainly to build Single-Page Applications (SPA).
Don’t confuse Angular with AngularJS, they are the same but very different. AngularJS was the first release of Angular, and was built using JavaScript. Starting from release 2, Angular shifted to TypeScript with a complete rewrite.
Angular is very modular, it can be used to build single page applications (SPA), or a large enterprise application. It can be used to build cross-platform applications that can look very much like native mobile apps when displayed on mobile devices. It also provides a beautiful built-in Material design library, which follows Google’s own design language and standards.
Just like React, Angular can be difficult to learn for beginners, it is a complete platform, with a lot of components, modules and directives to learn. And if not coded correctly, applications built with Angular can become very large and slow to load.
Also a major disadvantage of Angular, is that usually data loads after the page is rendered, which makes it poor when it comes to SEO and search engine crawlers.
Vue.js is an open source JavaScript framework that is created by Evan You, and maintained by him and his team. It builds on top of HTML, CSS and JS, and provides a component based programming model. Vue.js is light-weight and easy to learn, very versatile and full featured.
Vue.js has efficient data binding, easy to implement transition effects, and it enables you to extend HTML with components, and custom directives which is a very important feature.
The main drawback of Vue.js is that it was developed in China, and commonly used in China as well, which resulted in most of the discussions and experience sharing is in Chinese. A lot of plugins are documented in Chinese as well. This caused a language barrier for beginners who want to learn Vue.js. However, this issue is improving with time as more and more developers and organizations start using Vue.js in the western world.
Top 10 Best JavaScript Frameworks to Use in 2022
Conclusion
In this article we discussed the main building blocks of a typical website. You should now know the difference between frontend and backend, and the different components of frontend development like HTML, CSS and JavaScript. And some of the most common libraries and frameworks for both CSS and JavaScript.
In the next article, we will discuss backend development and the most common languages and frameworks used.