JS Frontend Libraries & Frameworks

Library vs Framework

First lets explain the difference between a “Library” and a “Framework”.

Libraries are mostly “small” code bundles which allow the developer to extend the functionality of an already present application.
Examples for libraries are Moment.js, jQuery or Data-Driven Documents.

Frameworks are most of the time “bigger” and usually provide a distinct structure how data should be handled or saved. Frameworks often provide easier ways to reuse already written blocks of code and already have built in security features like XSS Protection and CSRF tokens.

Why do JS Frontend Libraries/Frameworks exist?

There are many different reasons why JS Frontend Libraries/Frameworks exist:

• Performance
• Complete separation between frontend and backend logic
• New technology / developer doesn’t want to work with “old” technology

Whats the principal behind JS Frontend Libraries/Frameworks?

Lets take a typical PHP as basis:

1. Browser requests website
2. Web server gets request from browser and looks for the defined document root
3. If there is a PHP file present it will be interpreted
4. Now all Database queries are being executed which can theoretically take a lot of time
5. The resulting HTML and connected CSS and JS will be returned to the browser

Point 4. is the important part here: The database query is executed immediately when the request is being proccessed by the web server.

Now in comparison a website built with a JS Frontend Frameworks

1. Browser requests website
2. Web server gets request from browser and looks for the defined document root
3. Web server delivers HTML, CSS and JS without executing DB Queries
4. The browser renders the HTML and CSS and interprets the JS
5. In JS the client now executes extra AJAX requests to the web server to dynamically load the needed data.

Therefore the initial HTML is very small because usually in JS Framworks the DOM only consists of 1 “root” element in which all the virtual DOM is rendered by JS.

Main difference to PHP is the fact, that the dynamic content will be added by the client, not the server!

This has also the advantage, that the backend code to manage the dynamic code doesn’t need to worry about frontend code.

Currently popular JS Libraries/Frameworks (June 2020)

• React
• VueJS
• Angular

Basically there is no “ultimate” framework which is best for all scenarios. But bellow you can see a short description of each framework so you can make your own decission.

React is a “light” Library/Framework, which only has a few basic concepts (like e.g. “Components”) to build your project. Therfore you don’t have to learn that much and the start is not that difficult.

You can also use react just as a library (see HERE), but on the example of Next.js you can see a whole framework which is built on React.

VueJS basically has the same features as React. But one main difference to React is the fact, that VueJS doesn’t built its virtual DOM with JSX. See HERE for a description of what the virtual DOM and JSX is.

Angular is a “larger” framework and therefore has much more functionality built in. Thats why its better suited for bigger projects because you can already use “finished” functionality and don’t have to build everything yourself. But understand, using and maintaining these already build code blocks can be kind of tricky especially while updating Angular.