Можливо, вам не доведеться перекладати свій JavaScript

Популярні путівники, такі як YouMightNotNeedJQuery.com та You Don't Need Lodash / Underscore, кинули виклик поширеним галузевим практикам.

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

StatCounter збирає дані про 15+ мільярдів переглядів сторінок щомісяця з 2,5 мільйонів веб-сайтів по всьому світу. Станом на травень 2017 року такий статус-кво:

Що робить цю схему цікавою, так це те, що 3 найкращі браузери (Chrome, Safari та FireFox) є вічнозеленими,це означає, що 74% користувачів автоматично отримують останню версію свого браузера.

Давайте подивимось, чи правильно це припущення.

Ось найкращі версії браузерів на ринку:

Chrome 58 був випущений менше місяця тому, і його настільна версія займає 12,77% світової частки ринку браузерів. Chrome 57 був випущений лише за 42 дні до цього, і його настільна версія займає 9,96% світового ринку браузерів. На жаль, StatCounter не робить різниці між хромованими версіями на мобільних платформах, але припускаючи те саме співвідношення, що і робочий стіл, який ми отримуємо:

Що це означає для мого коду?

Згідно з таблицею сумісності ES, остання версія всіх основних браузерів має дуже хорошу підтримку функцій ES6:

Іншими словами, якщо ви перекладаєте свій JavaScript на ES5, ви робите свій код надмірно великим і повільним, щоб підтримувати меншість користувачів, які, ймовірно, оновлять свою систему до того часу, як вам вдасться налаштувати ваш Webpack та Babel! ?

Чому б ви все-таки транспілювали?

Можливо, ви все-таки захочете переписати свій код, але, сподіваємось, зваживши мінуси та плюси чи можливі альтернативи:

  • Ви використовуєте React JSX (який досить популярний на даний момент, тому я припускаю, що багато розробників входять у цю категорію). JSX за своєю суттю - це перетворення XHTML на JS-код, і йому не потрібен повний транслятор, такий як Babel. Крім того, якщо вам потрібен лише VirtualDom, скористайтеся цим.
  • Ви хочете спробувати найновіші функції мови. Якщо ви не є частиною TC39 або не маєте пекучого бажання вводити нестабільні мовні особливості у свій виробничий код, ви, мабуть, добре з ES6. На сьогоднішній день у нас є гідна мова - більшість браузерів і потреба в трансліруванні зникає.
  • Ви використовуєте TypeScript і, сподіваємось, зважили мінуси і плюси. Компілятор TypeScript при націлюванні на сучасну версію ES6 здебільшого видаляє інформацію про тип, а не перетворює синтаксис.
  • Ви хочете зменшити розмір коду, використовуючи тремтіння дерев (ось як це зробити у веб-пакеті та зведеному звіті). Ви хочете заплутати свій код або зменшити його розмір шляхом зменшення. Ви хочете умовно виключити частину коду. Це вимагає статичного аналізу коду. Ви можете використовувати розумний пакет для таких виробничих послуг, як мобільні пристрої, але ми побачимо більш ретельну оцінку витрат при створенні таких альтернативних розгортань. Такі види статичного аналізу коду і надалі будуть корисними як «вдосконалені методи оптимізації» для виробничого коду.Вам не потрібно мініфікувати файли. На даний момент UglifyJS не може мінімізувати ES6 (хоча існує гармонійна гілка), але Бабілі може з цим боротися. Алгоритми стиснення роблять досить пристойну роботу (не тоді, коли файлів замало), і якщо ви не завантажуєте операційну систему при кожному завантаженні сторінки, вона повинна працювати нормально без стиснення. У наші дні зображення та мультимедійний вміст займають набагато більшу пропускну здатність, ніж код.
  • Ви хочете, щоб слон був у кімнаті:

