Angular Light + Object.observe

    Angular Light — это самостоятельный клиентский MV(C/VM) фреймворк, который построен на идеях Angular.js и Knockout.js, и похож на упрощенный Angular.js



    Вышла версия Angular Light 0.8 которая включает разные улучшения и исправления, основные изменения:

    1. Поддержка Object.observe и Array.observe, что может увеличить производительность веб-приложений.
    Использование Object.observe — это опциональная фича, так же её можно включать для отдельных Scope (scope деревьев). Браузеры которые не поддерживают Object.observe продолжают работать через dirty-checking, так же нужно знать некоторые нюансы.

    Некоторые сферические тесты:
    Скорость поиска изменений в scope, jsperf.
    Результат можно видеть на картинке выше.

    Поиск изменений в массивах, в этом тесте 2000 массивов, каждый содержит по 2000 элементов, на первом проходе нет изменений в массивах, на втором происходит изменение 100 массивов. Примерные результаты на моем ноутбуке:
    Dirty-checking: 35ms и 65ms
    Object.observe: 0.1ms и 1ms

    Так же для этой фичи есть запас для увеличения производительности, например «digest» цикл может исключать те scope в которых не было изменений, это может улучшить показатели на порядок (для тестов выше).

    Хотя в реальных приложениях общая производительность не будет такая хорошая т.к. нельзя все покрыть за счет Object.observe и какая-то часть будет работать через dity-checking, но для больших приложений профит может быть ощутим.

    2. Возможность изоляции Angular Light, это позволяет встраивать свое приложение в чужие страницы без «вреда» — на странице не будет никаких глобальных переменных от приложения и фреймворка.
    Так же есть возможность использовать разные версии Angular Light на одной странице, и создавать копии Angular Light если нужна необходимость. angularlight.org/tutorial/isolated-alight.html#ru

    3. Приватные директивы, контроллеры и фильтры.
    Для каждого scope (scope дерева) можно задать свой набор директив, сделать приватные директивы. Для этого в scope нужно сделать переменную $ns и добавить туда нужные директивы, контроллеры, фильтры. Пример jsfiddle.net/lega911/9mfpbrw7

    4. Произведено улучшение производительности и потребление памяти, увеличено покрытие тестами, что насчитывает почти 800 проверок.

    Предыдущие статьи:
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 33
      0
      А обычный Angular не поддерживает Object.observe?
        +2
        Нет, в 2012 году были попытки интеграции.
        В Angular 2 должна будет появится поддержка Object.observe, но он не (совсем) совместим с Angular 1, не известно когда выйдет и какие браузеры будет поддерживать. Если для него Object.observe будет необходим, то это может ещё отодвинуть его по времени, когда его можно будет применять повсеместно, т.к. IE и Firefox не торопятся внедрять Object.observe.
          +1
          Для Firefox хотя бы ES6 закрыть, а Object.observe это уже ES7. Но приоритеты в целом верны, ES7 ещё не скоро заморозится в отличии от ES6.
          +1
          Нет, но обещали в 2.0 заменить dirty-checking на Object.observe
            +1
            заменить dirty-checking на Object.observe

            Вот тут говорят что будут использовать оба способа, так что не факт dirty-checking что уйдет окончательно.
              0
              Спасибо, не знал.
            +1
            О, приятное обновление, спасибо!
            Как раз начал перелазить с knockout.js на angular light, пока все нравится.
              0
              А что сподвигло перейти с Knockout JS?
                +1
                Поначалу простое любопытство, но вообще dependency tracking у KnockoutJS вещь суровая, заставляющая следить за всем, что делаешь, чуть ли не как в С++. В довольно большом приложении приходится делать подсчет disposable ссылок.
                Ну и «маркетологические графики», показывающие, что angularlight рендерится быстрее, чем нокаут.

                Фактически функционал обоих библиотек практически одинаков, да и необходимость вызывать $scan в директивах очень похожа на myObservable(newValue) в нокауте.

                Ну и ангуляро-подобный синтаксис поприятнее будет в том плане, что не в строчках можно указать куда больше, чем писать громоздкое data-bind=«click: function($data, event) { //blah }»

                То есть мой главный довод в пользу alight — лаконичность. Да, после typescript кофе кажется той еще наркоманией, но можно читать исходники на js
              +4
              похож на упрощенный Angular.js

              Но ведь для этого есть Vue.js
                0
                Неплохая штука вроде бы.
                  0
                  Vue.js не плох, я возможно стал бы его использовать, если бы он появился раньше Angular Light.
                  Не знаю как сейчас, но в последний раз когда я его смотрел, он был менее «фичастый», так же не понравились некоторые архитектурные моменты, например элемент v-repeat — был частью ядра, а не отдельным компонентом.
                  +5
                  Давно наблюдаю за вашим проектом и со стороны все выглядит не шибко радужно. Очень сильно настораживает полное отсутствие сообщества, за все время существования либы открыты только две задачи, да и те ваши. Использование CS, лично для меня, ставит крест на проекте, просто пойду искать аналог на JS (поверьте, так сделают многие). Ну и последняя капля, это размещение проекта на BitBucket, считайте вы его уже похоронили, хуже места для OpenSource представить сложно, наверно только SourceForge :]
                    –1
                    Очень сильно настораживает полное отсутствие сообщества
                    Сообщество все же есть, только маленькое, сейчас в G+ группе более 70 человек, на сайт ходят со многих стран (США на 2-м месте по посещаемости).

                    за все время существования либы открыты только две задачи, да и те ваши.
                    Это не мои задачи (это видно если зайти внутрь). Я много где использую Angular Light и при выявлении баги я её не регистрирую, а сразу исправляю, так же об ошибках пишут в группу, на почту и в скайп, кроме того Angular Light каждый раз проходит тестирование (почти 800 проверок), поэтому задач-багов так мало, пользователи с которыми я общаюсь редко натыкаются на проблемы.

                    Использование CS, лично для меня, ставит крест на проекте, просто пойду искать аналог на JS (поверьте, так сделают многие).
                    Почему? Это всего лишь синтаксический сахар (а какая-то часть написана на JS), в конечном итоге мы все равно имеем Angular Light на JS (она вполне читабельна), так же почти все примеры использования на JS, он никак не подталкивает использовать CS.

                    Ну и последняя капля, это размещение проекта на BitBucket, считайте вы его уже похоронили, хуже места для OpenSource представить сложно
                    На самом деле BitBucket не так уж и плох, хотя есть причины для перехода на github, но тут есть одно препятствие — mercurial мне нравится больше чем git (не для холивара), возможно в будущем проект переедет на github, либо будет зеркало.
                      +7
                      1. Группа на G+? Это очень странный выбор, ну а 70 человек это не о чем. Обычный набор, это gtihub, stackoverflow, gitter, ну и Google Groups может ещё.

                      2. Задача !== баг, это как раз и есть работа с сообществом, задачи есть всегда и они показатель живости проекта.

                      3. CS плохо, потому что очень проблематично смотреть исходники тем кто его не использует, ну и о внесении изменений и речи быть не может. Так что этим шагом вы отсекли очень большое количество разработчиков, которые бы могли принять участие в разработке (если вы на это рассчитываете).

                      4. BitBucket может быть и хорош для индивидуального использования, но для формирования сообщества вокруг либы он просто не годится, социальная составляющая на нем крайне слаба.

                      И ещё, зайдя в репозиторий совершенно невозможно понять: Что это? Как с этим работать? Как собрать проект? Как запустить тесты? и так далее. Вижу только непонятный assemble.sh и всё. А это значит, что нет инфраструктуры проекта, ни тебе grunt/gulp, нет поддержки npm, bower, requirejs и т.п. Всё это очень важные атрибуты open-source и отсутствие их неизбежно наводит на мысль о не серьезности проекта.
                        +5
                        Спасибо за советы, приму к сведению.
                    +1
                    А мне нравится angular light, я даже как-то написал на нем один из своих проектов, но использовать не смог, ибо не было поддержки content secure policy, что вообще очень важно, ибо ни приложения для браузеров, ни приложения для мобильных ОС (не всех), не поделать. Может как-то можно прикрутить csp?
                      0
                      Желание прикрутить поддержку CSP есть, но пока не занимался этим вопросом, есть какие-нибудь готовые CSP библиотеки (для «компиляции» ф-ий) на примете?, с ходу ничего не нашел.
                        +1
                        Мне удалось воспользоваться CSP от Angular.js (без подключения самого Angular.js), возможно скоро подключу его в каком-нибудь виде.
                          0
                          О круто! Жаль только у ангуляра реализация очень не быстрая, может стоит подумать на каким-то strict модом, для улучшения производительности?
                            0
                            Можно при разработке делать полный набор готовых функций/выражений, и прикладывать его к приложению, тогда будет быстро, так же при желании их можно будет вручную ускорить. А сбор ф-ий например делать при тестировании.
                      0
                      Если что, считайте это hate-постом.
                      tl;dr пока не используйте angular light, если вы переходите с angular
                      Итак. Решил я таки попробовать angular light. Какое же было мое разочарование, когда от angular в этом проекте не заметил ничего кроме названия.
                      Теперь по порядку.
                      0. Coffeescript для меня вообще не проблема, я сам пишу на iced-coffee-script
                      1. На сайте можно скачать либо 0.8 minified, либо 0.7 полную. Хотя последняя сказано, что 0.8. Ладно, мелкая неприятность. Пропустим
                      2. Заменяем в своем проекте angular на angular light. Всё перестает работать. Ладно, фиг с ним, это ожидалось. Начинаю копаться что не работает. window.angular отсутствует, теперь window.alight. Поправил у себя в исходниках.
                      3. Нет alight.module. Ок. Могу попрощаться со всеми модулями для angular. Тоже логично. Фиг с ним. Но хотя бы для совместимости бы оставили возможность.
                      4. Нет alight.module -> нет app.directive, нет app.controller. Вот тут уже начинаются проблемы. Мне реально нужно определить app.directive в котором написать alight.controllers[controller_name]. Ладно. Напишем.
                      5. Замена префикса директив ng- на al-. Вот тут уже начинается ужас ужас ужас. Весь проект… переименовать… пакетно… ладно, не нужно т.к. у меня шаблоны уже давно на jade и я их сам собираю, туда же вставлю .replace ng- al- с правильной регуляркой, дабы ничего лишнего не зацепило.
                      6. $scope -> scope. Я, конечно, понимаю, что мне нужно всего-лишь сделать replace по проекту $ -> '', но никто не гарантирует, что после этого у меня не появится конфликтов имен переменных. Но вообще-то это уже существенный аргумент, что бы не переходить т.к. переписать нужно не в одном месте, а везде по проекту. Причем обратно сделать не получится 100% т.е. это путь в одну сторону.
                      7. Нет app.config. Ну да, нет же модулей. Да и не нужен теперь т.к. у меня всё-равно нету $routeProvider
                      8. ng-class -> al-class упс, такой директивы нет, пиши сам.
                      9. ng-view -> al-view туда же
                      10. «Wrong repeat: (key, mod) in mod_host.» Т.е. al-repeat не поддерживает словари. Всё. Это я менять не буду.
                      11. ngModel -> ??? даже уже не искал на что нужно заменить
                      12. «Wrong expression: ngModel.$expanded?\»-\":\"+\"" даже не разбирался поддерживает ли angular light тернарные выражения.

                      Вывод: Слишком много нужно поменять. Не все изменения 100% будут работать. Придется отказаться от модулей, например от ngRoute. Некоторые директивы просто дописать т.к. их тупо нет.
                      Подожду пол-года, может ситуация поменяется. Если перенос проекта будет занимать меньше 30 минут, тогда перейду, скорее всего даже с радостью.
                      P.s.
                      alight.version
                      «0.8.3»
                        +2
                        То есть вы отказались от фреймворка в пользу простой библиотеки и вам не нравится, что это другая библиотека с похожим синтаксисом?
                        По мне в данном случае переход от одной технологии к другой предполагает не переименование переменных и директив(иначе это был бы совместимый фреймворк), а изменение архитектуры приложения под свои нужды.
                          0
                          Мне не нравится, что название не соответствует содержанию. Если уж назвали angular-light, то значит, подразумевается, что он совместим хотя бы на 90% с angular.
                          0
                          Нельзя запустить приложение от Angular.js на Angular Light напрямую, т.к. одна из целей последнего — «вырезать» сервисы, фабрики, провайдеры, инъекции, значения, константы и т.п. Предполагается, что разработчики будут использовать свою архитектуру приложения, использовать уже готовые средства модулей, DI и пр. если им это будет нужно.

                          1. В 3-й строке диалога скачивания версия 0.7.15 minified, так же можно установить через «bower install alight»

                          5. Префикс изменен на al для того что-бы не пересекаться Angular.js, т.к. они могут использоваться в одном проекте.
                          Но это правится одной строчкой:
                          alight.directives.ng = alight.directives.al;
                          
                          т.е. в «префиксе» ng будет тоже самое что и в al.

                          6. Нет необходимости менять $scope на scope

                          7. Встроеного роутера нет, т.к. их уже существует множество под jQuery и их можно использовать, + не хочется повторить ошибку ngRouter.
                          К тому же простой роутер делается в 30 строк.

                          8. Директива называется al-css (взято у knockout.js), хотя можно переименовать:
                          alight.directives.al.class = alight.directives.al.css;
                          

                          11. В этом направлении идея взята у knockout.js, есть такие директивы: al-value, al-checked и т.п.

                          12. Поддерживает

                          Спасибо за отзывы, это помогает определится что нужно улучшить.
                            0
                            Ок. А как быть с ng-view и с объектами в al-repeat? Какой-то workaround есть?
                              0
                              ng-view это по сути тот же ng-include, только привязан к роутеру. Т.е. можно использовать что-то типа al-include=«location.base + location.path», тут пример.
                              Объекты в al-repeat, в теории это можно осуществить через фильтр который будет превращать объект в массив. У меня необходимости в такой фиче не разу не было, но добавлю её.
                                0
                                Тот же пример, только отнаследовал al-include в al-view.
                                0
                                Пример для al-repeat и объекта.
                                  0
                                  Тогда мне нужно будет вешать observe на объект и на каждое изменение объекта изменять массив
                                    0
                                    Не нужно, посмотрите пример, фильтр за вас делает преобразование, вам остается только работать с объектом, в ангуляре работает примерно так же, только фильтр «встроен».
                                0
                                11. Кстати в Angularjs 2.0 разработчики реализуют [value], [checked] и т.п. вместо ngModel (что может указывать на то, что ngModel — не лучшее решение)
                              +1
                              Так же для этой фичи есть запас для увеличения производительности, например «digest» цикл может исключать те scope в которых не было изменений, это может улучшить показатели на порядок (для тестов выше).
                              Переработал использование Object.observe с этим подходом, результат заметно вырос, а предыдущий результат с Object.observe теперь выглядит смешно.
                              График результатов

                              Т.к. ангуляры без Object.observe плохо видно, добавил скриншот таблицы результатов:
                              Таблица результатов

                              Тест вы можете запустить тут.

                              Так же по совету от RubaXa перевел проект на github, заполнил список задач, прикрутил сборку через gulp, тестирование через gulp-phantomjs (хотя он observe не поддерживает). Поддержка bower, requirejs, commonjs.
                              Пробовал ES6 для миграции, но считаю что ещё рановато.

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое