Contattami | Tutti i corsi

JAVASCRIPT ES6
& TYPESCRIPT INTRO

Un corso su Javascript ES6/7/8 e un'introduzione sulle feature di Typescript che ogni sviluppatore front-end dovrebbe conoscere!

typescript



INTRODUZIONE
Questo corso fornisce una solida base sui costrutti principali del linguaggio Javascript ES6/7/8 fornendo un'introduzione a Typescript allo scopo di sfruttare al massimo le potenzialità di framework e librerie front-end di ultima generazione, come Angular, React, Vue, Svelte o nel caso di Web Components.
OBIETTIVO
Dalla versione ES6 (aka ES2015) di Javascript sono state introdotte nuove API, costrutti e funzionalità che possono risultare di difficile lettura ad un primo sguardo.
Conoscere il linguaggio in modo approfondito è di fondamentale importanza per ottenere le massime performance dai moderni framework front-end, creare un codice più conciso, manutenibile e, da non sottovalutare, risulterà decisamente utile per comprendere il codice scritto dai vostri colleghi o presente oramai in articoli tecnici o nella documentazione di moltissime librerie.
REQUISITI
Conoscere un qualsiasi linguaggio di programmazione

Durata: 8 ore (1g)
Livello: Principiante
Versione Javascript: 6/7/8
Versione Typescript: 3.x
Tipologia: Corso in aula


TRASCRIZIONE DEL VIDEO
Ciao, mi chiamo Fabio Biondi, sono Google Developer Expert in web technologies.

Spesso quando chiedo agli sviluppatori che frequentano i miei corsi, principalmente su Angular e React, se conoscono Javascript mi rispondono di si. Tuttavia, non appena inizio a fargli qualche domande, mi rendo conto che invece non sono affatto preparati.

Se il vostro obiettivo è quello di utilizzare framework e librerie front-end moderne, questo corso Vi fornirà una solida base su Javascript, e vi sarà utile non solo per scrivere un codice più leggibile ed efficiente ma, da non sottovalutare, anche per essere in grado di comprendere il codice dei vostri colleghi più preparati o semplicemente per poter leggere documentazione e articoli che ormai danno per scontato molti concetti.

In questo corso vi parlerò quindi delle features e delle moltissime novità introdotte nelle ultime release del linguaggio Javascript (da ES6 in poi) con una breve introduzione su Typescript. Concetti indispensabili ormai per lavorare con i moderni framework e librerie front-end attualmente disponibili sul mercato, come Angular, React, Vue, SvelteJs, Web Components e molti altri.

Di cosa parleremo?

Dopo una breve introduzione sui transpiler, compilatori e Webpack esploreremo essenzialmente la sintassi e i costrutti fondamentali del linguaggio.

Inizialmente saranno affrontate tematiche fondamentali per un utilizzo corretto del linguaggio, dai comuni problemi legati al this, alle diffenze di un linguaggio che funziona by reference e non by value e tratteremo, inoltre, il concetto di immutabilità, fondamentale per incrementare le performance in framework e librerie come Angular o React... e alla base di Redux, uno state manager utilizzato nella maggior parte delle Single Page Applicazioni moderne per la creazione di architetture complesse e manutenibili.

Ma la maggior parte della giornata sarà dedicata alla comprensione dei nuovi costrutti offerti dal linguaggio Javascript come template literals, destructuring, arrow syntax, i nuovi metodi disponibili per array e oggetti, spread operator, Object.assign, moduli e le varie sintassi per gli import, classi e ereditarietà e molto altro. Moltissimi esempi pratici e casi d'uso molti dei quali realizzati attraverso degli strumenti che ho sviluppato per la formazione tramite i quali Vi farò inoltre capire cosa avviene dietro le quinte quando il codice viene compilato, un aspetto secondo me spesso sottovalutato ma di fondamentale importanza per comprendere realmente il codice che stiamo scrivendo.

Parleremo poi di Typescript, un superset di ES6 realizzato da Microsoft, alla base di framework come Angular ma utilizzato ormai moltissimo anche nella community React, Vue e in molte altre librerie o framework, affrontando tematiche come tipizzazione, Generics, interfacce, decoratori.

