Яке відчуття вивчати JavaScript у 2016 році

Під час написання цієї статті фреймворки JavaScript не створювалися.

Наступне натхненно статтею «Це майбутнє» від Circle CI. Ви можете прочитати оригінал тут . Ця частина — лише думка, і, як і будь-який фреймворк JavaScript, її не слід сприймати надто серйозно.

Привіт, я отримав цей новий веб-проект, але, чесно кажучи, я не писав багато веб-кодів кілька років, і я чув, що ландшафт дещо змінився. Ви найсучасніший веб-розробник тут, чи не так?

-Насправді це інженер переднього плану, але так, я правильний хлопець. Я займаюся Інтернетом у 2016 році. Візуалізації, музичні плеєри, літаючі дрони, які грають у футбол, що завгодно. Я щойно повернувся з JsConf і ReactConf, тож знаю новітні технології для створення веб-додатків.

круто Мені потрібно створити сторінку, яка відображає останню активність користувачів, тому мені просто потрібно отримати дані з кінцевої точки REST і відобразити їх у якійсь таблиці, яку можна фільтрувати, і оновити її, якщо щось зміниться на сервері. Я думав, можливо, використовувати jQuery для отримання та відображення даних?

-Боже мій, ні, ніхто більше не використовує jQuery. Ви повинні спробувати вивчити React, зараз 2016 рік.

О, добре. Що таке React?

-Це надзвичайно класна бібліотека, створена кількома хлопцями з Facebook, вона справді забезпечує контроль і продуктивність вашої програми, дозволяючи вам дуже легко обробляти будь-які зміни перегляду.

Це звучить акуратно. Чи можу я використовувати React для відображення даних із сервера?

-Так, але спочатку вам потрібно додати React і React DOM як бібліотеку на вашу веб-сторінку.

Почекай, навіщо дві бібліотеки?

-Тож одна — це фактична бібліотека, а друга — для маніпулювання DOM, яку тепер можна описати в JSX.

JSX? Що таке JSX?

-JSX — це просто розширення синтаксису JavaScript, яке дуже схоже на XML. Це ще один спосіб описати DOM, сприймайте його як кращий HTML.

Що не так з HTML?

- Зараз 2016 рік. Більше ніхто не кодує HTML безпосередньо.

правильно. У будь-якому випадку, якщо я додам ці дві бібліотеки, я зможу використовувати React?

-Не зовсім. Вам потрібно додати Babel, і тоді ви зможете використовувати React.

Інша бібліотека? Що таке Бабель?

-О, Babel — це транспілер, який дозволяє націлюватися на конкретні версії JavaScript, поки ви кодуєте в будь-якій версії JavaScript. Вам необов’язково включати Babel, щоб використовувати ReactJS, але якщо ви цього не зробите, ви застрягли на використанні ES5, і давайте будемо реальними, зараз 2016 рік, ви повинні кодувати в ES2016+, як це роблять інші круті діти.

ES5? ES2016+? Я тут гублюся. Що таке ES5 і ES2016+?

-ES5 розшифровується як ECMAScript 5. Це версія, на яку орієнтується більшість людей, оскільки вона реалізована в більшості сучасних браузерів.

ECMAScript?

-Так, ви знаєте, стандарт сценаріїв JavaScript базувався на 1999 році після його першого випуску в 1995 році, тоді JavaScript називався Livescript і запускався лише в Netscape Navigator. Тоді це було дуже заплутано, але, на щастя, тепер усе дуже зрозуміло, і ми маємо приблизно 7 видань цієї реалізації.

7 видань. По-справжньому. А ES5 і ES2016+ є?

- П'яте і сьоме видання відповідно.

Почекай, а що сталося з шостим?

-Ви маєте на увазі ES6? Так, я маю на увазі, що кожне видання є доповненням до попереднього, тож якщо ви використовуєте ES2016+, ви використовуєте всі функції попередніх версій.

правильно. І навіщо тоді використовувати ES2016+ замість ES6?

