From cde2efb62c4101036902a0158de97044d693952b Mon Sep 17 00:00:00 2001
From: Charles-Axel Dein <ca@d3in.org>
Date: Tue, 10 Nov 2020 15:00:08 +0100
Subject: [PATCH] Add front-end dev practices

---
 .../06-front-end-development-practices.md     | 64 +++++++++++++++++--
 1 file changed, 60 insertions(+), 4 deletions(-)

diff --git a/training/front-end/06-front-end-development-practices.md b/training/front-end/06-front-end-development-practices.md
index 2e7f756..9cb18b5 100644
--- a/training/front-end/06-front-end-development-practices.md
+++ b/training/front-end/06-front-end-development-practices.md
@@ -3,20 +3,48 @@
 ## Table of Contents
 
 - [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)
-  - [State management](#state-management)
+  - [Components of a complex web app](#components-of-a-complex-web-app)
+    - [State management](#state-management)
+    - [Error handling](#error-handling)
+    - [CSS](#css)
+    - [Developer experience](#developer-experience)
+  - [Building and deploying](#building-and-deploying)
+    - [Bundling](#bundling)
+    - [Compiling](#compiling)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 # Front-end development practices
 
+## Goal of this session
+
+We are reaching the end of our journey... Training can't teach you everything - you'll have to get your hands dirty to learn about front-end development. That being said, in this session we will try to look at all the moving pieces that are necessary to be dangerous in modern front-end development.
+
+## TypeScript
+
+See [TypeScript](./03-typescript.md)
+
+## Package
+
+- npm
+- yarn
+
 ## Testing
 
+- jest
+
 ## Code style
 
+- prettier
+- eslint
+
 ## Security
 
 - HTTPS
@@ -27,8 +55,36 @@
 
 ## Dependency management: npm or yarn
 
-## State management
+## Components of a complex web app
 
-- Redux
+### State management
+
+- Redux (and redux-thunk, redux-saga, redux-observables)
 - useReducer
-- Flux
+
+### Error handling
+
+- Error boundaries
+
+### CSS
+
+- CSS-in-JS
+- styled-components
+
+### Developer experience
+
+- Storybook
+- Debugging with the React extension
+- Performance and profiling
+
+## Building and deploying
+
+### Bundling
+
+- webpack
+- parcel
+- rollup
+
+### Compiling
+
+- babel