Программирование, Путешествия, Покер

— Эй, я бы хотел научиться писать крутые веб-приложения. Слышал, у тебя есть опыт.

— Да, я как раз занимаюсь фронтендом, юзаю пару тулз.

— Круто. Я щас делаю простое приложение — обычный TODO-лист, используя HTML, CSS и JavaScript, и планирую заюзать JQuery. Это норм?

— Не-не-не. Это олдскул. Джиквери мёртв — никто не использует его теперь! Тебе нужен React. Это будущее.

— Окей, лады. А что это?

— React это новый способ разработки веб-приложений. Оно базируется на Virtual DOM и позволяет писать JSX-код.

— Virtual-что? JSX? Что это за..?

— JSX — это HTML на стероидах. Это расширенная версия JavaScript, где вы смешиваете XML и JS в одном коде. VirtualDOM означает, что у тебя есть дерево объектов представляющих часть реального DOM, и оно дает возможность манипулировать им очень быстро без необходимости работать с DOM напрямую.

— Зачем смешивать XML и JS?

— Ну как зачем. Реакт это будущее. Он позволяет создавать переиспользуемые компоненты.

— Типа как в Backbone, да?

— Нет. Бэкбон мёртв. Щас теперь все будет на компонентах.

— Ну так мне не нужно заморачиваться про JSX или VirtualDOM?

— Неа. Но неплохо бы понимать как они работают, чтобы ты мог не думать о том, что у тебя что-то где-то тормозит, и оптимизировать код там, где это реально имеет смысл — типа состояния компонента.

— Окееей, я начинаю слегка теряться. Итак, у нас есть некая шняга для написания компонентов, называется React. Могу я использовать её с JQuery?

— Ну, ты можешь написать одну часть приложения на React, а другую на чём захочешь. Но я ж говорю тебе — JQuery мёртв. Кстати, тебе стоит обратить внимание на Webpack, чтобы склеивать компоненты вместе при сборке.

— ОК. Что это такое?

— Это бандлер модулей. Ты пишешь кучу файлов, как если бы это были модули Node — и затем комбинируешь их в один монолитный файл (или разбитый на части) для отправки клиенту. Тебе даже не понадобятся react-tools, можешь обойтись одним Babel для компиляции JSX.

— Babel?

— Ага, Babel. Это клевая хрень, которая транспилирует твой ES6+/JSX код в читабельный ES5 код, с поддержкой sourcemaps. Это широко распространено, даже в Фейсбуке это используют.

— ES6+?

— ES6/ES2015 это следующая версия ECMAScript, там очень много новых фич, типа классов, стрелочных функций, Maps, Sets и так далее… Щас почти все юзают ES6+.

— Это настолько хорошая вещь?

— Спрашиваешь! ES6+ + транспиляция это будущее.

— Ну ладно. Как мне это заюзать?

— Начни с установки Node...

— Установить Node? О, нет. Ты ведь говорил что-то про React и компоненты.

— Ну да. Дальше ты берешь Flux архитектуру и начинаешь создавать actions, stores и компоненты.

— Flux?

— Во Flux ты выстраиваешь свое приложение как набор stores, actions и view, где данные «текут» в одном направлении. Views вызывают actions, они проходят через dispatcher, а stores подписываются на события dispatcher и выдают change events, на которые подписан view.

— Ага. Как в MVC?

— Нет. MVC мёртв. Flux это будущее. Сейчас очень много реализаций flux.

— Что? Реализаций Flux?

— Да, ведь Flux это просто паттерн. Зырь, Alt, Flummox, marty, fluxxor, fluxible, и т.п… И даже есть фейсбучная реализация Dispatcher.

— Мне нужно это все использовать?

— Новичку довольно сложно закодить самому весь этот шаблонный код, поэтому возьми какую-нибудь готовую реализацию.

— Ладно. Мне бы не хотелось писать эту жесть самому.

— Я ж говорю, реализаций дофига.

— А что насчёт Angular?

— Фу.

— Фу?

— Фу.

— Смотри. Мне реально не хочется возиться с установкой, настройкой и допиливанием чего-то сложного.