-Ну, ви МОЖЕТЕ використовувати ES6, але щоб використовувати такі цікаві функції, як async і очікування, вам потрібно використовувати ES2016+. Інакше ви застрягнете з генераторами ES6 із співпрограмами для блокування асинхронних викликів для належного потоку керування.

Я не знаю, що ви щойно сказали, і всі ці імена збивають з пантелику. Подивіться, я просто завантажую купу даних із сервера, раніше я міг просто включити jQuery з CDN і просто отримати дані за допомогою викликів AJAX, чому я не можу просто зробити це?

-Це 2016 рік, ніхто більше не використовує jQuery, він закінчується купою спагетті-коду. Це всі знають.

правильно. Тож моя альтернатива — завантажити три бібліотеки для отримання даних і відображення таблиці HTML.

- Ну, ви включаєте ці три бібліотеки, але об’єднуєте їх із менеджером модулів, щоб завантажити лише один файл.

Я бачу. А що таке менеджер модулів?

- Визначення залежить від середовища, але в Інтернеті ми зазвичай маємо на увазі все, що підтримує модулі AMD або CommonJS.

Riiight. А AMD і CommonJS – це…?

-Визначення. Є способи описати, як мають взаємодіяти декілька бібліотек і класів JavaScript. Ви знаєте, експорт і вимагає? Ви можете написати кілька файлів JavaScript, що визначають AMD або CommonJS API, і ви можете використовувати щось на зразок Browserify, щоб об’єднати їх.

Добре, це має сенс… Я думаю. Що таке Browserify?

-Це інструмент, який дозволяє об’єднувати описані CommonJS залежності у файли, які можна запускати у браузері. Він був створений тому, що більшість людей публікують ці залежності в реєстрі npm.

реєстр npm?

- Це дуже велике загальнодоступне сховище, куди розумні люди розміщують код і залежності як модулі.

Як CDN?

-Насправді ні. Це більше схоже на централізовану базу даних, де будь-хто може публікувати та завантажувати бібліотеки, тож ви можете використовувати їх локально для розробки, а потім завантажувати в CDN, якщо хочете.

О, як Бауер!

-Так, але зараз 2016 рік, більше ніхто не використовує Bower.

О, я розумію... тож мені потрібно завантажити бібліотеки з npm?

-Так. Тож, наприклад, якщо ви хочете використовувати React, ви завантажуєте модуль React та імпортуєте його у свій код. Ви можете зробити це майже для кожної популярної бібліотеки JavaScript.

О, як Angular!

-Angular - це так 2015 рік. Але так. Angular буде там, поряд з VueJS або RxJS та іншими класними бібліотеками 2016 року. Хочете дізнатися про них?

Дотримуймося React, я вже багато чого вчу. Отже, якщо мені потрібно використовувати React, я забираю його з цього npm, а потім використовую цю штуку Browserify?

-Так.

Здається надто складним просто взяти купу залежностей і зв’язати їх разом.

-Це так, тому ви використовуєте диспетчер завдань, як Grunt або Gulp або Broccoli, щоб автоматизувати запуск Browserify. Чорт, ви навіть можете використовувати Mimosa.

Бурчати? ковток? Брокколі? Мімоза? Про що ми зараз говоримо?

-Менеджери завдань. Але вони вже не круті. Ми використовували їх у 2015 році, потім використовували Makefiles, але тепер ми обернули все Webpack.

Makefiles? Я думав, що це в основному використовується в проектах C або C++.

-Так, але, очевидно, в Інтернеті ми любимо ускладнювати речі, а потім повертатися до основ. Ми робимо це щороку або близько того, просто зачекайте, ми збираємося зробити збірку в Інтернеті через рік або два.

Зітхання. Ви згадали щось під назвою Webpack?

-Це ще один менеджер модулів для веб-переглядача, який також є на кшталт запуску завдань. Це як краща версія Browserify.

О, добре. Чому краще?

-Ну, можливо, не краще, це просто більш впевнене ставлення до того, як мають бути пов’язані ваші залежності. Webpack дозволяє використовувати різні менеджери модулів, а не лише CommonJS, наприклад, рідні модулі з підтримкою ES6.

Мене дуже спантеличила вся ця річ із CommonJS/ES6.

