Привет, Хабр! Представляю вашему вниманию перевод статьи "A Practical Guide To Become a Senior Frontend Developer" автора Seifeldin Mahjoub.

Карантин может стать твоим звездным часом

Есть несколько определений для звания 'Senior', и меняются они от компании к компании. И, понятное дело, требуются много навыков, как hard skills, так и soft skills. Крис Коер написал статью о характерных чертах и склонностях в поведении, которые должны быть у сеньёра фронтенд разработчика, что даёт хорошую картинку в целом.

В этой статье мы затронем 13 вещей, которые вы можете сделать в нынешних условиях, чтобы, когда все закончится, вы смогли стать сеньёр фронтенд разработчиком.

1. Овладеть основами

Сеньёру должно быть очень комфортно иметь дело с HTML, JS и CSS. К тому же, они должны владеть базовыми концепциями того, как работает интернет, включая браузеры, сети и сервера.

Это значит, что такие концепции, как прототипы, всплытие событий, call stack, promise, es6 для вас не пустой звук. То же касается CSS, анимаций, grid-систем, соглашений об наименованиях, и спецификациях.

Необходимо знать многочисленные концепции, ниже вы сможете найти некоторые ресурсы, по которым вы сможете пробежаться и восполнить знания, которых вам не хватает, по крайней мере пока что. CSS Reference, Html Reference, Javascript Fundamentals, Frontend Handbook.

2. Начинайте с чтения документации.

Большинство разработчиков любопытны и хотят сразу перейти к написанию кода и экспериментам над ним. Все это хорошо и весело, но это не самый эффективный способ овладеть фреймворком или инструментами.

Чтение документации поможет вам сэкономить время истязаний клавиатуры в попытках выяснить как работает та или иная фича. К тому же, это убережёт вас от повторной реализации фич, о существовании которых вы не знаете.

Убедитесь, что вы прочли документацию ЦЕЛИКОМ, как ваш путеводитель к пониманию всех деталей фреймворка.

Ответы на большинство ваших вопросов можно найти в доках. Если нет, то вы поучаствуете в разработке фреймворка и поможете другим, 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. от переводчика:

Я сам не сеньёр, но стремлюсь к этому. Также, очень советую роадмапу для фронтеда для тех, кто стал на тот же путь. Помогает систематизировать самообучение.

Спасибо за внимание!