Fabio Biondi's Speaker Profile @ Sessionize

Office Add-In con integrazione di Azure Language Cognitive Services in JS, React & Fluent UI.

In questa sessione, Eduard e Fabio, descriveranno passo-passo il processo di creazione di un Add-In per Microsoft Word, prima in vanilla Javascript e poi in React, in cui si sfrutteranno i servizi cognitivi Language forniti da Azure con l'obiettivo di integrare funzionalità come la traduzione e l'analisi dei testi (gestione multi-lingua, sentiment analysis, dizionario, estrazione parole chiave e altro ancora).

La sessione si divide in tre parti fondamentali:
1) Breve panoramica sulle Language Cognitive REST API
2) Creazione di Add-In per Microsoft Word in Javascript: utilizzo di Yeoman, analisi del file manifest, configurazione WebPack e del boilerplate fornito.
3) Creazione di Add-In per Microsoft Word in React: punti fondamentali, proposte per alcune migliorie rispetto al boilerplate fornito da Yeoman, integrazione Fluent UI Kit.

Office Add-In con integrazione di Azure Language Cognitive Services in JS, React & Fluent UI

In questa sessione, Eduard e Fabio, descriveranno passo-passo il processo di creazione di un Add-In per Microsoft Word, prima in vanilla Javascript e poi in React, in cui si sfrutteranno i servizi cognitivi Language forniti da Azure con l'obiettivo di integrare funzionalità come la traduzione e l'analisi dei testi (gestione multi-lingua, sentiment analysis, dizionario, estrazione parole chiave e altro ancora).

La sessione si divide in tre parti fondamentali:
1) Breve panoramica sulle Language Cognitive REST API
2) Creazione di Add-In per Microsoft Word in Javascript: utilizzo di Yeoman, analisi del file manifest, configurazione WebPack e del boilerplate fornito.
3) Creazione di Add-In per Microsoft Word in React: punti fondamentali, proposte per alcune migliorie rispetto al boilerplate fornito da Yeoman, integrazione Fluent UI Kit.

NextJS, Tailwind & Vercel: creare siti web / web app performanti e SEO friendly non è mai stato così

NextJS è un framework basato su React per la creazione di siti web e web apps performanti e SEO-friendly, grazie alla semplicità con cui permette di adottare Server Side Rendering(SSR), Static Generation (SSG), Incremental Static Generation (ISG) e alle numerose utility incluse.

Analizzeremo la creazione di landing page, integreremo Tailwind, uno dei framework CSS attualmente più utilizzati per flessibilità, funzionalità e dimensioni, ed effettueremo, infine, il deploy su Vercel.

Meet&Connect con Fabrio Biondi and his Frontend Friends

Vieni a trovarci vicino all'area community al primo piano e scopri un’opportunità unica di connessione!

Fabio Biondi insieme ad altri/e super frontendisti/e sono pronti ad accoglierti al booth per rispondere a tutte le tue domande, darti consigli preziosi o semplicemente scambiare un saluto.

Che tu stia cercando spunti per il tuo prossimo progetto o un semplice momento di networking, questo è il posto giusto per te! Non perdere l’occasione di fare un incontro che potrebbe cambiare il tuo percorso: passa al booth per fare quattro chiacchiere, costruire nuove connessioni ed imparare da expert!

Ah, e dalla regia segnalano che "La caciara è assicurata", non mancare!

La rivoluzione dei framework front-end "fullstack": sessione interattiva

Stiamo assistendo ad una rivoluzione del mondo front-end e moltissimi nuovi framework (full-stack) stanno nascendo o si stanno evolvendo: Next e i React Server Component, Astro, Qwik, SvelteKit, SolidJS, solo per citarne alcuni.

L'ottimizzazione per i motori di ricerca e l'incremento le prestazioni sono i principali motivi che stanno spingendo il mondo JavaScript ad abbandonare il Client Side Rendering (utilizzato principalmente nelle SPA) e tornare al Server Side Rendering (SSR), alla Static Generation (SSG) e ad adottare molteplici nuove strategie per migliorare il processo di Hydration, al fine di aumentare i punteggi dei Core Web Vitals e la velocità di rendering.

SEO, User Experience , incremento delle conversioni e minor impatto ambientale sono le motivazioni principali che spingono i vari team ad andare in questa direzione.
Cosa dobbiamo aspettarci per il prossimo futuro? E come è possibile raggiungere certi obiettivi e aggirare dei limiti che finora non permettevano di raggiungere certi risultati?
In questa sessione interattiva, Fabio farà una panoramica sull'argomento e farà partecipare attivamente il pubblico con domande e quiz: i più preparati sul tema avranno la possibilità di vincere gadget, libri e licenze software : )