Inoltre, dato che i miei corsi sono sempre tarati e personalizzati sulla base del know-how dei partecipanti, se quest'ultimi non hanno esperienza nello sviluppo di applicazioni web, perché ad esempio si occupano principalmente di mobile o server, una piccola parte del corso sarà dedicata alla manipolazione del DOM, all'utilizzo di framework CSS e alla creazione di griglie e layout attraverso due degli strumenti CSS che ritengo fondamentali oggi giorno: flexbox e CSS Grid.
PROGRAMMA
JAVASCRIPT ES2015 (aka ES6)
Javascript ES2015
Compiler, Transpiler e tool: Babel, Typescript e Webpack
var vs let vs const: function scope vs block scope
Template Literals
Arrow syntax
Destructuring
Object.assign() e Object concise syntax
Rest e Spread operator
Immutabilità
Array methods: find, map, filter, reduce, some, every …
ES6 modules & imports
type="module" vs "nomodule"
Promises e operazioni asincrone
Classi e ereditarietà in ES6
TYPESCRIPT
Typescript vs ES6
Utilizzo dei types
Custom Types
Union Types
Generics
Interfacce
Introduzione ai decoratori
BONUS: DOM & CSS
Manipolazione DOM
CSS Selectors
Creazione Griglie e Layout con Flexbox
Introduzione a CSS Grid per la creazione di layout
Utilizzo di framework CSS come Bootstrap
MODALITÀ LEZIONI
TEORIA
javavascript-typescript-mode2
Sessioni di teoria per comprendere limiti e potenzialità del linguaggio: utilizzo del "this", immutabilità, ByReference vs ByValue, ...
SINGOLI ESEMPI
javavascript-typescript-mode1
Decine di esempi pratici, casi d’uso, tip&tricks e sugar syntax delle principali funzionalità del linguaggio



ESEMPIO LEZIONE
In questa breve video, esamineremo le :

"var" vs "let"
Block scope
Function scope
ISTRUTTORE:
FABIO BIONDI

profile-round-gde-1



TRAINER, SPEAKER, DEVELOPER
Fabio Biondi, front-end developer da quasi 20 anni, si occupa di formazione, sviluppo e consulenza in ambito enterprise.
Attualmente focalizzato principalmente su Angular, React, Redux, Fabio ha inoltre un solido background nella creazione di interfacce interattive, componenti e infografiche in HTML Canvas e D3.js.

Membro attivo e fondatore di diverse community italiane, collabora attivamente con molte realtà italiane per l'organizzazione di eventi, master, campus e corsi di specializzazione in cui ha formato centinaia di sviluppatori, studenti e team.

Nel 2018 ha ottenuto la qualifica di Google Developer Expert in Web Technologies e Angular e per diversi anni (2004-2011) è stato Adobe Certified Expert & Instructor (Flex, AIR, Flash PRO, Flash Catalyst).

2019-GDE-Angular-Badge
2019-GDE-Web-Technologies-Badge
RECENSIONIUTENTI

COSA INCLUDE IL CORSO
Corso di formazione on-site
8 ore (1g)
CheatSheet Javascript ES6
PDF formato A4
Slides Javascript ES6
PDF formato A4
Codice Sorgente
Incluso
Accesso al playground ES6 (snippet inclusi)
on-line
Attestato di partecipazione
PDF formato A4


FAQ
A chi è rivolto?
Principalmente a team e società che intendono organizzare corsi di formazione per un ristretto gruppo di persone (10-30).
Tuttavia, organizzo spesso corsi ed eventi aperti al pubblico in cui chiunque può partecipare (freelance, appassionati, dipendenti). Ti invito a seguirmi sui vari canali social o di iscriverti alla newsletter per rimanere aggiornato
Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
Assolutamente sì. Utilizza il form di contatto e organizzeremo volentieri una skype call o telefonata di confronto
Posso modificare il programma e creare un corso personalizzato ?
Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo definire un programma ad hoc tarato sulle vostre necessità e skill. Per i corsi più avanzati, solitamente, organizzo una skype call con i partecipanti in modo da valutare il grado di preparazione attraverso un'intervista e/o una sessione di code review (gratuita, della durata di 30/60 minuti)
Dove può essere erogato il corso?
• In Friuli, Ronchi dei Legionari (Gorizia) - Max 12/14 posti con seduta e tavolo oppure 80 posti solo seduta.
• On-Site, presso la vostra sede, in tutta Italia
Quanto costa?
Richiedi le mie tariffe attraverso il form di contatto specificando indirizzo in cui erogare il corso, il periodo e la durata
Cè un quantitativo minimo di giornate da acquistare?
Vivendo a Trieste, i viaggi per raggiungere le sedi dei corsi sono spesso lunghi, faticosi e non privi di imprevisti.
Per questo motivo il numero di giornate minimo affinché si possa organizzare un corso è due, nel caso la durata del viaggio sia inferiore alle 3 ore. Tre giornate, invece, nel caso di una durata maggiore
Il corso prevede esercitazioni per gli studenti?
La scelta è vostra. È possibile effettuare 1 o 2 ore di esercitazioni al giorno oppure lasciare spazio agli argomenti del corso ed approfondimenti
Devo portare il mio laptop?
È necessario solo se intendete configurare l'ambiente di lavoro o effettuare esercitazioni. Un blocco appunti e una penna sono più che sufficienti dato che, dopo il corso, avrete comunque accesso al materiale tramite un'area riservata (slide, esercitazioni, source code)