Introduction to React Hooks
React Hooks are functions that facilitate the access and management of React’s state, props, context and lifecycles. The article reviews key APIs to React’s core features.
publication
Top JavaScript Frameworks 2021
The frontend programming scene has been evolving a lot during the past years. The growth of single-page applications and web-app development has created many job positions and the future seems brighter than ever for front-end developers.
The release of major JavaScript frameworks has increased the demand for highly skilled developers on this stack of the development. There has been a huge movement of code from the backend services into frontend applications. This is thanks to the rising power of frontend frameworks.
This article gives an overview of the most popular Frontend Frameworks in 2021.
When a frontend project uses an external package, it usually comes in the form of a framework or library. However, frameworks and libraries are different concepts. They both contain reusable functions, methods and classes and are used to simplify the development. The main difference lies in application flow and architecture.
Frontend frameworks control the application’s flow and architecture. They set the base of the project and allow you to insert custom code in specific areas. You can’t choose when to use the framework as it is implicit on your project.
Frontend libraries on the other hand don’t have control over the flow or architecture of your project. As a developer, you are responsible to initialise them and to call the functions or methods you are interested in.
It is common among developers to mix the terms “framework” and “libraries”. This article’s title, as example, reads “JavaScript Frameworks” but I have also included JavaScript libraries. I have done that for title simplicity. However, it is important to understand the difference between them when deciding which frontend tool to use in a project.
React is an open-source JavaScript library used to develop single-page applications. It was developed by Facebook in 2013 and maintained by the JavaScript community since then. According to StateofJs website, it is the most popular JavaScript library at the moment for building user-interfaces (UI).
React is based on components that can be reused across a project. A React application is going to keep a generic state for the internal data and will react to user inputs and events throughout its life-cycle.
The React library comes with a set of hooks that can be used to enhance React’s abilities during the life-cycle of their components. It also provides guidelines for working with forms and other common frontend challenges.
Angular is an open-source JavaScript framework created by Google in 2016. It is a frontend framework used to create powerful applications with solid frontend architectures. It was originally released as Angular.JS but later renamed to just Angular. There has been major improvements on the framework since Angular 2.
The Angular framework is written on TypeScript and is based on UI components. It leverages modularity by using components inside modules. Data across the application is stored on shared services which act as links between components of a project.
As a frontend framework, Angular sets the base for the project and takes care of the core architecture. Angular provides its own compiler which handles the compilation of TypeScript into JavaScript. There are multiple packages that can be added on top of Angular to increase the capabilities of a project.
Popularity of the Angular framework seems to be decreasing. This is caused due to the learning curve that Angular has, as well as the complexity to build a very simple application.
Vue.js is a progressive JavaScript framework. Its core functionalities, such as routing, event reaction or state management are optional to use. That gives more flexibility to developers.
It is defined as a versatile framework enhancing maintainability and testing capabilities. It offers the Vue Test Utils library which provides access for testing low-level components. It can also integrate with other common testing libraries such as Jest, Karma or Mocha.
Vue.js is also based on UI components allowing to set HTML, CSS and JS. It is based on template syntax in order to inject dynamic values into DOM.
The frontend framework Vue.js is based on reactive programming, meaning that the framework has event listeners that are going to update the state of the app when internal events occur.
The main benefit of Vue.js is that it facilitates the adaptation of the framework to existing projects. You are not required to rebuild an application from scratch to start using Vue.
Express.js is a JavaScript framework that builds on top of Node.js. It is the only backend framework listed on this article but I still wanted to add a review due to its high popularity.
Express.js defines itself as an unopinionated web framework. This means that it won’t provide you with the guidelines on how to architect an application nor how to organize the project structure.
But that doesn’t take any points from Express.js. It’s minimal definition allows developers to create flexible web applications without the constraints of a closed framework. It provides an extended API that will enhance the performance of your applications.
Definitely one candidate to consider if you are looking for JavaScript rendering on the backend side.
As it has already been described in the early section, React is a JavaScript library. So if you want to use a React framework, you should consider Next.js. Next.js is a frontend framework which has configurations set for production optimization. It is very modular and provides support for TypeScript.
Next.js extends the capabilities of React. Any React application can benefit from Next.js as the core concepts are the same. Static file serving, browser compatibility and easy to access environment variables are some of the key benefits of using Next.js.
Next.js provides easy migration for existing JavaScript applications. Next.js documentation includes migration step by step for: Gatsby, Create React App and React Router.
Ionic is a frontend framework for JavaScript. It is free and open source. Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Ionic is specially targeting mobile applications. The framework lets developers ship apps to the app stores with a single code base. The unification of visual styling easies the development process of building a mobile application.
The Ionic framework provides a set of components that are ready to use on all mobile devices and platforms. It includes: pre-build UI components, typography, themes and integrations for each mobile platform. It also provides a friendly development interface through the Ionic CLI.
Ionic can easily integrate with applications built in: React, Vue or Angular.
Gatsby is an open-source frontend framework for creating fast websites and applications using JavaScript. Gatsby 3.0 is now based on React. The framework not only offers development capabilities but also deploying, hosting, and managing Gatsby applications.
The main benefit of using the Gatsby framework is its fast time creation circle. It’s easy setup allows for going from initial idea to final deployment in minutes.
Gatsby is built on popular technology like React and GraphQL. The community has generated loads of tutorials and reusable templates to get started. As many of the common JavaScript libraries, there are over 2500 plugins and packages that can be integrated with a Gatsby application.
Gatsby also provides a custom CLI to execute commands. They can be used to: Create new Gatsby applications, build projects, activate plugins or get information about the app.
Svelte is an open-source frontend framework built on top of JavaScript. It describes itself as a radical alternative to common frameworks such as Vue and React. The key difference in Svelte is the browser execution.
While React and Vue rely on the browser to perform core functionality, Svelte delegates this responsibility to the built process. This reduces the amount of work that needs to be performed on the browser side when an application initialises. This is similar to Angular’s Ahead of Time compilater (Angular AOT).
Svelte compiles UI components into ready to use DOM elements at run time. This speeds up the performance of the applications reducing the amount of execution and rendering at browser side.
An existing web application can be transitioned to use Svelte without rewriting the source code. Svelte is based on components that can be reused and published as dependency packages making reusability easy to accomplish.
Alpine.js is a JavaScript framework that follows the reactive and declarative nature of big frameworks like Vue or React but at a much lower cost. It is considered to be a tiny framework, leading to fast applications that excel in performance.
Alpine.js applications use template syntax to apply DOM modification based on JavaScript logic. The Alpine.js framework exposes a set of directives that are used to interact with the components of the User Interface (UI).
Preact is a light JavaScript library that follows the same API references as React. The idea behind Preact is to create low size applications that can be fastly loaded. Preact can presume to be a library that only weighs 3kb.
Preact’s powerful Virtual DOM Component ensures easy integration with multiple browsers without any complex injection. The Virtual DOM provided by Preact also facilitates code reusability of any type of UI components, from buttons to data providers.
LitElement is a frontend framework to create lightweight web components. Using LitElement developers can create Web Components easily, allowing for sharing elements across an organization or building a UI design system.
LitElement can be used on top of TypeScript or JavaScript. LitElement components integrate easily with React or Vue applications, reducing the cost of portability.
LitElement uses lit-html to define and render HTML templates. DOM updates are lightning-fast, because lit-html only re-renders the dynamic parts of your UI – no digging required.
Stimulus is described as a modest JavaScript framework. It does not aim to convert your entire frontend architecture. Instead, its goal is to increase the performance of an application’s HTML rendering.
Stimulus is based on JavaScript components named Controllers which monitors the application and manges the impact of state changes into the HTML DOM. Stimulus handles the creation of class instances and links them to the HTML elements. This increases the efficiency on each application change.
Stencil is a cross-framework toolchain to create frontend components that meet the web standards. Stencil provides the tools to create user interfaces that can adapt to any environment. Unlike other JavaScript frameworks, Stencil.js does not require configurations that will tie you up to a framework. Instead, it provides a minimal API that developers can use to create standard web components.
Stencil.js is considered one of the fastests compilers. Stencil components are just Web Components, so they work with any major framework or no framework at all.
It provides functionality such as: Virtual DOM, Async rendering, Reactive data-binding, TypeScript, JSX, Static Site Generation (SSG) and creates native Web Components out of them.
Ember is a JavaScript framework for building modern frontend applications. The Ember framework includes a set of tools to create powerful user interfaces that are compatible with common devices.
Ember.js provides the bases for architecting applications that are easy to scale. By using this framework you reduce unnecessary complexity and delegate architectural decisions to the framework.
Ember also provides a powerful CLI that facilitates the generation of new elements and utilities from the terminal. Similar to other frameworks, Ember apps come with a built-in development environment for local serving, testing and auto-reloading. The core of Ember provides tools to manage common problems such as: routing, data layering, testing and event reaction.
jQuery was not part of the original sketch of this article. However, after reading the news on their latest 3.6.0 release I decided to include it as well. jQuery is one of the most common JavaScript libraries. Any frontend developer who has been around for quite some time has developed a project in jQuery.
jQuery provides an API which makes HTML DOM manipulation, event handling, animation, and Ajax much simpler. It’s API works across a multitude of browsers. It is a versatile and extensible library that facilitates native JavaScript management.
React Hooks are functions that facilitate the access and management of React’s state, props, context and lifecycles. The article reviews key APIs to React’s core features.
Updating Angular projects on a regular basis is very important. This article covers how to update Angular to version 11 from version 7. It also provides information about new features on Angular 11.
Flutter is a multi-platform framework built by Google and used to develop native applications for web, mobile and desktop from a single code base. Here we review key ideas, concepts and introduction Tutorials to Flutter.