Предположим уже изучено все что можно по JS, книги прочитаны, туду листы написаны, на кодеворс становится скучно и задаешься вопросом - а что же дальше? - В этой части я расскажу тебе что дальше, поехали.
Промышленное программирование
Пришло время преодолеть разрыв между легкими и приятными учебными заданиями и суровой практикой с которой вам предстоит столкнуться на работе. Статьи по основам ООП, принципам SOLID, я не буду приводить - их сотни и тысячи, каждый автор рассказывает с разной степенью доступности, сказать какой источник лучше невозможно. Читайте habr, там много всего полезного.
Выбор фреймворка
Первое и единственное решение, которое нужно принять: на какой фреймворк садиться. На текущий момент (2020) на выбор 2 с половиной стула:
Первый стул - React
В 2020 Реакт по прежнему универсальный выбор, замена не предвидится. Ньюфажикам его советуют по многим причинам:
- JS центричность. Копаясь в Реакте вы невольно углубляетесь в понимание JS (на данный момент это уже не так актуально)
- Относительно высокий, но "плоский" порог входа: придется изучить все, что так или иначе пригодится после (включая вебпак)
- Много вакансий
- Куча обучающих материалов
- Прекрасное коммьюнити
Минусы:
- Каждый пук надо прикручивать самостоятельно. Да, даже цсс, не говоря уж про роутер, стейтменеджмент и прочее
- Отдельный пункт - анальные боли при работе с формами (для чего есть сотни библиотек, каждая из которых имеет неповторимый набор багов)
- Фейсбук делает Реакт под себя, так что не удивляйтесь, если через 6 месяцев все придется переписывать
- Редакс все еще промышленный стандарт, со всеми вытекающими через одно место. Но благодаря хукам, многие приложения можно писать уже и без него.
Второй стул - Vue
Из плюсов:
- Полноценный набор инструментов - в отличие от Реакта не придется прикручивать гайками отваливающиеся цсс модули
- Предельная простота и интуитивность
- Прельстиво и приятно шлепать формы (а мы же здесь формошлепы, как никак)
Минусы:
- Эван почему-то считает своим долгом копипастить у Фейсбука все. Даже то, что ненужно
- Сильно меньше работы
Второй с половиной стул - Angular
Трудное дитя гугла, поимело провальный старт, из-за чего его считают плохим, негодным, что, на самом деле, не так.
Плюсы:
- Искаропки есть все. Т.е. вообще все. А то, чего нет, прикручивается через CLI
- Собственно, шедевральное CLI (начинася с 6 версии cdk)
- Коммьюнити из суровых энтерпрайзеров, которые видели некоторое shit и которых ничем не испугать
- Много работы
Минусы:
- Oche высокий порог входа, придется выучить вообще все, при чем не всегда понятно, в каком порядке.
- На этом, собственно, все.
Это были стулья, а теперь табуретки:
AngularJS - (не путать с Angular, который новый), он же ангулар первый — устарел морально, физически. Вакансии по-прежнему есть, в основном - поддержка дымящегося легаси. Учить просто так смысла нет. Да и вообще нет.
Backbone - good night, sweet prince. Можно поколупать, чтобы прикинуться олдфагом. Но не нужно, вас все равно раскусят.
Inferno - good night, sweet prince. Кговавый Фэйсбук купил разработчика, теперь он сидит в подвале без паспорта и пилит Реакт (тру стори);
Preact - если видите в описании очередного фреймворка фразу 'this is fast lightwieght fork of React' - сразу закрывайте вкладку.
Aurelia - заявлено, что это самый мощный, гибкий и современный (прямая цитата) JS фреймворк в мире, которым никто не пользуется. Ну вы поняли.
Mithril - позиционируется как супер-пупер альтернатива этим вашим реактам, ангуларам и вью. Но никем не используется. Такие дела.
Polymer - долгострой гугла, пишется конкурирующей с ангуларом командой. Даже где-то используется. Ходят слухи, что выйдет вместе с полноценным релизом нативных веб компонентов. А может и не выйдет.
Ember - говорят, все, что придумали, уже давно было в Эмбере. Может так и есть, но эмбер даже на переписанном движке уж очень тормозной. Изредка мелькает в вакансиях (ищут спеца с опытом от 3 лет чисто на эмбере, что как бы намекает)
ExtJS - энтерпрайз монстр, который продается за 9к долларов и вертится где-то на задворках древних корпоративных ЦРМ и нигде больше не встречается.
Вышеперечисленные штуки указаны сугубо в ознакомительных целях. Их намного больше, это самые наиболее часто встречающиеся, ну типа вы там прочтете что-нибудь интересное и на собесе такие - о, так это ж как в aurelia! - вас сильно зауважают (нет).
Т.к. все что я делаю на работе так или иначе крутится вокруг реакта, то направление по изучению фреймворка дается именно на примере реакта, но вполне подойдет и для вью, и для ангулара. Лучшие ресурсы для начала обучения - официальная документация. Что у Реакта, что у Ангулара, что у Вью она очень подробная и человеческая.
- Документация. Ваш самый лучший друг. Читаем, что вы собираетесь изучать, пробуем установить, трогаем примеры.
- Курсы. Как правило, одного достаточно, смысла смотреть n курсов по одному и тому же предмету нет - все повторяется.
- Видосики, записи конференций
- Статьи, бест практис, опенсорс проекты
- ...
- ?
- Profit!
Релейтед ресурсы:
- Tutorial - официальный туториал
- React Router - хороший годный гайд-туториал-документация по реакт-роутеру.
- Redux + react - официальный гайд по редаксу в связке с реактом.
- React Redux - обновленный туториал по редаксу, не переживаем что от 2018 года, во первых он неоднократно обновлялся, во вторых во вторых)
- React + Node.js + Bash - перевод туториала по реакту, ноду и башу. Атеншен, материал по ссылке - свехгоднота, перейдя по ней, вы уже не вернетесь таким как раньше.
Курсы на ютубе, курсы на торрентах - не стану приводить ссылки, они все легко находятся, а в рекламе меня уже обвиняли), ну если вдруг кому очень надо то отвечу в комментах.
Кривая обучения в этом месте резко становится очень крутой и преодолеть ее с первого раза получается не у всех. Документация, случайные статьи и твиттеры разработчиков станут вашими новыми друзьями. И, конечно, эксперименты и практика.
Сборка
Если вы собирайтесь разбивать JS-код на несколько файлов и нормально использовать import/export, то вас настигнет вопрос сборки приложения. Сейчас для этого принято использовать Webpack — очень гибкий и мощный, но сложный в настройке инструмент, который интерпретирует все файлы как JS-модули.
Тут следует сказать, что для учебных и личных проектов в 90% случаев будет хватать Create React App или другого бойлерплейта. В таком случае webpack и babel уже зарание настроены во внутренностях и его можно не трогать. На промышленных проектах возможностей бойлерплейта обычно не хватает, поэтому рано или поздно вы столкнетесь с настройкой этих тулзов. Но еще раз – ньюфага никто не посадит править сложный конфиг на большом проекте, поэтому без фанатизма. Однако на собеседованиях обязательно спросят и могут даже тестовое попросить сделать без CRA, тут уже зависит от уровня вакансии и наглости интервьюеров.
Отличный видосик по настройке простых конфигов - опять же, не реклама!
Что делать дальше
Если вы уже состояфшийся фронт и вам кажется, что развиваться больше некуда - вынужден вас разочаровать.
- TypeScript - пожалуй, самый популярный и полезный яп, расширяющий возможности ванильного JS. Очень рекомендуем попробовать (в 2020 must have). Будем откровенны - если вы читаете этот раздел, то TS вы уже ДОЛЖНЫ знать, так что давайте, бегом-бегом читать документацию, благо она у ТС шикарная.
- ClojureScript - кложура, которая транспайлится в ЖС.
- elm - функциональщина с приятным ароматом хаскеля и замечательным синтаксисом, от которого у неофитов выпадают глаза. До поры до времени активно форсился, но потом утратил позиции в связи с новым хайп-продуктом от господа бога нашего и пророка Фейсбука (о чем ниже).
- ReasonML - окамль с человеческим лицом от фейсбука. Ну или типа того, who cares?
- Dart - авантюра гугла по созданию полноценной альтернативы JS со своим интерпретатором и андефайнедами. Есть такая штука, да, наверное, даже клевая (а может и нет). Больше сказать о нем нечего, в вакансиях почти не встречается.
- CoffeeScript - морально и физически устарел, все хорошее, что в нем было, перекочевало в ES6+. Иногда встречается в дремучих проектах, написанных на рубя с шаблонами. Учить не нужно, да и нечего там учить.
В 2020 TypeScript стал стандартом, большинство новых проектов стартуют на нем. Все остальное (кроме кофе) можно потрогать на досуге, но в основном для саморазвития – работы на этом очень мало. Кофе не нужно, пейте чай. Шутка. Нет, правда, кофескрипт не нужен.
Выбрав стул с реактом, можно смотреть в сторону таких вещей:
- Next.js – фреймворк поверх реакта с упором на SSR. Активно поддерживается, большое коммюнити, много примеров.
- Gatsby - что-то похожее на next, но попроще. Сделан упор на создание блогов/лендингов. Есть много плагинов, расширяющих базовые возможности. Хорошо работает со многими cms.
- Styled Components - css-in-js с компонентным подходом. Как альтернатива – Emotion. Можно почитать про JSS (используется в material-ui)
- Apollo GraphQL – инструмент для работы с graphql на жсе, есть клиентская библиотека под реакт.
- Тестирование – большая тема, но тут ясно одно: на основные части любого приложения, которое активно разрабатывают, должны быть написаны тесты – иначе смэрть. Как делаются и что почитать: дока реакта, jest, React Testing Library. Вообще этому можно посвящать отдельный faq со своими холиварами и они есть (faq -и), но это уж совсем глубокая тема, тут писать не буду.
Независимо от стула:
Progressive Web Apps – это про использование набора технологий, позволяющих делать веб-приложение максимально похожим на нативное. Например, такое приложение может слать пуш-нотификации и работать офлайн. Что почитать: хабр, гугл. Неплохой курс на udemy.
Не забываем про линтинг ESLint который избавит от совсем уж тупых ошибок/опечаток и приучит к написанию красивого кода.
Навыки работы с консолью и гитом подразумеваются для любого разработчика по умолчанию, об этом часто даже не пишут в вакансии.
Фух, все! FAQ на этом закончен, расходимся господа!) Далее будут статьи про UX и UI дизайн, работа сетей (интернета) и браузера в частности, семантика и работа поисковых роботов (атеншен, в самое пекло семантического ядра не полезем, так пройдемся по касательной), всякие полезности и мелочи, которые фронтендеру знать нужно но необязательно на первых парах.
Закончить хотелось бы эпично и вдохновляюще, думаю подойдет видео, которое когда то было intro на канале Soraxa - эх, клевые были времена!