Веб-разработка сегодня полностью отличается от того, что было несколько лет назад; Есть много разных вещей, которые могут легко сбить с толку любого, кто занимается веб-разработкой. Это была одна из причин, по которой мы решили сделать эти пошаговые наглядные руководства, демонстрирующие более широкую картину и дать каждому четкое представление о том, чему они должны следовать, чтобы выполнять определенные роли в веб-разработке.
Обновление на 2020 год
Эта дорожная карта обновлена на 2020 год. Пожалуйста, загляните на сайт
Веб-разработка - это постоянно меняющаяся сфера. То, как мы создаем веб-сайты сегодня, полностью отличается от того, как мы это делали пару лет назад. Из-за множества доступных инструментов и новых, появляющихся каждый день, разработчики в большинстве случаев не понимают, какой путь им выбрать.
Я являюсь автором и сопровождающим Дорожной карты разработчика, в которой перечислены основные направления, инструменты и технологии, которые вы хотели бы изучить, чтобы использовать интерфейс, бэкэнд или операции. Изначально я создал эти дорожные карты в 2017, затем обновил в 2018 и последний раз пересмотрел в 2019. На момент написания этой статьи план разработки внешнего интерфейса на текущий год был обновлен. Я все еще работаю над планами Backend и Operations / DevOps и надеюсь выпустить их в ближайшие несколько дней.
В этом посте я собираюсь немного резюмировать и поделиться с вами мотивацией создания этих дорожных карт, несколькими отказами от ответственности, если вы решите следовать этим дорожным картам, и, наконец, расскажу о том, как узнать, станете ли вы современным фронтенд-разработчик в 2019 году.
Мотивация
Прежде чем мы начнем со статьей, просто чтобы дать вам представление обо мне, я занимаюсь Fullstack Development последние 6 лет и в настоящее время работаю ведущим инженером в tajawal, где мне приходится носить много разных головных уборов в качестве часть работы. Это не только мое хобби, но и одна из моих должностных обязанностей - следить за тенденциями, принимать технические решения и поддерживать мотивацию и обучение разработчиков.
Веб-разработка сильно изменилась и быстро развивалась; количество опций, доступных в интерфейсе, достаточно, чтобы сбить с толку любого. Я довольно активен в open source и в сообществе; если бы у меня была копейка за каждый раз, когда меня спрашивали или когда на форумах всплывал вопрос «что я должен узнать дальше», я бы ушел на пенсию пару лет назад. Приблизительно в 2017 году мой старый университетский профессор готовил для своих студентов набор инструкций, чтобы дать им представление о рынке, и обратился ко мне, чтобы дать ей список инструментов и технических рекомендаций для веб-разработки. Я набросал черновой набросок и отправил ей, но позже я решил немного очистить его и разместить на GitHub, чтобы я мог ссылаться на него всякий раз, когда мне задают этот вопрос. Так родились эти дорожные карты.
Отказ от ответственности
Прежде чем приступить к работе с дорожной картой, примите к сведению несколько отказов от ответственности.
Цель этой дорожной карты - дать вам представление о ландшафте и направить вас, если вы не знаете, что изучать дальше, а не побудить вас узнать, что является модным и модным. Вы должны понимать, почему один инструмент лучше подходит для некоторых случаев, чем другой, и помнить, что модный и модный никогда не означает, что он лучше всего подходит для работы
А во-вторых, исследуйте свой рынок труда.
Не игнорируйте тот факт, что языки и инструменты могут сильно зависеть от рынка, поэтому проведите небольшое исследование рынка, на который вы ориентируетесь.
В-третьих, вам не нужно знать все, что здесь указано.
Вам не нужно изучать все перечисленное здесь, чтобы получить свою первую работу. Дорожные карты могут показаться громоздкими, но не позволяйте им пугать вас, если вы только начинаете заниматься веб-разработкой. Я только что попытался охватить все, что вы в конечном итоге будете изучать или использовать. Вы можете изучить самый минимум и продолжать изучать остальное, пока вы начинаете что-то строить.
Этап 1 - Работа готова
Если вы новичок и только начинаете заниматься веб-разработкой, для вас есть другой план. Взгляните на дорожную карту ниже и прекратите читать дальше; выполните пункты, перечисленные в этой дорожной карте, и вернитесь, как только вы сделали несколько проектов, используя их
Просто изучите перечисленные элементы, и вы сможете называть себя веб-разработчиком и найти работу на рынке. Я знаю много людей, которые занимались именно этим и зарабатывали приличные деньги на фрилансе или на дневной работе. Потратьте некоторое время на все пункты, перечисленные в дорожной карте, прочно возьмитесь за все это и много практикуйтесь. Создавайте много-много проектов; вот список некоторых идей, которые вы можете сделать
Задания
- Создайте приложение Помидор. Вы можете клонировать и сделать веб-версию этого приложения
- Создайте веб-страницу, которая использует GitHub Repositories API для получения и отображения 10 лучших репозиториев текущей недели в удобном адаптивном формате.
- Создайте приложение для простого списка дел, которое позволит вам добавлять задачи, отмечать их выполненными, редактировать и удалять.
- Создайте простой секундомер, в котором пользователь может запускать, останавливать, приостанавливать и перезагружать.
Как только вы закончите с этим, узнайте о системах контроля версий, изучите основы использования Git и создайте свой профиль на GitHub.
Этап 2 - напишите лучший CSS
После того, как вы изучили основы, переходите к следующему шагу и узнайте, как писать поддерживаемый CSS и использовать CSS-фреймворки. Вот как должна выглядеть дорожная карта
Как только вы закончите этот шаг, продолжайте и выполните следующие задачи над проектами, которые вы сделали выше на этапе 1.
Задания
- Добавьте начальную загрузку к вышеуказанным проектам, используя npm или yarn.
- Преобразуйте проекты, которые вы сделали на Этапе 1, для использования БЭМ
- Напишите CSS в SASS
- Автоматизируйте преобразование SASS в CSS с помощью скрипта NPM
Этап 3 - Наращивание
Этот этап займет какое-то время и станет вашим шагом в современной фронтенд-разработке. Идите вперед и узнайте больше о JavaScript. Узнайте, что такое Webpack, разберитесь с различными концепциями и зачем он вообще был нужен. Разберитесь, что такое babel, почему мы его используем, и научитесь интегрироваться с webpack, и, наконец, научитесь линтингу вашего кода с помощью ESLint. Все элементы, перечисленные на этом этапе, связаны с webpack.
К концу этой недели вы начнете ощущать вкус современной фронтенд-разработки. Когда вы закончите этот этап, продолжайте и выполните следующие шаги, чтобы получить хорошее представление об инструментах сборки.
Задания
- Создайте пакет npm, который принимает имя пользователя и возвращает список ссылок, найденных в социальных сетях (если они существуют). Его следует использовать в браузере, связать его с webpack, использовать babel для его транспиляции и использовать ESLint для линтинга.
- Создайте простое приложение со списком задач, используйте SASS для CSS, добавьте bootstrap для стилей, используйте BEM, перенесите JavaScript с помощью babel, свяжите его с webpack, создайте оптимизированную производственную сборку и разверните ее на страницах Github.
Этап 4 - Современные веб-приложения
Следующим шагом будет изучение некоторой внешней среды. Есть несколько вариантов, но наиболее часто используемые в наши дни - это React, Angular и Vue. Я бы порекомендовал вам использовать React.
Прежде всего изучите React, затем взгляните на redux и после этого узнайте о CSS в JS; что не является обязательным, но, если хотите, ознакомьтесь со стилями компонентов и модулей CSS.
Как только вы научитесь реагировать, читайте о прогрессивных веб-приложениях. Теперь, когда вы знакомы с интерфейсными фреймворками, для вас это не должно быть так сложно. Взгляните на Контрольный список PWA, прочтите о сервис-воркерах, измерении производительности, использовании Lighthouse и посмотрите на различные API-интерфейсы браузера, которые вы можете использовать в своих интересах, например Хранилище, местоположение, уведомления, ориентация устройства и платежи. Также читайте о RAIL модели и PRPL pattern.
Когда вы закончите с этим, вы сможете называть себя современным разработчиком внешнего интерфейса. Обязательно практикуйте то, что вы изучаете. Вот список задач, из которых вы можете выбрать, если ищете идеи.
Задания
- Создайте простое приложение, которое позволяет вам выбрать несколько хэштегов и использовать twitter’s search API для извлечения и отображения самых последних твитов для этих хэштегов в сетке макета, подобной Trello. Попробуйте закрепить хэштеги, чтобы при обновлении страницы пользователь запомнил выбранные вами хэштеги. Используйте response-router и добавьте около страниц.
- Создайте приложение Pomodoro, подобное этому, которое позволяет пользователям настраивать продолжительность работы и перерывов, показывает уведомления и воспроизводит звук, когда работа или перерыв заканчивается / начинается.
- Повторно создайте страницу трендов GitHub с помощью React и разрешите фильтрацию по языку и датам так же, как GitHub. Вы можете добавлять любые библиотеки для дат.
Этап 5 - Автоматизированное тестирование
Научитесь писать автоматические тесты для ваших приложений, это избавит вас от головной боли в будущем и поможет вам улучшить свое положение при поиске работы. Прежде всего, продолжайте и изучите, какие существуют различные типы тестирования, различные концепции, такие как насмешки, заглушки и т. Д. После этого продолжайте изучать Jest, Enzyme и Cypress соответствующим образом. Также научитесь рассчитывать тестовое покрытие.
Задания
Что касается задач, напишите модульные, интеграционные и функциональные тесты для приложений, которые вы создали на этапе 4 выше.
Этап 6 - Проверка статического типа
Средства проверки типов позволяют сделать ваш код более удобным для сопровождения по мере его роста, повышают гибкость при рефакторинге, обеспечивают лучшую поддержку в IDE и являются лучшей формой документации, которую вы можете иметь. В этой области в основном представлены Flow и TypeScript. Тем не менее, есть больше толк в TypeScript, и я бы порекомендовал вам пойти с этим.
После того, как вы закончите изучение TypeScript, переходите к преобразованию любого из ваших существующих приложений JavaScript для использования TypeScript.
Этап 7 - рендеринг на стороне сервера
Приложения, отрендеренные сервером, позволяют достичь более высокой производительности и улучшенного SEO по сравнению с приложениями, отрисованными клиентом. Хотя это и не является обязательным требованием, это определенно поможет вам в создании лучших клиентских приложений. Доступны различные варианты в зависимости от выбранной вами внешней среды; но если вы выбрали React.js, вам следует использовать Next.js, который упрощает SSR.
Для Задач преобразуйте любые приложения, которые вы создали выше, для рендеринга на стороне сервера с помощью Next.js.
Фаза 8 - За гранью
Все, что показано на этом этапе, является необязательным и на самом деле вам не требуется, но если вы хотите попробовать их, посмотрите.
Обратите внимание, что для краткости я не вдавался в подробности и пытался дать вам более широкую картину; пойди и разберись, пока учишься.
Полная дорожная карта
Полная диаграмма для всей дорожной карты приведена ниже с некоторыми дополнительными деталями, написанными внутри нее.
В дорожной карте может чего-то еще не хватать, но это все, что вам нужно для любой роли «Frontend Engineering». И помните, что главное - практиковаться как можно больше. Вначале это может выглядеть страшнее, и вы почувствуете, что не цепляетесь за многое, но это нормально, и со временем вы почувствуете, что становитесь все лучше и лучше. И не забывайте просить о помощи, если вы застряли, вы будете поражены тем, сколько людей готовы помочь.
Эту дорожную карту, а также планы работы с серверной частью и операциями можно найти в моем профиле GitHub. Обратите внимание, что я все еще работаю над обновлением Backend и DevOps и планирую выпустить их в ближайшие несколько дней.
Сказав это, этот пост подходит к концу, не стесняйтесь подружиться со мной в твиттере или поздороваться по электронной почте. До новых встреч, следите за обновлениями!
