it's the future

Цей пост просто жарт і не намагається виставити інструменти, згадані тут, в поганому світлі. Я використовую їх постійно, вони прекрасні, і я рекомендую їх використовувати. За мотивами 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 і PHP?
— Ну як навіщо. Реактив це майбутнє. Він дозволяє створювати переиспользуемые компоненти.
— Типу як в 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 даними все стає набагато краще і цікавіше.
— Вами? Мені потрібен Immutable?
— Тобі потрібні observables щоб зручно працювати з подіями і асинхронностью, а Immutable.js потрібен для персистентності, ефективності і простоти. Observables це типу, як масиви, тільки асинхронні. Вони повертають значення за допомогою async-генераторів з ES2016.
— Що за async generator?
— Ну дивись, звичайний генератор дає можливість функції повертати серію значень, а з модифікатором async ти можеш повертати значення в майбутнє. Правда, автор цього, Джафар Хусейн, вже відкликав свій proposal і працює з Кевіном Смітом над більш вузькоспеціалізованим es-вами для ES7.
— Кхм. Я просто хочу запустити просте додаток. Наскільки глибока кроляча нора?
— Ну, ти можеш використовувати RxJS, який ближче до оригінальним вами. Воно широко поширене і годиться для продакшену.
— RxJS? Чим він корисний?
— Працює з твоїми вже написаними promises і подіями. Ти можеш створити Вами з будь-якого асинхронного коду, і працювати з ним як зі звичайним значенням. Але взагалі-то, якщо ти шукаєш щось по-справжньому реактивне і цікаве, позырь фреймворк Cycle.js, розроблений Andre Staltz.
— WTF. Мені всього лише потрібно написати і запустити просте додаток. Зможу я зробити вже це чи ні?
— Звичайно, хоча деплоинг це окремий цікаве питання, але ми вже майже закінчили.
— Окей, «сьогодні ми багато чого зрозуміли». Дякую за пояснення.
— Чудово! Немає проблем.
— Давай я повторю тоді, щоб ми переконалися, що я все правильно зрозумів. Отже, мені потрібно розбити код програми на actions, stores і компоненти, вибудувати односпрямований dataflow, писати ES6+ код щоб отримати всі останні мовні фічі, дозволяють мені писати чистий код, потім використовувати Babel для транспиляции цього ES6+ коду в ES5 код, придатний для всіх браузерів, використовувати webpack, щоб склеїти всі частини мого додатки, написані як модулі node в один файл, використовувати ImmutableJS для представлення моїх даних і підключити RxJS для опису подій та інших асинхронних функцій.
— Так. Хіба це не чудово?
— І, так, я ще здається забув про статику і минификацию.
— Не проблема взагалі. Webpack вміє імпортувати їх. Все що тобі потрібно, це налаштувати декілька завантажувачів, плагінів — і ось вже майже і все. Ти можеш імпортувати CSS і картинки. До речі, є ще альтернативи CSS, які дозволяють описувати стилі в JS...
— Я повертаюся до JQuery.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.