134 lines
2.8 KiB
Markdown
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/)
|
|
-
|