Структура JavaScript, яка ставить веб-сторінки на дієту

Svelte, створений графічним редактором для The New York Times, привернув людей серед програмістів, які хочуть, щоб їх сторінки завантажувалися швидше.

Веб-сайти занадто великі.

За інформацією HTTP Archive, веб-сторінки, яка відстежує ефективність веб-сайтів та технології, які вони використовують, середня веб-сторінка становить близько 2 мегабайт. Звичайно, ви можете завантажити 2 мегабайти менш ніж за секунду на хорошому мобільному зв’язку 4G. Але сучасні веб-сторінки є проблематичними для людей, які мають повільні зв’язки або мають невелику пропускну здатність. Не так давно на 1,4-мегабайтній дискеті вміщалася складна гра чи програма.

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

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

Новий фреймворк JavaScript Svelte, створений візуальним журналістом та розробником програмного забезпечення Річем Харрісом, має на меті спростити швидше написання, менших інтерактивних веб-сайтів та додатків. Веб-розробник Шон Ван каже, що зменшив розмір свого особистого веб-сайту зі 187 кілобайт до 9 кілобайт, переключившись з React на Svelte.

"Це був великий момент" нічого собі ", - говорить Ван. "Я навіть не намагався оптимізувати розмір, і він просто впав".

Харріс, графічний редактор The New York Times, створив і випустив першу версію Svelte в 2016 році, працюючи в The Guardian. Багато його проектів стосувались інтерактивної графіки та анімації, але він побоювався, що графіка може зайняти занадто багато часу або перегляне обмеження даних користувачів.

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

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

Все, що ви коли-небудь хотіли знати про Linux, GNU та про те, як великі компанії заробляють гроші на безкоштовному програмному забезпеченні на основі співпраці.

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

В опитуванні State of JavaScript 2019, в якому взяли участь понад 21 000 розробників, 88 відсотків респондентів, які використовували Svelte, сказали, що задоволені нею, давши їй другий найвищий рейтинг задоволеності в опитуванні, відразу за рівнем задоволеності React у 89 відсотків. Але лише 7,8 відсотка респондентів користувалися Svelte, а 24,7 відсотка ніколи не чули про нього. Тим часом 80,3 відсотка використовували React.

Гарріс розуміє, чому багато розробників будуть вагатися інвестувати у вивчення Svelte. Світ розробки JavaScript рухається швидко, і програмісти вже мають запаморочливу кількість інструментів для вибору та навчання. "Перевагою React є підтримка Facebook, потужного ринку праці та величезної екосистеми сторонніх речей, які працюють з ним", - говорить він. Хоча Гарріс використовує Svelte для створення графіки та анімації для The New York Times, сайт видавця все ще базується на React.

Svelte все ще є хобі-проектом, над яким Гарріс та інші розробники працюють переважно у вільний час. Гарріс працює над цим "на годиннику" лише тоді, коли йому потрібно щось виправити або додати функцію, яка допомагає йому в роботі для Times.

Гарріс каже, що Svelte найкраще підходить для випадків, коли продуктивність та розміри файлів особливо важливі, наприклад, програми, що працюють на смарт-телевізорах або малопотужних пристроях.

Але деякі розробники Svelte використовують його для створення більших додатків. Райан Аткінсон є засновником Felt Social, яка робить інструменти для створення соціально налаштованих веб-сайтів, що легко настроюються. Він каже, що обрав Svelte, оскільки він робить швидшими, швидкішими програми, навіть якщо вони не завжди є найменшими. "Архітектура Svelte може принципово змінити гру побудови користувальницьких інтерфейсів", - говорить він.

Аткінсон каже, що програмісти часто відмовляються від інструментів, корисних для побудови дрібних речей, думаючи, що це "іграшки", які не можна використовувати для побудови великих речей.

"Я думаю, що це помилка", - каже він. Зрештою, зазначає він, колись JavaScript вважали "іграшковою мовою". Зараз він використовується для написання таких програм, як Gmail і Google Docs.