General frontend FAQ. Part 3⁠⁠

Первая часть,  вторая часть

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

Спасибо авторам и составителям данного FAQ

Закончить хотелось бы эпично и вдохновляюще, думаю подойдет видео, которое когда то было intro на канале Soraxa - эх, клевые были времена!