Oleg

Всем привет!

Есть идея: вызывать функции при биндинге, пример:

<div main()></div>

function main(scope, element, value, env) {...}

функция может быть в scope или глобальная, в параметрах: scope, element и т.п. можно расширять scope, element, т.е. есть все возможности контроллера и директивы. (может заменить контроллеры).
Пример на jsfiddle

Нужна ли такая возможность? Или её как-то изменить/улучшить?
Какой синтаксис лучше для неё использовать (в примере работает main() и *main)?

<div main()></div>
<div *main></div>
<div main*></div>
<div #main></div>
...

или какой-то другой?

На данный момент собрали такой список плюсов:

(event)="foo()" - Angular2 style
+ стоит быть похожим на ангуляр, чтобы пользователям было проще перейти и освоить AL
+0.5 т.к. Angular2 более популярен то возможно под него запилят раскраску кода в редакторах

@event="foo()" - vue.js style
+ короче код
+ не нужно закрывать скобку, и при удалении, не забуду удалить второй символ т.к. его нет
+0.5 при объяснении проще произносить @keydown="" - "at keydown", хотя спорный пункт.

пока +1.5 за 1-й вариант и +2.5 за второй

Всем привет!

В последнем Angular Light добавилась возможность подписываться на любые DOM события.
Примеры:
al-on:keydown="func($event)"
al-on:keydown.enter="func($event)"
больше примеров тут: Event directives · Issue #123 · lega911/angular-light [github.com]

И сейчас идет выбор за "алиас" для этих событий:
1) в стиле Angular2: (keydown)="func($event)"
2) или в стиле vue.js: @keydown="func($event)"

Какой вариант лучше?

@kostyl, У реакта идея хорошая, но с ним тоже не все гладко, тоже куча проблем и сложностей, судя по SO и тостеру.
Если вы используете jQuery, а он почти в каждом серьезном веб проекте, то у вас серверного рендеринга не будет.
Он медленней чем Ангуляр, судя по тестам.

Но больше всего мне интересно, как реакт разработчики работают с дизайнерами? С ангуляром - понятно, дизайнер дал мне пачку html файлов, я вставил "метки" где нужно - все заработало. А с реактом что? мне нужно все дербанить на куски, конвертировать в jsx, впихивать логику/js и т.п. Что потом делать когда дизайнер поправит или доработает дизайн? Наверно реакт разработчик должен быть и верстальщиком в одном лице.

Кстати у реакта уже появилось ~20 конкурентов (vdom реализаций).

Все равно не до конца понятно.

Нужно поймать момент когда конкретная директива "построится"? (т.е. половина приложения будет построена, а вторая половина ещё нет), или когда приложение целиком построится? или это виджет и есть приложение?

для первого варианта можно добавить обработчик в alight.hooks.directive,
для второго - можно вручную вызывать alight.bootstrap, и после выполнять необходимый код.

так же можно сделать директиву al-call="function(123)" - разложить её в нужные места приложения, и она в эти моменты будет вызывать (глобальную) функцию и там уже делать то что нужно. Например если есть какой-то отложенный шаблон на сервере, можно в конец шаблона добавить коммент <!-- directive: al-call templateLoaded(123) -->, в итоге это будет как callback на загруженный шаблон.

А через alight.hooks.directive можно сделать например так: верстальщик добавляет в виджет (в html) callback="myFunc()" и эта функция будет выполнятся при "завершении" любого виджета.

Angular Light стал ещё быстрее, тест "список 10к" тут: JTT [lega911.github.io]
Ещё есть такой тест: dbmon [mathieuancelin.github.io]
И тест скорости todo-приложения: DoYouEvenBench [nin-jin.github.io]

В последнем тесте AL в 2 раза быстрее чем Angularjs 1, и Mithril

