{"id":263,"date":"2020-01-28T10:30:00","date_gmt":"2020-01-28T09:30:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/front-end-development-with-angular-ngrx\/"},"modified":"2021-12-23T15:19:59","modified_gmt":"2021-12-23T14:19:59","slug":"front-end-development-with-angular-ngrx","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/front-end-development-with-angular-ngrx\/","title":{"rendered":"Front-end development with Angular & NgRx"},"content":{"rendered":"\n

F<\/span>ront-end development of web applications has always been challenging and never settles on established technologies for too long.
In the last few years, the Single Page Application (SPA) paradigm has been widely adopted to build complex front-end business logic that emulate the behaviour of native desktop applications.<\/p>\n\n\n\n

As a consequence, several SPA oriented frameworks appeared on the layered and already crowded panorama of front-end development methodologies.
At Codemotion Milan 2018<\/a>, Fabio Biondi, freelance web developer, talked about the Angular framework and its NgRx extension based on the Redux design, which qualifies as one of the state-of-the-art technologies to manage complex front-end logic in web applications.
Angular is one of the most popular SPA frameworks for web front-end development and Redux is a paradigm that defines a set of constraints to preserve consistency and integrity of the status of the application as it evolves through the interaction with the user or the other parts of the system.<\/p>\n\n\n\n

In his overview of NgRx, Biondi<\/a> highlighted the main concepts derived from Redux and how they blend in with Angular\u2019s components architecture.
The Redux approach, a variant of the original Facebook\u2019s Flux design, was born to overcome the critical issues derived from the transposition of the traditional Model-View-Controller (MVC) pattern to the web domain.
The lack of a strongly typed variant of the ECMAScript language and the need to manage asynchronous updates when multiple views share the same data are among the many factors that make the MVC pattern difficult to implement and maintain in web applications.
As a matter of fact, an approach based on the separation between the server-side managed model and the views exposed by the client, give developers a very limited set of tools to manage the growing complexity of front-end architectures. Moreover, component-based design is not always suitable, as it requires a perfect data encapsulation to effectively decouple data structure from the presentation layer exposed through the UI.<\/p>\n\n\n\n

In this regard, Biondi jokingly described the feeling of slow and ineluctable loss of control over data management while the project evolves through several stages of development, which is common to seasoned designers and developers.
For complex applications, the adoption of a state manager living on the client-side, like Redux, simplifies data management taking advantage of general principles inspired by functional programming.<\/p>\n\n\n\n

\n

Amazing experience at @CodemotionIT<\/a> 2018.
I spoke in front of 300+ people about "Front-end Data Architectures in #angular<\/a>, #ngrx<\/a> and #redux<\/a>". Video and slides soon available. I really thank @CodemotionIT<\/a> for giving me this opportunity. pic.twitter.com\/A9wscLmwcN<\/a><\/p>— Fabio Biondi (@biondifabio) December 1, 2018<\/a><\/blockquote>