среда, 21 ноября 2018 г.

Справочник по современной разработке на JavaScript


Вы занимались разработкой REST API на протяжении последних 5 лет. Или оптимизировали поиск для гигантской базы данных вашей организации. Может быть вы писали программное обеспечение для микроволновки? Так или иначе, прошло уже достаточно времени с тех пор когда вы использовали Prototype.js для того что бы сделать нормальный ООП для браузера. И сейчас вы решили что пора заново прокачать ваши навыки для фронт-енда. Вы осмотрелись и увидели примерно вот такую картинку перед собой.
Конечно же вы не ищете Вальдо. Вы ищете 25 случайных людей но даже не знаете как их зовут. Такое чувство переполнения настолько распространено в мире JavaScript, что на самом деле существует термин “Усталось JavaScript”. Если у вас будет немного времени посмеятся по этому поводу, то вот этот пост описывает феномен просто великолепно.
Но у вас же нету на это время сейчас. Вы в большом лабиринте и вам нужен справочник. Я сделал его для вас.
Для начало небольшое отречение: Список представленный ниже предназанчен для того что бы вы могли сразу приступать к работе не тратя времени на анализ возможных решений которые в приципе подходят для ваших задач. Я полагаюсь на некоторые инстументы которые могут работать вместе для фронт-енд разработки вцелом. Это позволит вам работать достаточно приятно с вашим окружением и избавит вас от всевозможных головных болей. Как только вы с этим разберетесь, вы будете способны сами решать какие звено из вашего стека вы можете заменить на что то более подходящее.

Структура справочника
Я разделил всю публикацию на отдельные проблемы, которые требуется решить. Для каждой из проблем я делаю следующее:
 - Описываю проблему или требования к решению.
 - Определяю инструмент которых способен решить проблему.
 - Объясняю почему я выбрал именно этот инструмент.
 - Предлагаю несколько альтернатив.

 Управление пакетами
 - Проблема: требуется организовать ваш проект и все ваши зависимости
 - Решение: NPM и Yarn
- Причина: NPM – это по сути менеджер пакетов по умолчанию. Yarn работает поверх NPM но оптимизирует разрешение зависимостей и удерживает блокировку файла для конкретной версии вашей библиотеки (использует в тандеме с семантикой версионности NPM, они не исключают а дополняют друг друга)
 - Альтернативы: Да в принципе и нету
Аромат JavaScript
 - Проблема: проблемы старых версий JavaScript
 - Решение: ES6
 - Причина: Это будущее JavaScript которое вы можете использовать уже сейчас. Включает много полезных вещей которые есть и в других языках программирования уже долгое время. Интересные новые возможности: стрелочные функции, импорт/экспорт модуле, де-структуризация, строковые темплейты, let & const, генераторы, promise. Если вы Python-разработчик вы почевствуете себя как дома.

 - Альтернативы: TypeScript, CoffeeScript, PureScript, Elm
Преобразования
- Проблема: Есть много браузеров, которые по прежнему не реализуют ES6. Поэтому вам нужна программа, способная преобразовать (transpile) ваш современный код ES6 на эквивалетный, который поддерживается более старыми браузерами.
 - Решение: Babel
 - Причина: Работает прекрасно и по сути является стандартом. Преобразует серверную сторону.
 - Альтернативы: Traceur

 - Примечание: Вы будете использовать загрузчик-babel от WebPack (более подробно об этом позже). Вам нужно делать преобразования если вы планируете использовать разные версии JavaScript.
Анализаторы
- Проблема: существуют миилионы способов написать код на JavaScript и очень сложно добится последовательности. Поэтому некоторые ошибки можно предотвратить с помощью анализаторов (linter).
 - Решение: ESLint
 - Причина: Великолепное понимание кода и очень хорошая возможности конфигурирования. Предустановка Airbnb – это все что вам нужно для того что бы начать работу. Действительно помогает писать правильно.

 - Альтернативы: JSLint
Пакетирование
 - Проблема: Вы больше не используете файл или последовательность файлов. Зависимости должны быть разрешены и загружены корректно.
 - Решение: Webpack
 - Причина: Хорошо конфигурируется. Может загружать все виды зависимостей и настроек. Поддерживает плагины. Практически пакетировщик по умолчанию для проектов React.
 - Альтернативы: Browserify
 - Недостатки: По началу может быть сложным для конфигурирования

 - Примечание: Вам потребуется потратить некоторое время для того что бы как следует разобраться как все работает. Вы изучите основные загрузчики: babel-loader, style-loader, css-loader, file-loader, url-loader.

