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

Table of Contents

• Front-end development practices
  • Goal of this session
  • TypeScript
  • Package
  • Testing
  • Code style
  • Security
  • Dependency management: npm or yarn
  • Components of a complex web app
    • State management
    • Error handling
    • CSS
    • Developer experience
  • Building and deploying
    • Bundling
    • 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

Package

• npm
• yarn

Testing

• jest

Code style

• prettier
• eslint

Security

• HTTPS
• CORS
• XSS prevention
• CSP
• OWASP

Dependency management: npm or yarn

Components of a complex web app

State management

• Redux (and redux-thunk, redux-saga, redux-observables)
• useReducer

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