— Ваще-то это легко. Существуют готовые киты/репозитории для новичков, или можешь заюзать генераторы Yeoman, которые сделают это за тебя.

— Мне нужен генератор? Yeoman? Что это еще такое?

— Он может сгенерировать код за тебя, и ты можешь заюзать его для создания нескольких приложений сразу. Используй поддержку DLL в новом Webpack, и можешь компилировать каждое приложение отдельно от других.

— У меня будет только одно приложение, одна страничка, один компонент, одно что-угодно. Только одно.

— Нет. Изучи комбинируемые компоненты. Это то, как мы делаем всё сейчас. Тебе нужно разбить всё на компоненты — по одному на каждую отдельную маленькую фигню.

— Кажется, что это избыточно.

— Это единственный способ добиться аккуратности, удобства и производительности. Ты сможешь использовать штуки вроде горячей перезагрузки (hot reload)...

— Hot Reload? Типа как livereload?

— Не. Webpack поддерживает эту замечательную фичу, она называется горячей перезагрузкой модулей, и есть плагин react-hot-loader для реакта, так что ты сможешь менять код отдельного компонента без перезагрузки всей страницы. А вместе с Flux ты сможешь делать ваще башнесрывные вещи типа прокрутки истории изменений в данных туда-обратно — одновременно с горячим редактированием кода.

— Итак. Теперь у меня десятки различных инструментов и библиотек для упаковки, сборки, транспилирования и чего угодно. Еще что-то?

— Как я уже говорил, Flux дает возможность выстраивать хорошую архитектуру приложений. Но с Observables и Immutable.js данными всё становится намного лучше и интереснее.

— Observable? Мне нужен Immutable?

— Тебе нужны observables чтобы удобно работать с событиями и асинхронностью, а Immutable.js нужен для персистентности, эффективности и простоты. Observables это типа как массивы, только асинхронные. Они возвращают значения с помощью async-генераторов из ES2016.

— Что за async generator?

— Ну смотри, обычный генератор дает возможность функции возвращать серию значений, а с модификатором async ты можешь возвращать значения в будущее. Правда, автор этого, Джафар Хусейн, уже отозвал свой proposal и работает с Кевином Смитом над более узкоспециализированным es-observable для ES7.

— Кхм. Я просто хочу запустить простое приложение. Насколько же глубока кроличья нора?

— Ну, ты можешь использовать RxJS, который ближе к оригинальным observable. Оно широко распространено и годится для продакшена.

— RxJS? Чем же он полезен?

— Работает с твоими уже написанными promises и событиями. Ты можешь создать Observable из любого асинхронного кода, и работать с ним как с обычным значением. Но вообще-то, если ты ищешь что-то по-настоящему реактивное и интересное, позырь фреймворк Cycle.js, разработанный Andre Staltz.

— WTF. Мне всего лишь нужно написать и запустить простое приложение. Смогу я сделать уже это или нет?

— Конечно, хотя деплоинг это отдельный интересный вопрос, но мы уже почти закончили.

— Окей, «сегодня мы многое поняли». Спасибо за объяснения.

— Отлично! Нет проблем.

— Давай я повторю тогда, чтобы мы удостоверились, что я все правильно понял. Итак, мне нужно разбить код своего приложения на actions, stores и компоненты, выстроить однонаправленный dataflow, писать ES6+ код чтобы поиметь все последние языковые фичи, позволяющие мне писать чистый код, затем использовать Babel для транспиляции этого ES6+ кода в ES5 код, пригодный для всех браузеров, использовать webpack, чтобы склеить все части моего приложения, написанные как модули node в один файл, использовать ImmutableJS для представления моих данных и подключить RxJS для описания событий и других асинхронных функций.

— Да. Разве это не восхитительно?

— И, да, я еще кажется забыл про статику и минификацию.

— Не проблема вообще. Webpack умеет импортировать их. Все что тебе нужно, это настроить несколько загрузчиков, плагинов — и вот уже почти и всё. Ты можешь импортировать CSS и картинки. Кстати, есть еще альтернативы CSS, которые позволяют описывать стили в JS...

— Я возвращаюсь к JQuery.