NPM - найбільший менеджер пакетів на планеті. Більшість нетривіальних веб-додатків використовують деякий код від NPM, і це передбачає використання пакета модулів. Це скоро зміниться! Chrome вже підтримує модулі ES6 в Canary (Chrome 60 офіційно надійде цю функцію в серпні цього року), і Safari теж буде надходити, поки Firefox та Edge працюють над цим.

Крім того, HTTP / 2 дозволяє добровільно надсилати ресурси в браузер. Це означає, що якщо a.js імпортує b.js та c.js , сервер може натискати b.js та c.js кожного разу, коли a.js отримується , що мінімізує час між запитами. Звичайно, це спрощений вигляд, оскільки на практиці браузер вже може мати b.js та c.js у кеші. HTTP / 2 підтримується у більшості браузерів.

Майбутнє без трансляції

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

Транспіляція є обхідним шляхом. Можливо, ми робили це занадто довго, щоб звикли, але подумайте. Ми “складаємо” “інтерпретовану” мову з “інтерпретованою” мовою! Крім того:

  • Налаштування Webpack / Browserify у багатьох випадках є непотрібним податком
  • Налагодження з використанням вихідних карт завжди складніше, ніж налагодження фактичного запущеного сценарію (хтось отримував задоволення від спроб налагодження thisабо змінних, коли вихідні карти не працюють належним чином?)
  • Це вбиває DX, коли вам потрібно почекати кілька секунд (іноді півхвилини) після кожного редагування, щоб побачити останній код. Гаряче перезавантаження модуля (HMR) є відповіддю на це, але це не завжди плавно і швидко налаштовується. Без трансляції все, що вам потрібно зробити, це оновити сторінку, і менш ніж за секунду з’явиться ваша остання сторінка!

Цього серпня, коли постачаються модулі ES6, деякі типи програм взагалі не використовуватимуть транпіляцію:

  • Розширення Chrome
  • Настільні програми Electron
  • Веб-додатки B2B, створені для управління діловими користувачами, які вже мають гарне обладнання, яке надає компанія

Коли транпіляція стане в минулому, бібліотеки з синтаксисом Hyperscript передадуть ідеї React до POJS (звичайний старий JavaScript, який не перекладається і легко налагоджується на консолі).

Не транспілюйте, а компілюйте по-справжньому!

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

Якщо ви такий розробник, котрий чекає чогось нового, погляньте на Rust. Він компілюється в WASM, але не обмежується веб. Люди фактично використовують його для написання операційної системи або браузера. Окрім старого часу розробники C / C ++ схвалюють це і подобається, і в ньому є дуже привітна спільнота.

Кілька приміток

  • За словами колишнього технічного директора Mozilla, Chrome виграв, і навряд чи відбудеться ще одна війна браузера. Цікаво те, що Chrome виграв його меритократією . Це відкритий код, і Google чітко визначив, яку інформацію він збирає від користувачів. Chrome виграє навіть бізнес-користувачів, які традиційно використовують Windows. Проте, хоча кінцеві користувачі вибирають Chrome через його швидкість, безпеку та простоту, програмісти люблять його інструменти для розробників. Google відіграє активну роль у TC39, який керує майбутнім JavaScript, і в цілому є найсильнішим прихильником веб-платформи, хоча він може конкурувати зі своєю власною мобільною ОС. Мало того, Google також допомагає своїм конкурентам. Google був одним з найбільших фінансових прихильників Mozilla, і його механізм візуалізації використовує Opera.
  • Microsoft офіційно припинила підтримку IE близько 17 місяців тому. IE 11 продовжуватиме отримувати оновлення безпеки до 2025 року, але вам вирішувати, як витратити значні ресурси на підтримку браузера, який використовує лише 3,24% ринку. Також майте на увазі, що Edge є браузером за замовчуванням у Windows 10. Якщо хтось не хоче оновити свою Windows до останньої версії, нещодавня атака WannaCrypt, ймовірно, дає їм підставу для перегляду! Мене особисто цікавить будь-яке дослідження ринку щодо доходу від цього конкретного сегменту клієнтів.
  • Apple встановила низку несправедливих обмежень, щоб утримати інших постачальників браузерів від їх платформи iOS. Так, наприклад, Chrome на iOS технічно обмежений частинами двигуна Safari! Раніше Safari був новим IE, поки ще в 2016 році вони не зробили хорошої роботи і не стали браузером з найкращою підтримкою ES6:

