Цей пост просто жарт і не намагається виставити інструменти, згадані тут, у поганому світлі. Я використовую їх постійно, вони чудові, і я рекомендую їх використовувати. За мотивами 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.