La rivoluzione dei framework front-end "fullstack": sessione interattiva

Stiamo assistendo ad una rivoluzione del mondo front-end e moltissimi nuovi framework (full-stack) stanno nascendo o si stanno evolvendo: Next e i React Server Component, Astro, Qwik, SvelteKit, SolidJS, solo per citarne alcuni.

L'ottimizzazione per i motori di ricerca e l'incremento le prestazioni sono i principali motivi che stanno spingendo il mondo JavaScript ad abbandonare il Client Side Rendering (utilizzato principalmente nelle SPA) e tornare al Server Side Rendering (SSR), alla Static Generation (SSG) e ad adottare molteplici nuove strategie per migliorare il processo di Hydration, al fine di aumentare i punteggi dei Core Web Vitals e la velocità di rendering.

SEO, User Experience , incremento delle conversioni e minor impatto ambientale sono le motivazioni principali che spingono i vari team ad andare in questa direzione.
Cosa dobbiamo aspettarci per il prossimo futuro? E come è possibile raggiungere certi obiettivi e aggirare dei limiti che finora non permettevano di raggiungere certi risultati?
In questa sessione interattiva, Fabio farà una panoramica sull'argomento e farà partecipare attivamente il pubblico con domande e quiz: i più preparati sul tema avranno la possibilità di vincere gadget, libri e licenze software : )

La rivoluzione dei (fullstack) front-end framework

Stiamo assistendo ad una rivoluzione del mondo Front-End e moltissimi nuovi (full-stack) framework stanno nascendo o si stanno evolvendo: Next, Astro, Qwik, SvelteKit, SolidJS, ...

Ottimizzazione per i motori di ricerca, incremento delle prestazioni, minor impatto ambientale e aumento delle conversioni ($$$) sono i principali motivi che stanno spingendo il mondo JavaScript ad abbandonare il Client Side Rendering in favore di SSR, SSG, nuovi pattern di rendering e nuove strategie di Hydration.

Ne discuteremo con Fabio Biondi, due ospiti e con il pubblico, che sarà coinvolto in modo attivo

Have fun with Fabio! Quiz interattivo su JavaScript e lo sviluppo front-end.

Sei sicuro di essere preparato su JavaScript e sul mondo dello sviluppo Front-End?
Partecipa ai quiz interattivi di questa sessione per dimostrare le tue capacità e vincere i premi in palio (video corsi, libri e molti gadget) 🎁

Non ti senti pronto?
Non importa.
Imparerai qualcosa e potrai comunque vincere dei gadget tramite estrazioni random 🍀

How to use NextJS e NodeJS to develop a content digital platform

Would you like to start a new project but you have no idea about which technologies you should use?
How to make technical choices on frontend, backend and cloud while avoiding the most common mistakes?
In this session we'll share the analyzes and the development process that led us to create LearnByDo.Ing: a platform for publishing content, digital books and interactive video courses entirely developed in JavaScript, with the latest versions of NextJS and NodeJS.

We will share a lot of tip & tricks, our mistakes, how to monitor maintenance costs, structure the organization of work up to monetization of the project.

If you are interested in starting a new project but don't know where to start, which technologies to choose based on your goal and how to make it sustainable, this talk is for you.

Creare, Documentare e Testare componenti Front End con Storybook

Stanchi di scrivere componenti Angular, React o Vue con comportamenti inattesi, non documentati e senza alcun test?

Storybook è uno strumento utile a sviluppatori e designer in quanto permette di:

1. Sviluppare componenti front-end in un ambiente isolato

2. Generare documentazione interattiva per componenti, utile anche per verificarne e comprenderne il comportamento in differenti scenari e in tutte le loro varianti.

3. Integrare facilmente una moltitudine di test: unitari, accessibilità, di regressione UI, snapshot test e molto altro.

Indipendentemente che si stia usando React, Angular, o qualsiasi altro framework, Storybook rappresenta uno strumento davvero comodo e utile per la gestione di tutti i vostri componenti.

Creare UIKIT in Angular: tecniche, tips & tricks e best practices

Una sessione in cui esploreremo diverse tecniche per la creazione di componenti riutilizzabili: utilizzo di API, pattern e metodologie per creare componenti flessibili, integrazione di librerie esterne, creare istanze dei componenti a runtime, generare documentazione e pubblicazione su npm.

Azure from a front-end developer's perspective

