Fabio Biondi - FrontEnd Training

Ormai è una notizia vecchia (ha ben 1 giorno 😅) ma è uscito il documentario su Angular
(se non avete mai visto questa serie di documentari, vi spoilero che sono fatti davvero bene)

https://www.youtube.com/watch?v=cRC9DlH45lA

Ho creato un cheatsheet super utile con i comandi CLI #angular piu utilizzati.

Aggiornato a V.19 e Zoneless.

Se vi piace, spingete il post con un like o un commento, così produco la seconda parte con un dettaglio maggiore sui Migration tools e altri comandi utili

https://www.linkedin.com/posts/fabiobiondi_angular-cli-useful-commands-cheatsheet-activity-7293185401068920833-EnyY?utm_source=share&utm_medium=member_desktop&rcm=ACoAAAGznWEBJVBXLSY4pjbkSRpPK6vcl4LPk80

#romajs
Per le persone di Roma e dintorni segnalo un fantastico evento organizzato dalla community RomaJS.
I primi speaker annunciati sono dei famosi contributor italiani di NodeJS : )

Qui maggiori info:

https://www.linkedin.com/posts/fabiobiondi_dopo-11-anni-di-meetup-mensili-siamo-orgogliosi-activity-7292445177997094912-YXcO?utm_source=share&utm_medium=member_desktop&rcm=ACoAAAGznWEBJVBXLSY4pjbkSRpPK6vcl4LPk80

#angular #migration #tip
Questo utile comando fornito da Angular CLI ci permette di migrare un vecchio progetto basato sui moduli a un progetto Standalone con 3 semplici passaggi:

1️⃣ Converte tutti i componenti, le direttive e i pipe del progetto in Standalone
2️⃣ Rimuove i moduli ngModule non più necessari
3️⃣ Converte un'applicazione basata su ngModule in Standalone

Per garantire retro-compatibilità non sempre riesce in autonomia a cancellare i files non più necessari e bisogna fare qualche fix manuale ma questo comando insieme a molti altri comandi per migrare control flow syntax, signal inputs, outputs, router e molto altro sono davvero un validissimo aiuto nel processo di migrazione.

—
🚀 NUOVO VIDEO CORSO - MIGRATION GUIDE
Ho creato un mini corso in cui affrontiamo passo passo il processo di migrazione di un'applicazione Angular 16 (con ngModule) ad Angular 19 (standalone)

🎁 Puoi acquistarlo separatamente ad un prezzo simbolico ma se sarà un BONUS REGALO che arriverà presto agli studenti del corso Mastering Angular Components

https://www.learnbydo.ing/courses/angular/migration-guide

E visto il risultato dei sondaggi di ieri...

Cosa staremo mai preparando io e Giorgio Boa? 😀

Fabio Biondi - FrontEnd Training pinned «Giornata di sondaggi 😅
Argomento #MicroFrontEnd (MFE)
Interessa? Please rispondete anche al sondaggio precedente su SSR se non lo avete ancora fatto»

Fabio Biondi - FrontEnd Training pinned «#angular #ssr Ciao devs, come avrete notato in questi mesi sto producendo un sacco di materiale, molto gratuito ma la maggior parte PREMIUM (scusate ma devo mantenermi 🤣) Mi stavo chiedendo una cosa: Nel corso Angular Evolution ho inizialmente integrato…»

#angular #ssr
Ciao devs, come avrete notato in questi mesi sto producendo un sacco di materiale, molto gratuito ma la maggior parte PREMIUM (scusate ma devo mantenermi 🤣)

Mi stavo chiedendo una cosa:
Nel corso Angular Evolution ho inizialmente integrato un capitolo su Angular e SSR ma nella 19 hanno stravolto tutto.
Devo quindi aggiornare quel capitolo, che sarebbe totalmente (o quasi) da riscrivere e mi chiedevo quanta priorità dargli rispetto ad altri contenuti interessanti che ho nel cassetto : )

