Реактивна интерфейсна рамка за хората - Константин Комелин

Ще говорим за нарастващата фреймворк рамка Vue.js, която влезе в ядрото на Laravel и PageKit и започва да настига популярността на React и Angular.

И тук е jQuery?

Ще започна с една история. Някога, както сега, през свободното си време, вечер и през почивните дни, изучавах нови технологии. По това време работех с Drupal 4.7.

Малко по-късно прочетох в съобщението на Drupal 5, че jQuery е включен в ядрото. Бях във възторг, вече скачах от щастие като дете, сега не е нужно да го изтегляте и инсталирате сами. Добре, че тази jQuery, добри спомени. Все още го използвам на някои места, главно когато трябва да използвам някакъв плъзгач или въртележка. Вече има много страхотни плъгини, тъй като това е направено през дългото време на съществуването му.

Но времето не стои на едно място, технологиите се развиват, заедно с тях браузърите включват поддръжка за нови функции на JS.

Може да не ви е необходим jQuery

Например няколко от най-популярните функции на jQuery, които днес могат да бъдат намерени в съвременните заместители:

На сайта YouMightNotNeedjQuery.com ще намерите огромен брой такива заместители с указание за поддръжка на проблемни браузъри.

Питате какво ще кажете за удобните манипулатори на събития като $ (‘# selector’). Кликнете () и $ (document) .ready () или възможността да изпратите заявка за Ajax чрез $ .ajax ()? Всъщност не е трудно да го направите родно, но Vue го прави още по-добре. Повече за това по-късно.

Как стигнах до Vue

Започнах да се запознавам с фронтенд рамки преди около година, когато се подготвях за естонския лагер. За беседа направихме малко приложение Angular 1. Не мога да кажа, че ми харесваше да работя с него, но беше възможно да работя.

Както вероятно вече знаете, Backbone.js влезе в ядрото на Drupal 8, но по някаква причина изобщо не бях привлечен от него. Очевидно не само аз, така че скоро възникна въпросът за подмяната на Backbone с по-популярна JS рамка. Дейвид Корбачо предложи да разгледаме Vue.js:

Оттогава следя развитието на Vue.js и експериментирах малко с него.

Vue се произнася като познатата „гледка“.

Vue е особено популярен в Китай, тъй като Евън е много активен в китайската JS общност. Може би поради това Vue е много разпространен сред китайските компании, например като Alibaba, Baidu & Tencent, Xiaomi и други.

Сега Vue се използва по целия свят, например тази рамка е влязла в Laravel и PageKit, което означава, че скоро ще видим значително увеличение на броя на потребителите на Vue.

Интересен факт е, че за разлика от Angular и React, които се разработват от гиганти като Google и Facebook, Vue се разработва от общност извън компании. Наскоро авторът работи върху рамката на пълен работен ден благодарение на материалната подкрепа на общността.

Като библиотека Vue има добро покритие на тестовете, документация и поддръжка.

Компоненти

Vue е изграден около концепцията за компонентите. Компонентите са малки части от потребителския интерфейс, които могат да бъдат използвани повторно. Ако сте запознати с уеб компонентите, ще намерите много общо с подхода на компонентите на Vue.

По същество приложението е разделено на части или компоненти.

Компонентите образуват дървовидна йерархия. Тоест, един компонент може да включва няколко други.

В кода такава структура може да изглежда така:

Реактивност

Всички променливи (модел) във Vue са реактивни. Това означава, че когато дадена променлива (модел) се промени, изгледът автоматично реагира и се променя.

Прочетете повече за реактивността в документацията.

Видове приложения

Нека сега видим как да интегрираме Vue и вашето приложение. Всичко зависи от архитектурата на вашето приложение. Обикновено ще разделя приложенията на два типа:

Разпределено приложение, когато интерфейсът е отделен от бекенда и цялата комуникация между тях преминава през API, например RESTful API.
Редовен сайт, когато страниците се формират на сървъра и се предоставят на браузъра в завършен вид.