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