Di seguito metto un sondaggio... fatemi sapere in quel sondaggio o anche con un commento
...

Pubblicato un nuovo articolo nel blog, un po' di nicchia:

• how to configure custom domains in Zephyr Cloud
• the domain is registered by Namecheap
• workers and domains are managed by Cloudflare

https://www.learnbydo.ing/diary/2025-01-25-zephyr-and-cloudflare


SPOILER: tutto questo perché a breve arriverà un video su come effettuare il deploy di #MicroFrontEnd applications (Angular / React) su questa piattaforma

#course #bonus
Nuovo mini video corso pubblicato...
ANGULAR MIGRATION GUIDE

🎁 MA NON COMPRARLO !!!
È un regalo che arriverà tra qualche giorno a tutti gli studenti del corso MASTERING ANGULAR COMPONENTS.


🤌 COSA CONTIENE IL CORSO
Una decina di video (circa 40 minuti ) con tutti i passassi per migrare vecchie applicazioni Angular alla v.19:

1. Migrazione di progetti ngModule (v.16) a Standalone applications (v.19)
2. Utilizzare i tool di migrazione della CLI (+ un po' di lavoro manuale)
3. Migrazione alle più recenti API del framework
4. Passare da applicazioni (vecchie) ZoneJS alla nuova generazione Zoneless
5. BONUS: una pagina riepilogativa con decine di comandi da CLI molto utili nello sviluppo Angular e durante il processo di migrazioni. Aggiornato alla v.19

https://www.learnbydo.ing/courses/angular/migration-guide

💰COME AVERLO?
Ho messo un prezzo simbolico al video corso ma in realtà è semplicemente un bonus per acquisterà il corso "Mastering Angular Components" in queste prime settimane di lancio.
Poi rimarrà a pagamento.

—-
📆 LA PROMO SCADE QUESTO WEEKEND
Il prezzo di lancio di Mastering Angular Components SCADE QUESTO WEEKEND.
Poi aumenterà di prezzo per la seconda parte del lancio.
https://www.learnbydo.ing/courses/angular/mastering-components

#feedback
Un utente che ha acquistato Mastering Angular Components mi ha fornito dei feedback e poi mi ha scritto quanto vi ricopio.

È sempre una soddisfazione leggere saper di aver contribuito a qualche piccolo successo : )

Ne ricevo molti simili ma una volta tanto l'ho voluto condividere perché era particolarmente carino : )

#tutorial #deploy #angular #react
Io e Giorgio Boa abbiamo pubblicato un nuovo articolo sul blog di LearnByDo.ing su come effettuare il deploy di applicazioni Angular / Analog e React su Zephyr Cloud.

Come funziona:
1. si crea la build localmente:
"npm eseguire build"

2. il deploy è eseguito in pochi secondi

3. Viene assegnato un URL alla vostra applicazione / sito web

Qui l'articolo:
https://www.learnbydo.ing/diary/2025-01-25-deploy-angular-and-react-applications-to-zephyr-cloud

#annuncio
La promozione del video corso MASTERING ANGULAR COMPONENTS
scade venerdì 31 gennaio.

HAI ANCORA DUBBI?
Di seguito un estratto dei contenuti che troverai all'interno del video corso (che vedi poi negli screenshot)


➡️ COMPONENTI RIUTILIZZABILI
Progetta componenti flessibili, modulari e semplici da utilizzare, in grado di adattarsi a diversi contesti e requisiti di business.
Crea componenti per la gestione del layout, typography, contenitori, mappe, placeholders e molto altro.
Mastering Angular Components

➡️ COMPOSITE COMPONENTS
Crea componenti composti, cioè contenitori e strutture che coordinano il funzionamento di altri componenti figli.
Questo ed altri pattern analizzati durante il corso ti permetteranno di creare layout flessibili e soluzioni altamente configurabili

➡️ COMPOUND COMPONENTS
Un pattern potente e flessibile per costruire interfacce modulabili e facili da estendere, analizzato attraverso la creazione di componenti e direttive.