"Angular Light: Example": 407.1650000000009,
"AngularJS: Example": 868.9300000000076,
"AngularJS: AngularJS Optimized": 818.4749999999985,
"AngularJS: TypeScript & AngularJS": 942.830000000009,
"$jin2_view: Example": 598.4300000000003,
"Mithril: Architecture Example": 849.4199999999983,
"React: Example": 1226.619999999988,
"React: React + Backbone.js": 3274.5050000000047,
"React: Scala.js + React": 2424.179999999993,
"React: TypeScript + React": 1082.600000000013,
"React: React + Alt": 1248.7699999999968

Хотя скорость - это не главная "задача" AL, простота разработки важнее.

Всем привет.
Случайно заметил топик, оповещения на почту мне не приходят с этого форума, почему-то.

В al-init и al-click можно писать (почти) произвольный код, присылайте если что-то не работает.

al-init просто выполняет указанный код, обычно используется для установки начальных значений или вызова метода (реже), al-init="activeMenu=5; size=10;", удобно когда лень делать контроллер/директиву ради одной строчки.

al-click="menu==='main'?click():undefined"

Я обычно проверку засовываю внутрь метода, так же ещё al-disable/al-enable должны работать.

А вот что нужно, это иметь коллбэки, когда директива инициализируется, типа al-directive-init и al-directive-link. Опять же можно свой атрибут придумать и передать имя функции, но как-то это костыльно, нет более изящного пути?

Т.е. отлавливать когда директива закончила инициализацию? Какой юзкейс?
Можно использовать scope.$watch('$finishBinding', callback) - вызовет callback когда директивы (включая дочерние) отработают и построят DOM.

@AlexB, Каждый компонент приложения - автономный черный ящик. ))))

Это хорошая практика, я в своих проектах часто делаю "rootScope" для каждого более-менее независимого компонента: топ-меню, алерты, модальные диалоги, так же можно и дочерние компоненты...

Таким образом например если есть страница с комментариями, и каждый комментарий содержит свой изолированный функционал (например 500 watch, хотя это много для коммента), то на странице с 200 комментариями итого будет 500x200 = 100K watch-ей, но при работе сканироваться будут только конкретные комментарии, т.е. всего 500 watch, а это всего 1 - 10мс

Так же такие четные ящики можно переносить из проекта в проект.

А в Angular.js, все обычно под одним rootScope.

А кто-нибудь понимает нахуй нужен метод scope.$scan
Да и тут происходит, если не в setTimeout функции это делать.
все ясно, ради производительности немного пожертвовали универсальностью.

Есть разные подходы:
1) observe (как в knockout)
2) get/set (присвоение данных через вызов методов, ember?, react*)
3) dirty-checking (angular)
4) object.observe

Каждый подход имеет свои плюсы, минусы.
4-й Выглядит как самый "лучший", но его браузеры не поддерживают, 1 и 2 мне не нравится т.к. там приходится использовать разные обертки над данным, это усложняет и замедляет разработку.
Поэтому выбран dirty-checking: поработал с данными - запусти поиск изменений. Это есть и в Angular.js и в Angular Light, только в оригинале это пытаются всяческий спрятать, сделали всякие обертки $timeout, $http... заставляют изучать больше, усложняют контакт с существующим кодом и другими либами.
В Angular Light наоборот, я старался сделать все явным, нужно вызывать $scan когда нужно запустить поиск изменений, единственное* исключение - текущие "событийные" директивы сами вызывают $scan по завершению (пример lega911/angular-light [github.com] )

зачем нужен "al-get-scope" почему не al-controller?

Это просто пример как можно делать "извращения", т.к. Angular Light позиционируется как библиотека с минимумом необходимого (биндинг + diry-checking).

зачем вообще нужен angular light, по мне дак все компы сейчас держат ангуляр вполне нормально, и если руки откуда надо - ничего не тормозит особо.

Дело не в скорости, ведь Angular.js достаточно быстр, дело в скорости разработки, разработчики берут AL и делают продукт, подключают весь свой готовый функционал и другие либы, в то время когда разработчики с Angular.js курят доки, спорят за фабрики и сервисы, гуглят баги как сложить а+б, и т.д.