professional-programming/training/front-end/06-front-end-development-practices.md

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table of Contents

- [Front-end development practices](#front-end-development-practices)
  - [Goal of this session](#goal-of-this-session)
  - [TypeScript](#typescript)
  - [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)
      - [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 -->

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

## Building a professional web app: topics

### Dependency management: npm or yarn

- npm
- yarn

### Testing

- jest

### Code style

- prettier
- eslint

### Security

- HTTPS
- CORS
- XSS prevention
- CSP
- OWASP

### State management

- 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
- redux-saga et al.
- Hooks for API handling

### Error handling

- Error boundaries

### CSS

- CSS-in-JS
- styled-components
- Emotion

Frameworks:

- Material UI
- Tailwind CSS
- CSS-first (no JS components) vs other frameworks

### Developer experience

- Storybook
- Debugging with the React extension
- Performance and profiling

### Building and deploying

#### Bundling

- webpack
- parcel
- rollup

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