Nel 2019 ho avuto l’onore di essere nominato Microsoft MVP (Developer Technology) e, da quel momento, ho iniziato ad esplorare buona parte dei servizi offerti da Azure per rendermi conto del suo potenziale e capire se avessi potuto sfruttare alcuni strumenti nel mio lavoro quotidiano di sviluppatore e istruttore front-end.  

Dopo aver passato settimane a leggere documentazione, guardare video e sperimentare, il mio unico pensiero si può riassumere semplicemente in:
 “WOW, quanta roba”!

  Abbiamo a disposizione, infatti, un’infinità di funzionalità, servizi REST, SDK, plugin e librerie JavaScript da sfruttare nel nostro lavoro quotidiano: integrazione con l’intera suite di Microsoft Office; creazione di AddIn di ogni tipo in JS; Machine Learning alla portata di tutti; Servizi Cognitivi per la computer vision, analisi di video e testi; librerie, SDK Javascript; plugin per Visual Studio Code per una semplice integrazione con Azure; UIKIT per React e moltissimi strumenti per semplificare l’integrazione con framework come Angular…solo per citarne alcuni.

  In questa sessione cercherò, quindi, di riassumere le opportunità che l’ecosistema Microsoft offre agli sviluppatori JavaScript, con particolare focus sui servizi Azure … ma non solo.

Astro: next-gen front-end framework

Astro è un nuovissimo framework front-end per lo sviluppo di siti web ultra performanti.
Introduce moltissime novità rispetto ai principali competitor tra le quali la possibilità di creare siti web velocissimi con zero javascript e il concetto di "island", ovvero la possibilità di includere in una pagina componenti realizzati con tecnologie differenti (React, Svelte, Vue, ecc.) con la possibilità di idratare il codice JS assegnando differenti priorità.

Me le novità non sono solo queste...
le altre le scopriremo durante questa sessione.

Astro: next-gen front-end framework

Astro è un nuovissimo framework front-end per lo sviluppo di siti web ultra performanti.
Introduce moltissime novità rispetto ai principali competitor tra le quali la possibilità di creare siti web velocissimi con zero javascript e il concetto di "island", ovvero la possibilità di includere in una pagina componenti realizzati con tecnologie differenti (React, Svelte, Vue, ecc.) con la possibilità di idratare il codice JS assegnando differenti priorità.

Me le novità non sono solo queste...
le altre le scopriremo durante questa sessione.

Angular v.18 MasterClass for beginners

Angular, framework front-end prodotto da Google, è tra i più utilizzati soprattutto in ambito enterprise, dato che offre centinaia di funzionalità per gestire gran parte delle necessità tipiche di ogni Single Page Application.

Negli anni è stato totalmente riscritto e semplificato al punto tale da poter essere paragonato a React o Vue, per quanto riguarda la curva di apprendimento iniziale.
Inoltre le ultime novità introdotte lo hanno reso ancor più performante e potente.

In questa MasterClass creeremo un progetto da zero per dimostrarne il potenziale utilizzando molte delle recenti API introdotte, tra cui:
• Signals
• Components: Signal Inputs e Query Signals
• Novità su Dependency Injection e Router
• Forms, Router e molto altro

DURATA: 90-120 minuti
REQUISITI: Conoscere almeno un linguaggio di programmazione

Angular & Rxjs: scenari e casi d’uso reali

RxJS, dipendenza fondamentale del framework Angular, fornisce decine di operatori utilissimi per risolvere problemi molto frequenti.

In questa sessione di live coding analizzeremo diverse strategie per l'utilizzo di RxJS in casi d'uso reali, applicheremo best practice e scoprirete diversi trucchi interessanti per sfruttare gli operatori pipeable e di creazione per la gestione della comunicazione client-server (HttpClient), i reactive forms, eventi del router, router guards, HTTP Interceptor, componenti, async pipe e async validators, solo per citare alcuni esempi.

AI Generativa con Google Gemini, VEO3 e Nano Banana

L'intelligenza artificiale generativa sta trasformando lo sviluppo software, ma come possiamo integrarla in modo efficace e sicuro nelle nostre applicazioni web?
Questo talk risponde alla domanda, offrendo una guida pratica all'ecosistema Gemini di Google, pensato per sviluppatori moderni.

Gemini non è un singolo modello, ma una famiglia di modelli di intelligenza artificiale multimodale. Questo significa che può comprendere e elaborare non solo testo, ma anche immagini, video e audio.
Le capacità di Gemini sono vaste: dalla generazione di codice alla sintesi di documenti, dalla creazione di contenuti creativi all'analisi di dati complessi.
Oltre ai modelli principali, Google ha introdotto strumenti specializzati che estendono le capacità di Gemini come VEO3 per la generazione di video (con audio) di altissima qualità e Nano Banana per la generazione e la modifica di immagini.