➡️ GENERIC COMPONENTS
Grazie alla potenza dei Generics di TypeScript, crea componenti versatili che si adattano a qualsiasi tipo di dato fornendo un'API chiara e tipizzata.
Mastering Angular Components

➡️ CREAZIONE DI INTERFACCE DINAMICHE
Progetta componenti flessibili e dinamici utilizzando alcune delle API più potenti di Angular, tra cui ngComponentOutlet, ViewContainerRef e ngTemplateOutlet.
Questi strumenti ci consentono di creare interfacce utente dinamiche in cui il contenuto e i comportamenti possono essere determinati a runtime.

—
MA NON È TUTTO...
Imparerai a:
• organizzare le view in componenti sfruttando le più recenti API e pattern del framework
• creare componenti wrapper per librerie di terze parti come ThreeJS, Leaflet, ChartJS
• documentare, presentare e testare componenti con Storybook e Cypress

E molto altro!
Trovi tutte le informazioni sul sito web:
https://lbdo.ing/amc

#angular #tip (zoneless)
Lo sapevi che il comando --experimental-zoneless ti permette di creare velocemente un'applicazione Angular v.19.x senza ZoneJS?

Consiglio vivamente di iniziare a sperimentare al più presto in modo da prepararsi alle applicazioni Angular di prossima generazione.

SPOILER: signal come se non ci fosse un domani 🤣

Per la funzionalità della CLI --experimental-zoneless dobbiamo ringraziare la PR di un caro amico, Angelo Parziale ❤️

#post #muto
https://www.youtube.com/watch?v=nONHcxn3giQ

#angular #tip
Oggi voglio mostrarti lo scheletro di un altro componente che spesso descrivo nei miei corsi di formazione dal vivo e che ho radicalmente cambiato con l'introduzione dei Signal e delle recenti Resource API.

È un banale componente meteo che:
1️⃣ Accetta una stringa come proprietà: il nome di una città
2️⃣ Invoca le API OpenWeatherMap per recuperare info sul meteo della città
3️⃣ Visualizza la temperatura (e altre informazioni) nel template

Utilizzo:

<app-weather city="Rome">

Nell'esempio puoi vedere che:

1. La proprietà "city" è passata come input signals
2. Viene utilizzato "resource" per effettuare una chiamata ogni qualvolta il valore del signal cambia
3. Ho creato una "computed" che dipende dalla resource, al fine di recuperare il contenuto della proprietà "main.temp", che contiene il valore della temperatura
4. Il template visualizza la temperatura ma anche eventuali errori e un loader in caso di pending

In passato avremmo dovuto utilizzare decoratori @Input, stati locali per gestire errori, pending e stati derivati, metodi dal lifecycle come ngOnChanges.
Che ne dite?

—
MASTERING ANGULAR COMPONENTS

👉 Anche questo esempio è descritto passo passo nel video corso Mastering Angular Components, che nel giro di un paio di giorni AUMENTERÀ DI PREZZO.

Qui trovi tutte le info, i prezzi e gli sconti per Teams e Gruppi di acquisto: https://lbdo.ing/amc

#cercasi #reviewer per il weekend
Questo weekend qualcuno ha tempo di guardarsi 10 video (totale < 30 minuti) sulle procedure di migrazione da un'applicazione Angular con Moduli ad una standalone?

1. Mi bastano 3 revisori (i primi 3 che scrivono un commento).
I feedback dovrebbero essere forniti entro domenica sera, se possibile

2. Obiettivo della revisione: non tanto sul contenuto ma semplicemente fornirmi feedback se ci sono errori, sbavature o problemi audio / video

3. REQUISITI: bisogna gia conoscere un po' Angular e avere una minima idea delle nuove API, signals in particolar modo

Nel caso vi interessi scrivete un commento e vi Contatto in pvt per abilitarvi il corso su learnbydo.ing

NEI COMMENTI trovate lo screenshot con gli argomenti