Pull to refresh

It’s the future

JavaScript
Translation
Original author: Boopathi Rajaa

Этот пост просто шутка и не пытается выставить инструменты, упомянутые здесь, в дурном свете. Я использую их постоянно, они великолепны, и я рекомендую их использовать. По мотивам It's the future @ CircleCI Blog


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


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


— Круто. Я щас делаю простое приложение — обычный 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 данными всё становится намного лучше и интереснее.


— 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.

Tags:javascriptreactjsxjquerywebpackbabelimmutablees6es7rxjsobservablehotreloadfluxangularmvcnodevirtualdombackbone
Hubs: JavaScript
Total votes 178: ↑167 and ↓11 +156
Views83.9K

Popular right now

JavaScript разработчик (React)
from 80,000 to 150,000 ₽Баланс-ПлатформаМоскваRemote job
JavaScript разработчик
from 75,000 to 180,000 ₽WebLab TechnologyRemote job
Frontend developer JS, react, jquery
from 2,500 €VialyticsRemote job
Fullstack JavaScript developer
from 5,500 to 6,500 $BrightdataRemote job