От автора: в 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 контейнер.
Разберем код ниже:
|
1 |
render(html`<div>Hello World</div>`,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 //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 будет фантастическим годом для веб-разработчиков. Нам больше не понадобятся раздутые фреймворки для создания одностраничных сайтов и гибридных приложений.
Заключение
Прямо сейчас мы можем создать большое JS одностраничное приложение с помощью ES6 функций типа загрузчика модулей и кастомных компонентов без зависимостей от больших фреймворков
Однако для создания полноценного ES6 одностраничного приложения нам все еще необходима библиотека Templating engine
Yallajs – шаблонный движок для ES6 Template Literal, совместимый с IE9 и размером всего лишь 5kb
Тесты производительности и потребления памяти yallajs показывают обнадеживающие результаты
Если коротко, то платформы в выигрыше, а разработчики счастливы. Отличная новость для Jose Aguina/веб-разработчиков. 🙂
Автор: YallaJS
Источник: //codeburst.io/
Редакция: Команда webformyself.
