Вивчення Javascript в 2018

Від автора: в 2016 створення веб-додатки можна було порівняти з походом у ліс з одним компасом. Ми знаємо, що рухаємося в правильному напрямку, але не знаємо, що перед нами. Чим частіше ми ходимо в ліс, тим швидше знаходимо кращий шлях. Кожен місяць виходили фреймворки, що спрощують розробку веб-додатків (або поліпшують продуктивність). Новачкам у розробці складно підібрати кращий фреймворк. Тому вони воліють безпечний шлях і вибирають великих розробників, так як їх ЗА володіє величезною базою фанатів, що дозволяє переконатися в тому, що фреймворк найкращий.

Якщо ж ви досвідчений розробник веб-додатків, я задав вам питання: «infernojs краще react або vue краще angular ?». Можете не відповідати, але я впевнений, ви зрозуміли, про що я. Схоже, подув вітер змін на краще. Що дасть нам вивчення Javascript в 2018?

Ліс JS змінився, а браузер Chrome веде нас на новий рівень, де в цьому лісі вже є чіткі стежки, більш простий ландшафт і напрямки.

Тепер ми можемо створювати односторінкові програми або гібридні програми без залежності від великих і роздутих фреймворків. Зовсім скоро ваші односторінкові додатки будуть важити зовсім нічого, так як більша частина бібліотек вже вбудована. Дозвольте довести вам це:

Нижче наведено приклад переписаного відомого уроку Angular Hero Editor на ES6 модулі і ES6 String Template.

Ми можемо створювати додатки із структурою проекту Angular, але на вбудованому ES6. Мрія стала реальністю для розробників. Не потрібен babel, транспайлер, ви просто передаєте код ES6 відразу в браузер.

У ES6 є такі речі як Module loader, Template Literal. Якщо ви підете ще далі, то ви можете створювати свої кастомні елементи прямо в браузері без залежностей.

Проте нам все ще необхідно дещо.

«Нам все ще потрібна бібліотека рушія шаблонів»

Ми можемо використовувати Template Literal як частина ES6, але Template Literal не движок шаблонів. Функції рушія шаблонів – це перетворення Template Literal у вузол DOM і вставка його в DOM контейнер.

Розберемо нижче код:

render(html`

`,document.body);

Текст між лапок « і є ES6 Template Literal, а render і html відносяться до Templating Engine. Код вище говорить, що ми хочемо додати div з текстом «Hello World» document body.

У проекті ES6 Hero Editor теги html і htmlCollection, а також render входять в Templating Engine.

Opensource Google lit-html

Нещодавно google анонсували проект lit-html, щоб представити движок шаблонів на ES6 String literal.

З readme з Github можна зрозуміти мету lithmtl: «lit-html дозволяє писати HTML шаблони за допомогою JavaScript template literals і ефективно рендери і повторно рендери ці шаблони в DOM.»

Бібліотека все ще в розробці та не має нормального демо.

Opensource http://yallaJS.io

Інші opensource спільноти розпочали таку ж ініціативу yallajs. Мета описується коротко (з сторінки github).

«YallaJS спрощує створення HtmlTemplate і рендер його в DOM»

Обидва фреймворку намагаються вирішити одну проблему – створення шаблонів на ES6 Template literal. Головна відмінність yalla і lithtml в технології, використаної для розробки і знаходження платформи. lit-html входить в polymer-project (підтримка Polymer в IE9 не входить в їх пріоритети), а yallajs намагається забезпечити зворотну сумісність з IE9 з найкращою продуктивністю в своєму класі.

Продуктивність

Нижче представлені графіки тестів продуктивності yallajs. Продуктивність досі в пріоритеті для yallajs, але багатообіцяючі результати.

По споживанню пам’яті yallajs також демонструє багатообіцяючі результати.

Розбір продуктивності:

Вихідний код yallajs використовується як бенчмарк тут, а тут як живе додаток.

Yallajs і lit-html знаходяться на ранніх етапах розробки, але вбачаючи потенціал обох бібліотек, я вірю, що 2018 буде фантастичним роком для веб-розробників. Нам більше не знадобляться роздуті фреймворки для створення односторінкових сайтів і гібридних додатків.

Висновок

Якщо коротко, то платформи у виграші, а розробники щасливі. Відмінна новина для Jose Aguina/веб-розробників.