professional-programming/training/front-end/06-front-end-development-practices.md
2020-11-22 15:42:40 +01:00

134 lines
2.8 KiB
Markdown

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