Angular Light

в 11:06, , рубрики: AngularJS, javascript, web-разработка, Веб-разработка, метки: ,

С недавнего времени пошла волна «самопальных» веб-фреймворков, поэтому я тоже решил написать про свой «велосипед».

На зарубежных форумах можно увидеть негативные высказывания, о том что Angular.js стал монстром, много ненужного, тяжело вылавливать ошибки и т.п.
Да и мне (и моим друзьям) не нравится некоторые моменты, поэтому был разработан аналог Anglar.js

По большей части aLight (Angular Light) похож на Angular.js и я старался сделать в нем только необходимые компоненты: биндинг (привязка модели к DOM), директивы и фильтры.

Пример

<div al-app>
    <input type="text" al-value="name" />
    <h3>Hello {{name}}!</h3>
</div>

Некоторые примеры можно посмотреть на angularlight.org

Основные отличия от Angular.js
* Входной порог ниже (как мне кажется).
* Не обязательно думать о модулях, нет зависимых инъекций (которые не всем нравятся), нет навязываемых сервисов.
* Если вы используете jQuery в проекте, то aLight может быть удобнее т.к. сам aLight использует jQuery и хорошо с ним интегрируется. При том что, Angular.js сообщество не рекомендует использовать jQuery.
* Простое создание директив, меньше скрытых возможностей.

Директивы aLight проще, но иногда доп. функционал приходится делать вручную. Я не отношу это к минусу т.к. часто вместо часовых поисков скрытых возможностей их можно сделать самому за 5 мин.
Тем более что, можно сделать обвязку (конструктор) для директив при желании.

Директивы хранятся в alight.directives, разбиты по префиксам: al-if, bo-if, ui-select…
Префиксы нужны для того чтобы можно было отловить отсутствие используемых директив. Например если использовать диретиву «al-texta», а её не существует (опечатка или js файл не загрузился и т.п.), то будет выведена ошибка. Angular.js в таких случаях просто пройдет мимо, хотя я думаю есть какие-то внешние решения для этого.

В aLight распространен одноразовый биндинг (bind once), часто в web-приложениях бывают переменные которые не будут изменены в процессе работы, но их нужно вывести на экран, в таких случая вместо al-if, al-img вы можете использовать bo-if, bo-img и т.п. Они не привязываются к переменным, за счет этого приложение становится менее нагруженным. Аналогичное есть и для «вставок» в DOM:

С привязками

<div>Hello {{name}}!</div>
<a href="htp://example.com/{{link}}>link</a>

Без привязок (bind once)

<div>Hello {{=name}}!</div>
<a href="htp://example.com/{{=link}}>link</a>

aLight на пути отказа от jQuery (jQuery нужен будет для старых браузеров и IE). Это сделано не из-за «отключения лишней библиотеки», а из-за того что jQuery — медленная, перевод критических участков с jQuery на vanilla-js ускорило alight в 2 раза.

На данный момент aLight успешно используется в нескольких проектах, в одном проекте он заменил Angular.js, в одном используется с ним вперемешку. В результате перехода с Angular.js на aLight скорость разработки возросла.

Автор: lega

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js