Привет, Хабр! Представляю вашему вниманию перевод статьи «Практическое руководство, как стать старшим фронтенд-разработчиком» Сейфельдин Махджуб.
Карантин может стать вашим звездным часом
Существует несколько определений титула «Сеньор», и они различаются от компании к компании.И, конечно же, требуется множество навыков, как жестких, так и мягких навыков.
Крис Коер написал статья о характерных чертах и поведенческих наклонностях, которыми должен обладать старший фронтенд-разработчик, что в целом дает хорошую картину.
В этой статье мы коснемся 13 вещей, которые вы можете сделать в нынешних условиях, чтобы, когда все это закончится, вы могли стать старшим фронтенд-разработчиком.
1. Освойте основы
Старший должен хорошо разбираться в HTML, JS и CSS. Кроме того, они должны иметь базовое представление о том, как работает Интернет, включая браузеры, сети и серверы.Это означает, что такие понятия, как прототипы, пузырьки событий, стек вызовов, обещание, es6, для вас не пустые слова.
То же самое касается CSS, анимации, систем сеток, соглашений об именах и спецификаций.
Существует множество концепций, которые необходимо знать.
Ниже вы можете найти некоторые ресурсы, которые вы можете изучить и восполнить те знания, которых вам не хватает, по крайней мере, на данный момент. Справочник CSS , Справочник HTML , Основы Javascript , Справочник по интерфейсу .
2. Начните с чтения документации.
Большинству разработчиков любопытно, и они хотят сразу приступить к написанию кода и экспериментам с ним.
Это все хорошо, но это не самый эффективный способ освоить структуру или инструменты.
Чтение документации поможет вам сэкономить время, мучаясь с клавиатурой, пытаясь разобраться, как работает та или иная функция.
Кроме того, это избавит вас от повторной реализации функций, о существовании которых вы даже не подозревали.
Обязательно прочтите ВСЮ документацию, которая поможет вам понять все детали фреймворка.
Ответы на большинство ваших вопросов можно найти в документации.Если нет, то вы будете участвовать в развитии фреймворка и помогать другим, беспроигрышный вариант.
3. Понимание процесса сборки
Большинство фреймворков предоставляют готовый процесс сборки с использованием CLI, например angular-cli или create-react-app. Вам необходимо знать, что происходит за кулисами, чтобы иметь возможность изменять и настраивать сборку по мере разработки приложения.Начните с понимания таких важных понятий, как транспиляция, сборка, минификация и упаковка.
Позже вы можете перейти к «неплохим» функциям, таким как линтеры, горячие перезагрузки и git-хуки.
Как только вы почувствуете уверенность в своих знаниях, соберите все части пазла воедино, выбрав один из популярных ассемблеров (webpack/parcel), и начните создавать свое первое приложение с нуля .
4. Прочтите руководство по стилю кодирования.
Антишаблоны и ловушки встречаются чаще, чем вы думаете, вы можете учиться на ошибках других и избежать больших потерь драгоценного времени для вас и вашей компании.
Руководство по стилю содержит большое количество полезных практик (Best Practices), которые помогут вам еще лучше понять фреймворк и выработать общий стиль кодирования с вашей командой.
Вы также можете обеспечить соблюдение правил с помощью линтеров, например.
5. Используйте инструменты разработчика
Отладка — один из самых ценных инструментов в вашем арсенале.Разработчики обычно читают много кода, а затем пишут его, поэтому очень важно иметь возможность быстро отладить код. Используя расширения отладки браузера, вы можете просматривать и изменять состояние компонентов, изменять свойства, отслеживать пользовательские события, наблюдать за изменениями маршрутов, находить свои компоненты в DOM и многое другое.
Освоение инструментов разработки значительно повысит вашу производительность по сравнению с простым использованием console.log или отладчика.
6. Понимать реактивность
Vue и React построены на системах реактивности.Понимание этих идей поможет вам понять, как работает платформа, и оптимизировать ее использование.
Вы поймете, как платформы отслеживают изменения состояния и автоматически обновляют DOM. Вы также узнаете о виртуальном DOM и устраните путаницу, связанную с теневым DOM. Вы также познакомитесь с декларативным программированием и его связью с императивным программированием, что сильно повлияет на то, как вы пишете свой код. Есть отличный хорошо Ван Ю (создатель Vue), где он объясняет, как работает реактивность Vuejs, начиная с самых основ.
7. Определите шаблоны компонентов
Компоненты — это фундаментальные единицы современных интерфейсных систем.Способность продумывать и проектировать несколько типов компонентов может иметь огромное значение для поддержки вашего проекта в долгосрочной перспективе.
Вооружившись различными методологиями и шаблонами, вы можете очень легко масштабировать свое приложение и внедрять новые функции.
Взгляните на эти две статьи Расширенные шаблоны компонентов Vuejs И Расширенные шаблоны компонентов React узнать больше.
8. Напишите составной код
Компоновка кода — один из атрибутов хорошо спроектированных программных систем.Обернув код в отдельные компоненты, вы сможете использовать его повторно, и в то же время, создавая компоненты оптимального размера, вы избежите их слишком большого количества.
Почти во всех сообществах есть устоявшийся набор шаблонов кодирования, таких как крючки реагирования или, в мире Vue, API композиции Vue и миксины.
Взгляните на свою кодовую базу и найдите потенциальные возможности поэкспериментировать с этими шаблонами и посмотрите, как это улучшит ваш код.
9. Оптимизируйте взаимодействие компонентов
Современные фронтенд-системы обычно следуют стратегии, основанной на компонентах, где каждый компонент имеет свое собственное поведение и зону ответственности.Обычно это приводит к появлению десятков или даже сотен компонентов, и, конечно, их взаимодействие становится интересной проблемой, требующей элегантного решения.
На помощь приходят такие стратегии, как структура потоков, выбросы событий или обратные вызовы и реквизиты.
Ознакомьтесь с семью шаблонами взаимодействия компонентов Vue. .
10. Покройте свой код автоматическими тестами
Это действительно одна из самых сложных задач во фронтенд-разработке, и многие команды, к сожалению, не обеспечивают достаточного освещения фронтенд-тестов.Будучи вынужденным поддерживать разные браузеры и размеры экрана, при огромном количестве функционала на стороне клиента, автоматические тесты становятся необходимостью, если вы хотите поддерживать качество продукта.
Изучите модульные тесты, моментальные тесты и тесты e2e. Статья о необходимости прагматичного тестирования фронтенда .
11. Выйдите из зоны комфорта
В какой-то момент, при достаточной практике, вы почувствуете уверенность, используя выбранную вами структуру.Это момент, когда вам следует погрузиться в исследование нового фреймворка.
Выход из зоны комфорта позволит вам объективно взглянуть на различия между фреймворками и понять, что вся суета о том, какой лучше, бессмысленна.
Кроме того, вы сможете усвоить некоторые концепции, и ваша способность переключаться между фреймворками станет для вас реактивной силой.
Так что идите учитесь, будь то React, Angular, Vue или Stencil, их целая куча.
Я уверен, что вы найдете фреймворк, который вам понравится.
12. Двигайтесь дальше
Я верю, что, скорее всего, вы достигнете уровня, на котором большинство задач на своем пути будете ломать как орешки.Однако мир фронтенда безграничен.
Изучите такие разделы, как серверный рендеринг, Jamstack, специальные возможности, мобильные приложения, настольные приложения, сервис-воркеры, алгоритмы, функциональное программирование.
13. И не забывай развлекаться
Программирование может приносить удовольствие и приносить удовлетворение, но если вы постоянно пишете код, вы можете потерять это чувство.Так что я рекомендую вам начать побочный проект, не пытаясь на нем заработать и не для обучения, а просто для развлечения.
Создавайте что-то, что вы сами хотели бы использовать, экспериментируйте с технологиями, делайте то, чем всегда хотели заниматься, но никогда не находили времени.
Спасибо за прочтение.
Надеюсь, вы используете карантин как возможность расти и учиться.
Берегите себя и приятно проводите время дома.
P.S. от переводчика: Я сам не старший, но стремлюсь к этому.
Также я очень рекомендую дорожная карта для фронтенда для тех, кто пошел по тому же пути.
Помогает систематизировать самостоятельную работу.
Спасибо за внимание! Теги: #Карьера в IT-индустрии #Разработка сайтов #фронтенд #перевод #образование #старший #перевод #личностный рост
-
Прежде Чем Отправить Статью: Важные Советы
19 Oct, 24 -
К Вопросу О Копипасте В Windows Phone
19 Oct, 24 -
#13 Джокаст
19 Oct, 24
