• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • AI/ML
    • Backend
    • Frontend
    • Dev Life
    • DevOps
    • Soft Skills
  • Talent
  • Partners
  • For Companies
Home » Frontend » Front-end development with Angular & NgRx
Frontend

Front-end development with Angular & NgRx

At Codemotion Milan, Fabio Biondi talked about Angular and its NgRx extension based on Redux, one of the best technologies for front-end dev in web apps.

Last update January 28, 2020 by Gabriella Giordano

fabio biondo codemotion milan 2018

Front-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.

As a consequence, several SPA oriented frameworks appeared on the layered and already crowded panorama of front-end development methodologies.
At Codemotion Milan 2018, 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.

In his overview of NgRx, Biondi highlighted the main concepts derived from Redux and how they blend in with Angular’s components architecture.
The Redux approach, a variant of the original Facebook’s 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.

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.

Amazing experience at @CodemotionIT 2018.
I spoke in front of 300+ people about "Front-end Data Architectures in #angular, #ngrx and #redux". Video and slides soon available. I really thank @CodemotionIT for giving me this opportunity. pic.twitter.com/A9wscLmwcN

— Fabio Biondi (@biondifabio) December 1, 2018

NgRx provides an implementation of the Redux pattern based on the reactive extensions for JavaScript (RxJs) for Angular.
Within the Redux design, the state of the application is enclosed into a single source of truth, called store, that can be modified synchronously by pure functions only, called reducers, as a consequence of an action.

Actions, in this context, are simple data structures that describe the type of manipulation (delete, increment, etc.) and the element of the store that is addressed by the change.
Granting referential transparency to the state, reducers remove the risk of side-effects that can spoil data consistency: the current state is indeed immutable and, instead of being modified directly, it can only be replaced with an updated version. Among other benefits of this approach, a state can easily be reverted, making the implementation of undo/redo features a trivial task.
Each component or view is notified of the change by reactive APIs and updated by selectors that act as filters on the contents of the store.

NgRx adds to the basic Redux design a built-in subsystem to manage effects that, as a consequence of an action, involve entities different from the angular components of our application or its NgRx store, e.g. sending a XMLHttpRequest (XHR) to an external service.
Furthermore, the schematics extension to NgRx greatly improves project management, extending the standard Angular CLI. Last but not least, the companion development tools provide advanced debugging features like time-travel debugging.

Like alternative frameworks, e.g React, Flutter and others, Angular with NgRx provides a complete solution to simplify the management of front-end architectures.
There are, however, downsides to this approach, as Biondi pointed out. As an example, NgRx has a slow learning curve and requires a certain amount of boiler-plate code and, therefore, it may be an overkill for simple applications.
Furthermore, there are several alternatives (Akita, MobxStateTree, etc.) that can be used in place of NgRx, with minor changes to the general workflow and can be more or less suitable for specific purposes.

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Angular Codemotion Milan Frameworks

Use Azure SQL database in your web app
Previous Post
Programming Languages: how to choose the best one
Next Post

Related articles

  • Reactive Forms in Angular
  • Refactoring an Angular application through a live coding session
  • RxJS and Angular Reactive Forms
  • Inertia: make modern SPAs with Laravel and Javascript frameworks
  • A Quick Guide to NextJS
  • Micro Frontends: the Future of Web Development?
  • Headless Architecture: Everything you Need to Know
  • Front-end Refactoring for Performance Improvement
  • How Micro-Frontend Architecture Improves Team Management and the Developer Experience
  • How‌ ‌to‌ ‌Deploy‌ ‌Faster‌ ‌and‌ ‌More‌ ‌Precise‌ ‌UI‌ Tests‌

Primary Sidebar

The IT Industry in Italy: Trending Positions, Salaries, and Main Skills for 2022

Codemotion and Adecco’s guide to understanding the IT working environment in Italy. Download here:

Adecco Whitepaper IT Report

Latest

Do You Love Open Source Too? Then Don’t Miss This Survey by Linux Foundation

Dev Life

grpc, http, rest

GRPC Approach for Improved Software Development

Web Developer

Using the Twelve-Factor Methodology in Cloud-Native Microservices

Microservices

svelte, javascript frameworks, vue.js, angular

Svelte: Why Is It an Innovation to Javascript Frameworks?

JavaScript

blockchain, avascan, avalanche, defikingdom, subnet

How to Deploy a Subnet on Avalanche Blockchain: The Case of DeFi Kingdom

Blockchain

Related articles

  • Reactive Forms in Angular
  • Refactoring an Angular application through a live coding session
  • RxJS and Angular Reactive Forms
  • Inertia: make modern SPAs with Laravel and Javascript frameworks
  • A Quick Guide to NextJS
  • Micro Frontends: the Future of Web Development?
  • Headless Architecture: Everything you Need to Know
  • Front-end Refactoring for Performance Improvement
  • How Micro-Frontend Architecture Improves Team Management and the Developer Experience
  • How‌ ‌to‌ ‌Deploy‌ ‌Faster‌ ‌and‌ ‌More‌ ‌Precise‌ ‌UI‌ Tests‌

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN