Video Tutorial su Angular

Breve Introduzione su Angular

1. introduzione

Fabio Biondi

Una breve introduzione su Angular, uno dei framework più utilizzati per lo sviluppo di Single Page Applications. Gli argomenti:
• Installazione di NodeJs, NPM e NVM
• Creazione progetti con Angular CLI
• Esempio applicazione Angular: live-coding
• Cos'è una SPA, codice dichiarativo, approccio component-based e moduli
• Paranomica sugli strumenti offerti dal framework: teoria e snippet di codice

Angular Beginner Pack - 1: introduzione

2. Installazione NodeJS, npm e nvm

In questo video vedremo come installare NodeJS, npm e nvm, strumenti ormai indispensabili per lo sviluppo di applicazioni front-end. Ci concentreremo in particolar modo su NVM, Node Version Manager, un tool fondamentale per gestire differenti versioni di Node nella stessa macchina

Angular Beginner Pack - 2 : Installazione NodeJS, npm e nvm

3. creazione progetti con AngularCLI

In questo video installiamo Angular CLI, un tool da riga di comando per la creazione di progetti Angular in pochi semplici passi.

Angular Beginner Pack - 3:  creazione progetti con AngularCLI

4. hello world example

In questo video creo un semplice esempio in Angular per il caricamento di dati tramite REST API e la loro visualizzazione sfruttando alcuni degli strumenti offerti dal framework. Niente di sofisticato ma utile per comprendere la sintassi, le potenzialità e la semplicità con cui è possibile iniziare ad utilizzarlo.

Angular Beginner Pack - 4: hello world example

5. SPA, approccio component-based e moduli

Come è strutturata una Single Page Application in Angular, codice dichiarativo, approccio component-based, organizzazione in moduli.
Molti dei concetti descritti sono applicabili alla maggior parte dei framework/librerie front-end, da React a Vue.js oltre che in framework mobile di ultima generazione come Google Flutter.

Angular Beginner Pack - 5: SPA, approccio component-based e moduli

6. building blocks

Quali sono gli strumenti inclusi in Angular per la creazione di web applications e SPA? 
In questo video farò una breve panoramica dei costrutti più importanti con esempi di sintassi e un po' di teoria.

Angular Beginner Pack - 6: building blocks

Tutorial su Custom Modules

1. Panoramica: organizzare l'applicazione in custom ngModules

Una breve serie di approfondimento sulla creazione e utilizzo di custom ngModules per l'organizzazione di applicazioni Angular.
ARGOMENTI:
• Introduzione ai custom ngModules
• Routing, Routed & Shared Modules
• Domain Modules
• Nested Routed Modules
• Services & Widget Modules

Angular ngModules - #1 panoramica: organizzare l'applicazione in custom ngModules

2. Introduzione 

Effettuiamo il refactoring di un'applicazione Angular organizzandola in custom ngModules

Angular ngModules - #2 introduzione

3. Routed, routing & shared modules

Come organizzare le route in custom ngModules, utilizzo del lazy loading e condivisione componenti / direttive tramite Shared Modules

Angular ngModules - #3: routed, routing & shared modules

4. Domain modules

Il tuo modulo contiene decine / centinaia di componenti? 
Utilizza i Domain Modules per suddividerlo in diversi altri sub-modules.

Angular ngModules - #4: Domain modules

5. Nested Routed Modules

Come organizzare un modulo lazy in diverse sotto pagine (sub routes) caricate a sua volta con il lazy loading.

Angular ngModules - #5: Nested Routed Modules

6. Service & Widget Modules

In questo video analizzeremo:
- come (e perché) creare moduli per singoli componenti
- come creare moduli nei quali si definiscono i providers di servizi
- configurare e passare parametri ai moduli (usando il metodo "forRoot")
- gestire la dependency injection in moduli 
- utilizzo di useFactory per configurare provider

Angular ngModules - #6: Service & Widget Modules

Risorse

Angular Documentation

Video Tutorial su React

Video Introduttivi

React 16.7 - I nuovi hook disponibili nei functional component

Un'introduzione ai nuovi hook disponibili nei componenti funzionali dalla versione 16.7.0-alpha di React e alla creazione di custom hook.

NOTA: parlo troppo velocemente? Impostate la velocità a 0.75 : P

Le novità di React 16.x: lazy, suspence, memo, context, lifecycle e molto altro

React / Typescript: intro su useState, useEffect e la creazione di custom hook

In questo video:
• React Functional Component in Typescript
• utilizzo di useState e useEffect
• comunicazione server, fetch, async, await 
• creazione di un custom hook

NOTA: video estratto dal mio video corso "React Fundamentals"
----
Iscriviti alla mia pagina Facebook per altri video e risorse:
https://www.facebook.com/groups/fabiobiondi.training/

Performance Optimization

Performance - Parte 1 - React Developers Tools - Il pannello "Components"

Utilizzare il pannello "Components" fornito dall'estensione React Developer Tool per monitorare stato e proprietà dei componenti

React Performance - Parte 1 - React Developers Tools - Il pannello "Components"

Performance - Parte 2 - React Developer Tools - il pannello "Profiler"

Il pannello "Profiler" dell'estensione React Developers Tool ci fornisce un valido aiuto per analizzare i tempi di rendering di ogni componente e verificare eventuali render superflui.
Grazie a questa analisi potremo successivamente modificare il codice della nostra applicazione React allo scopo di incrementarne le performance
---
Video precedente:
• React Performance - Parte 1 - React Developers Tools - Il pannello "Components"
https://youtu.be/PmKA6BxH4Oo

React Performance - Parte 2 - React Developer Tools - il pannello "Profiler"

Performance - Parte 3 - ottimizzare i render dei componenti con "React.memo"

In questo video vedremo come evitare render superflui di componenti e ottimizzare le performance della nostra applicazione React tramite l'utilizzo di React.memo e l'analisi dei render con lo strumento Profilier dei React Developer Tools
---
Video precedenti:
• React Performance - Parte 1 - React Developers Tools - Il pannello "Components"
https://youtu.be/PmKA6BxH4Oo

• React Performance - Parte 2 - React Developer Tools - il pannello "Profiler"
https://youtu.be/zuq6FIxFN_0

React Performance - Parte 3 - ottimizzare i render dei componenti con "React.memo"

Performance - Parte 4 - memoizzare funzioni e ottimizzare le performance con "useCallback"

Come memoizzare le funzioni dei componenti React tramite l'utilizzo dell'hook chiamato "useCallback", evitando che sia quindi assegnata una nuova allocazione di memoria ad ogni render di un componente funzionale.

React Performance - Parte 4 - memoizzare funzioni e ottimizzare le performance con "useCallback"

State Management

Redux Toolkit - Introduzione

• Cos'è Redux e cosa sono i container.
• Cos'è Redux Toolkit e differenze con Redux?
• Come semplifica l'utilizzo di Redux? 
• Perché usarlo?

React Redux TOOLKIT - funzionalità  e sintassi

React / Typescript: installare, configurare e usare Storybook

Installare, configurare e utilizzare Storybook in React e Typescript.

➡️ Non conosci Storybook?

È uno strumento che si può integrare in ogni progetto tramite il quale potrete creare un playground per isolare e testare i vari componenti in differenti scenari. Molto utile in fase di sviluppo di componenti ma utile anche ai designer che devono verificare che ogni casistica funzioni a dovere oppure per integrare E2E test sui singoli componenti (ad es. con Cypress).

Zustand: state manager per React, semplice e performante

Se cercate uno state manager per React semplice da utilizzare, performante e più efficiente dell'utilizzo di Context  Zustand rappresenta sicuramente un'ottima scelta.
Questo state manager non include moltissime funzionalità e per questo motivo è adatto ad applicazioni di piccola entità che necessitano di condividere uno stato tra più componenti.

Caratteristiche:
• semplicissimo da utilizzare
• render ottimizzati: solo i componenti che utilizzano una specifica porzione di stato saranno renderizzati
• outside React: possibilità di sottoscrivere lo stato anche al di fuori dei componenti React, ad es. in un modulo ES6
• manual subscribe: possibilità di essere utilizzato al di fuori React, tramite una semplice sottoscrizione manuale allo stato
• Supporto ai Redux DevTools
• già pronto per la concurrent mode di React 18

QUALITÀ AUDIO: mi spiace per la qualità audio non eccellente ma il video è stato registrato fuori ufficio con il microfono del laptop.

----
Seguimi su Telegram per tutte le novità:
https://t.me/fabiobiondi

Seguimi su Twitch per i contenuti dal vivo:
https://www.twitch.tv/fabio_biondi

Corsi di Formazione per team e aziende:
https://formazione.fabiobiondi.io/

Video Corsi (Angular, RxJS, NGRX, Git...):
http://videocorsi.fabiobiondi.io/

Valtio: state manager per React basato sui Proxy

Valtio è un state manager per React.
Dietro le quinte utilizza i Proxy di JavaScript, un approccio decisamente meno convenzionale ma che lo rende molto semplice da utilizzare e versatile.
Non offre moltissime funzionalità, soprattutto se messo a confronto con Redux o Recoil, ma supporta la funzionalità Suspense di React, il concetto di stato derivato ed è molto performante.

Caratteristiche:
• semplice da utilizzare
• gestione stati multipli
• render ottimizzati: solo i componenti che utilizzano una specifica porzione di stato saranno renderizzati nuovamente
• possibilità di sottoscrivere lo stato anche al di fuori dei componenti React, ad es. in un modulo ES6 tramite subscription e watcher
• time travel: undo e redo
• derived state / selettori
• supporto a React Suspense 
• Supporto ai Redux DevTools
• già pronto per la concurrent mode di React 18


QUALITÀ AUDIO: mi spiace per la qualità audio non eccellente ma il video è stato registrato fuori ufficio con il microfono del laptop.

----
Seguimi su Telegram per tutte le novità:
https://t.me/fabiobiondi

Iscriviti al canale per seguire le live su Twitch:
https://www.twitch.tv/fabio_biondi

Corsi di Formazione per team e aziende:
https://formazione.fabiobiondi.io/

Video Corsi (Angular, RxJS, NGRX, Git...):
http://videocorsi.fabiobiondi.io/

Jotai: state manager per React basato sugli Atomi, ispirato a Recoil

Jotai è uno state manager per React che si basa sul concetto di atomo e si ispira nettamente a Recoil,  creato da Facebook.
Tuttavia ne semplifica nettamente l'utilizzo grazie ad un set di API minimali e molto semplici da utilizzare.

Questo state manager offre un numero di funzionalità decisamente maggiore rispetto a Zustand e Valtio, soprattutto grazie alle numerose utility incluse e alla possibilità di integrarsi facilmente con immer, xstate, redux e molte altre librerie.
La principale differenza rispetto a questi due state manager è che Jotai si presta molto di più ad essere utilizzato in progetti di media /alta complessità.
Al contrario di Redux basato sul concetto di un'unico store, Jotai e Recoil utilizzano gli atomi.
Questi atomi possono essere utilizzati per creare diversi stati e un atomo, quindi un nuovo stato, può anche essere creato dalla composizione di diversi altri atomi.

Video Tutorial su Angular / NGRX

A cosa serve uno state manager

Le Single Page Application, al crescere della loro complessità e delle informazioni che devono gestire, con il tempo risultano sempre più difficili da mantenere.
L'utilizzo di componenti stateful, l'abuso di pattern come la dependency injection in Angular o le context API di React, tanto per citare un paio di esempi, e l'integrazione di altre tecniche utilizzate per una gestione semplificata dello stato applicativo spesso non sono sufficienti a garantire efficienza e scalabilità nel medio-lungo periodo. 
Gli state manager, come ad esempio NGRX, ispirato a Redux, offrono delle soluzioni consolidate per una corretta gestione dello stato, purché l'applicazione sia sviluppata seguendo determinati criteri.
In questo video cercherò di introdurre la problematica e di descrivere brevemente i vantaggi nell'integrazione del pattern Redux.

NGRX Intro - 01: A cosa serve uno state manager

 Cos'è NGRX: pro e contro

Cos'è NGRX? Quali vantaggi ci permette di ottenere? Cosa sono e come funzionano i Redux Dev Tools?
Oltre a comprendere le potenzialità di uno state manager e della sua integrazione in applicazioni front-end, analizzeremo anche gli svantaggi e le difficoltà che ne conseguono.

NGRX Intro - 02: Cos'è NGRX: pro e contro

NGRX Data Flow

Tramite l'utilizzo di uno state manager come NGRX non solo sarà possibile separare nettamente la  user interface, realizzata in Angular, dalla data architecture, gestita invece da NGRX, rendendo quindi la code base più semplice da mantenere ed efficiente, ma la stessa architettura sarà organizzata in differenti fasi, che analizzeremo in questo video:
• Actions: le azioni, effettuate nella maggior parte dei casi dall'utente, che potranno essere tracciate e identificate 
• Reducers: che si occupano di manipolare lo stato sulla base delle azioni
• Effects: gestione separata di side effect come XHR, gestione router, sync con localstorage...
• Selectors: recuperare di una porzione di stato

NGRX Intro - 03: NGRX Data Flow

NGRX Folders

Al crescere della complessità di un'applicazione, aumenterà ovviamente anche la quantità di files da gestire nel progetto.
L'utilizzo di convenzioni e best practice fornite da un framework "opinionated" come Angular e da uno state manager come NGRX, semplificherà notevolmente il processo di manutenzione, il debug e le operazioni di refactoring, grazie ad una specifica organizzazione di file e cartelle e all'utilizzo di una corretta nomenclatura.

NGRX Intro - 04: NGRX Folders

Code Preview

In questo video analizziamo le API di NGRX 8 con diversi esempi e caso d'uso che faranno ampio uso di Typescript e RxJS:
• organizzazione dello store 
• azioni type-safed
• gestione di side "effects", che fanno largo uso di operatori RxJS
• manipolazione stato tramite i "reducer" e l'utilizzo dell'immutabilità 
• selectors: recupero delle informazioni dallo stato sfruttando la memoization

NGRX Intro - 05: NGRX Code Preview

Stateless UI Architectures

Per sfruttare al massimo le potenzialità di uno state manager è necessario creare applicazioni front-end quasi totalmente stateless.
Cosa significa? In breve, tutto ciò che riguarda la gestione dello stato e dei side effect (XHR, redirect, ecc.) saranno delegati a NGRX, e solo tramite degli "speciali" componenti, definiti "Container",  la user interface potrà comunicare con lo state manager, ricevendo lo stato proprio dal Container tramite proprietà @Input ed emettendo eventi sfruttando gli @Output event emitter.
Il "Container" fungerà quindi da ponte tra UI e data architectures.

NGRX Intro - 06: Stateless Architectures

I have noticed that the concept of pre-rendering, SSR and SSG is not very clear to many developers.
So let’s do some clarity them using React and NextJS and some animations I have created.



Quick animated introduction to Pre-Rendering, SSR and SSG in NextJS

In questo mini corso analizzeremo le principali caratteristiche di React Router, la libreria più utilizzata per la gestione del router in single page applications sviluppate in React. È ormai giunta alla versione 6, moltissime sono le novità introdotte ma ahimè anche diversi breaking change.


Video Corso su React Router 6

Una breve introduzione alla programmazione reattiva tramite l'utilizzo della libreria RxJS: cos'è un Observable, le tipologie di notifiche, sottoscrizioni e operaetori


Introduzione a RxJS

Condividere l’istanza di un servizio tra componenti e moduli;
creare diverse istanze dello stesso servizio;
definire gli injector in componenti e sub-modules;
configurare NgModule providers e Component providers

Fabio Biondi
Contenuti Calendario

playlist video

latest publications