# Applicazioni Web 1 / Web Applications 1

Ipotesi:

- ogni settimana: 3 ore di lezione/esercitazione
- ogni settimana: 1,5 ore di laboratorio (eccetto la prima settimana?)
- soluzione 2-3 settimana dopo.
- USARE: firebase con authentication, Webstorm o VSCode, github.
- IPOTESI: FARE lato client; backend [nodejs+express web server rest]; Firebase per un po' di storage e vedere un po' di cloud.

## Meeting 20191206. Concordato:
- Piattaforma: Linux (nodejs etc., al massimo WSL su Win10)
- Far vedere un minimo di lato server, fatto in proprio con nodejs, poi passare a framework per evitare di perdere tempo in metodi "stupidi"

- Opzioni backend
- **self hosted**, open source: esistono framework ragionevoli?
- Antonio: Parse (by Facebook); Hood.ie (offline first)
- **firebase** (free ma richiede carta credito per funzioni con logica)
- Alternative? piattaforma cloud con functions da mettere a disposizione (Google Amazon Azure Heroku IBMBlueMix)

- **cloud vero**, comunque, provare ad usarlo
- firebase datastore: solo database ma niente logica
- storage + microservices (lambda, servizi, callback)
- backend di storage + logica fatto da sviluppatore (es. nodejs, express): vantaggio che vedi anche un server da qualche parte

- App di esempio
- twitter? DB di amici. Tweet di quelli che seguo NON deve essere lato client!
- tweet dei followers: fatto bene serve minimo di logica server
- doodle
- rogna con le date
- gioco a premi online 2 volte al giorno: 20 domande etc.... in sincrono su tutto il mondo, se sbagli sei fuori dalla vincita, se rispondi a tutte e 20 concorri all'estrazione

## Note su cosa fare/non fare
- JS: let e const e basta, non approfondire aspetti di JS vecchio (var etc.)
- JS asincrono serve almeno per il server
- serve conoscere un minimo di DOM e JS
- in React il DOM non lo vedi neanche (virtualDOM)
- Programma: per Firebase SDK 3 ore e' eccessivo
- Firebase ti nasconde reattivita' lato client (subscription ecc.): websocket, longpolling, server side events.
- alternativa: framework che ti generano il codice del server REST, non bello
- OK per provare a fare un'API che ti fai tu sul tuo server, NO fare che trovi tutto in cloud. NO fare un database esplicito, usare Firebase anche da backend se necessario
- API se solo storage: si usa gia' fatte (es. Firebase)
- API con logica: me lo faccio su mia piattaforma (es. expressjs in nodejs) o su servizio cloud. Da nodejs, se necessario, prendi i dati da firebase, invece di farglieli prendere dal browser

| #S | Lezione/Esercitazione | Laboratorio | Note |
|-----------|-----------------------|-------------|------|
| 1 | Architettura web con protocollo HTTP. Esempio app web 1.0 (tipo basi dati ma con nostro node.js). HTML5, CSS. Development tools del browser (scambio HTTP tab network). Hosting su server (node.js locale). Nozioni di design. | Crea una pagina web semplice | Richiami di nozioni in buona parte note dalla triennale. Client-only. |
| 2 | Layout complessi / CSS avanzato. Usabilità, Accessibilità (WCAG, ARIA). Buone prassi. (Accessibility testing) | Crea una pagina complessa copiando da un sito esistente | |
| 3 | Introduzione a Javascript come linguaggio (sintassi C, semantica PY). Esecuzione nel browser. Esecuzione in Node. (events?) | Esercizio di programmazione JS | Forms |
| 4 | DOM. Eventi. Callback. Closures. (NO Progr. funzionale). ??async/wait?? | Esercizio più complesso. | Browser recenti, app "gestionali" |
| 5 | Forms+tabelle Filtering di una tabella (ModelView su struttura dati. Hide tutto, mostra X,Y; eventualmente chiedere lista a server per sorta di autocompletion). | Semplici manipolazioni DOM in JS | Malnati: libreria templating. mustache.js |
| 6 | Ajax. Promise/Fetch. JSON. REST. verbi HTTP. Promise/fetch. Pattern JS principali | Semplice Read&store (tabella con completion remota (NON message board)) con server REST già fornito | |
| 7 | Introduzione a Firebase. Login su Firebase. CRUD su Firebase. JSONP. Subscription su albero JSON su Firebase | Esercizio Firebase (shopping della lista - multiutente) | |
| 8 | Single page applications. Reactive programming (in theory) | | React |
| 9 | npm/moduli. Intro react. MVC/MVVM | Hello world in React. | |
| 10 | Web Component e JSX | Costruzione pagina complessa con componenti + JSX (per ora non dinamica) | |
| 11 | Architettura di un'applicazione. Routing. Eventi. Stato. App e modello dati. | Porting della chat/tabella oggetti-prodotti in React | |
| 12 | ??? (+) | | |
| 13 | Sviluppo applicazioni complesse (esempi). Deploy. | Lavoro su progetto | |
| 14 | Sviluppo applicazioni complesse (esempi) | Lavoro su progetto | |

(+) sono sicuro al 99% che sforeremo con gli argomenti precedenti, per cui le settimane 12 e 13 sono un po' "tampone"