How does the frontend reinvent itself every day?

Peaks Méditerranée welcomed the AixJS community for a meet-up with two talks to deepen the joys and mysteries of the frontend.

Cyclic web evolutions:
From PHP to NextJS and beyond

Talk 1 by Timur Rustamov – Gojob

The web has changed drastically since it was invented by Tim Berners-Lee in 1989 – we managed to incorporate incredible richness, insane complexity, and our community of developers grew exponentially. Abstractions, syntaxes and mental models are the main drivers of this evolution and form a virtuous circle – reincarnating through time and the technologies that use them. In this presentation, we will travel in time and try to do a retrospective. Why NextJS is the new PHP, where JSX syntax came from, and how the AngularJS frontend framework took the world by storm.

30 year retrospective on what happened in the world of the web

On March 12, 1989, Tim Berners-Lee working at CERN, Switzerland, wrote the paper "Information Management: A Proposal" where he describes the basics of what is now the web.

He writes that the dream behind the web is to create a common space for sharing where this is done through information. This universality is essential for him: the fact that a hyperlink can lead to any page, whether private or public. The idea is to have a common sharing space for everyone.

On August 6, 1989, Tim Berners-Lee and his team launched the first website, shared in the global internets. The web was born that day.

What is the web after all?

The web is a file written in the language of the web, HTML. The peculiarity of this document is that it contains hyperlinks that can take us to other pages or other resources that are also on the web, interconnecting them with each other.

These hyperlinks contain URLs which, in their compositions, identify the website and the path to the page that contains the document. The website is a computer connected to the internet and the web page is the file that is in a computer document. We communicate with other computers using an HTTP protocol, dedicated for the web.

In 1993, Mosaic, the first internet browser arrived. It then makes it possible to use the World Wide Web.

In the early years of the web, a ton of things happened:

In those years, the war of internet browsers began: Netscape, Internet Explorer, Firefox and Opera.

The web has also evolved over the years in terms of technologies:

In 1998, the web was more or less static.

PHP, the first language created and designed for the web

This language has made it possible to simplify:

We then asked ourselves the following question: can web pages become web applications properly speaking? This language, introducing new URLs through the .php extension, meant there was a PHP program behind it.

Any HTML file can be processed by PHP. You can introduce the behavior of a web application.

This gave birth to the first stack in the web world, the LAMP stack:

At the time, JavaScript was considered complicated. jQuery was a release because of its simplicity.

jQuery, the essential JavaScript tool

jQuery has simplified a lot of things, it has helped us traverse the DOM and manipulate identities in the DOM, attach event handlers, manage animations. One of the main evolutions of jQuery was the introduction of AJAX (Asynchronous JavaScript).

You could, from the web page that was already loaded, make requests to the server and obtain information and process it. Before, the whole page was loaded. Thanks to AJAX, we will look for the appropriate information to make the step change on the web application.

However, jQuery is not scalable at all:

The arrival of AngularJS, the frontend framework

Created by google in 2010, it is the creation of this SPA (Single Page Application) spirit.

At the time, the exceptional features of AngluarJS:

Thanks to all these innovations, the frontend framework became extremely popular until around 2016.

ReactJS

In 2013, React JS arrived, created by Facebook's Jordan Walke, which offered a complete paradigm shift from what came before.

How has this paradigm changed?

Next.JS

In 2016, Next.JS was launched. This framework around React then makes it possible to manage all that is SSR and more, with incredible ease.

What does Next.JS offer?

We can see a certain trend in frontend web development, to break down the barriers between server and clients to bring better DX and performance to the frontend and provide better user experiences.

The web has changed a lot in 30 years but its purpose is the same. Tim Burners-Lee's idea is as follows: “There was a second part of the dream, depending on the web being so widely used that it became a realistic mirror of the ways we work, play and socialize. »

Standalone components / Signals:
How Angular is evolving to improve the developer experience

Talk 2 by Grégory Servera – Peaks

Since its creation, Angular has been constantly evolving to provide developers with a better experience. Today, Standalone Components make it possible to overcome the heaviness of modules. Tomorrow, Signals will simplify UI responsiveness by avoiding the verbosity of RxJS while promoting “OnPush” change detection. During this talk, we will present these new features to you, which will also be an opportunity to discuss the major steps that have led to these changes to the framework.

The long journey of modules

The two main sentences that can be found on the first documentation of Angular 2 about modules:

In summary, modules should be used to:

But Angular needed it to:

When we have a component that needs a service, Angular, thanks to this method, knows where to find the service, how to instantiate it and what dependency to provide it. Modules consolidate all of these mechanisms, actually more than consolidating code.

A progressive movement then appeared to diminish the importance of the modules. In 2016, Angular 2 was released. 2 years later, it decreases the importance of modules on services. In 2020, the "entryComponents" property was deprecated. These components were injected by TypeScript. Last year (2022) marks the arrival of standalone components (pipes, directives).

Standalone components

Standalone components are used to declare components that are self-sufficient. Each component only declares the dependencies it needs. This is the end of modules to declare components, dependencies. It also makes it easier to identify a dependency that has become unnecessary.

Thanks to the standalone components, the final application is simplified. Components that are declared in modules are compatible with Standalone Components and vice versa. They can coexist in the same application. To facilitate the migration, there is a schematic in @angular/core, but it has its limits: a developer must finish the job.

Angular frontend framework signals

Angular 16 incorporates the concept of Signal, another way to make a responsive application.

The signals are: a simple implementation of the Observer pattern. Unlike RxJS, Angular observes the signals. On our side, we only care about the value, its update and its possible transformation (computation)

Does Signal supplant RxJS?

The signals are synchronous, we always start with a value. Observables are made to be asynchronous, that's their logic.

RxJS allows:

Signals and observables are therefore complementary, but not in the same places. The Angular team understood this well. Currently, in PR, work is being done to give two functions and easily switch from one to the other.

Standalone components / Signals

Two progressive movements:

How does Angular detect this change? It uses a library: Zone.JS, which triggers Angular on each action (example: click) and overload. When loading the application and then with each click, we have a downtime on Zone.JS. OnPush change detection and signals will help correct this problem. Because from the moment when we no longer rely on systematic change detection but when we signal the change by choice, Zone.JS is no longer useful. Reflections are then currently underway within the Angular team to get rid of Zone.JS.