382  /  382
Справочник

Vue.js и Bitrix Framework

Просмотров: 86125
Дата последнего изменения: 04.06.2024
Анна Кокина
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет

Важно! Работа с Vue.js подробно описана в учебном курсе Vue.js и Bitrix Framework.

  Что такое Vue.js?

Vue (произносится /vjuː/, примерно как view) — это JavaScript-фреймворк для создания пользовательских интерфейсов. Построен на основе стандартных HTML, CSS и JavaScript. Vue предоставляет декларативную и основанную на компонентах модель программирования, которая помогает эффективно разрабатывать и простые, и сложные пользовательские интерфейсы.

Vue.JS базируется на идее виртуального DOM. DOM (аббревиатура от Document Object Model) — способ представления
структурного документа с помощью объектов. Это кроссплатформенное и
языко-независимое соглашение для представления и взаимодействия с
данными в HTML, XML и т.д.

Подробнее...
Управление DOM-структурой в документации Битрикс.
Это исключает прямое взаимодействие с узлами интерфейса. Первоначальная работа ведется с виртуальной копией (virtual DOM), а уже потом изменения применяются к реальным узлам интерфейса. Параллельно сравнивается реальное дерево DOM и его виртуальная копия, выявляется разница и переписывается только то, что претерпело изменения. Т.е.за короткий промежуток времени накапливаются все изменения, а потом применяются единым патчем к реальным узлам интерфейса (нодам). За счет этого скорость выполнения гораздо выше.

Vue.js удобно использовать, когда какие-либо данные используются в нескольких компонентах. В этом случае данные выносятся в отдельную библиотеку.

Преимущества Vue:

  • простой вход, не нужно настраивать окружение, отличная документация;
  • сочетает в себе плюсы React и Angular;
  • фреймворк прошел этап становления;
  • популярен среди разработчиков.

Vue реализует все современные подходы к разработке пользовательских интерфейсов. Является легким в освоении, гибким и высоко интегрируемым со сторонними технологиями фреймворком.

Библиотека Vue входит в состав продукта «1С-Битрикс: Управление сайтом». Это дает возможность использования и кастомизации компонентов Vue, встроенных в ядро BitrixFramework. К тому же, решена проблема версионности библиотеки Vue – в рамках текущего окружения BitrixFramework всегда единая версия.

Примечание. Данное решение не подойдет для проектов, использующих SSR (Server side rendering) и серверную компиляцию (например, для однофайловых компонентов).

Подробнее с фреймворком (в том числе с примерами его использования) можете ознакомиться на официальном сайте.

  Почему фреймворк включен в продукт?

Мы включили фреймворк в поставку продукта и сделали BitrixVue для простого взаимодействия между Vue и системой BitrixFramework.

BitrixVue — это расширение для стандартной библиотеки Vue. Оно добавляет новые возможности и при этом не модифицирует стандартное поведение Vue.js.

В чем же преимущества и особенности использования BitrixVue?

Первое: вы сможете интегрироваться в систему BitrixFramework и эффективно работать с другими компонентами и внутренними системами (такими как локализации и динамическая загрузка компонентов).

Второе: решается вопрос версионирования, если два разработчика (например, два приложения из Маркетплейса) используют Vue разных версий, то возникнут конфликты. В первую очередь BitrixVue сделан для того, чтобы этого избежать.

Третье: разработчики-партнеры получают возможность кастомизировать и клонировать компоненты в модулях BitrixFramework (где это возможно) без изменения исходного кода продукта.

И последнее: фреймворк Vue, который является основной частью BitrixVue, не экспортируется в глобальную область видимости. Тем самым она не может создать проблем сторонним приложениям. Они могут спокойно использовать обычное подключение Vue, в том числе использовать его в Webpack, не беспокоясь о конфликтах с библиотекой внутри BitrixFramework.


31
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии