Bonjour, Habr! Je vous présente la traduction de l'article "Un guide pratique pour devenir développeur frontend senior" par Seifeldin Mahjoub.
La quarantaine peut être votre point fort
Il existe plusieurs définitions pour le titre «Senior», et elles varient d'une entreprise à l'autre. Et, bien sûr, il faut beaucoup de compétences, à la fois des compétences dures et des compétences générales. Chris Coeur a écrit un article sur les caractéristiques et les tendances comportementales qu'un développeur front-end senior devrait avoir, ce qui donne une bonne image en général.
Dans cet article, nous couvrirons 13 choses que vous pouvez faire dans l'environnement actuel, de sorte que lorsque tout sera terminé, vous pourrez devenir un développeur front-end senior.
1. Maîtrisez les bases
Senjor devrait être très à l'aise avec HTML, JS et CSS. De plus, ils doivent être familiarisés avec les concepts de base du fonctionnement d'Internet, y compris les navigateurs, les réseaux et les serveurs.
Cela signifie que les concepts tels que les prototypes, les popups d'événement, la pile d'appels, la promesse, es6 ne sont pas des mots vides pour vous. Il en va de même pour les CSS, les animations, les systèmes de grille, les conventions de dénomination et les spécifications.
Vous devez connaître de nombreux concepts, vous trouverez ci-dessous quelques ressources que vous pouvez parcourir et compléter les connaissances qui vous manquent, du moins pour l'instant. Référence CSS , HTML référence , Fundamentals Javascript , Manuel Frontend .
2. Commencez par lire la documentation.
La plupart des développeurs sont curieux et veulent passer directement à l'écriture de code et à l'expérimentation. Tout cela est bon et amusant, mais ce n'est pas le moyen le plus efficace de maîtriser un framework ou des outils.
. , , .
, , .
. , , win-win.
3.
CLI, angular-cli create-react-app.
, .
, , , . 'nice-to-have' , , , git .
, , (webpack/parcel), .
4. (style guide)
, , .
Style guide (Best practices), .
, , , vue-eslint-plugin.
— . , , , .
, , , , , DOM .
dev tools console.log debugger.
6.
Vue React . , .
, DOM . DOM DOM-.
, , , .
( Vue), , Vuejs, .
7.
— . .
.
Advance Vuejs Component Patterns
Advanced React Component Patterns .
8.
— .
, , , , , .
, react-hooks, , Vue, Vue-composition API Mixins.
, .
9.
, , .
, , , , .
, flux pattern, event emissions callbacks props.
Vue-.
10. -
, , , , , .
, , , .
unit , snapshot e2e .
.
11.
- , , . , .
, , , .
, . , React, Angular, Vue Stencil, . , .
12.
, , , . , .
, , Jamstack, accessibility, , , service workers, , .
13.
, , . , , .
-, , , , , .
. , . , .
P.S. :
, . , , . .
!