From a1125556c4b4a79c3c0b9bd6bfb6f2ca850ccdfc Mon Sep 17 00:00:00 2001
From: Charles-Axel Dein <ca@d3in.org>
Date: Fri, 20 Nov 2020 17:24:00 +0100
Subject: [PATCH] Improve front training

---
 training/front-end/03-typescript.md           | 12 ++-
 .../06-front-end-development-practices.md     | 85 ++++++++++++++-----
 2 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/training/front-end/03-typescript.md b/training/front-end/03-typescript.md
index 664f15c..dde1fba 100644
--- a/training/front-end/03-typescript.md
+++ b/training/front-end/03-typescript.md
@@ -3,8 +3,6 @@
 ## Table of Contents
 
 - [TypeScript](#typescript)
-  - [Differences between TypeScript and JavaScript](#differences-between-typescript-and-javascript)
-  - [An introduction to TypeScript's type system](#an-introduction-to-typescripts-type-system)
   - [Exercises](#exercises)
   - [References](#references)
 
@@ -12,9 +10,15 @@
 
 # TypeScript
 
-## Differences between TypeScript and JavaScript
+- Intro for JS dev: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
+- Intro for OOP dev: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html
+- The handbook: https://www.typescriptlang.org/docs/handbook/intro.html
+- Intro for FP programmers: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html
 
-## An introduction to TypeScript's type system
+❓ questions to ask:
+
+- What is the difference between structural and nominal type systems?
+    - TS: structural type system. Relationships between types are determined by the properties they contain.
 
 ## Exercises
 
diff --git a/training/front-end/06-front-end-development-practices.md b/training/front-end/06-front-end-development-practices.md
index 9cb18b5..5f45ca9 100644
--- a/training/front-end/06-front-end-development-practices.md
+++ b/training/front-end/06-front-end-development-practices.md
@@ -5,19 +5,24 @@
 - [Front-end development practices](#front-end-development-practices)
   - [Goal of this session](#goal-of-this-session)
   - [TypeScript](#typescript)
-  - [Package](#package)
-  - [Testing](#testing)
-  - [Code style](#code-style)
-  - [Security](#security)
-  - [Dependency management: npm or yarn](#dependency-management-npm-or-yarn)
-  - [Components of a complex web app](#components-of-a-complex-web-app)
+  - [Building a professional web app: topics](#building-a-professional-web-app-topics)
+    - [Dependency management: npm or yarn](#dependency-management-npm-or-yarn)
+    - [Testing](#testing)
+    - [Code style](#code-style)
+    - [Security](#security)
     - [State management](#state-management)
+    - [Interaction with the backend](#interaction-with-the-backend)
     - [Error handling](#error-handling)
     - [CSS](#css)
     - [Developer experience](#developer-experience)
-  - [Building and deploying](#building-and-deploying)
-    - [Bundling](#bundling)
-    - [Compiling](#compiling)
+    - [Building and deploying](#building-and-deploying)
+      - [Bundling](#bundling)
+      - [Compiling](#compiling)
+      - [Deploying](#deploying)
+      - [Monitoring](#monitoring)
+    - [Performance](#performance)
+    - [PWA (progressive web apps)](#pwa-progressive-web-apps)
+  - [See also](#see-also)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -31,21 +36,23 @@ We are reaching the end of our journey... Training can't teach you everything -
 
 See [TypeScript](./03-typescript.md)
 
-## Package
+## Building a professional web app: topics
+
+### Dependency management: npm or yarn
 
 - npm
 - yarn
 
-## Testing
+### Testing
 
 - jest
 
-## Code style
+### Code style
 
 - prettier
 - eslint
 
-## Security
+### Security
 
 - HTTPS
 - CORS
@@ -53,14 +60,15 @@ See [TypeScript](./03-typescript.md)
 - CSP
 - OWASP
 
-## Dependency management: npm or yarn
-
-## Components of a complex web app
-
 ### State management
 
-- Redux (and redux-thunk, redux-saga, redux-observables)
-- useReducer
+- Redux (and redux-thunk, redux-saga, redux-observables). Also: [General | Redux](https://redux.js.org/faq/general)
+- Mobx
+- `useReducer`, `useContext`, `useState`
+
+### Interaction with the backend
+
+- GraphQL and Apollo
 
 ### Error handling
 
@@ -70,6 +78,13 @@ See [TypeScript](./03-typescript.md)
 
 - CSS-in-JS
 - styled-components
+- Emotion
+
+Frameworks:
+
+- Material UI
+- Tailwind CSS
+- CSS-first (no JS components) vs other frameworks
 
 ### Developer experience
 
@@ -77,14 +92,40 @@ See [TypeScript](./03-typescript.md)
 - Debugging with the React extension
 - Performance and profiling
 
-## Building and deploying
+### Building and deploying
 
-### Bundling
+#### Bundling
 
 - webpack
 - parcel
 - rollup
 
-### Compiling
+#### Compiling
 
 - babel
+
+#### Deploying
+
+- SSR vs. CSR vs. SSG
+
+#### Monitoring
+
+- Sentry
+
+### Performance
+
+- Lighthouse
+- Devtools
+
+### PWA (progressive web apps)
+
+- Web Sockets
+- Service Workers
+- Payments
+
+## See also
+
+See references in [README.md](./README.md), in particular:
+
+- [Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!](https://frontendmasters.com/books/front-end-handbook/2019/)
+-