Una sessione molto pratica, con poca teoria e moltissimi esempi pratici in NodeJS, Angular e NextJS, utilizzando sia la comunicazione con API REST ma soprattutto con due degli SDK più utilizzati: Google Gen AI e Firebase Genkit

Agentic Apps con Google Gemini SDK e TypeScript

Un'intera giornata dedicata ai principianti per la creazione di applicazioni agentiche in TypeScript tramite l’integrazione delle API di Gemini con il suo SDK ufficiale.
Masterclass: 3 ore
Workshop: 3 ore

Obiettivi:
• Creare le prime semplici applicazioni "intelligenti" in TypeScript / NodeJS che integrano funzionalità AI con le API di Gemini
• Configurare e utilizzare l'SDK di Gemini: generare contenuti, streaming, output strutturati, ChatBot, Interactions API, Grounding Tools e molto altro.
• Utilizzare NodeJS per creare delle API REST in NodeJS che integrano funzionalità AI con Gemini SDK
• Deploy di API Rest su server Node con Google Cloud Run

Agentic Apps con Google Gemini SDK e TypeScript

Un'intera giornata dedicata ai principianti per la creazione di applicazioni agentiche in TypeScript tramite l’integrazione delle API di Gemini con il suo SDK ufficiale.
Masterclass: 3 ore
Workshop: 3 ore

Obiettivi:
• Creare le prime semplici applicazioni "intelligenti" in TypeScript / NodeJS che integrano funzionalità AI con le API di Gemini
• Configurare e utilizzare l'SDK di Gemini: generare contenuti, streaming, output strutturati, ChatBot, Interactions API, Grounding Tools e molto altro.
• Utilizzare NodeJS per creare delle API REST in NodeJS che integrano funzionalità AI con Gemini SDK
• Deploy di API Rest su server Node con Google Cloud Run

# Building Flexible and Maintainable (React) Components with TypeScript

Explore how TypeScript's powerful type system can be effectively leveraged to create highly flexible and adaptable components.

• learn how to use unions, intersections, type guards and other TS features to create versatile, reusable and robust components

• implementing generic components that can seamlessly handle different data types while maintaining type safety.

• use conditional types, infer and TS utility types to further enhance the flexibility and expressiveness of generic components.

Although the examples will be created in React, most of the concepts can be applied to any front-end framework.

RxJS Best practices per Angular Developers

Angular, dalla versione 2, utilizza RxJS per buona parte delle funzionalità del framework e rappresenta, di conseguenza, una dipendenza fondamentale che è necessario conoscere per sfruttare al massimo il suo potenziale.

Tuttavia, non viene spesso utilizzata nel modo corretto e si commettono diversi errori, alcuni dei quali molto comuni, che rendono le applicazioni molto più fragili e difficili da mantenere.  
In questa sessione, Fabio Biondi fornirà molti consigli ed esempi pratici per un utilizzo idiomatico di RxJS in applicazioni Angular: operatori indispensabili, gestione stato applicativo tramite Subject, comunicazione con il server, integrazione con i reactive form, gestione autenticazione e sicurezza.

State management in Angular e NGRX (live-coding)

In questa sessione di live coding realizzeremo un semplice progetto Angular con l’integrazione di NGRX, lo state manager reattivo più utilizzato in ambito enterprise che si ispira al famoso pattern Redux.
Una breve sessione in cui, non solo configureremo lo store, creeremo reducer, effects e selettori, ma parleremo anche di struttura moduli, organizzazione progetti enterprise, manutenzione e scalabilità del codice.

Sviluppare piattaforme di contenuti digitali

Vorresti iniziare un nuovo progetto ma non hai idea di quali tecnologie utilizzare?
Come fare scelte tecniche evitando gli errori più comuni e spendendo il meno possibile?
Perché abbiamo scelto Next e Angular rispetto ad altre tecnologie?

In questa sessione condivideremo le analisi e il processo di sviluppo che ci hanno portato a creare LearnByDo.ing: una piattaforma per la pubblicazione e vendita di contenuti interattivi, libri digitali e video-corsi interamente sviluppata in TypeScript, sia lato front-end che back-end.

Moltissimi tip & tricks su come abbiamo organizzato il lavoro, le nostre scelte tecniche, gli errori che abbiamo commesso e come lo stiamo monetizzando.

Se sei interessato ad avviare un nuovo progetto ma non sei sicuro sulla scelta delle tecnologie e su come renderlo sostenibile, questo talk ti sarà molto utile.

