Vai al contenuto

Videocorso Elm CGFA

Siti e applicazioni web senza errori a runtime, con un linguaggio funzionale semplice e un compilatore che ti guida

  • Partenza: Base
  • 11 ore con gli esercizi
  • 10 lezioni in 3 livelli
  • 2 lezioni gratis
Inizia la prima lezioneSblocca il corso

A chi serve

Chi sa un po' di HTML e di JavaScript e vuole provare un modo nuovo e sicuro di costruire interfacce web: sviluppatori front-end, curiosi della programmazione funzionale

Cosa serve per iniziare

  • Aver visto un po' di HTML e di JavaScript (basta poco)
  • Un computer Windows, Mac o Linux
  • Un editor come Visual Studio Code

Cosa installare

Elm 0.19.1Si scarica gratis dal sito ufficiale elm-lang.org, pagina "Install" (installer per Windows e Mac), oppure con npm install -g elm
Visual Studio Code con "Elm Language Support"Estensione gratuita che evidenzia gli errori mentre scrivi; installa anche elm-format per l'ordine automatico del codice
EllieEditor online gratuito (ellie-app.com) per provare il codice Elm nel browser senza installare niente

A cosa ti serve

  • Sviluppatore front-end in aziende che puntano sull'affidabilità
  • Interfacce web senza errori a runtime (nessun "undefined is not a function")
  • Applicazioni web da integrare dentro siti esistenti
  • Passaggio verso altri linguaggi funzionali (Haskell, F#, Gleam) e verso strumenti come Redux, la cui architettura è ispirata a quella di Elm

Programma del corso

10 lezioni in 3 livelli. Ogni lezione: video, spiegazione, codice da copiare o provare, esercizio con soluzione e quiz.

1

Base

Il linguaggio: valori, funzioni, liste, record e tipi personalizzati

1Cos'è Elm e il primo programmaCapire perché Elm è diverso da JavaScript, installarlo e provare le prime espressioni nel REPL.Gratis20 min2Valori, tipi e funzioniDefinire valori e funzioni in un file Elm, scrivere le annotazioni di tipo e usare if e let.Gratis25 min3Liste, record e MaybeLavorare con liste (map, filter), record con campi e valori che possono mancare con Maybe.30 min4Tipi personalizzati e caseCreare tipi con più varianti e gestirle tutte con case...of.30 min
2

Intermedio

L'architettura Elm: pagine interattive, moduli di input e dati dal server

1L'architettura Elm: Model, Update, ViewCostruire una pagina interattiva con Browser.sandbox, capendo il ciclo Model, Msg, update e view.35 min2Moduli di input e liste interattiveLeggere ciò che scrive l'utente con onInput, aggiornare un record e mostrare una lista.35 min3Dati dal server: Http e Json.DecodeScaricare un file JSON, trasformarlo in tipi Elm con i decoder e mostrare caricamento ed errori.40 min
3

Avanzato

Comandi e abbonamenti, dati sicuri, test e integrazione con JavaScript

1Browser.element, Cmd e SubCostruire un programma completo con init, subscriptions, tempo reale e valori iniziali (flags).40 min2Dati sicuri: Result, tipi opachi e stati impossibiliValidare i dati con Result e modellare i tipi in modo che i valori sbagliati non possano esistere.40 min3Test, ottimizzazione e integrazione con JavaScriptScrivere test con elm-test, compilare per la produzione e inserire Elm in una pagina con flags e ports.40 min

Progetto finale: Il catalogo interattivo della bottega

Costruisci una piccola pagina in Elm che scarica l'elenco dei prodotti da un file JSON, lo mostra con prezzo, permette di filtrare scrivendo in un campo e calcola il totale del carrello. Usa l'architettura Model, Update, View, Http, i decoder e un tipo personalizzato per lo stato della pagina.

I passi

  1. Crea la cartella catalogo, lancia elm init e installa elm/http e elm/json.
  2. Scrivi prodotti.json con almeno quattro prodotti (nome e prezzo).
  3. Definisci type alias Prodotto e il decoder con Decode.map2.
  4. Definisci lo Stato (Caricamento, Fallito, Pronto) e i Msg (Ricevuti, CambiaFiltro, Aggiungi).
  5. Scrivi update, con Http.get in init, e restituisci sempre modello e Cmd.
  6. Nella view mostra caricamento, errore o lista filtrata con List.filter e String.contains.
  7. Calcola il totale del carrello con List.sum e List.map .prezzo.
  8. Compila con elm make --optimize e prova la pagina con elm reactor.

Esame e attestato

Alla fine del corso fai l'esame: 15 domande, serve il 75% di risposte giuste. Superato l'esame ottieni l'attestato stampabile con nome, ore, punteggio e un codice di controllo che chiunque può verificare.

Vai all'esame

Glossario di Elm

Elm
Un linguaggio funzionale per il web che compila in JavaScript, senza errori a runtime.
REPL
Una console in cui provi espressioni e vedi subito risultato e tipo.
Tipo
La descrizione di che genere di valore è qualcosa: Int, Float, String, List.
Annotazione di tipo
La riga con i due punti che dichiara i tipi di una funzione.
Record
Un gruppo di dati con nome, come una scheda con più campi.
Maybe
Un tipo che dice che un valore può esserci (Just) oppure mancare (Nothing).
Tipo personalizzato
Un tipo che elenca le sue varianti possibili, come Nuovo, Spedito, Consegnato.
Model
I dati dell'applicazione in un certo momento.
Msg
Il tipo che elenca tutto ciò che può succedere nell'applicazione.
Cmd
Un comando da eseguire fuori da Elm, come una richiesta Http.
Decoder
Una ricetta che trasforma un JSON in valori Elm tipizzati.
Port
Un canale tipizzato per far parlare Elm e JavaScript.

Le prime 2 lezioni sono gratis

Per il corso completo, scuole e aziende: chiedi le condizioni.

Inizia oraRichiedi maggiori informazioni