Front End Technologies

6 min readDec 24, 2020

While learning web development, you come across a series of concepts that engulf you completely.

Browsers? Servers? Client/Server-side? AJAX?

Fortunately, to create a basic website locally, you only need to understand HTML and CSS. But to understand how a website can eventually go live on the web, understanding the concept of front-end vs. back-end is very important.
Consider this basic analogy: When you visit a restaurant, the waiter takes your order and serves you the food, whereas, the chef cooks the food for you. Similarly, front-end and back-end together make your website functional.

In the case of a restaurant, the chef prepares high-quality, delicious food efficiently. Whereas the waiters are well efficient in managing the customers, their orders, and serving them.
Similarly, Each side of a website has different but significant functionality.

Front-end web development, also known as client-side development is all about the visual aspects of any website which ensures that a user can see and interact with using a browser.

The most common frontend languages are HTML, CSS, and JavaScript. In this blog, we shall discuss the roles the different technologies play in the front-end of a website.

An Introduction to the Front-End

The frontend of an application is less about coding and more about the user interpretation of the interface into an experience. The code creates a user interface, which is a systematic way for website visitors to interact with the code.

In a restaurant, a table is a place where a systematic interaction takes place between customers and the waiters. Now think of this table as a website.

Initially, the customers are given a menu card that makes it easier for them to understand their options.

Among the front-end technologies, this is similar to HTML and CSS. These two technologies allow you to build static content.

But there’s one thing that you need a way to inform the chef that you wish to order a particular food item. Hence we have the waiters, who can help us take our orders to the chef. They are adept at interactivity — working out systematic functionality. That’s where JavaScript comes in.

As a website developer, JavaScript will help you accomplish multiple goals by implementing and managing dynamic content. It is also the scripting language used for sending the user requests to the back-end, then accepting and delivering the back-end response.

To summarize: Users arrive at your site with certain goals in mind. Your code helps them accomplish their goals.

A Scaling app

Using just three files: HTML, CSS, and JavaScript, you can build a simple frontend. However, as your website scales, your dependencies will grow along with it, filling up with enigmatic and unmaintainable scrambled code.

Using the JavaScript language alone (also known as “vanilla JavaScript”) would result in repetitive code for the functions which occur multiple times. So, to overcome this repetition, we have something known as “JS frameworks” and “JS libraries”, that give developers the ability to use inbuilt common JavaScript functions, and to create user-defined functions, to be reused as and when needed.

Do you think “library” and “framework” are indicating the same thing? Not really. Though both tools have similar use cases, there are noteworthy differences between the two platforms.

JavaScript Libraries: A Definition

A JavaScript library is a library of pre-written JavaScript that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. — wikipedia

JavaScript library code can be used as a plugin to your project as and when required. There are thousands of JavaScript libraries that can help you with many aspects of your webpage:

DOM manipulation
DOM Events
AJAX / Data retrieval
Effects & animation
Graphics & charts
Routing & navigation
Multi-browser support
Mobile support

Few of the most trending JS libraries are as follows:

JS browser libraries: jQuery, ZeptoJS
JS app architecture libraries(Frameworks): React + Flux, AngularJS
JS micro-libraries: tinyDOM, PathJS, D3, Three.JS

JavaScript Frameworks: A Definition

Although JavaScript libraries are on-demand tools, a JavaScript framework is a tool that provides a combination of Synchronization of state and view, Routing, Reusable components, and much more.

Simply put, JavaScript libraries are like pizza toppings that add to the taste of an already prepared pizza. Frameworks, on the other hand, are a base you use to prepare the pizza itself.

Frameworks provide page templates to base your entire code around.

Some examples of JavaScript Frameworks:

Angular
Ember JS
Backbone.js
React JS
Vue.js

A word on Ember.js

Ember.js is an MVC (Model-View-Controller) JavaScript framework used to develop large client-side web applications. According to the Ember.js website, Ember.js enables you to build “ambitious” web applications.

In Ember.js, the route is used as a model, handlebar template as views and controllers manipulate the data in the model.

If you would like to create a single-page web application that pushes the envelope of what’s possible on the web, Ember.js is the best choice for you.

List of a few brands using Ember.js:

Microsoft
LinkedIn
TED
Netflix
Heroku

A word on Angular 2 and Higher

Angular is an open-source front-end web application framework for dynamic web application development. Using HTML as its template language, It is fully extensible and works well with other libraries.
AngularJS, whose architecture is based on the model-view-controller (MVC) design, provides developers an option to write client-side applications using JavaScript.

List of a few brands using Angular.js:

Gmail
Forbes
PayPal
Deutsche Bank
Upwork

A word on React JS

React, a library for building UI encourages the composition of reusable UI components. Apart from being an efficient and flexible library, it is deliverable for composing complex UIs and isolated pieces of code called “components”.
Lots of people use React as the V in MVC, which mostly relates to the UI / interaction layer of an application, offering a simpler programming model and better performance. React can power native apps using React Native and also render on the server using Node.

List of a few brands using Ember.js:

Netflix
Khan Academy
Facebook
Airbnb
Reddit

Which library or framework is the best?

Now that you know the difference between a JS framework and a JS library, which one should you learn for acing web development? Although both JS libraries and JS frameworks require a thorough understanding of JS fundamentals, working with frameworks generally requires more JS knowledge and experience, which makes the learning curve for JS libraries a bit tender. And as far as which framework is the best, to begin with? Professional developers should always have an unbiased opinion as there’s no best JavaScript framework!