Vue.js - очень популярный фреймворк, и скоро выйдет его новая версия: Vue 3. Я хотел посмотреть, как он выглядит, и сравнить с Malina.js. Malina.js - новый компилятор фреймворка (да, еще один, новый фреймворк каждый день). Он компилирует компоненты в JavaScript во время разработки, поэтому веб-приложение работает в браузере без фреймворка. В этой статье показано, как компиляция во время разработки может улучшить вашу веб-разработку.
Я создал два одинаковых очень простых приложения. Для приложения Vue я использовал Vue 3-rc + Vite и Composition API, который является одной из основных функций Vue 3. (Исходный код и другие ссылки вы можете найти в конце).
Блок компонентов JavaScript
Начнем с блока компонентов JavaScript:
С Vue.js вам необходимо зарегистрировать компоненты и вернуть использованные объекты и функции (возможно, это можно будет оптимизировать в будущих версиях, потому что это можно будет делать автоматически). Кроме того, реактивные объекты требуют определенного способа использования, поэтому для использования других типов библиотек вам может потребоваться некоторая адаптация для преобразования из / в наблюдаемые объекты. Например, в приведенном выше коде я должен добавить .value к наблюдаемым объектам.
Malina.js не использует реактивные объекты. Он работает с обычными переменными JavaScript и обычным JavaScript, поэтому легче использовать другие типы библиотек, а сам код выглядит немного чище.
Также я заметил, что новый Composition API выглядит как Knockout.js, который был популярен в 2011 году. Возможно, синтаксис был вдохновлен Knockout.js, который был проверен временем, и некоторым разработчикам он очень нравится:
Но лично я предпочитаю более чистый синтаксис, близкий к ванильному JavaScript.
Шаблон
Давайте посмотрим на шаблон компонентов:
В Vue.js вы размещаете управляющие директивы, такие как v-if/v-for, внутри HTML-элементов. Это очень популярный способ, такой же, как в Angular.js и других фреймворках, но иногда он заставляет вас создавать дополнительные элементы HTML, которые делают шаблон громоздким.
Malina.js использует другой способ размещения управляющих директив вне HTML-элементов, который также популярен, например используется в Handlebars.js, Mustache.js, Svelte.js, Jinja2 и многих других движках шаблонов. Поскольку управляющие директивы не смешиваются с элементами HTML и сразу бросаются в глаза, это обеспечивает лучшую читаемость.
Существуют также другие подходы, такие как JSX, которые используются в разных фреймворках, поэтому больше о том, что вы предпочитаете.
CSS с областью видимости
CSS с ограничением области видимости - очень важная функция для создания современных веб-приложений. И то, как это работает в Vue.js и Malina.js, является хорошим примером того, почему компиляция во время разработки полезна.
Vue.js может создавать CSS с ограничениями в браузере во время выполнения. Vue.js не может позволить себе использовать правильные библиотеки для CSS и селекторов, потому что они могут быть очень тяжелыми. Vue.js был бы намного тяжелее, если бы их можно было использовать, поэтому Vue.js использует примитивный способ создания CSS с областью видимости: он просто помечает все элементы DOM специальным свойством.
Malina.js компилирует компоненты во время разработки, поэтому может использовать любые библиотеки независимо от их веса, поскольку они не загружаются в браузер. Malina.js выбрал подходящую библиотеку для CSS, чтобы вносить более точные изменения в шаблон. Он добавляет специальный класс к элементам на основе селекторов CSS для компонента и, как результат, создает более компактную и эффективную модель DOM.
Во фрагменте ниже вы можете видеть, что Malina.js пометил только пять элементов DOM, а Vue.js пометил все, даже <br>.
Размер пакета
- Vue.js: 20 Кб в сжатом виде
- Malina.js: 2,9 Кб в сжатом виде
Размер пакета - еще одно преимущество компиляции во время разработки, потому что размер пакета становится намного меньше и содержит только необходимые функции. Это особенно хорошо для виджетов и встроенных приложений, когда вы не хотите присоединять целую структуру, чтобы ваш виджет оставался тонким.
Представление
Заполнение 5000 наименований:
- Vue: 478 мс
- Малина: 322 мс (+ 48% быстрее)
Удаление одной из 5000 строк:
- Vue: 185 мс
- Малина: 97 мс (~ в два раза быстрее)
Протестировано в Firefox 78, источник тестов.
Заключение
Malina.js - это пример, показывающий, какие преимущества может дать компиляция во время разработки. Он имеет меньший размер пакета, более точно работает с шаблонами и CSS (за счет использования более подходящих библиотек) и предоставляет больше возможностей для работы с JavaScript (из-за использования полноценного парсера JavaScript, который слишком тяжел для загрузки в браузер. ). Исходный код приложений может быть более компактным, например, для вышеперечисленных приложений приложение с Malina.js немного компактнее (52 строки кода, а приложение Vue.js - 79 строк кода).
Фреймворки, загружаемые в браузер, должны быть небольшого размера, что означает, что вы ограничены функциональными библиотеками меньшего размера, предоставляющими меньшие функции (например, CSS с ограниченным объемом).
Компиляция во время разработки позволяет вздохнуть свободно, использовать полноценные библиотеки, что дает больше возможностей. Компиляция во время разработки может стать следующим уровнем для интерфейсных фреймворков после 2020 года.
Также я бы порекомендовал посмотреть на Svelte.js, который использует аналогичный подход.
И большое спасибо Алексею Щебелеву, который помогает развивать Malina.js.
Спасибо за прочтение.
