Skip to content

Help

Review and comparison of JavaScript frameworks and libraries

Review and comparison of JavaScript frameworks and libraries

 

Review and comparison of JavaScript libraries and frameworksDo you have to use frameworks? No, you can write the client side of web applications in pure JavaScript. In that case, you don't need to learn anything new - knowing the JavaScript language is enough. Doing away with frameworks will lead to difficulties in maintaining compatibility between browsers, as well as longer development cycles. Frameworks, on the other hand, allow full control over the architecture, design patterns, and code styles of your application. Most modern web applications are written with a combination of several frameworks and libraries.

In this article, we'll take a brief look at popular JavaScript frameworks and libraries. What are the differences between them? Frameworks allow you to structure your code and force you to write it a certain way. Libraries usually offer several components and APIs that can be used at will in any code. In other words, frameworks provide more flexibility when developing an application.

 

Angular is one of many frameworks used to develop web applications.

Full-featured JavaScript frameworks

Contains everything you'll need to develop a web application. They provide the ability to easily structure your code and come with a library containing components and tools for building and deploying the application.

 

For example, Ext JS is a complete framework created and maintained by Sencha. It comes with a full set of UI components, including advanced data grids and tables (critical for developing industrial office applications). Ext JS significantly increases the size of the program code - you won't be able to find an application created with it that weighs less than 1 MB. In addition, this framework is quite deeply embedded - it will be hard to switch to another tool if you need to.

 

Sencha also offers the Sencha Touch framework, used in creating web apps for mobile devices.

 

 

Lightweight JavaScript frameworks

Allow you to structure your web application, offer a way to customize navigation between views, and break down applications into layers by implementing a Model - View - Controller (MVC) design pattern. There is also a group of lightweight frameworks that specialize in testing applications written in JavaScript.

 

Angular is an open-source framework designed for developing web applications. It simplifies the creation of custom components that can be added to HTML documents, as well as the implementation of application logic. Actively uses data binding, contains a dependency injection module, supports modularity, and provides a mechanism for configuring routing. AngularJS was based on the MVC pattern, unlike Angular. The latter does not contain elements for creating the user interface.

Ember.js is an open-source framework based on MVC; it is used to develop web applications. It contains a routing mechanism and supports two-way data binding. The code of this framework uses many conventions, which increases the productivity of software developers.

 

Jasmine is an open-source framework for testing JavaScript code. Does not require a DOM object. Contains a set of functions that check whether parts of the application behave as planned. Often used in conjunction with Karma, a program for running tests that allows you to test in different browsers.

 

Libraries

The libraries discussed in this blog serve a variety of purposes and can be used in web applications along with other frameworks or on their own.

 

jQuery is a popular library for JavaScript. Quite easy to use and does not require a significant change in the style of writing code for web programs. It allows you to find and manipulate DOM objects, as well as handle browser events and cope with browser incompatibilities. It's an extensible library, and developers from around the world have created thousands of plug-ins for it. If you can't find a plugin that meets your needs, you can always create one yourself.

Bootstrap is an open-source library of UI components developed by Twitter. They are built according to the principles of adaptive web design, which greatly increases the value of the library if your web application should automatically adjust its layout based on the screen size of the user's device. In this book, we'll use Bootstrap when developing a sample application.

 

Note

 

Google has developed a component library called Material Design that can be an alternative to Bootstrap. It is optimized for use on different devices and comes with a set of interesting UI elements.

 

React is an open-source library created by Facebook for building user interfaces. It represents the V layer in the MVC acronym. It is not deeply embedded, and can be used in conjunction with any other library or framework. Creates its own virtual DOM object, minimizing access to the browser DOM object, resulting in better performance. In terms of rendering content, React introduces the JSX format, an extension of JavaScript syntax that looks like XML. Using JSX is recommended, but not required.

Polymer - A library created by Google for building custom components based on the Web Components standard. It comes with a set of interesting customizable UI elements that can be included in HTML markup as tags. It also contains offline application components, as well as elements that use a variety of APIs from Google (e.g., calendar, maps, etc.).

 

RxJS - a set of libraries needed to create asynchronous and event-driven programs using observable collections. It allows applications to handle asynchronous data streams like server-side stock quotes or mouse motion events. With RxJS, data streams are represented as observable sequences. This library can be used with or without other JavaScript frameworks.

To see statistics that show which sites are using which frameworks, you can visit BuiltWith: .

What is node js

Node.js (or just Node) isn't just a framework or library. It's also a runtime environment. Throughout most of this book, we'll use the Node runtime to run various utilities like the Node Package Manager (npm). For example, to install TypeScript, you can run npm from the command line:

 

npm install typescript

The Node.js framework is used to develop JavaScript programs that function outside the browser. You can create a server-side JavaScript or Typescript web application. Google has developed a high-performance JavaScript V8 engine for Chrome. You can use it to run code written with the Node.js API. The Node.js framework includes APIs for working with the file system, accessing databases, listening to HTTP requests, and more.

Members of the JavaScript community have created many utilities that will be useful in developing web applications. Using the JavaScript engine for Node, you can run them from the command line.



Moving from Flex to Angular

 

We work for a company called Farata Systems, which over the years has developed a lot of fairly complex software using Adobe's Flex framework. This is a very productive framework, based on a strictly typed compiled ActionScript language. Applications written with it are deployed in a plugin for the browser Flash Player (used as a virtual machine). When the web community started to move away from plugins, we spent two years trying to find a Flex replacement. We experimented with various JavaScript frameworks, but our developers' efficiency was seriously declining. Finally, we saw the light at the end of the tunnel when we combined TypeScript, the Angular framework, and a UI library such as Angular Material.