342  /  384

Vue.js и Bitrix Framework

Просмотров: 8616 (Статистика ведётся с 06.02.2017)
Анна Кокина
Сложность урока:
4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.
1
2
3
4
5
Недоступно в редакциях:
Ограничений нет

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

Vue.js (произносится /vjuː/, примерно как view) — это фреймворк Фре́ймворк (иногда фреймво́рк; англицизм, неологизм от framework — остов, каркас, структура) — заготовки,
шаблоны для программной платформы, определяющие структуру программной системы; программное
обеспечение, облегчающее разработку и объединение разных модулей программного проекта.

Уместно использование термина «каркас». Некоторые авторы используют его в качестве основного, не опираясь
на англоязычный аналог. Можно также говорить о каркасном подходе как о подходе к построению программ,
где любая конфигурация программы строится из двух частей:

1) Постоянная часть — каркас, не меняющийся от конфигурации к конфигурации и несущий в себе гнёзда,
в которых размещается вторая, переменная часть;

2) Сменные модули (или точки расширения).

Подробнее...
для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications).

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

Главная проблема DOM — он никогда не был рассчитан для создания динамического
пользовательского интерфейса (UI). Мы можем работать с ним, используя
JavaScript и библиотеки наподобие jQuery, но их использование не решает
проблем с производительностью.

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

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

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

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

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

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

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

В этой главе вы узнаете, как лучше всего (и проще) интегрировать Vue в BitrixFramework (CoreJS, локализации, события, наследование).

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

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

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



Подробнее...



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

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