-Усі, але вас більше не хвилює SystemJS.

Ісус Христос, інший іменник-js. Добре, а що це за SystemJS?

-Ну, на відміну від Browserify і Webpack 1.x, SystemJS — це динамічний завантажувач модулів, який дозволяє зв’язувати кілька модулів у кількох файлах замість того, щоб об’єднувати їх в один великий файл.

Зачекайте, але я думав, що ми хочемо зібрати наші бібліотеки в один великий файл і завантажити його!

-Так, але через те, що зараз з’являється HTTP/2, кілька запитів HTTP насправді краще.

Зачекайте, чи не можемо ми просто додати три оригінальні бібліотеки для React??

-Насправді ні. Я маю на увазі, що ви можете додати їх як зовнішні сценарії з CDN, але тоді вам все одно потрібно буде включити Babel.

Зітхання. І це ж погано?

-Так, ви включили б усе babel-core, і це було б неефективним для виробництва. Під час виробництва вам потрібно виконати серію попередніх завдань, щоб підготувати свій проект, щоб ритуал виклику Сатани виглядав як рецепт варених яєць. Вам потрібно зменшити активи, змінити їх на вигляд, вставити CSS у верхній частині сторінки, відкласти сценарії, а також-

Я зрозумів, я зрозумів. Тож як би ви це зробили, якби ви не включили бібліотеки безпосередньо в CDN?

-Я б перевів його з Typescript за допомогою комбінації Webpack + SystemJS + Babel.

Машинопис? Я думав, ми кодуємо в JavaScript!

-Typescript ЦЕ JavaScript, або, краще кажучи, надмножина JavaScript, точніше JavaScript у версії ES6. Знаєте, ту шосту версію, про яку ми говорили раніше?

Я думав, що ES2016+ вже є надмножиною ES6! НАВІЩО нам зараз потрібна ця річ під назвою Typescript?

- О, тому що це дозволяє нам використовувати JavaScript як типізовану мову та зменшити кількість помилок під час виконання. Зараз 2016 рік, вам слід додати деякі типи до свого коду JavaScript.

І Typescript, очевидно, це робить.

-Flow також, хоча він лише перевіряє введення, тоді як Typescript є надмножиною JavaScript, яку потрібно скомпілювати.

Зітхання… а Флоу?

- Це засіб перевірки статичних типів, створений деякими хлопцями з Facebook. Вони закодували це в OCaml, тому що функціональне програмування — це чудово.

OCaml? Функціональне програмування?

-Це те, що круті діти використовують у наш час, чувак, знаєте, 2016? Функціональне програмування? Функції високого порядку? Каррі? Чисті функції?

Я поняття не маю, що ти щойно сказав.

-Спочатку ніхто цього не робить. Дивіться, вам просто потрібно знати, що функціональне програмування краще, ніж ООП, і це те, що ми повинні використовувати в 2016 році.

Зачекайте, я вивчав ООП у коледжі, я думав, що це добре?

-Так було з Java до того, як її купив Oracle. Я маю на увазі, що ООП був хорошим у ті часи, і він все ще має своє застосування сьогодні, але тепер усі розуміють, що модифікація станів еквівалентна штовханню немовлят, тому тепер усі переходять до незмінних об’єктів і функціонального програмування. Хлопці з Haskell називали це роками, і не починайте з хлопців Elm, але, на щастя, тепер у мережі є такі бібліотеки, як Ramda, які дозволяють нам використовувати функціональне програмування на простому JavaScript.

Ви просто скидаєте імена заради цього? Що таке Рамнда?

-Ні. Рамда. Як лямбда. Ви знаєте бібліотеку Девіда Чемберса?

Девід хто?

- Девід Чемберс. Класний хлопець. Грає в підлу гру Coup. Один із авторів Ramda. Ви також повинні перевірити Еріка Меєра, якщо ви серйозно ставитеся до вивчення функціонального програмування.

А Ерік Меєр – це…?

-Також спеціаліст із функціонального програмування. Чудовий хлопець. У нього є купа презентацій, де він руйнує Agile, використовуючи цю дивну кольорову сорочку. Ви також повинні переглянути деякі речі від Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

добре Я збираюся зупинити вас на цьому. Все це добре і чудово, але я думаю, що все це настільки складно і непотрібно для простого отримання та відображення даних. Я майже впевнений, що мені не потрібно знати цих людей або вивчати всі ті речі, щоб створити таблицю з динамічними даними. Повернемося до React. Як я можу отримати дані з сервера за допомогою React?

-Ну, насправді ви не отримуєте дані за допомогою React, ви просто відображаєте дані за допомогою React.

Ох, будь я проклята. Отже, що ви використовуєте для отримання даних?

- Ви використовуєте Fetch для отримання даних із сервера.

вибачте? Ви використовуєте Fetch для отримання даних? Тому, хто називає ці речі, потрібен тезаурус.

-Я так знаю? Fetch це ім’я рідної реалізації для виконання XMLHttpRequests на сервері.

О, так AJAX.

-AJAX — це просто використання XMLHttpRequests. Але точно. Fetch дозволяє вам створювати AJAX на основі обіцянок, які потім ви можете вирішити, щоб уникнути пекла зворотного виклику.

Пекло зворотного дзвінка?

-Так. Щоразу, коли ви виконуєте асинхронний запит до сервера, вам потрібно дочекатися його відповіді, яка потім змушує вас додати функцію всередині функції, яка називається пірамідою зворотного виклику з пекла.

О, добре. І ця річ із обіцянками вирішує це?

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

І це можна зробити за допомогою Fetch?

-Так, але лише якщо ваш користувач використовує вічнозелений браузер, інакше вам потрібно включити полізаповнення Fetch або використовувати Request, Bluebird або Axios.

Скільки бібліотек мені потрібно знати, заради Бога? Скільки їх?

-Це JavaScript. Повинні бути тисячі бібліотек, які всі роблять те саме. Ми знаємо бібліотеки, насправді, у нас найкращі бібліотеки. Наші бібліотеки величезні, і іноді ми включаємо в них фотографії Гая Фієрі.

Ви щойно сказали Гай Фієрі? Давайте покінчимо з цим. Що роблять ці бібліотеки Bluebird, Request, Axios?

-Це бібліотеки для виконання XMLHttpRequests, які повертають обіцянки.

Хіба метод AJAX jQuery також не почав повертати обіцянки?

-У 2016 році ми більше не використовуємо слово на букву «J». Просто скористайтеся Fetch і заповніть його, коли його немає в браузері, або скористайтеся замість нього Bluebird, Request або Axios. Потім керуйте обіцянкою за допомогою очікування в асинхронній функції та бум, у вас є належний потік керування.

Ви вже втретє згадуєте очікування, але я не знаю, що це таке.

-Await дозволяє блокувати асинхронний виклик, дозволяючи вам краще контролювати, коли дані збираються, і загалом підвищити читабельність коду. Це чудово, вам просто потрібно переконатися, що ви додали попередній набір етапу 3 у Babel або використовували синтаксисні функції та плагін transform-async-to-generator.

Це безумство.

-Ні, божевільний той факт, що вам потрібно попередньо скомпілювати код Typescript, а потім транспілювати його за допомогою Babel, щоб використовувати очікування.

що? Це не включено в Typescript?

- Це робиться в наступній версії, але з версії 1.7 він націлений лише на ES6, тому, якщо ви хочете використовувати await у браузері, спершу вам потрібно скомпілювати свій код Typescript, націлений на ES6, а потім Babel, це лайно, щоб націлити ES5.

На даний момент я не знаю, що сказати.

- Дивіться, це легко. Кодуйте все в Typescript. Усі модулі, які використовують Fetch, компілюють їх для націлювання на ES6, транспілюють їх за допомогою Babel на попередньому налаштуванні stage-3 і завантажують їх за допомогою SystemJS. Якщо у вас немає Fetch, заповніть його поліфілом або скористайтеся Bluebird, Request або Axios і обробляйте всі свої обіцянки за допомогою очікування.

У нас дуже різні визначення легкого. Отже, завдяки цьому ритуалу я нарешті отримав дані, і тепер я можу відобразити їх за допомогою React, чи не так?