Загалом загальна частка iOS / Safari менше, ніж Android / Chrome. Це залежить від країни, наприклад, у багатіших країнах iOS має дещо вищий рівень проникнення, тоді як у країнах, що розвиваються, Android є абсолютним переможцем, але в усьому світі ось статистика:

Заклик до дії!

Якщо ви достатньо дорослі, можливо, ви пам’ятаєте настирливі часи, коли деякі веб-сайти примушували (або ввічливо пропонували) вибраний ними браузер (переважно IE):

Ми не хочемо цього робити! Як би ми не були раді Chrome, ми не хочемо ігнорувати 46% веб-трафіку, який не відображається Chrome.

Те, що незабаром ми можемо отримати підтримку модулів ES6 у браузерах, це не означає, що ми можемо позбутися процесу збірки та відповідної “стратегії зв’язку”. - Стефан Джудіс

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

Однак це не нова проблема. Незважаючи на те, що ES6 є однією з найбільших змін в Інтернеті, витончена деградація все одно може забезпечити певну користь для меншості, одночасно тримаючи витрати на розробку під контролем для більшості.

У наступному дописі я обговорю практичну сторону того, як транспортувати сучасний код, маючи план резервного копіювання для витонченої деградації. Ви можете стежити за мною у Twitter або Medium, щоб залишатися в курсі подій.

БОНУС: Погляньте на JS Codeshift. Це CLI для перетворення старого коду javascript у новий код javascript, оновлюючи навіть старі дзвінки бібліотеки javascript до їх останнього API. Він намагається зберегти якомога більше оригінального стилю. Робочий процес: після внесення змін до контролю версій запустіть це і ретельно порівняйте та запустіть автоматизовані та ручні тести. Готово!

Оновлення 1 (2017–09–8): Chrome 61 приземлився кілька днів тому з повною підтримкою модуля ES6. Він має 54% світового ринку браузерів. Safari (14% світового ринку) деякий час підтримував модулі ES6.

Оновлення 2 (2017–09–10): завдяки цьому трюку ви все ще можете підтримувати браузери, які не підтримують модулі ES6pt nomodule src = ”compiled.js”> <; / scri pt>. Атрибут nomodule повідомляє браузерам з підтримкою модуля ES6 не завантажувати сценарій. У Safari є кілька застережень, які ви можете прочитати на сторінці, яка розповідає про фокус. Прочитайте специфікацію.

Оновлення 3 (2017–09–12): Модулі ES6 підтримують землю в браузерах: чи настав час переосмислити об’єднання?

Оновлення 4 (2017–09–12): модуль за замовчуванням відстрочено червоним. Якщо ви хочете обійти це, додайте атрибут async до тегу сценарію, щоб запобігти єдиній точці відмови (SPOF).

Оновлення 5 (2017–09–13): Вузол LTS 8.5 підтримує модулі ES6 (так звані ESM) за прапором, коли файл має розширення * .msj . Ось приємне вступне слово про те, як їх використовують.

Оновлення 6 (2017-09-22): ось кілька чудових практичних порад щодо підтримки як нових, так і старих браузерів. Заощадження пропускної здатності, щоб уникнути трансляції, є великим!

Оновлення 7 (2018–01–15): Lebab (реверс Babel) має CLI для модернізації старого стилю Javascript. Це трохи схоже на CodeShift Facebook, оскільки вони обидва модернізують старий код.

Найпоширеніша помилка в історії обчислювальної техніки відкрила нам чудові можливості! Прочитайте Чому ми повинні переконувати наших користувачів оновлювати свої браузери?