Sviluppare piattaforme di contenuti digitali in NextJS

Vorresti iniziare un nuovo progetto ma non hai idea di quali tecnologie utilizzare?
Come fare scelte tecniche evitando gli errori più comuni e spendendo il meno possibile?
Perchè abbiamo scelto Next rispetto ad altre tecnologie?

In questa sessione condivideremo le analisi e il processo di sviluppo che ci hanno portato a creare LearnByDo.ing: una piattaforma per la pubblicazione di contenuti interattivi, libri digitali e videocorsi interamente sviluppata in TypeScript.
Moltissimi tip & tricks su come abbiamo organizzato il lavoro, le nostre scelte tecniche, gli errori che abbiamo commesso e come lo stiamo monetizzando.
Se sei interessato ad avviare un nuovo progetto ma non sei sicuro sulla scelta delle tecnologie e su come renderlo sostenibile, questo talk ti sarà molto utile.

UI Generativa: l'era delle interfacce statiche è finita!

L’era delle interfacce statiche è finita. La "Generative UI" sposta il paradigma dai componenti predefiniti ad interfacce intelligenti create in tempo reale dai modelli AI.

In questo talk vedremo come trasformare l’output di un LLM in componenti React o Angular, superando i limiti del semplice testo.
Mostrerò come orchestrare la generazione a runtime partendo dalla creazione di chatbot evoluti e interattivi per finire con alcuni esperimenti per la gestione di intere pagine create "on-the-fly" basate sul contesto utente.
Analizzeremo diversi casi d'uso con demo ed esempi di codice

UI Generativa: l'era delle interfacce statiche è finita!

L’era delle interfacce statiche è finita. La "Generative UI" sposta il paradigma dai componenti predefiniti ad interfacce intelligenti create in tempo reale dai modelli AI.

In questo talk vedremo come trasformare l’output di un LLM in componenti React o Angular, superando i limiti del semplice testo.
Mostrerò come orchestrare la generazione a runtime partendo dalla creazione di chatbot evoluti e interattivi per finire con alcuni esperimenti per la gestione di intere pagine create "on-the-fly" basate sul contesto utente.
Analizzeremo diversi casi d'uso con demo ed esempi di codice

What's Happening in the JavaScript Ecosystem?

A comprehensive toolkit filled with strategies and insights to navigate and excel in the modern JavaScript landscape.

1. Frontend Innovations
Discover the latest in frontend frameworks like Angular, Next.js, Astro, and Qwik, emphasizing their rendering strategies and built-in optimizations.
We'll dive into Core Web Vitals for assessing performance, explore micro frontends (MFEs) for modular architectures and discuss techniques to enhance user experience.

2. Backend Developments
The Node.js ecosystem has experienced remarkable growth this year, bringing forth an array of innovative features and tools that enhance the developer experience.
While Node.js continues to evolve and strengthen its position, the JavaScript runtime landscape has become more diverse with the emergence of compelling alternatives. Notably, Deno and Bun have established themselves as powerful contenders, each offering unique advantages and modern approaches to server-side JavaScript development.
These alternatives provide developers with more options to choose from, depending on their specific project requirements and preferences.

3. Tooling Advancements
Modern bundlers and compilers enhance both performance and developer experience. With advanced tools and CLIs, developers can now efficiently manage large projects and deploy to production with minimal commands. Framework creators prioritize developer experience (DX), making it easier than ever to build and maintain applications without manual overhead.

Fabio Biondi

Actions

Links

Area of Expertise

Topics

DevFest Roma 2025 Sessionize Event

Codemotion Rome 2025 Sessionize Event

jsday 2025 Sessionize Event

Web Day 2025 Sessionize Event

DevFest Catania 2024 Sessionize Event

Devfest Pescara 2024 Sessionize Event

DevFest Bari 2024 Sessionize Event

Codemotion Milan 2024 Sessionize Event

DevFest Bari 2023 Sessionize Event

Devfest Pescara 2023 Sessionize Event

Codemotion Milan 2023 Sessionize Event

DevFest Bari 2022 Sessionize Event

DevFest Pescara 2022 Sessionize Event

Web Day 2022 Sessionize Event

Web Day 2021 Sessionize Event

CodeGen 2021 Sessionize Event

Cloud Day 2020 Sessionize Event

DevFest Italia 2020 Sessionize Event

Visual Studio Tour 2020 - Live Sessionize Event

Azure Day Rome 2020 Sessionize Event

GDG DevParty Together Sessionize Event

Fabio Biondi

Links

Actions