-Чи збирається ваша програма обробляти будь-які зміни стану?

Е-е, я так не думаю. Мені просто потрібно відобразити дані.

- О, слава богу. Інакше мені довелося б пояснювати вам Flux і такі реалізації, як Flummox, Alt, Fluxible. Хоча, чесно кажучи, ви повинні використовувати Redux.

Я збираюся просто пролетіти над цими іменами. Знову ж таки, мені просто потрібно відобразити дані.

-О, якщо ви просто відображаєте дані, React вам не потрібен. Ви були б у порядку із механізмом створення шаблонів.

Ви жартуєте? Ви думаєте, що це смішно? Ви так ставитеся до своїх близьких?

-Я просто пояснював, чим ти можеш скористатися.

СТІЙ. Просто зупинись.

- Я маю на увазі, що навіть якщо це просто використовується механізм шаблонів, я б все одно використовував комбінацію Typescript + SystemJS + Babel на вашому місці.

Мені потрібно відображати дані на сторінці, а не виконувати оригінальний MK fatality Sub Zero. Просто скажіть мені, який механізм створення шаблонів використовувати, і я візьму його звідти.

-Їх багато, хто з них вам знайомий?

Тьфу, не пам'ятаю імені. Це було дуже давно.

-jШаблони? jQote? ЧИСТИЙ?

Е-е, не дзвонить. Ще один?

-Прозорість? JSRender? MarkupJS? KnockoutJS? Той мав двосторонню прив’язку.

Ще один?

-PlatesJS? jQuery-tmpl? Кермо? Деякі люди все ще використовують його.

можливо. Чи є подібні до останнього?

-Вуса, підкреслення? Я думаю, що тепер навіть у Лодаша є, чесно кажучи, але це якийсь 2014 рік.

Хм.. можливо, він був новішим.

-Джейд? DustJS?

немає

-DotJS? EJS?

немає

-Нунджуки? ECT?

немає

-Ма, все одно ніхто не любить синтаксис Coffeescript. Джейд?

Ні, ти вже сказав Джейд.

- Я мав на увазі Мопса. Я мав на увазі Джейд. Я маю на увазі, що Джейд тепер Мопс.

Зітхання. Ні. Не пам'ятаю. Який би ви використали?

- Ймовірно, просто рядки рідного шаблону ES6.

Дай мені вгадати. І для цього потрібен ES6.

-Правильно.

Для якого, залежно від того, який браузер я використовую, потрібен Babel.

-Правильно.

Який, якщо я хочу включити без додавання всієї основної бібліотеки, мені потрібно завантажити його як модуль із npm.

-Правильно.

Для цього потрібен Browserify, або Wepback, або, швидше за все, щось інше під назвою SystemJS.

-Правильно.

Яким, якщо це не Webpack, в ідеалі має керувати програма виконання завдань.

-Правильно.

Але, оскільки я повинен використовувати функціональне програмування та типізовані мови, мені спочатку потрібно попередньо скомпілювати Typescript або додати цю штучку Flow.

-Правильно.

А потім надішліть це до Babel, якщо я хочу використати await.

-Правильно.

Тож я можу використовувати Fetch, обіцянки, контролювати потік і всю цю магію.

-Просто не забудьте заповнити Fetch, якщо він не підтримується, Safari все одно не може з цим впоратися.

Ви знаєте що. Я думаю, ми закінчили. Насправді, я думаю, я закінчив. Я покінчив з Інтернетом, я покінчив з JavaScript взагалі.

-Це добре, через кілька років ми всі будемо кодувати в Elm або WebAssembly.

Я просто збираюся повернутися до серверної частини. Я просто не можу впоратися з цією кількістю змін, версій, видань, компіляторів і транспіляторів. Спільнота JavaScript збожеволіла, якщо думає, що хтось може встигнути за цим.

-Я тебе чую. Тоді вам слід спробувати спільноту Python.

чому

-Ви коли-небудь чули про Python 3?

Оновлення: дякую за вказівку на описки та помилки, я оновлю статтю, як зазначено. Обговорення в HackerNews і Reddit .