# Details of AW1 / WA1

## Dettaglio corso

- ogni settimana: 3 ore di lezione/esercitazione
- ogni settimana: 1,5 ore di laboratorio (eccetto la prima settimana?)
- soluzione 2-3 settimana dopo.

## Tools
- VSCode in Linux (o WSL su Win10)
- Firebase (with authentication): per vedere un po' di storage cloud.
- node.js, express per REST, webpack

## Guides/Books/Biblio
- JS: ?
- React: primi capitoli di "Fullstack React -The Complete Guide to ReactJS and Friends", by Anthony Accomazzo etc, 2016-2019

## Sample apps / guides
- 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

## 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

## 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

## Course detailed organization

### Lecture 1: HTTP, HTML/CSS (reharsal)

* Web architecture and HTTP protocol
* HTML5, CSS
* Sample "traditional" web app 1.0 (with dynamic part on server, e.g., PHP-like, as seen in DB course at Polito)
* Development tools in the browser (including HTTP tab network)
* Hosting on servers (use of local node.js with npm package http-server)
* Principles of design
* LAB: Create a simple web page with some CSS formatting, analyze/debug it with browser development tools. Use of a simple web server based on node.js and a basic HTTP server (NO express)

### Lecture 2: Complex Layouts, Accessibility, Usability

* Complex layouts
* Advanced CSS and libraries
* Usability and Accessibility (WCAG, ARIA)
* Good practices(Accessibility testing)
* LAB: Create a complex web page layout copying an existing website, using a standard CSS library (e.g., Bootstrap)

### Lecture 3: Introduction to JS

* JS as a programming language (C syntax, Python semantic): phylosophy and peculiarities ("comportamenti strani a cui fare attenzione")
* JS execution in the browser
* JS execution in other environments (Node)
* LAB: JS Programming exercise
* In node.js (via VScode)
* In the browser

*??? Forms: where to put them?*

### Lecture 4: Advanced JS

* DOM
* Events
* Callbacks
* Closures (NO Functional programming)
* ??async/wait??
* LAB: JS "complex" exercise (???Enrico: with callbacks and some async programming e.g. at least timers or similar)

*Note: Browser recenti, app "gestionali"*

### Lecture 5: DOM manipulation in JS

* Simple DOM manipulations in JS
* Example: Forms+tables ?????, Filtering a table (ModelView on a data structure. Hide all, show X,Y; maybe ask the list to a server as autocompletion feature)
* LAB: Simple DOM manipulation, maybe using mustache.js??? Malnati: library for templating.

### Lecture 6: AJAX and REST interaction

* Ajax
* Promise/Fetch
* JSON
* REST
* HTTP verbs
* LAB: Example of simple Read&Store (Table with remote completion, NOT message board), with REST server already provided

*MISSING: authentication?*

### Lecture 7: Introduction to Firebase

* Firebase
* Login on Firebase
* CRUD on Firebase
* JSONP
* Subscription on JSON tree in Firebase
* LAB: Firebase exercise (shopping list - populated by many users at the same time, showing auto-sync(???))

### Lecture 8: Single page applications

* Single page applications
* Reactive programming (in theory) [Antonio: cioe' templating {{}} ]
* LAB: ???Enrico: experimenting with a provided single page application ????

### Lecture 9: Intro to React

* npm and modules
* Intro to React
* MVC/MVVM patterns
* LAB: Hello world in React.

### Lecture 10: Web Component e JSX

* Web components
* JSX
* LAB: Costruction of a complex page with components and JSX but NOT dynamic

### Lecture 11: Architecture of an application

* Routing
* Events
* State
* App and data model
* LAB: Porting of the chat / table of products in React

### Lecture 12: ... free buffer ...

* ...
* LAB: ...

### Lecture 13: Examples of complex applications

* Deploy
* LAB: Working on the final project

### Lecture 14: ... ci sara'?