Автор оригинала: Kamran Ahmed.
Прежде чем начать с этого поста, просто чтобы дать вам представление о я и об этой дорожной карте; Я занимаюсь развитием Flowstack в течение последних 5 лет и в настоящее время работаю в качестве инженера-лидяного инженера в Tajawal где я должен носить много разных шапок. Это не только мое хобби, но и одна из моих обязанностей на работу, чтобы следить за тенденциями и держать других разработчиков хорошо обученными. Я вижу много путаницы среди начинающих (и опытных одинаковых), когда речь идет о том, чтобы остаться в курсе. У меня было много друзей, и электронные письма, спрашивающие меня на руководстве в 2017 году на то, что они должны учиться, если они хотят быть в этой карьере. Так что спасти себя хлопот и помогать другим, я решил подготовить эти диаграммы раз и навсегда, так что когда кто-то спросит, я бы просто поделился ссылкой на эти графики. И именно то, как эти графики родились.
Kamranahmedse/Developer-Roadmap – Дорожная карта, чтобы стать веб-разработчиком
Первоначально они были просто преданными рекомендациями для инструментов, но я решил вчера, чтобы дать им немного больше структуры, добавить детали и разработать их в шагах, чтобы дать вам лучшее представление о том, что выбрать и в каком порядке.
Я все еще работаю над Backend и devops части, но часть интерфейса готова, и вы можете взглянуть на него ниже.
Прежде чем я пойду об объяснении разных разделов в дорожной карте, позвольте мне потратить время, чтобы поставить этот отказ от ответственности здесь:
Цель этой дорожной карты – дать вам представление о ландшафте и направлять вас, если вы запутались о том, что узнать дальше, и не рекомендовать вас узнать, что такое бедро и модный. Вы должны Вырасти некоторое понимание того, почему один инструмент будет лучше подходит для некоторых случаев, чем у другого, и помните бедро, а модный никогда не значит наилучшим образом подходящим для работы
Итак, давайте начнем – вы можете найти подробное изображение ниже, однако в этой статье я объясню каждый шаг в дорожной карте по одному.
Во-первых, что вы хотели бы сделать, это изучать основы, которые включают в себя изучение основ HTML, CSS и некоторое знакомство с синтаксисом JavaScript.
Узнать основы HTML
HTML – это то, что дает структуру на ваши страницы. Это как человеческий скелет, который продолжает стоять. Во-первых, что вы хотели бы сделать, это выучить синтаксис и узнать все, что он должен предложить. Вы должны сосредоточиться на изучении ниже:
- Узнайте основные основы и как написать семантический HTML
- Понять, как разделить страницу в разделы и как правильно структурировать дом
** Задача – ** Как только вы узнаете основные основы HTML, сделайте не менее 5 HTML-страниц. Я бы порекомендовал вам выбрать любой сайт E.g. Посмотрите на любой страницу профиля GitHub или страницы входа в Twitter. И сосредоточиться на структурировании контента правильно. Он будет уродливым, но не беспокоиться об этом уже сейчас и сохранить вашу основную сосредоточенность на правильной структуре.
Узнайте некоторые CSS
Теперь, когда мы узнали, как подготовить скелет для страницы, пришло время добавить кожу на вершине и заставить ее выглядеть красивой. CSS – каскадные стилы используются для добавления красоты на ваши HTML-страницы.
- Во-первых, что вам придется сделать, это узнать о синтаксисе и ознакомиться с общими свойствами CSS.
- Узнайте о модели коробки и как подготовить макеты с помощью сетки и Flexbox
- Как только вы закончите с этим, узнайте, как сделать свои сайты отзывчивыми с помощью медиа-запросов.
Задача – После того, как у вас есть основы, следующая вещь, которую вы должны сделать, это стиль HTML-страницы, которые вы сделали на последнем шаге. Например, если вы написали страницу HTML для профиля GitHub, пришло время применить CSS и сделать его на самом деле похожим на фактическую страницу профиля GitHub. Сделайте это со всеми 5 страницами, которые вы написали на предыдущем шаге.
Узнайте основы JavaScript
JavaScript – это то, что позволяет сделать ваши HTML-страницы более интерактивными. Например, все эти ползунки, всплывающие окна и тосты, которые вы видите на веб-сайтах и когда он перезагружает определенные части страниц, без необходимости перезагрузить страницу, все это сделано с JavaScript. На этом шаге вы собираетесь изучать основы JavaScript, чтобы подготовить вас к путешествию –
- Узнайте синтаксис и основные конструкции языка.
- Узнайте, как манипулировать DOM с JavaScript E.g. Как удалить элемент со страницы, как добавить некоторые элементы, добавление и удаление классов, применяя стили CSS и т. Д. С помощью JavaScript.
- После того, как вы закончите с этим изучать и понимать темы, такие как область, закрытия, подъемные и мероприятия и т. Д.
- Узнайте, как сделать HTTP-вызовы с помощью XHR или AJAX. Ajax – это то, что позволяет выполнять определенные действия без перезагрузки страницы.
- После того, как вы узнали, что сейчас пришло время узнать обо всех новых функциях в ES6 +. ES6 – это просто версия JavaScript, которая ввела много интересных обновлений на языке E.G. Классы, разные способы объявления переменных, добавлены новые методы для массивов, строкообразные конкатенации и т. Д. Большинство статей, которые вы найдете онлайн, они будут использовать Бабел Объяснить ES6, который является транспортом, который преобразует Новый JavaScript на Старый JavaScript Так как он не поддерживается старыми браузерами. Но сейчас не беспокойтесь о Вавиле, просто получите идею о концепциях и используйте их в любом из новейших браузеров, которые поддерживают ES6 для практики. Мы пересматриваем ES6 позже.
Теперь вы должны чувствовать, что вещи становятся реальными. Вам нужен похлопывание по спине, если вы следите за. Это были некоторые из самых важных вещей, которые вы только что узнали 👏
Должен ли я узнать jQuery?
Было время, когда каждый был ума от jQuery и по причинам; Это была мощная библиотека, которая обеспечила обертку на вершине JavaScript и позвольте вам выполнить что-либо в совместимом браузере. Но давно прошли те дни сейчас, это не используется так много для новых проектов, но Есть еще люди, использующие это Отказ Вам не нужно учиться, но это действительно легко, и вам было бы полезно для вас, если вы хотите посмотреть.
Время на практике
Я говорю это много, и я скажу это здесь снова, вы ничего не узнаете без практики. У вас может быть мгновенное чувство, что вы что-то понимаете, но вскоре он уйдет, если вы не будете практиковать. Убедитесь, что вы практикуете столько, сколько сможете, пока вы следуете за этой дорожной картой.
Продолжайте и сделайте какой-нибудь отзывчивый веб-сайт и добавьте интерактивность с помощью JavaScript. Вы можете скопировать любую существующую веб-страницу, которую вы можете найти интересным онлайн, но Не забудьте использовать все, что вы узнали до этого момента Отказ
После того, как вы сделали некоторые сайты, время в настоящее время попасть в реальный бизнес. Так что иди к github.com И ищите некоторые проекты и попытайтесь открыть некоторые запросы на потянув на некоторые проекты с открытым исходным кодом. Некоторые из идей для запрашиваемых повлечений перечислены ниже:
- Усилить пользовательский интерфейс, сделайте любые демонстративные страницы или улучшить дизайн
- Посмотрите на любую из открытых вопросов, которые вы можете решить
- Refactor любой код, который вы думаете, можно улучшить
Ссылка Это репо Скажите им, что вы изучаете и попросите отзывы о своем PR и как вы можете улучшить.
Пока я бы порекомендовал эту часть GitHub, ему нужны знания о Git и не являются обязательными. Вам не нужно делать это, но если вы сделаете, вы найдете это действительно полезным – вы будете поражены тем, сколько людей готовы помочь вам, если вы просто спросите. Вы можете найти много бесплатных ресурсов для Git, Попробуйте это Отказ
Дайте себе погладить
У вас есть основы с пути. Если вы все хорошо узнали, вы можете найти саму собой внештатную работу или, возможно, полную работу. Тем не менее, не останавливайся здесь, есть еще долгий путь, если вы хотите иметь лучшую карьеру.
Менеджеры пакетов
До этого момента, если вы использовали внешнюю библиотеку E.g. Плагин или любой внешний виджет, вы должны загружать файлы JavaScript и CSS вручную и поместите их в проект, а затем те библиотеки или плагины выпускают новые версии, вы должны загрузить новые файлы и снова поставить их в свои проекты, которые снова является крайним хлопотом. Менеджеры пакетов берут эту проблему от вашего рабочего процесса. Они помогут вам принести внешние библиотеки и плагины в ваши проекты, чтобы вам не нужно беспокоиться о копировании библиотек вручную или проходить через хлопот обновления их, когда они выпускают новые версии. Есть пряжа и NPM имеется в наличии. Оба почти одинаковы, есть только реализация, вы можете выбрать любой из них, и как только вы научились использовать друг друга, будет просто одинаковым.
Давайте использовать то, что мы узнали
После того, как вы получите основное понимание менеджеров по пакетам, продолжайте и установите внешнюю библиотеку в веб-страницы, которые вы сделали выше E.G. Установите некоторое плагин для тоста и когда пользователь нажимает кнопку, покажи ему Toast Message или создайте форму входа в систему и выполните форму входа в систему, используя определенную библиотеку проверки формы и воспроизводить с разными параметрами и посмотреть, как установить разные версии.
Пока вы на этом, обязательно прочитайте о семантическая версия
CSS Preprocessors
Препроцессоры обогащают CSS с функциональностью, на которые он не способен по умолчанию. Есть разные много вариантов Sass, меньше, стилус и т. Д. Если бы я выбрал один, я бы пошел на сасс. Тем не менее, Postcss в последнее время набирает много тяги, это приятное оказание и является «Бабелом» для CSS. Вы можете использовать его самостоятельно или сверху SASS. Я бы порекомендовал вам узнать SAS Saus сейчас и Revisit Postcs позже, когда у вас есть время.
CSS Frameworks
Вам больше не нужно изучать CSS Frameworks. Те, которые мне понравились, самые из тех, которые я пытался, – это загрузочный, материализация и бульма. Но если вы посмотрите на их спрос на рынке, я бы выбрал Bootstrap Если бы я начал сегодня Отказ
Организация CSS
Поскольку ваши приложения растут, CSS начинает становиться грязным и неизвестным. Существует несколько способов структурировать ваши CSS лучше для масштабируемости E.G. Есть OOCS, SMACS, чемодан, атомный и бему. Вы должны знать о различиях между ними, но я предпочитаю Бем Отказ
Создание инструментов
Инструменты, которые помогут вам в здании/объединениях и разработках приложений JavaScript. Эта категория включает в себя связывание, задачи бегунов и бундаров.
Для рабочих бегунов были разные многие варианты, включая сценарии NPM, глоток, ворчание и т. Д. Но в настоящее время, поскольку WebPack позволяет вам справиться с большинством вещей, которые мы использовали с глотанием, есть только сценарии NPM в задаче Бегуны Теперь, когда вы можете использовать для автоматизации задач, которые могут быть способны сделать WebPack. Вам не нужно учиться Гульпу, однако позже, если вы найдете некоторое время, не стесняйтесь взглянуть на него и посмотреть, может ли он помочь вам в вашем приложении.
Для связей, снова раньше было много вариантов, включая Eslint, jslint, jshint и acss. Но в настоящее время в основном есть Eslint, так что пойти на это.
Для блоков модулей, опять же несколько разных вариантов, включая посылку, WebPack, Rollup, Browserify и т. Д. Если вы должны выбрать один, закрыть глаза и найдите WebPack. Проверка довольно распространена, но рекомендуется использоваться в основном для библиотек; Когда дело доходит до приложений, есть WebPack. Так что сначала найдите WebPack и Revisit этот раздел для скатания позже, если хотите.
Время практиковаться – создать что-то
Поздравляю! Теперь вы можете назвать себя 75% современным разработчиком JavaScript. Теперь идите вперед и создайте что-нибудь со всем, что вы узнали. Возможно создать какую-то библиотеку, в которой вы должны использовать SASS и JavaScript. Затем используйте WebPack, чтобы преобразовать SASS в CSS и использовать Babel в нем, чтобы трансировать код ES6. Как только вы закончите, отпустите его на Github и NPM.
Выбрать каркас
В старой дорожной карте этот раздел был рядом с основными основаниями, но я изменил его после SASS, создавать инструменты и управлять пакетами, потому что вы будете использовать все это в рамках и без знаний, это может показаться вам страшным Отказ
Опять же в рамках, есть несколько вариантов. Но обычно используются в эти дни Реагировать , Vue и Угловой. В эти дни все больше и больше спрос на rection.js. Тем не менее, вы можете выбрать любой из перечисленных, и вы будете в порядке. Лично я бы выбрал реагирование или угловые. Просто быстрое обращение здесь, как начинающий вы может Найти угловой, чтобы быть немного проще, вероятно, потому что он поддерживает почти все из коробки E.g. Мощный маршрутизатор с поддержкой ленивой погрузки, HTTP-клиента при поддержке перехватчиков, впрыска зависимости, инъекции CONTECT CSS и т. Д. Не беспокоиться о выборе внешних библиотек. Но реагирование определенно имеет верхнюю руку, глядя на общину вокруг него, и в том, как команда в Facebook работает над тем, чтобы улучшить ее. Просто убедитесь, что не выбирайте ничего из-за его из-за его, Google, сравните и посмотрите, что вам удачны.
Я оставлю сравнение и мой личный опыт как для другого поста, но поскольку этот пост о обучении, вот как вы можете найти кривые обучения для угловых и реагировать
Узнайте кривые на графике ниже Рассмотрим тот факт, что у вас уже есть понимание Tymdercript и основная идея RX.JS. Для «Почему» я охвачу, что в некотором будущем посте, но в основном это из-за некоторой стандартизации и некоторых ключевых функций, которые угловые предоставляют из коробки. Но Это не означает, что реагируют плохо, у обоих есть свое место, я широко охватив это в предстоящем посте.
Посмотрите на обоих, и посмотрите, что вам подходит лучше всего.
После того, как вы сделали свой выбор для Framework, есть определенные другие вещи, которые могут вам придеться. Например, если вы решили пойти с Реагировать ; Возможно, вам придется изучать Redux или MOBX для государственного управления, в зависимости от размера приложения, который вы будете работать. MOBX подходит для небольших до средних приложений, Redux более подходит для большего количества приложений. И вы можете даже не понадобиться ни одного из них и зависеть от собственного управления государством в реакции, если ваше приложение позволяет этому.
Если вы выберете угловую, вам придется сделать Tymdercript (Вы можете развить угловые приложения без него также, но рекомендуется его использовать) и Rx.js Что также принесет вам пользу из ваших угловых приложений. Это действительно мощная библиотека и также подходит для функционального программирования.
И если вы выберете Vue.js, Возможно, вам придется изучать Vuex, который является похожим на Redux, но для Vue.
Вам следует отметить, что redux, mobx и rx.js не просто связаны с этими рамками, вы также можете использовать их в вашем приложениях Vanilla JavaScript. Кроме того, если вы выберете угловую из списка, убедитесь, что он угловая 2+ и не угловая 1+
Время на практике
Теперь вы знаете _ keverything_, что может потребоваться создать современное приложение JavaScript. Продолжайте и сделайте некоторое приложение любыми рамками, которые вы выбрали. Вы можете найти некоторые из идей в идеи каталог в репозитории; Выберите что-нибудь и начните!
И как только вы сделаете, прочитайте о том, как измерить и улучшить производительность. Например, посмотрите время интерактивности, индекс скорости страницы и оценка маяка и т. Д.
Прогрессивные веб-приложения
И как только вы закончите со всеми шагами, перечисленными выше, узнайте о сервисных работниках и как сделать прогресс веб-приложений.
Тестирование ваших приложений
Есть много и много разных инструментов для Разные цели Отказ Я в основном нахожусь, используя комбинацию Jest, Mocha, карма и фермент. Однако, прежде чем прыгать и выбрать любое, было бы лучше, если вы сначала поймете различные типы тестирования, посмотрите на все доступные параметры и используйте наиболее подходящие для ваших нужд.
Вот действительно хорошее резюме, чтобы начать
Обзор проверки JavaScript в 2018 году _Эта руководство предназначено для того, чтобы уловить вас самым важным рассуждением, условиями, инструментами и подходами к JavaScript … _Medium.com
Статический тип шашки
Статические шашки типа помогут вам добавить тип проверки на JavaScript. Вам не нужно учиться этим, но они действительно дают вам сверхдержавы и могут быть изучены через несколько часов, а затем вы можете сохранить. В основном есть Tymdercript и Поток. Я люблю Teadncript и выберу его, но не стесняюсь проверять оба и выбирать один из ваших потрясающих.
Сервер бокового рендеринга
Навыки, которые у вас попадают до этого момента, должны быть достаточными, чтобы получить вам позицию для любого из ролей «Frontend Engineering». Но не останавливайся здесь!
Узнайте о рендеринге бокового сервера в любую рамку, которую вы выбрали. Существуют разные варианты, в зависимости от того, какие рамки вы используете. Например, если вы решили использовать React, наиболее заметными варианты являются Next.js и После.js Отказ Для угловых, есть Универсальный Отказ А для Vue.js есть Nuxt.js Отказ
Там могут быть вещи все еще отсутствуют в дорожной карте, но это Все Из того, что вам нужно для любой роли «Frontend Engineering». И помните, что ключ – практиковать столько, сколько сможешь. Он будет выглядеть ужальнее в начале, и вы почувствуете, что вы не хватаете, но это нормально, и со временем вы почувствуете, что вы становитесь лучше и лучше. И не забудьте попросить помощи, если вы застряли, вы будете поражены тем, сколько людей готовы помочь ..OR по крайней мере, я 😉
Не стесняйтесь подружиться со мной на Twitter или сказать привет Email Отказ И с этим этот пост подходит к концу. До следующего раза оставайтесь настроенными!
Камран Ахмед 🦀 (@kamranahmedse) | Твиттер _ Последние твиты из Kamran Ahmed 🦀 (@kamranahmedse). Инжиниринг в @ @tajawalae Tech парень с предпринимательским … _twitter.com