ContextQMD
Back to Professional Programming

Front-end development practices

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

latest2.8 KB
Original Source
<!-- 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

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

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
  • 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, in particular: