So werden Sie Senior Frontend Developer

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "Ein praktischer Leitfaden, um ein Senior Frontend-Entwickler zu werden" von Seifeldin Mahjoub.


Quarantäne kann Ihr Höhepunkt sein


Es gibt verschiedene Definitionen für den Titel "Senior", die von Unternehmen zu Unternehmen unterschiedlich sind. Und natürlich sind viele Fähigkeiten erforderlich, sowohl harte als auch weiche. Chris Coeur schrieb einen Artikel über die Eigenschaften und Verhaltenstendenzen, die ein erfahrener Front-End-Entwickler haben sollte, der im Allgemeinen ein gutes Bild vermittelt.


In diesem Artikel werden 13 Dinge behandelt, die Sie in der aktuellen Umgebung tun können, damit Sie, wenn alles vorbei ist, ein leitender Front-End-Entwickler werden können.


1. Beherrsche die Grundlagen


Senjor sollte mit HTML, JS und CSS sehr vertraut sein. Darüber hinaus müssen sie mit den grundlegenden Konzepten der Funktionsweise des Internets vertraut sein, einschließlich Browsern, Netzwerken und Servern.


Dies bedeutet, dass Konzepte wie Prototypen, Ereignis-Popups, Aufrufstapel, Versprechen, es6 für Sie keine leeren Wörter sind. Gleiches gilt für CSS, Animationen, Rastersysteme, Namenskonventionen und Spezifikationen.


Sie müssen zahlreiche Konzepte kennen. Im Folgenden finden Sie einige Ressourcen, mit denen Sie das fehlende Wissen zumindest vorerst ausgleichen können. CSS-Referenz , HTML-Referenz , Javascript-Grundlagen , Frontend-Handbuch .


2. Lesen Sie zunächst die Dokumentation.


Die meisten Entwickler sind neugierig und möchten direkt Code schreiben und damit experimentieren. All dies ist gut und macht Spaß, aber es ist nicht der effektivste Weg, ein Framework oder Tools zu beherrschen.


. , , .


, , .


. , , 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.


5. Devtools


— . , , , .


, , , , , 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. :


, . , , . .


!


All Articles