KrzysztofNyrek/frontend-roadmap

Frontend 2020 — czego warto się nauczyć?

Linki do odcinków

• Co warto wiedzieć w 2019
• Co warto wiedzieć w 2020

Narzędzia ogólne

• Visual Studio Code - darmowe
• Sublime Text - darmowe
• Webstorm
• Przeglądarka – devtools
  • Chrome DevTools
  • Firefox Developer Tools
  • GitHub - facebook/react-devtools
  • GitHub - vuejs/vue-devtools
  • GitHub - zalmoxisus/redux-devtools
• Projektowanie
  • Sketch - The digital design toolkit
  • Figma - darmowe
  • InVision Studio
  • Framer X
  • Adobe XD - darmowe

Front-end – ogólne

• HTML Semantyczny
  • Tomasz Jakut – Semantyczny blog w HTML5
• CSS
  • SCSS/Sass
  • styled-components
  • Bulma
• Storybook
• RWD
  • CSS Grid
  • CSS Flexbox
• The math of CSS Locks
• Progressive Web Apps
• Mikrofrontendy

Front-end – część JavaScriptowa

• ES6+
• TypeScript

Frameworki

• Angular

  • Angular Framework
  • Angular Material
  • Angular CLI
  • State Management (wybierz jeden)
    • NGRX
    • NGXS
    • Akita

• React

  • State Management (wybierz jeden)
    • Mobx
    • Redux

• Vue.js

  • State Management
    • Vuex

• Angular

• SSR

  • Next.js
  • Nuxt.js

• JAM Stack

  • GatsbyJS
  • Netlify
  • Heroku
  • CMS
    • DatoCMS
  • Usługi w chmurze
  • Firebase – fajne dla początkujących
  • Amazon Web Services

• GraphQL

• Server Side Language

  • Node.js
  • Express.js
  • Fastify
  • Nest.js
  • Oczywiście możliwości jest wiele więcej (Python, RoR etc.)

Narzędzia projektowe

• Package managery (wybierz jeden)
  • npm
  • Yarn
• npx package runner
• Webpack
• Babel
• Prettier
• ESLint

Bonus:

• Machine Learning
  • Polecam – Neural networks in JavaScript | Scrimba.com
• WebAssembly