Тестирование
- Проблема: Ваше приложение хрупкое. Оно может сломаться. Вам нужно его тестировать.
 - Решение: Jest
 - Причина: Батарейки включены, тестирование снимков, может определить тесты по вашим изменениям и выполнить только их, хорошо работает с одним репозиторием, изначально появился с CRA – который разработывалмя Facebook.
 - Альтернативы: Jasmine, Mocha, Tape
Управление состоянием / UI фреймворк
 - Проблема:  Это одна и самых больших вопросов. Одностраничные приложния становятся все более и более сложными. Изменяемое состояние особенно затруднительно.
 - Решение: React & Redux
 - Причины использования React: Удивительный сдвиг парадигмы, разрушающий много догм, старых как веб, и делает это прекрасно. Лучшее разделение проблем по сравнению с традиционным подходом: вместо разделении по технилогии (HTML/CSS/JavaScript) вы разделяете вещи по их функциональности (сплоченые компоненты). Выш UI это чистая функция вашего состояния.
 - Причины использования Redux: Если ваше приложение не тривиально, то вам необходим способ управлять состоянием (иначе вам придется делать гимнастику для ваших компонентов и разговаривать с каждым из них, изучать взаимодействие между компонентами и сталкиваться с ограничениями). Любое руководство по web описывает странный и астрактный паттерн Flux и его реализации. Избавьте себя от всей этой информации и испольуйте Redux. Он реализует паттерн в самой простой манере. Даже фейсбук использует его. Дополнительная прелесть: перегрузка и хранение состояния приложения, путешествие во времени, возможность тестирования.
 - Альтернативы: Angular2, Vuew.js
 - Предупреждение: Первое время у вас возможно появится желание сделать что нибудь со своими глазами что бы развитеть синтаксис JSX с которым приходится тут работать. Сопротивляйте соблазну найти форум и кричать от возмущения. Это всего лишь когнитивный диссонанс вызванный годами воспитания. Смешиваение HTML, JavaScript и CSS в одном файле на самом деле прекрасно. Поверьте мне! – Достижение разблокировано для использования двух кривых ссылок в одной пуле.
Манипуляции с DOM и анимация
 - Проблема: Знаете что? Вам по прежнему иногда нужно что то быстро починить и для это нужно использовать селекторы и выполнять операции непосредственно с DOM.
 - Решение: Чистый ES6 или JQuery
- Причина: Да, JQuery живет и здравствует. React и JQuery не исключают друг друга. Хотя имейте ввиду что желательно все нужно делать с использованием чистого ReactquerySelector). Добавление JQuery увеличит немного размер вашего бандла. Вообще то использовать JQuery поверх React – признак плохого подхода и вам следует этого по возможности избегать. Но если вы видите что стандартными средствами добится желаемого невозможно, например, вы имеет дело с некоторым кросс-браузерным фиксом, то JQuery может спасти ситуацию.
 - Альтернативы: Dojo (он все еще существует?)
Стилизация
 - Проблема: Теперь когда у вас есть модули, вы наверняка захотите сделать их самодостаточными, что бы можно было повторно использовать. Стилизация компонентам должна быть такая же мобильная как и сам компонент.
 - Решение: CSS модули
 - Причина: Насколько я люблю возможность описывать стили в коде (и часто это использую), настолько же я понимаю ограниченность данного подхода. Да, это абсолютно нормально использовать стили в коде в React, но вы не можете указывать селекторы для псевдо-классов (например :hover), которые очень важны в некоторых случаях.   
 - Альтернатива: Инлайн стили. Что я люблю в инлайн стилях в React, это то что они позволяют обращаться со стилями также как и с другими JavaScript объектами, и позволяют их обрабатывать программно. Кроме того они существуют в том же файле что и компонент, что делать процесс поддержки супер удобным. Некоторые люди по прежнему говорят о преимуществах SASS/SCSS/LESS. Эти языки требуют дополнительного шага при построении и не являются такими же мобильными как модули или инлайн CSS но вместо с тем они весьма эффективны.
О макетах
Проекты-макеты (boilerplate) такие как Create React App могут решить некоторые из проблем описанных выше. Когда вы используете макет, вы по прежнему должны понимать что  происходит под капотом – иначе вы никогда не будете контролировать свое приложение.
Вот и все
Теперь у вас есть метрическая штука для дальнейшего изучения. По крайней мере вам не придется занимать вопросами выбора. Вам кажется я что то пропусил? Я где то потерял мячик? Оставляйте свои коментарии или пишите мне в твиттер @bug_factory.



Комментариев нет: