Полезные для разработчиков Angular уроки, которые помогут повысить производительность приложения


Содержание материала:

Angular обновился до версии 5.1

После выхода мажорного релиза Angular 5.0 в прошлом месяце команда объявила о выпуске корректирующего обновления Angular 5.1.0, в котором появилось несколько мелких фич и исправлены некоторые ошибки. Также был выпущен Angular CLI 1.6 и представлена первая стабильная версия Angular Material.

Что нового?

  • стабильные версии Angular Material и CDK;
  • поддержка Service Worker API в CLI;
  • улучшена поддержка Universal и AppShell в CLI;
  • доработаны сообщения об ошибках декоратора;
  • поддержка TypeScript 2.5.

Полный список функций и исправлений можно посмотреть на страницах Angular, Material, и CLI.

Стабильные версии Angular Material и CDK

Angular Material основан на визуальном языке Material Design от Google. Angular Material предлагает 30 компонентов пользовательского интерфейса для создания приложений. Angular CDK представляет собой набор компонентов для создания собственных элементов, без необходимости решать заново общие задачи. Эти компоненты уже используются в производстве рядом приложений Google, включая Google Analytics Suite, Google Cloud Platform Developer Console, и Google Shopping Express.

Начиная с текущей версии, Angular Material будет придерживаться той же философии SemVer, что и Angular. Основные версии Angular Material и Angular CDK будут выходить одновременно с остальной платформой. Патч-релизы будут выпускаться с недельными интервалами, а второстепенные выпуски станут доступны по мере готовности функций.

Документация и руководство по началу работы доступны на официальном сайте. Также следить за ходом работы команды можно на странице проекта на GitHub.

Поддержка Service Worker в CLI 1.6

В Angular 5.0.0 была включена поддержка Service Worker, адаптированной для Angular-приложений. Angular CLI 1.6 поддерживает приложения, использующие новую функцию. По утверждению команды разработчиков, использование @angular/service-worker может повысить производительность загрузки приложений в браузерах, которые поддерживают данный API.

Готовые примеры приложений на Angular?

Джон Голт: ну так придумайте. Те штуки которые мне нужны вы просто не сделаете. А что вам нужно — я без понятия.

todomvc — это простое приложение на котором можно много чего попробовать. А самое полезное — есть десятки готовых реализаций и всегда можно сравнить решения.

CAMOKPYT: увы в опенсурсе подобных проектов банально нет. Подавлюящее количество проектов где было бы прикольно посмотреть исходники закрыто NDA, и вам это прекрасно известно.

А что до архитектуры — stateless-компоненты, unidirectional data flow (redux например) и вперед. ну и не забываем про готовые решения.

Опять же тесты и ходить по граблям и получать экспириенс. Вообще помимо JS надо таки знать хоть что-то об архитектуре и подходах к разработке и неплохо так знать JS. Подавляющее же количество разработчиков сразу после установки плагинов на jquery начинают писать поделки на ангуляре. Как думаете, какое будет у них качество?.

CAMOKPYT: я пишу на Angular вот уже 2 года, и это безумно эффективно если знать что делаешь.

По поводу «зачем мне фреймворе, если все что сложнее тудушек надо писать руками» — я вам даже больше скажу, и todo-ки придется писать руками. Вот только огромный процент рутины возьмет на себя angular.

CAMOKPYT: не ну если хочется делать UI аля 90-е то согласен. Но мы же говорим о приличных приложениях, с какой-то минимальной бизнес логикой на клиенте и т.д. И пусть разработка фронтэнда усложняется если сравнивать со старыми добрыми формами и jquery, то бэкэнд сильно упрощается и по итогу мы получаем в сумме профит.

Пример — да, для первого ангуляра. Для второго суть будет примерно та же, только не надо будет кастыли вставлять для ngModel.

CAMOKPYT: сделать плохо можно всегда и используя что угодно.

Вообще не хватает примеров реальных приложений на гитхабах. В частности с такими вот штуками. К сожалению делать бесполезный пример у меня нет никакого желания, а мини-приложеньку пример со схожим функционалом, которую можно выложить в опенсурс что бы оно хоть кому пользу приносила — такую я придумать просто так не могу. Если у вас будут на этот счет мысли — поделитесь, мне может даже будет не лень подготовить пример.

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

Что до того что «кода столько же» — зато код проще, меньше побочных эффектов, проще отлаживать и, как вы уже заметили, проще тестировать.

Качество не в количестве кода меряется а в возможности скейлиться как никак.

Блог Makeomatic: разработка сайтов и мобильных приложений

Оптимизация AngularJS: с 1200ms до 35ms

Ребята из Scalyr недавно приступили к полному переписыванию веб-клиента. Их приложение — это инструмент для разнопланового мониторинга и анализа логов. Разработанная ими база данных логов обрабатывает запросы за десятки миллисекунд, но каждое действие, требующее загрузки страницы, отнимает несколько секунды у пользователя.

Использование одностраничного приложения позволило бы использовать быстродействие бекенда на полную, поэтому они занялись поиском подходящего фреймворка и Ангуляр им показался достойным кандидатом. Следуя принципу “обломайся по-быстрому”, они приступили к нашему самому жесткому испытанию, просмотру логов.

Это по-настоящему серьезное испытание для фреймворка. Пользователь может кликнуть по любому слову для поиска соответствующих ему сообщений в логах, а на странице могут быть тысячи таких элементов; еще они хотят мгновенную реакцию при навигации по логам. Они уже сделали предварительную выборку следующей страницы, так что обновление пользовательского интерфейса было целым испытанием. При первичном использовании Ангуляра, переход к следующей страницы лога занимал 1.2 секунды, но после некоторой оптимизации удалось снизить это время до 35 миллисекунд. Эти оптимизации также оказались полезными и в других частях приложения и прекрасно вписывались в философию AngularJS, поэтому они выделили несколько правил, которые будут описаны в этой статье.

Журнал Github изменений, из демо версии

Просмотрщик логов на AngularJS

По сути, отображение журнала событий- это просто отображение списка сообщений. Каждое слово кликабельно и поэтому должно быть помещено в отдельный DOM элемент. Простая реализация на AngularJS выглядит приблизительно так:

На одной странице запросто может быть несколько тысяч таких токенов. В предыдущих тестах они выяснили, что переход к следующей странице лога вызывает агонии javascript интерпретатора на несколько минут. Хуже всего, что несвязанные действия (такие, как клик на выпадающем меню навигации) сейчас выполнялись со значительными задержками. Традиционнные рекомендации по AngularJS говорили, что нельзя допускать количество связанных элементов на странице больше 200. При условии, что у них каждым элементом было слово, то и до этой цифры им было слишком далеко.

Анализ. Причины лагов

Используя профайлер Google Chrome, мы быстро обнаружили две причины тормозов.

Первое, при каждом обновлении много времени занимало создание и удаление DOM элементов. Если в новом виде было другое количество строк или в любой строке было другое количество слов, то директива AngularJS ng-repeat соответсвенно создает или удаляет DOM элементы. Как оказалось, это достаточно затратно.

Второе, у каждого слова был свой обработчик изменений, который AngularJS запускал при каждом клике мыши. Это и было причиной лагов таких событий, как клик по выпадающей навигации.

###Оптимизация #1: Кеширование Dom элементов

Они создали свою реализацию директивы ng-repeat . В их версии, когда количество слов-элементов уменьшалось, лишние DOM элементы прятались, а не удалялись. Если после количество слов увеличивалось, то они переиспользуют закешированные элементы для вставки новых слов.

###Оптимизация #2: Объединение обработчиков

Время, потраченное на запуск обработчиков изменений, шло впустую. В приложении данные, связанные с каждым словом не изменяются, пока весь массив сообщений не изменится. Чтобы задействовать это, ребята создали директиву, которая “прячет” обработчики изменений дочерних элементов, запуская их только тогда, когда значение определенного родительского выражения изменится. Эта модернизация позволила им избежать запуска тысячей обработчиков каждого слова на каждый клик или более мелкое событие. (Чтобы добиться этого, им пришлось слегка сломать уровень абстракции AngularJS. Об этом чуть больше в заключении)

###Оптимизация #3: Откладывание создания элементов

Как было сказано ранее, сотрудники Scalyr создают отдельный DOM элемент для каждого слова в логе. Они могут получить тот же вид с одним элементом на строку; дополнительные элементы нужны только при взаимодействии мышью. Поэтому они решили отложить создание элементов для каждого слово до того момента, как курсов не пройдет над строкой.
Чтобы сделать это, программисты создают две версии каждой строки. Первая, обычный текст всего сообщения. Вторая — плейсхолдер, будет показан с элементом на каждое слово. Изначально, плейсхолдер не отображается. Когда курсор мыши проходит над этой строкой, он появляется, а простой текст прячется.

###Оптимизация #4: Обходной путь вотчеров для спрятанных элементов

Программисты написали еще одну директиву, которая блокирует выполнение обработчика (или его “детей”), если элемент спрятан). Это дополняет Оптимизацию #1, убирая любые лишние “расходы” для элементов, которые были спрятаны по причине ненадобности. Также дополняет Оптимизацию #3, облегчая откладывание обертки каждого слова в элемент, пока строка с токеном не будет показана.

Вот как выглядит код после всех нововведений. Пользовательские директивы выделены жирным шрифтом:

sly-repeat — вариант ng-repeat , это наш вариант ng-repeat, который скрывает лишние DOM элементы, вместо того, чтобы их уничтожать.
sly-evaluate-only-when блокирует внутренние обработчики изменений, пока переменная logLines не изменится, что говорит о переходе пользователя к новой части лога.

И sly-prevent-evaluation-when-hidden препятствует выполнению внутренних пунктов, пока курсор не пройдет над строкой и не div не отобразится.

Вышеперечисленное показывает мощь AngularJS в инкапусуляции и выделении проблемы. Они провели довольно тонкие оптимизации без сильного затрагивания шаблонов. (Это не точный код, который они используем на продакшне, но он илюстрирует большинство элементов)

Результаты Оптимизаций AngularJS

Чтобы замерить производительность, разработчики добавили код, который засекает время с момента клика и до конца $digest -цикла (что говорит, что бы обновили DOM). Полученное время показывается в виджете сбоку на странице. Они замерили время действия кнопки “следующая страница” просматривая лог доступа Tomcat в Chrome на недавнем Macbook Pro. И вот результаты (каждое число — результат 10 прогонов):

Data already cached Data fetched from server
Simple AngularJS 1190 ms 1300 ms
With Optimizations 35 ms 201 ms

Сюда не включено время на отрисовку браузером (после каждого выполнения Javascript), это 30 миллисекунд в каждом случае. В любом случае, разница существенная: время “следующей страницы” сократилось с чудовищных 1.2 секунд до незаметных 35 миллисекунд (65 с рендерингом).

“Данные, запрошенные с сервера” включает время AJAX-запроса к серверу для получения лога. Это нестандартно для “следующей страницы”, учитывая то, что данные перезагружаются, но применимо для других компонент интерфейса. Но и здесь все работает мгновенно.

Заключение

Этот код был в продакшне 2 месяца и ребята из Scalyr очень довольны результатами. Вы можете увидеть его в действии в Scalyr лог демо. После входа, нажмите на ссылку “Log view” и поиграйтесь с кнопками “Next/Prev”. Работает настолько быстро, что трудно поверить, что мы имеем дело с данными с реального сервера.

Применение этих оптимизаций заняло приличное количество времени. Наверное, было бы легче создать одну директиву, которая бы генерировала весь HTML для отображения логов, не используя ng-repeat . Но это бы шло вразрез с духом Angular, усложняя поддержку кода, его тестируемость и многое другое. Так как отображение логов являлось нашим тестовым заданием для AngularJS, они хотели убедится, что чистое решение возможно. К тому же, директивы, которые они создали, уже использовались в других частях приложения.

Программисты сделали все возможное, чтобы следовать философии AngularJS, но им пришлось изменить слой абстракций, чтобы применить некоторые из этих оптимизаций. Они переписали $watch scope -a, чтобы перехватывать регистрацию обработчиков и потом производить осторожные манипуляции с переменными scope , чтобы контролировать, какие обработчики будут выполнятся во время $digest -цикла.

В следующий раз

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

Полезные для разработчиков Angular уроки, которые помогут повысить производительность приложения

Angular Performance Checklist

В этой статье описаны полезные практики, которые помогут вам улучшить производительность ваших приложений на Angular. «Angular Performance Checklist» покрывает множество вопросов — от server-side pre-rendering и сборки приложений, до производительности в runtime и оптимизации change detection, который выполняется Angular.

Эта статья разделена на два основных блока:

  • Network performance содержит в себе список практик, следуя которым, вы ускорите загрузку ваших приложений. Он также включает в себя способы оптимизации задержек и повышает эффективность в условиях медленого интернета.
  • Runtime performance — содержит в себе практики, которые улучшат производительность ваших приложений в runtime. Они включают в себя оптимизации change detection и rendering.

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

Большинство инструментов связаны со специфичными проблемами. Эти инструменты помогут вам улучшить качество разработки за счет автоматизации процесса.

Обратите внимание, что большинство практик применимы к HTTP/1.1 и HTTP/2. В практиках, где делаются исключения, будут пометки о том, для какой версии протокола они предназначены.

Некоторые из инструментов в этом разделе все еще находятся в разработке и в будущем могут быть изменены. Команда разработчиков Angular занимается тем, чтобы максимально автоматизировать процесс сборки для наших приложений и сделать большинство вещей проще в использовании.

Bundling — это стандартная практика, направленная на уменьшение количества запросов браузером, которые он должен выполнить для загрузки приложения. По сути, в качестве входных параметров, bundler получает список модулей. Таким образом, браузер может загрузить все приложение, выполнив всего несколько запросов, вместо того, чтобы по отдельности запрашивать каждый модуль.

Скорее всего, по мере разработки вашего приложения, объединение всех модулей в один станет не эффективным. Поэтому рассмотрите Code Splitting, который можно сделать с помощью Webpack.

Дополнительные http запросы не будут происходить в HTTP/2 из-за его функции server push.

Инструменты

Инструменты, которые позволяют эффективно упаковывать в модуль ваше приложение:

  • Webpack — обеспечивает эффективное объединение кода выполняя tree-shaking.
  • Webpack Code Splitting — технология для разделения вашего кода.
  • Webpack & http2 — требуется для разделения кода в HTTP/2.
  • Rollup — позволяет объединять код, применяя tree-shaking, и используя преимущество статичных импортов модулей ES2015.
  • Google Closure Compiler — выполняет множество оптимизаций и обеспечивает объединение кода. Изначально был написан на Java, но также имеет реализацию на JavaScript JavaScript, которую можете найти здесь.
  • SystemJS Builder — обеспечивает сборку приложения в один файл с помощью SystemJS и имеет поддержку зависимостей с различными версиями.
  • Browserify.
  • ngx-build-modern — плагин для Angular CLI, который может собирать приложение в двух версиях:
    1. Для современных браузеров с модулями ES2015 и основные полифиламы, что делает bundle меньше;
    2. Дополнительная легаси версия, использующая остальные полифилы и другой compiler target (по-умолчанию).

Полезные материалы

Minification and dead code elimination

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

Инструменты

  • Uglify — делает минификацию кода, a именно уменьшает размер переменных, удаляет комментарии и пробелы, а также мертвый код и т.д. Он написан полностью на JavaScript, и имеет плагины для всех популярных task runners.
  • Google Closure Compiler — работает аналогично uglify. В продвинутом режиме он принудительно преобразует AST вашего приложения, чтобы проводить еще более сложные оптимизации. Он так же имеет JavaScript версию, которую можно найти здесь. GCC имеет почти полную поддержку модулей ES2015, поэтому может делать tree-shaking.

Полезные материалы

Remove template whitespace

Хотя мы и не видим символ пробела (соотвествующий регулярному выражению \s ), он все еще представлен байтами, которые передаются по сети. Однако, если мы максимально уменьшим количество пустых значений в шаблонах, то мы сможем уменьшить размер итогового AoT-кода.

К счастью, нам не нужно делать это вручную. В интерфейсе ComponentMetadata есть свойство preserveWhitespaces . Так как удаление пробелов может повлиять на DOM, оно по умолчанию имеет значение false . В случае, если мы установим свойство в true , то Angular очистит код от ненужных пробелов, что приведет к дополнительному уменьшению размера модуля.

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

Пример

После tree-shaking и сборки app.js мы получим:

Это значит, что не использованный экспорт bar не будет включен в bundle.

Инструменты

  • Webpack — предоставляет эффективную сборку с использованием tree-shaking. После сборки приложения не экспортируется код, который не был использован. Таким образом код может быть помечен как dead code и удален с помощью Uglify.
  • Rollup — предоставляет сборку с использованием tree-shaking, за счет статических импортов модулей ES2015.
  • Google Closure Compiler — предлагает множество оптимизаций и предоставляет возможность сборки приложения. Изначально он был написан на Java, но с недавнего времени поддерживает и версию для JavaScript.

Обратите внимание: GCC еще не поддерживает export * . Однако функция важна для сборки Angular приложений из-за широкого использования «barrel» файлов.

Полезные материалы

Начиная с версии Angular 6, команда Angular представила новую фичу, которая позволяет делать tree-shakable сервисы. Это значит, что сервисы не будут включены в финальный бандл пока они не будут использованы другими сервисами или компонентами. Это помогает уменьшить размер итогового бандла за счет удаления неиспользуемого кода.

Используя аттрибут providedIn в декораторе @Injectable() можно определить место, где сервис должен быть инициализирован и сделать его tree-shakeable. После этого нужно удалить его из аттрибута providers в инициализации NgModule , а также из импортов в файле NgModule .

Если MyService не используется ни в одном компоненте/сервисе/директиве, то он не будет включен в итоговый bundle.

Полезные материалы

Ahead-of-Time (AoT) Compilation

Проблемой низкоуровневых инструментов (таких как GCC, Rollup и т.д.) является то, что они не анализируют HTML-подобные шаблоны Angular компонентов. Это делает менее эффективной поддержку tree-shaking, потому что они не знают, на какие директивы имеются ссылки в шаблонах. Компилятор AoT конвертирует HTML-подобные шаблоны в JavaScript или TypeScript с импортами ES2015 модулей. Таким образом, мы можем эффективно делать tree-shaking во время сборки и удалять все неиспользуемые директивы, которые могут быть определенны Angular’ом, сторонними библиотеками или нашим приложением.

Полезные материалы

Сжатие ответов является стандартной практикой уменьшения используемого трафика для загрузки приложения. Указав заголовок Accept-Encoding , браузер говорит серверу, какие алгоритмы сжатия он поддерживает на клиентском компьютере. В свою очередь сервер в заголовке ответа устанавливает значение для Content-Encoding , чтобы сообщить браузеру, какой алгоритм сжатия был применен.

Инструменты

Инструменты, приведенные здесь, не являются специфичными для Angular, и полностью зависит от используемого веб сервера. И вот основные инструменты для сжатия:

  • deflate — алгоритмы сжатия данных, связанных с конкретным форматом файла, который использует комбинацию алгоритма LZ77 и Код Хаффмана.
  • brotli — алгоритм сжатия общего назначения без потерь, который сжимает данные, используя комбинацию современного варианта алгоритма LZ77, Кода Хаффмана и моделирование контекста 2-го порядка, со степенью сжатия, сопостовимой с лучшими в настоящее время способами сжатия общего назначения. Это сравнимо по скорости с deflate, но имеет лучшее сжатие.

Полезные материалы

Предзагрузка ресурсов это отличный способ улучшить user experience. Мы можем загружать заранее как ассеты (изображения, стили, модули предназначенные для lazy load и т.д.), так и данные. Существуют различные стратегии предзагрузки, но в большинстве случаев их использование зависит от специфики вашего приложения.

Lazy-Loading of Resources

Когда приложение обладает большой кодовой базой с сотней зависимостей, подходы, описанные выше, могут оказаться бесполезными с точки зрения снижения размеров бандла (до разумных показателей 100кб или 2мб, но это полностью зависит от бизнес целей).

В таком случае разумно подгружать модули частично, лениво. Например, допустим, разрабатываемое приложение — это площадка для электронной торговли. В таком случае мы бы хотели, чтобы панель администратора загружалась независимо от интерфейса пользователя. Если, например, администратор должен добавить новый продукт, мы бы хотели обеспечить загрузку только необходимого для этого модуля. Это могла бы быть просто страница с добавлением продукта или вся панель администратора, в зависимости от бизнес логики приложения.

Инструменты

  • Webpack — обеспечивает асинхронную загрузку модулей
  • ngx-quicklink — стратегия предварительной загрузки роутера, которая обеспечивает автоматическую ленивую загрузку модулей, связанных со всеми видимыми ссылками на экране

Don’t Lazy-Load the Default Route

Предположим, имеется следующая конфигурация роутинга:

В первый раз пользователь открывает приложения, используя адрес: https://example.com/. После этого он будет перенаправлен на /dashboard , после чего будет произведена ленивая загрузка DashboardModule .

Для того, чтобы Angular отобразил начальный компонент модуля, необходимо загрузить файл dashboard.module и все его зависимости. После этого файл должен быть проанализирован виртуальной машиной JavaScript и оценен.

Запуск дополнительных HTTP-запросов и выполнение ненужных вычислений во время начальной загрузки страницы является плохой практикой, поскольку она замедляет стартовый рендеринг страницы. Поэтому рассмотрите возможность объявления страницы по умолчанию в обход ленивой загрузки модулей.

Кэширование — это еще одна распространенная практика, направленная на ускорение работы нашего приложения за счет использования предположения о том, что если недавно был запрошен один ресурс, он может быть запрошен снова в ближайшем будущем.

Для кэширования данных мы обычно используем кастомные методы. Для кэширования статических ресурсов мы можем использовать стандартные механизмы в браузере или Service Workers с CacheStorage API.

Use Application Shell

Для того, чтобы быстрее отобразить пользователю часть страницы используйте Application Shell.

Application Shell — это минимальный пользовательский интерфейс, который мы показываем пользователям, чтобы показать, что приложение будет доступно в ближайшее время. Для динамического создания оболочки приложения вы можете использовать Angular Universal с пользовательскими директивами, которые по условиям отображают элементы в зависимости от используемой платформы рендеринга (т.е. скрывают все, кроме оболочки приложения, при использовании platform-server ).

Инструменты

  • Angular Service Worker — стремится автоматизировать процесс настройки Service Workers. Он включает в себя Service Worker для кэширования статичных ресурсов и инструмент для генерации application shell.
  • Angular Universal — Universal (изоморфный) JavaScript для Angular.

Полезные материалы

Use Service Workers

Мы думаем о Service Worker, как о HTTP-прокси, который находится в браузере. Все запросы, которые отправляются клиентом, перехватываются Service Worker. Он может обработать их или передать дальше по сети.

Инструменты

  • Angular Service Worker — направлен на автоматизацию процесса управления Service Worker. Он так же содержит Service Worker для кэширования статических ресурсов и генерацию application shell.
  • Offline Plugin для Webpack — Webpack плагин добавляющий поддержку Service Worker с fall-back для AppCache.

Полезные материалы

В этом разделе приведены рекомендации, которые необходимы для обеспечания плавной работы UI со скоростью 60 кадров в секунду (fps).

В development режиме Angular вызывает дополнительные проверки изменений, чтобы убедиться, что change detection не приводит к каким-либо дополнительным изменениям. Таким образом, Angular гарантирует, что соблюден однонаправленный поток данных.

Чтобы отключить эти проверки для production, не забудьте вызвать enableProdMode :

AoT может быть не только полезен для достижения более эффективной сборки приложения, путем применения tree-shaking, но также для повышения производительности наших приложений в runtime. Альтернативой AoT является компиляция Just-in-Time (JiT), который выполняется в runtime. Поэтому AoT позволяет уменьшить количество вычислений, необходимых для рендеринга нашего приложения, выполняя компиляцию во время сборки.

Инструменты

  • angular2-seed — стартер с поддержкой AoT компиляции.
  • angular-cli — использование ng serve —prod

Полезные материалы

Проблема типичного одностраничного приложения (SPA) заключается в том, что код выполняется в одом потоке. Это означает, что если мы хотим добиться плавного UX с 60fps, то у нас есть максимум 16мс для выполнения вычислений между кадрами. В противном случае UI будет тормозить.

В сложном приложении с серьезным деревом компонентов, где change detection должно выполнять миллионы проверок ежесекундно, нетрудно потерять целые кадры. Благодаря абстрагированности платформы Angular, а именно тому, что она отделена от архитектуры DOM, можно запустить наше приложение (включая change detection) в Web Worker, оставив основной поток ответственным только за рендеринг UI.

Инструменты

  • Модуль, который позволяет запускать приложение в Web Worker, поддерживается командой Angular. Примеры использования, можно найти здесь.
  • Webpack Web Worker Loader — загрузчик Web Worker для webpack.

Полезные материалы

Большая проблема традиционных SPA заключается в том, что их содержимое не может быть отрисовано пока не загрузится весь JavaScript, потому что весь рендеринг происходит после. Отсюда мы имеем две большие проблемы:

  • Не все поисковые сервисы запускают JavaScript, содержащийся в приложениях, поэтому они не могут получить содержимое динамических веб-страниц.
  • Не самый лучший UX, так как пользователь не увидит ничего, кроме пустой/загрузочной страницы, пока весь JavaScript, содержащийся на странице, не загрузится, не распарсится и не выполнится.

Server-side rendering решает эту проблему пре-рендерингом запрашиваемой страницы на сервере и отправкой готового шаблона во время инициациализации приложения.

Инструменты

  • Angular Universal — Universal (изоморфная) JavaScript поддержка для Angular.
  • Preboot — Библиотека для управления переноса состояния страницы (т.е. events, focus, data), которые были сгенерированы на сервере, на страницу, отображаемую в браузере

Полезные материалы

При каждом асинхронном событии Angular вызывает change detection для всего дерева компонентов. Несмотря на то что код, который обнаруживает изменения, оптимизирован для inline-caching, он все равно может быть затратным для больших и сложных приложений. Способ, который поможет улучшить производительность change detection, заключается в том, что change detection не должен выполняться для поддеревьев компонента, в которых не было изменений.

ChangeDetectionStrategy.OnPush позволяет нам отключить механизм change detection для дерева компонентов. Указав для change detection strategy в компоненте значение ChangeDetectionStrategy.OnPush , изменения будут срабатывать только тогда, когда компонент получил inputs, отличающиеся от предыдущих. Angular сравнивает предыдущие и текущие inputs по ссылке, и когда результат проверки равен false , то inputs помечаются как изменившиеся. В сочетании с иммутабельными структурами данных, OnPush улучшает производительность для «чистых» компонентов.

Полезные материалы

Detaching the Change Detector

Другой реализацией кастомного механизма отслеживания изменений является открепление и прикрепления отслеживания изменений (CD) для конкретного компонента. Как только мы открепляем CD, Angular не будет делать проверки для компонента и всей его низлежащей структуры.

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

Run outside Angular

В основе механизма отслеживания изменений в Angular лежит zone.js. Zone.js патчит все асинхронные API в браузере и запускает отслеживание изменений в конце исполнения любой асинхронной функции. В редких случаях может быть необходимо исполнить код вне контекста Angular Zone и тогда механизм отслежвания изменений не будет вызван. В таких случаях мы можем использовать метод runOutsideAngular из NgZone .

Пример

В отрывке кода далее, вы можете увидеть пример компонента с использованием данной практики. Когда метод _incrementPoints вызван, компонент начнет инкрементировать свойство _points каждые 10 мс (по умолчанию). Инкрементация создаст иллюзию анимации. Т.к. в данной ситуации мы не хотим вызывать проверку изменений для всего древа компонентов каждые 10 секунд, мы можем вызвать _incrementPoints вне контекста Angular Zone и обновить DOM вручную ( points сеттер метод).

Обратите внимание: Используйте эту практику очень осторожно и только тогда, когда вы знаете, что делаете, потому что при некорректном использовании это может привести к неустойчивому состоянию DOM. Также обратите внимание, что код выше не расчитан для запуска в WebWorkers. Если это необходимо, вы можете сделать его WebWorker совместимым, для этого нужно установить label’s value используя Angular Renderer.

Аргумент декоратора @Pipe принимает объекты в следующем формате:

Свойство pure означает, что pipe не зависит от какого-либо глобального состояния и не производит сторонних эффектов. Т.е. возвращаемое значение всегда будет одинаковым для конкретного входного аргумента. Таким образом Angular может кэшировать выходы для всех входных аргументов, передаваемых в этот pipe, и переиспользовать их в дальнейшем для избежания повторных вычислений.

Значение по умолчанию свойства pure является true .

Директива *ngFor используется для отрисовки коллекции.

Use trackBy option

По умолчанию *ngFor сравнивает объекты по ссылке.

Это значит, что когда разработчик меняет ссылку на объект во время изменения содержимого элемента, Angular распознает это как удаление старого объекта и создание нового. Это способствует уничтожению старого DOM элемента из списка и добавлению нового на его место.

Разработчик может указать, как Angular будет идентифицировать уникальность объекта: кастомная индексирующая функция в виде параметра trackBy для директивы *ngFor . Данная функция принимает два параметра: index и item . Angular использует значение, возвращаемое функцией, для идентификации элементов. Очень часто используют ID определенного элемента в качестве уникального ключа.

Пример

Minimize DOM elements

Рендеринг DOM элементов обычно является самой дорогой операцией, например, при добавлении элементов в UI. Основные затраты вызваны вставкой элемента в DOM и применением стилей. Если *ngFor рендерит множество элементов, браузер (особенно старый) может тормозить, поэтому ему может потребоваться больше времени, чтобы отрендерить все элементы. Но это не относится к оптимизациям в Angular.

Чтобы снизить количество времени на рендеринг, попробуйте следующее:

  • Виртуальная прокрутка посредством CDK или ngx-virtual-scroller
  • Уменьшение количества DOM элементов, отображаемых с помощью *ngFor в шаблоне. Обычно ненужные/неиспользуемые DOM элементы возникают в результате расширения шаблона. Переосмысление структуры, скорее всего, сделает шаблон более простым.
  • Используйте ng-container , где это возможно

Полезные материалы

Optimize template expressions

Angular извлекает выражения в шаблонах после каждого срабатывания цикла change detection. Change detection срабатывает вследствие асинхронных вызовов, например, выполнение промисов, получение ответа http, нажатие клавиш и движение курсором мыши.

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

Полезные материалы

  • quick-execution — официальная документация по выражениям в шаблонах
  • Increasing Performance — more than a pipe dream — ng-conf видеозапись на youtube. Использование pipe вместо функции для интерполяции строки

Представленный список со временем будет постепенно развиваться добавлением и обновлением текущих практик. Если вы заметили, что чего-то не хватает, или считаете, что какие-то практики можно улучшить, то не стесняйтесь создавать issue и/или PR. Для более подробной информации об этом, пожалуйста, посмотрите раздел Contributing», который находится ниже.

В случае если вы заметите недостающую, незавершенную или некорректную информацию, вы можете сделать pull request, это будет очень ценно для нас. Для обсуждения лучших практик, которые не включены в документацию, пожалуйста, создайте issue на github.

11 советов по улучшению производительности AngularJS

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

Оригинальная статья опубликована в блоге Алекса Краса в сентябре 2015 года. Все ссылки на другие источники — на английском языке.

1. Применяйте как можно меньше watcher-ов

Обычно, если Angular-приложение работает медленно, это означает, что в нем либо слишком много watcher-ов, либо эти watcher-ы работают больше, чем должны.

Angular использует «черновые» (прим.переводчика: в оригинале dirty) проверки, чтобы отслеживать все изменения в приложении. Это означает, что для проверки необходимости обновления данных будут задействованы все доступные watcher-ы (с помощью digest-цикла). Если же один из watcher-ов зависит от другого, Angular будет вынужден перезапустить digest-цикл снова, чтобы убедиться, что все изменения внесены, и это будет продолжаться до тех пор, пока все watcher-ы не обновятся.

Несмотря на то, что JavaScript в современных браузерах выполняется действительно быстро, в Angular совсем просто добавить столько watcher-ов, что скорость работы приложения заметно снизится.

При разработке или рефакторинге Angular-приложения важно иметь в виду:

  1. Watcher-ы создаются в следующих случаях:;
    • $scope.$watch;
    • при связывании с помощью << >>;
    • в большинстве директив, таких как ng-show и т. д.;
    • при создании переменных в scope: ;
    • при использовании фильтров << value | myFilter>>;
    • при использовании директивы ng-repeat.
  2. Watcher-ы (digest-цикл) выполняются в следующих случаях:
    • пользовательские действия (ng-click и т. д.) Большинство построений в директивах вызовут $scope.apply, по окончании которого запустится digest-цикл;
    • ng-change;
    • ng-model;
    • $http события (такие как AJAX-вызовы);
    • $q разрешения обещаний;
    • $timeout;
    • $interval;
    • ручной вызов $scope.apply и $scope.digest.

Полную презентацию по Angular можно посмотреть здесь.

2. Избегайте директивы ng-repeat. Если же их приходится применять, то используйте «бесконечный скроллинг» или постраничную навигацию

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

В дополнение к «бесконечному скроллингу» используйте по возможности track by (прим. переводчика: track by используется для сопоставления элемента массива с его DOM-элементом и по умолчанию используется track by $id(item), который генерирует $$hashKey для идентификации объекта).

Вот хороший пример использования уникального идентификатора при выполнении ng-repeat в совокупности с track by:

3. По возможности используйте одноразовую привязку

В Angular 1.3 добавили нотацию «::», которая позволяет использовать одноразовую привязку данных. В итоге Angular ожидает значение, которое будет использоваться для визуализации DOM-элемента после первого выполнения digest-цикла. Затем Angular удалит wacther для этой привязки (см. здесь).

Если вы используете более старую версию Angular чем 1.3, то сможете достичь аналогичных результатов с помощью этой библиотеки.

4. Используйте $watchCollection вместо $watch (с 3-им параметром)

$watch только с 2 параметрами работает очень быстро. Однако, Angular поддерживает данный метод и с 3-м параметром. Выглядит это следующим образом: $watch(‘value’, function()<>, true). Третий параметр указывает Angular произвести глубокую проверку, то есть проверку каждого свойства объекта, и это может быть очень затратно.

Для решения данной проблемы создатели Angular добавили $watchCollection(‘value’, function()<>). Действия $watchCollection почти аналогичны действию $watch с 3-м параметром, за исключением того, что $watchCollection проверяет только первый уровень свойств объекта, значительно улучшая производительность.

5. Избегайте повторяющиеся фильтры и при первой возможности кэшируйте данные

Одноразовые привязки плохо подходят для работы с фильтрами. Мне кажется, есть способы заставить их работать в связке, но я думаю, что лучше и более интуитивно понятно будет просто присвоить нужное значение переменной (или установить несколько свойств объекта, если вы работаете с несколькими переменными).

  • в JavaScript — $scope.description: $translate.instant(‘DESCRIPTION’)
  • в HTML — <<::description>>
  • в JavaScript — var timeFormatFilter = $filter(‘timeFormatFilter’);
    step.time_modified = timeFormatFilter(step.time_modified);
  • в HTML — <<::Path.time_modified>>.

6. Сокращайте количество вызовов ng-model

Если ng-model в приложении работает с большим количеством изменений, то вы можете объединить несколько вызовов функции в течение определенного времени в один (прим. переводчика: в оригинале для обозначения этого действия используется термин debounce).

Например, если у вас есть поле ввода данных для поиска, как в Google, то это можно сделать с помощью следующей опции:

Это обеспечит выполнение digest-цикла не чаще, чем один раз в 250 мс (подробнее можно почитать здесь).

7. Используйте ng-if вместо ng-show (но убедитесь, что в вашем случае использование ng-if действительно лучше)

ng-show визуализирует элемент и использует display:none, чтобы скрыть его, ng-if же фактически удаляет элемент из DOM и при необходимости пересоздает.

Для частого переключения состояний элементов «отобразить/скрыть» можно использовать и ng-show, но ng-if лучше подходит в 95% случаев.

8. Используйте console.time для оценки производительности функций

console.time — отличный API, и особенно полезным он оказывается при отладке проблем, связанных с производительностью Angular. Я вызывал эту функцию в коде не один раз, чтобы убедиться в том, что рефакторинг действительно улучшает производительность. Подробнее почитать можно здесь.

API выглядит следующим образом:

И вот простой пример:

Обратите внимание: если console.time для вас недостаточно точен, используйте performance.now(). Однако, в таком случае вычисления придется реализовывать самому (см. информативная презентация).

9. Используйте нативный JavaScript или Lodash для медленных функций

прим. переводчика: Underscore.js — одна из самых известных и популярных JavaScript-библиотек. Но мало кто знает, что есть ее более удачный клон — Lodash.

При разработке приложения использовалась Lodash, поэтому ее применение в оптимизации не было связано ни с какими дополнительными расходами. Не будь же под рукой Lodash, мне бы, вероятнее всего, пришлось переписать все на нативном JavaScript.

В ходе тестов я обнаружил значительное увеличение производительности, связанное с переписыванием части базовой логики с помощью Lodash (вместо методов Angular, которые являются более обобщенными).

Джон Дэвид Далтон, евангелист Lodash и по совместительству один из создателей JSperf, знает о производительности все. Так что в вопросах производительности я всецело доверяю ему и его библиотеке.

10. Используйте Batarang для оценки производительности watcher-ов

Batarang — это отличный инструмент от команды Angular, очень полезный при отладке приложений. Он обладает большим количеством полезных функций, но самая подходящая в случае с оценкой производительности находится во вкладке Performance.

Убедитесь, что у вас стабильная версия, работающая у большинства пользователей. А в этом видео вы найдете еще больше информации об этом инструменте.

11. Используйте Timeline и Profiler из Chrome Dev Tools для определения узких мест производительности

Себя я бы назвал достаточно опытным пользователем Chrome Dev Tools. Но мне нечасто приходится использовать вкладки Timeline и Profiler. В нынешнем же проекте эти две вкладки оказались особенно полезными.

Профессиональный совет: если вы используете API console.time (см. совет №8), то период времени будет выделен на шкале Timeline, так, что вы сможете изучать конкретные временные отрезки, вызывающие наибольшее беспокойство (см. подробнее здесь).

Временная шкала и магическая линия 60fps — самое важное. Когда я начинал работать над проектом, приложение полностью отрисовывалось за 15 и более секунд, практически не реагируя на действия пользователя.

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

По графикам четко видно, что приложение можно еще оптимизировать. Но даже текущим результатом я остался крайне доволен.

Чтобы узнать больше о Timeview, обратитесь к заметкам Пола Айриша.

Напоследок, я бы хотел упомянуть о вкладке Profiler в Chrome Dev Tools и о JavaScript CPU Profiler в частности. Данные в ней представлены в трех видах:

  1. График похож на Timeline, но обеспечивает легкий переход к исходному коду интересующей нас функции.
  2. Heavy (Bottom up view). Это представление определяет тяжелые пользовательские функции и выводит стек вызовов, чтобы помочь точно определять происхождение функции. Обратите внимание, что $digest в списке идет до $apply, указывая на обратный порядок.
  3. Tree (Top down). Предоставляет список функций, из-за которых возникает большой расход и затем позволяет перейти к одной из них. Также обратите внимание на желтый треугольник с восклицательным знаком. Этот значок, как правило, указывает на потенциальные проблемы оптимизации.

AngularJs — разработка первого веб приложения.

Дубликаты не найдены

Когда появляется такой туториал в голове сразу же возникает образ новичка, который чуток попробовал инструмент и думает, что все о нем знает и уже можно учить остальных. Поясню почему так — если бы кто-то хорошо знал ангуляр, смысла рассказывать о нем не шарящим в JS чувакам никакого нет. А кто шарит в JS пойдет читать доки и смотреть примеры.

Ну возможно ты прав, мне стоило написать в самом начале что урок для тех кто хоть примерно понимает js и html
Но только я уже далеко не новичок, 5 лет как минимум этим занимаюсь

angularjs если что MVW, а не MVC

Все зависит от того как ты спроектируешь проект.
Почитай вот тут, может что нового узнаешь https://plus.google.com/+AngularJS/posts/aZNVhj355G2

ну все правильно, не MVC же. Model-View-Whatever какбэ намекает))

🙂 Хорошо, на самом деле все не так трудно. Можно вообще используя дерективы, а можно в самом контроллере все сделать.

Но по ходу действия обязательно это будет

Сделайте, пожалуйста) Интересуюсь веб-разработкой. Хоть и только начинаю по сути, но интересно будет узнать что-то новое 🙂

Есть angular-material, хотя я не совсем уверен что это то

Не все так радужно. Когда используешь уже написанные компоненты и тебе нужно что то хитро кастомизировать, то предпочтешь пройти все круги ада нежели поменять сорцы самого компонента. А более менее толковые проекты требуют много разных, хитрых хотелок.

И засад тут крайне много от кастомизации css до логики. Более того скоро выходит первый релиз angular 2, который будет полностью несовместим с первой версией.

По сути первый и второй ангуляр совершенно разные фреймворки, гугл сам так позиционирует их.

😀 Скажи спасибо что не битрикс.

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

Дело в том, что зачастую там изменить уже написанный код нереально тяжко. Я в один dropdown добавлял пустой вариант где то дня два, после ада перелопачивания десятков переменных типа $ebaetoti? переменных и попытки встраивания в логику требуемого null значения.

Скажи зачем изучать ангуляр, если знаешь хорошо JS (в т.ч. JQuery)?

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

у нас на нем огромная cms, на которой уже работают 4 проекта, так что ты не прав, к слову серверная часть реализована на java

Помогает сделать более структурированное приложение и не изобретать велосипед. Ангуляр очень тесно связан с DOM деревом, у него позиция что html не враг, он своими директивами и операторами очень сильно расширяет html.
Но есть и минусы вроде скорости работы с большим объемом данных.

Пока не заинтересовал. А для кого html враг?

И в чем приложения могут быть более структурированы? Желательно пример.

Ну к примеру приложение которое я писал для windows 10, есть общая модель, есть роуты которые вызывают нужные контроллеры. Весь код и шаблоны все в разных файлах, ангуляр сам все подгрузит и вызовет.
А в index.html есть лишь тег

Самому такой объем работы реализовать было бы проблематично, особенно в такие короткие сроки, по сути за 4 дня написал основу для приложения в котором есть новости, страницы пользователей, сообщения с longpull обновлением данных

кто-то не хочет открывать велосипедостроительный завод

хотя я тебя полностью поддерживаю

Кропай дальше. Новичкам интересно.

Э, не, мужик, MVC это целая архитектура, ее нельзя изложить в двух словах. Раз уж взялся за ангуляр — давай,не подводи.

Ну я решил особо не нагружать терминологией, а вкратце объяснить.
Вообще же Angular это не жестко MVC фреймворк, он вообще как MVVM реализован

3ий год на нём пишу, нет слов — одни эмоции

Эмоции хорошие? 😀
Единственным минусом пожалуй может являться документация, которая конечно отображает все что нужно, но как-то суховато и новичку не всегда все понятно

очень часто все происходит не так, как ты планировал, такая формулировка будет лучше

Ну это не ангуляр виноват. 😀

Вообще директивы это отдельная тема для серии уроков, там много всего можно начудить тем самым убив приложение или подняв производительность

когда начнешь писать свои директивы, которые будут работать c каким-нить datepicker’ом из ui-bootstrap, то хороших эмоций не возникает)

переходи на реакт!

http://app.anna-ph.ru/ — мое приложение для ангуляра, авторизация по логину и паролю мне не дали, так как приложение базируется windows приложением, а там возможно все реализовать через сам вк. Но ест костыль, вводить самому данные в всплывающие окна

Любопытно для общего сведения. Но сколько я не общался с фронтендщиками, все поголовно плюются на ангуляр и рекомендуют писать на react-js

PS не холивара ради

Ну плюются скорее всего на скорость его работы, так как он реализован не на shadow-dom, в отличие от реакта. С выходом второй версии все изменится, советую посмотреть презентацию нового ангуляра, там сравнивают старый ангуляр, реакт и новый

А есть ссылка? Я просто совсем далек от фронта, но хочется как минимум быть в курсе

реакт это не фреймверк, это только представление. Ангуляр же полноценный и самодостаточный фреймверк. Работает достаточно быстро, если делать более менее с умом. Скорость разработки быстрее, чем на реакт+ набор дополнительных решений

Так у Angular’a нет визуальных компонент из коробки, Так что не такой он и «самодостаточный» (как вы его сравнили с React). С таким же успехом можно назвать Twitter Bootstrap самодостаточным фреймворком: UI уже есть, осталось биндинги и/или основу для MV* прикрутить — и всего-то. Хах) А вот скорость разработки на ангуларе впечатлила. Порог вхождения, конечно был для меня высок, и пришлось к этому в несколько итераций подходить (да, были стадии когда я думал об одном — да пошло оно всё нафиг, и без ангулара много дел), однако результат оправдал все ожидания.

116 инструментов для разработчиков

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

Оригинальный пост был опубликован на портале DailyTekk. И хотя появился он достаточно давно, список по-прежнему актуален. Инструменты разделены на разные категории: платформы для разработки, обучение программированию, багтрекинг, API и прочее. Не все инструменты бесплатные, но за удобство и новые функции приходится платить. Надеемся, вы найдёте что-то полезное для себя.

Освоить полную сетку технологий по Web-программированию

Хочу освоить новую специальность ,чтобы заниматься любимым делом перед компьютером. И так как я действоитьно провожу перед ним очень много времени,осовоение новой специальности пойдет мне только на пользу . Поэтому я уже приобрел курсы с сайты ITVDN.com.

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

По времени,прохожу в свободное время,постараюсь 2 этапа за месяц,но может и продлиться и на более долгий период. Устанавливать жесткие рамки я не стану.

Критерий завершения

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

+увеличения з.пл. по данной специальности 50 т.р.

Личные ресурсы

Экологичность цели

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

HTML & CSS (renewed)

Этот видео курс покажет Вам как создавать веб-сайты с помощью HTML5. На протяжении всего курса тренер максимально просто объяснит что собой представляет язык разметки HTML, какие основные теги используются при верстке страниц и как пользоваться каскадными таблицами.

How to HTML&CSS

Видеокурс «How to. HTML» поможет начинающим специалистам, обучающимся по специальности Frontend Developer освоить нюансы верстки web-страницы в HTML. В видеокурсе будет рассмотрена работа с изображениями, таблицами, списками, слоями, формами HTML, а также с CSS.

HTML5 и CSS3

Видео курс «HTML5 и CSS3» расскажет слушателю как создавать страницы с использованием новой семантической разметки основной на HTML5 и CSS3, Вы увидите, как можно разместить на странице видео или аудио, узнаете, что такое Geolocation API и сможете разрабатывать интересные приложения, определяющие месторасположение пользователя. Во второй части курса Вы научитесь работать с новыми стилевыми свойствами, создавать анимацию и трехмерные эффекты, не применяя ничего, кроме CSS. Курсы HTML 5 CSS3 даст Вам знания, необходимые современному Frontend разработчику.

JavaScript Essential

Этот видео курс содержит видео уроки по программированию на JavaScript для начинающих. Пройдя видео «Базовый», Вы сможете понимать код, написанный на данном программирования,знания, полученные на уроках, Вы сможете применить для написания небольших решений. В ходе курса.

How To JavaScript

Видеокурс «How to. JavaScript» поможет начинающим специалистам, обучающимся по специальности Frontend Developer разобраться с нюансами языка программирования JavaScript. В видеокурсе будет рассмотрено создание переменных, как правильно именновать их, создание констант.

Twitter Bootstrap 3

Twitter Bootstrap – это CSS фреймворк для разработки кроссбраузерных веб ориентированных интерфейсов.

Основы использования Git

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

Создание адаптивного сайта с Bootstrap 3

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

Изучение CMS Битрикс 1С

Так как я устроился на работу и основная CMS это Битрикс,считаю что я обязан её изучить для нарабатывания навыков и умение работать в этом создаст конкурентные приемущества по отношению к другим разработчикам.

Прохождение 7 тестов по курсу Контент-менеджер

Подготовка к экзамену Битрикс и прохождение всех тренировочных материалов

Назначение экзамена на определенную дату и сама сдача экзамена

Изучение основ PHP

Для того,чтобы уметь разбираться в CMS и вообще в том,что происходит на сервере ,мне потребуется знание этого ЯП. А также для взаимодействия с БД ,но это уже после изучения основ MySQL.

Прочтение книги Д.Котерова PHP7 в подленнике

Прохождение курсов по тематике PHP

Изучение фреймворков Laravel, CodeIgnitor и другие

Основы БД и SQL

Так как использование php, связано зачастую с тем, что требуется обрабатывать формы, которые в свою очередь запись делают в БД. Для того, чтобы понимать как взаимодействуют СУБД, какие есть связи и обработка огромного массива информации требуется знание MYSQL. Поэтому обучение этому обязательно.

Взял часть цели с чуой странички,чтобы помнить об этом ,копирую сюда

Просмотр курса по MySQL

Закрепление материала практикой

HTML5 WEB COMPONENTS

HTML5 Web Components — это видео курс, который будет полезен любому разработчику. Мир разработки настольных приложений потерпел много изменений. Технологии, разработанные для создания пользовательских интерфейсов для desktop приложений хорошо развиты и многие годы, используются разработчиками. Но в веб ориентированных интерфейсах на сегодняшний день еще не сформировался единый набор правил для создания повторно использующихся компонентов. Разработчики часто сталкиваются с такими проблемами как отсутствие единых правил использования шаблонов, слабая семантика, конфликты стилей, сложности подключения новых библиотек к веб приложению. Решить все перечисленные проблемы позволяет набор стандартов HTML5, которые объединены под названием Web Components.

JavaScript Advanced

Видеокурс JavaScript для профессионалов будет полезным разработчикам, которые уже имеют базовые навыки разработки сайтов или прошли видео курс Java Script для начинающих.

JavaScript Шаблоны

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

JQuery

Создавайте мощные веб-приложения эффективно и быстро, используя JavaScript-библиотеку JQuery. После просмотра видеокурса Вы будете уверенно пользоваться всеми ее преимуществами и не тратить время на написание лишних строк кода.

ECMASCRIPT 6

ES6 — это стандарт JavaScript, который был принят в 2015 году, который преподносит огромное количество новых конструкций (в большинстве своем это синтаксический сахар перед предыдущей версией Javascript. Курс предназначен для тех кто уже прошел предыдущие курсы по JavaScript и имеет понимание про такие вещи как прототипы, ключевое слово this, функции, объекты и т.д. Проработав данный курс, вы получите знания которые упростят вам написание кода, по сравнению с написанием в ES5 стиле, а так же будите в курсе самых актуальных и наиболее часто используемых ES6 фич, а так же сможете быть готовым к типичным вопросам на собеседованиях касаемо ES6. Курс состоит из 9 видеозаписей, 7 из них теория, а 8 и 9 это практика, где мы напишем небольшое приложение по поиску фильмов используя ES6.

TEAM FOUNDATION SERVER

Team Foundation Server (TFS) – платформа для командой работы, которая включает множество компонентов, необходимых для разработки современного программного обеспечения. TFS позволяет разработчикам совместно работать над проектом, используя систему контроля версий. Проектные менеджеры могут контролировать задачи и отслеживать состояние проекта, используя рабочие элементы или Work Items. Тестировщики программного обеспечения могут вносить найденные ошибки как отдельные рабочие элементы, чтобы разработчики их впоследствии могли воспроизвести и исправить. В данном курсе Вы узнаете архитектуру TFS и ознакомитесь с его самыми главными возможностями. Особое внимание в курсе уделяется работе с системой контроля версий. В первую очередь курс будет полезен слушателям, которые собираются устроиться в компанию, контролирующую процессы разработки с помощью Team Foundation Server. Также курс будет полезен разработчикам, которые переходят на TFS с другой системы контроля версий.

AngularJS Essential

AngularJS один из самых популярных JavaScript Фреймворков для написания Single Page Application. Многие разработчики используют AngularJS как основную библиотеку при разработке SPA приложений. Если Вы хотите владеть современными знаниями важными для трудоустройства или для перехода на новый профессиональный уровень этот видео курс будет полезен. Он подойдет как опытным разработчикам, так и новичкам, владеющим основами программирования на языке JavaScript. Если Вы хотите структурировать свои знания или еще не начинали изучение AngularJS, то этот видео курс даст Вам возможность, шаг за шагом получить необходимый набор знаний, чтобы разбираться в чужом коде и создавать свои собственные веб приложения. Можно сказать, что AngularJS становится промышленным стандартом в разработке SPA приложений, как в свое время библиотека jQuery стала стандартом при разработке веб-приложений. Предварительные требования: знание HTML и CSS, знание языка JavaScript на уровне курсов JavaScript Essential и JavaScript Advanced. Целевая аудитория: Для веб разработчиков создающих приложения используя JavaScript.

ANGULAR2 ESSENTIAL

Данный курс создан для изучения Angular, который является переработанной и улучшенной версией популярного фреймворка AngularJS. Среди преимуществ этой технологии можно отметить высокую производительность, удобство работы и использование TypeScript в качестве основного языка для разработки. Курс состоит из 7 уроков, в течении которых Вы изучите такие основные темы, как введение в TypeScript, компоненты, директивы и привязки данных, сервисы, маршрутизацию и работу с HTTP. Для успешного освоения материала курса нужно иметь знания HTML, CSS и JavaScript (уровень Advanced).

ANGULAR ADVANCED

Angular популярный современный фреймворк для создания одностраничных приложений. Этот курс является логическим продолжением видео курса Angular Essential. В видео курсе Angular Advanced Вы узнаете, как создаются пользовательские директивы и фильтры, основы использования реактивных подходов в программировании и работы с Observable, а также узнаете, как работает отслеживание изменений в Angular проекте. Знания, которые Вы получите после прохождения данного курса, помогут лучше понимать принципы работы элементов одностраничного приложения, а также даст представление о том как можно повысить производительность приложения внеся минимум изменений в программный код.

ANGULAR CLI

Angular CLI (command line interface) это инструмент без которого сложно представить разработку Angular приложений. Создать новое angular приложение, настроить маршрутизацию в angular приложении, создать компонент, директиву или pipe – все это можно сделать в два клика с помощью angular cli. Эти видео уроки будут полезными каждому angular разработчику и подойдут, как для тех, кто уже давно работают с одностраничными приложениями, так и для начинающих. Angular CLI решает не только проблемы создания нового кода и настройки компонентов но и тестирования приложения, а также подготовку к публикации.

REACTJS ESSENTIAL

Мы начнем с того, что разберемся чем Реакт отличается от других JS фреймворков и в чем же его преимущество. Мы напишем наш первый компонент, научимся управлять состоянием и параметрами, будем использовать события, чтобы делать наши компоненты динамическими. Разобравшись с основами React, мы перейдем к изучению стека технологий, которые используются вместе с ним: разберемся со сборкой приложений, подключением внешних библиотек и изучим архитектуру Flux, а потом — напишем полноценное небольшое динамическое веб-приложение.

REACT ADVANCED

Видеокурс React Advanced является логическим продолжением курса React Essential, и в этом курсе вы будете изучать React детальнее и глубже. Данный курс научит вас понимать, как настраивать окружение для будущих проектов, писать полноценные приложения на Redux, используя различные инструменты, которые делают разработку удобнее и эффективнее. Вы научитесь оптимизировать производительность в ваших React-приложениях. Помимо этого, вы узнаете, как можно тестировать разные аспекты приложений, познакомитесь с таким понятием, как server-side рендеринг, и сможете писать полноценные Universal/Isomorphic приложения и многое-многое другое.

ВИДЕО КУРС VUE.JS

Курс Vue.js состоит из 6 уроков, на которых учащиеся ознакомятся с новой библиотекой JavaScript – Vue. На данном курсе учащиеся смогут изучить основные элементы для работы с фреймворком, рассмотрят различия библиотеки Vue c уже существующими а также рассмотрят применение Vue.js для разработки приложения используя сервер Node.js На курсе Vue.js студенты выучат привязки элементов на странице, изучат понятие частичного отображения и применения компонентов библиотеки на страницу. После прохождения курса, Вы будете понимать принципы использования библиотеки Vue.js, а также сможете создать собственное веб-приложение используя маршрутизацию страниц и шаблоны.

ИЗОМОРФНЫЕ ПРИЛОЖЕНИЯ НА REACT

Данный курс будет крайне полезен тем, кто знаком с архитектурой Flux и знает, как создавать приложения на ReactJS. Во время прохождения курса Вы получите фундаментальные знания по теме: «Создание изоморфного приложения». Более подробно будут рассматриваться такие темы, как архитектура приложений, серверный код, клиентский код, использование Redux, изоморфные стили и роутинг. Для достижения максимального восприятия курса, мы подобрали отличного тренера, ведущего front-end разработчика компании WebbyLab – Поршневу Екатерину, которая сможет качественно донести информацию к каждому участнику курса.

COFFEESCRIPT

CoffeeScript — это язык программирования, который транслируется в JavaScript. CoffeeScript добавляет синтаксический сахар похожим образом с Ruby, Python и Haskell для того, чтобы улучшить чтение кода и уменьшить его размер. В среднем, для выполнения одинаковых действий на CoffeeScript нужно в 2 раза меньше строк, чем для JavaScript. Целевой аудиторией курса являются верстальщики и web-разработчики. Для успешного прохождения нужны знания языка разметки страниц HTML и CSS, и владение базовым уровнем JavaScript. Пройдя курс, Вы сможете уверенно понимать код CoffeeScript, освоите написания модулей на CoffeeScript и компиляцию в JavaScript код.

ПУБЛИКАЦИЯ ВЕБ-САЙТА

После создания веб-сайта перед разработчиком стоит задача публикации его в сети интернет. Решение этой задачи связано с выбором хостинга. В зависимости от сложности и функциональности сайта, а также планов развития ресурса, разработчик выбирает наиболее подходящий сервис. В этом уроке сделан обзор разных решений, площадок и инструментов для публикации сайта, показан процесс публикации и сделан обзор основных настроек в панели управления, рассмотрены и прокомментированы примеры работы с некоторыми популярными сервисами. В уроке также рассмотрен принцип работы доменного имени, выбор доменного имени и его добавление к веб-сайту.

ПОДГОТОВКА К СОБЕСЕДОВАНИЮ В IT КОМПАНИИ. ВОПРОСЫ И ОТВЕТЫ. ХИТРОСТИ. ТРЮКИ.

В этом видео Александр Шевчук, эксперт в области построения архитектуры информационных систем, бизнес-анализа и управления IT проектами, автор многих образовательных программ учебного центра CyberBionic Systematics для .NET разработчиков, ответит на наиболее популярные вопросы, которые задают все, кто готовится к первому собеседованию в IT компании. Видео «Подготовка к собеседованию в IT компании» состоит из 4 частей.

React для Angular-разработчиков

Эта статья предназначена для разработчиков, знакомых с Angular первой версии и желающих узнать больше о React. Мы рассмотрим различие подходов, применяемых для построения веб-приложений, перекрывающуюся функциональность, а также пробелы, которые React не пытается заполнить.

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

Фреймворки против библиотек

Angular это фреймворк, а React — библиотека, сфокусированная исключительно на представлениях. Свои плюсы и минусы есть как при использовании фреймворков, так и при использовании библиотек.

Фреймворки стараются предложить полное решение и они могут помочь организовать код с помощью паттернов и соглашений, если вы работаете в большой команде. Однако у них объемный API, поэтому для работы с фреймворками вам придется потратить много времени на чтение документации и запоминание паттернов, особенно, когда вы только начинаете их изучать.

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

Возможности из коробки

Angular предоставляет вам богатый набор возможностей для создания веб-приложений, среди них есть следующее:

  • шаблоны HTML с динамическими выражениями в фигурных скобках << >>
  • встроенные директивы типа ng-model , ng-repeat и ng-class для расширения возможностей HTML
  • контроллеры для группирования логики и передачи данных в представление
  • двухстороннее связывание как простой способ синхронизации контроллера и представления
  • большая коллекция модулей, таких как $http для коммуникации с сервером и ngRoute для маршрутизации
  • кастомные директивы для создания собственного синтаксиса HTML
  • инъекция зависимостей для ограничения доступа объектов к отдельным частям приложения
  • сервисы для общей бизнес-логики
  • фильтры для хелперов, форматирующих представления

С другой стороны, вот арсенал React:

  • синтаксис JSX для шаблонов с выражениями JavaScript в одиночных скобках
  • компоненты, напоминающие директивы элементов в Angular

React не предъявляет требований к структуре вашего приложения и рекомендует использовать стандартный API JavaScript поверх абстракций фреймворка. Здесь нет аналога $http — вы можете использовать для коммуникации с сервером fetch(). Вы свободны в конструировании сервисов и фильтров, но React не предоставляет никакого слоя абстракции для управления ими. Вы можете поместить их в модули JavaScript и подключать по необходимости в своих компонентах.

Итак, Angular дает вам абстракции для распространенных задач, а React, наоборот, избегает этого, ориентируя вас на написание стандартного JavaScript и использование при необходимости внешних зависимостей.

Инициализация

Для инициализации приложения Angular требуется модуль, список зависимостей и корневой элемент.

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

Шаблоны

Анатомия представлений Angular сложна и многофункциональна, шаблоны HTML содержат смесь директив и выражений, связывающих вместе представления и соответствующие контроллеры. Данные передаются через множественные контексты с помощью $scope .

В компонентах React данные всегда передаются в одном направлении: от вершины дерева компонента вниз к узлам. JSX является самым распространенным синтаксисом для написания компонентов, трансформирующим структуру XML в JavaScript. Несмотря на сходство с синтаксисом шаблонов, это компилируется в вызовы вложенных функций.

Показанный ниже скомпилированный код помогает уяснить, как наши выражения JSX выглядят в вызовах функции createElement(component, props, children) .

Директивы шаблонов

Рассмотрим, как можно реализовать некоторые наиболее используемые директивы шаблонов Angular с помощью компонентов React. Так как в React нет шаблонов, в наших примерах мы взглянем на код JSX, расположенный внутри функции render компонента, как здесь:

Директива ng-repeat

Мы можем использовать стандартные механизмы цикла в JavaScript, чтобы получить массив элементов в JSX.

Директива ng-class

В React мы своими силами создаем списки классов для свойства className . Обычно для этого используется какая-нибудь готовая функция типа classNames от Джеда Уотсона.

Атрибуты в JSX стоит рассматривать как непосредственное присваивание атрибутов узлу. Именно поэтому функция называется className , а не по названию атрибута class

Директива ng-if

Условия if-else не работают внутри JSX, так как JSX это всего лишь синтаксический сахар для вызова функции и создания объекта. Поэтому для этого используются тернарные операторы или условная логика выносится за пределы JSX в метод рендеринга.

Директивы ng-show / ng-hide

В React вы можете задавать стили непосредственно или путем добавления служебного класса в CSS типа .hidden < display: none >, чтобы скрывать элементы (на самом деле Angular обрабатывает их тем же самым образом).

Вам надо потратить время и потренироваться с этим. Вместо использования специального синтаксиса шаблонов и атрибутов надо добиваться того же результата с помощью JavaScript.

Сравнение на примере компонента слайдшоу

Компоненты React во многом напоминают директивы Angular, они используются в первую очередь для абстрагирования сложных структур DOM в переиспользуемые фрагменты. Ниже показан образец компонента слайд-шоу в Angular, принимающего массив со слайдами, выводящего список изображений с элементами навигации и отслеживающего состояние activeIndex для выделения активного слайда.

Слайдшоу в Angular

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

У компонентов React есть локальное пространство this.state , которое вы можете модифицировать, вызывая this.setState(< key: value >) . Все изменения состояния влекут новый рендеринг компонента.

События в React выглядят как олдскульные строчные обработчики событий типа onClick . Не заморачивайтесь по этому поводу, под капотом там работают высокопроизводительные делегированные обработчики событий.

Слайдшоу в React

Двухстороннее связывание

В Angular ng-model и $scope формируют связь, по которой данные перетекают вперед и назад между элементом формы и объектом JavaScript в контроллере.

React специально избегает этого паттерна, используя вместо этого односторонний поток данных. Идентичные представления можно с одинаковым успехом делать с обоими паттернами.

в данном случае это “контролируемый input”, то есть его значение меняется только при вызове функции рендеринга (в примере выше это делается при каждом нажатии клавиш). Компонент сам отслеживает свое состояние, то есть управляет своими данными. Это не рекомендуется делать для большинства компонентов, в идеале компоненты не должны отслеживать свое состояние, данные должны передаваться через props .

Обычно отслеживающий компонент-контейнер или контроллер представления располагается вверху дерева, а не отслеживающие дочерние компоненты располагаются ниже, более подробная информация есть в разделе документации What Components Should Have State?

Вызов методов родительского элемента

В то время как поток данных движется в одном направлении, есть возможность вызывать методы у родительского элемента через функции обратного вызова, обычно это делается в ответе на какой-либо пользовательский ввод. Эта гибкость дает вам больше контроля при рефакторинге компонентов в сторону их упрощения. Если у компонентов нет состояния, при рефакторинге их можно переписать как функции.

На первый взгляд это похоже на круговое движение, если вы знакомы с двухсторонним связыванием. Плюс от использования небольших и простых презентационных компонентов в том, что они просто принимают данные как props и выводят их — они по умолчанию проще, а значит в них меньше багов. Это также предотвращает пользовательский интерфейс от несогласованного состояния, которое может быть вызвано нахождением данных, которые надо поддерживать отдельно, в разных местах.

Инъекция зависимостей, сервисы и фильтры

Модули JavaScript это намного лучший способ обработки зависимостей, вы можете их использовать с помощью Webpack, SystemJS или Browserify.

Звучит отлично, дайте две

Да. Мы можем выводить компоненты React внутри существующего приложения Angular, у Бена Надела есть хороший пост со скринкастом о рендеринге компонентов React внутри директивы Angular. Также есть модуль Angular ngReact, предоставляющий директиву react-component , действующую как клей между React и Angular.

Если вы столкнулись с проблемами производительности рендеринга в определенных частях вашего приложения Angular, вы можете улучшить производительность, перекинув часть рендеринга на React. Но как было сказано, подключение двух больших библиотек JavaScript, решающих одинаковые проблемы, далеко от идеала, даже с учетом того, что React работает только со слоем преставлений, ее размер такой же как у Angular, в некоторых ситуациях это может быть неприемлимым.

Хотя React и Angular решают схожие задачи, они делают это очень по-разному. React реализует функциональный декларативный подход, в котором компоненты это чистые функции, свободные от побочных эффектов. Этот функциональный стиль программирования проще для понимания и ведет к уменьшению количества багов.

Как насчет Angular 2?

Компоненты в Angular 2 во многом напоминают компоненты React. У образцов компонентов в документации есть аналогичные класс и шаблон, похожими выглядят события, в документации показано как строить представления используя иерархию компонентов так, как если бы вы это делали в React, а для инъекции зависимостей используются модули ES6.

Большая часть работы над Angular 2 заключалась в повышении эффективности обновления DOM. Старый синтаксис шаблонов и сложность зоны видимости влекли множество проблем с производительностью в больших приложениях.

Полное приложение

В этой статье я сфокусировался на шаблонах, директивах и формах, но если вы делаете целое приложение, вам потребуются и другие вещи, как минимум, для управления моделью данных, коммуникацией с сервером и маршрутизаций. Когда я только начинал изучать Angular и React, я создал тестовое приложение Gmail, чтобы понять, как они работают и оценить свои ощущения как разработчика, прежде чем начать использовать их в настоящих приложениях.

Возможно, вас заинтересует этот образец, чтобы сравнить различия в React и Angular, пример React написан на CoffeeScript с CJSX, который мне нравится до сих пор (декабрь 2015). Сообщество React ориентируется на ES6 с Babel и Webpack, поэтому сейчас я рекомендую использовать именно их.

А вот для сравнения образцы простого приложения TodoMVC:

Ресурсы для изучения

Изучение React было захватывающим, React научил меня многому в функциональном программировании, а активное сообщество вокруг него создает свои дополнения к экосистеме React. Эндрю Рэй написал несколько отличных вводных постов по React и Flux, официальный курс по React также является отличной стартовой отметкой.

Angular.JS. Быстрое знакомство с популярным фреймворком от Google

Старичок JavaScript долгое время у меня ассоциировался со словом «гетто». Такую солянку подходов в разработке и хроническую неприязнь сообщества к применению проверенных временем методик проектирования мне никогда не доводилось видеть. Потребовались долгие годы, чтобы в это мрачное царство стали пробиваться лучи света под названием фреймворки.

Проблемы JavaScript

Язык изначально позиционировался как простой и чтобы как-то привлечь внимание профессиональных разработчиков его синтаксис постарались притянуть к великой Java, но положительных результатов эта практика не принесла. В JavaScript разразился хаос, и долгое время творилась самая настоящая вакханалия. Профессионалы не спешили применять сомнительную новинку, а новички в розовых очках не сильно задумывались о качестве кода. В итоге, язык превратился во второсортный инструмент, который сгодится для написания неуклюжих вещей, способных хоть как-то оживить страницы того времени.

Но неужели проблема только в отсутствии профессионалов? Ведь рано или поздно зеленые юнцы, рубящие с плеча, должны набраться опыта и превратится в продвинутых учителей своего дела. Конечно же, нет. Причины лежат в самом языке и его архитектурных проблемах. Разработку JavaScript можно сравнить с гонками формула 1 – спорт-кары развивают реактивную скорость, но крайне ненадежны. Времени на создание языка было потрачено непростительно мало. Добавим сюда внезапную смену концепции проекта (изначально JavaScript планировался как функциональный язык) и в итоге получим то, что получили. Местами запутанный синтаксис, непредсказуемость работы некоторых операторов, бесконечные нюансы со слабой типизацией, проблемы с областью видимости переменных и кучу других дефектов, способных нарушить психику людей, привыкших работать с нормальными языками.

Первым, кто отважился по-настоящему развернуть неповоротливый JavaScript, стал Джон Резиг. Он разглядел в гадком утенке невидимое изящество и отважился решить одну из самых важных на то время проблем: покончить с бесконечным переписыванием одного и того же кода. В то время он занимался разработкой сайта компании Brand Logic и нюансы JavaScript прочувствовал на собственной шкуре.

Результатом его рвения стал первый релиз библиотеки jQuery. Она должна была решить не только проблему одноразового кода, но и добиться хоть какой-то кросс-браузерности. Не оставленным без внимания остался и синтаксис JavaScript. Библиотека позволила сократить многие монструозные конструкции и стала неким кусочком синтаксического сахара. Каждый новый релиз библиотека совершенствовалась и вбирала в себя новые возможности. Сегодня jQuery является неотъемлемыми инструментом любого web-разработчика и представить современный сайт без ее использования (или альтернатив) уже проблематично.

Ну а дальше началось самое интересное. jQuery показала, что JavaScript способен на многое и возможно именно это послужило своеобразным пинком для многих игроков web’а. К языку стали относится более снисходительно и пытаться всячески развивать. Чего только стоит пример Google, подаривший нам быстрейший JavaScript-движок V8. Благодаря ему появилась возможность создавать тяжелые js приложения. Вновь открывшиеся перспективы стали подспорьем для создания принципиально новых технологий на базе JavaScript. Достаточно назвать Node.JS и сразу становится ясным, что сегодня JavaScript намного больше, чем скриптовый язык. Сегодня он готов взять на себя все этапы создания приложения (клиентскую и серверную часть) не прибегая к вспомогательным инструментам.

JavaScript-фреймворки

На смену библиотекам вроде jQuery в мир JavaScript стали приходить фреймворки, реализующие популярный паттерн MVC (MVVM, MVP и т.д.). Фреймворки стали приносить новую культуру разработки и альтернативные взгляды на устоявшиеся в умах девелоперов вещи. Все больше стали подниматься вопросы применения паттернов, хорошо зарекомендовавших себя в мире большего программирования, и в умах js-разработчиков наконец-то стала укладываться аксиома: «Нельзя мешать логику с представлением».

Преимущества фреймворков, по сравнению с изобретением собственных «труповозок» видны невооруженным глазом. Один из самых существенных, на мой взгляд, является избавление от рутинного кода, который тянется от проекта к проекту. Фреймворк предоставляет разработчикам каркас будущего приложения и решение задач, встречающихся в большинстве проектов. Например, программисту не нужно думать, как принять данные от клиента и передать их на сервер, т.к. все необходимое скорей всего реализовано авторами фреймворка. Вместо этого разработчику предлагается сосредоточиться функционалом собственного приложения.

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

Лежащий в основе большинства современных фреймворков паттерн проектирования MVC хорошо зарекомендовал себя и теперь стал доступен для JavaScript мира. Конечно, особой новизны и революции в этом событии нет. Любой продвинутый разработчик может без всяких фреймворков спроектировать приложение, следуя этому паттерну. Однако «может» и «обязывают» разные вещи. Учитывая, что в JS сообществе на передовые методики долго все клали железный болт, то требование применение паттерна со стороны фреймворка будет весьма кстати.

Angular JS

Проект Angular.JS относительно новый. Впервые был представлен в 2009 году. За это время вышло несколько версий и вокруг продукта сколотилось плотное сообщество. Успех к проекту во многом определил его родитель – компания Google. К релизам корпорации добра гики относится с особым трепетом, особенно если речь идет об инструментарии для разработчиков. В этот раз получилось тоже самое. Не буду вдаваться в технические дебри, а лучше сразу расскажу, чем зацепил проект лично меня.

Он предельно прост

Angular.JS имеет достаточно низкий порог вхождения по сравнению со многими подобными решениями. Документация носит слегка противоречивый характер. Она вроде хорошо структурирована, есть примеры кода, но некоторые вещи освещены крайне слабо. С ними придется разбираться самостоятельно путем изучения исходников или комментариев от коллег по цеху. Например, трудности понимания работы scope (областей видимости) развеют комментарии Misko Hevery на StackOverflow и просмотр видео «AngularJS. Best Practices» (http://goo.gl/UYG6Q).

Декларативный подход

Разработчики Angular.JS отошли от традиционной идеи: «HTML враг и нужно с ним бороться». Вместо этого они решили естественным образом расширить язык разметки, путем ввода дополнительных директив.

Тестирование

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

Выражения

Чтобы что-то вывести содержимое какого- либо объекта тебе не требуется писать в шаблоне громоздкие конструкции в стиле или что-то в этом роде. Достаточно заключить выражение в двойные фигурные скобки и все, данные будут обработаны. Например, результатом выполнения кода

Директивы Angular.JS

Директивы являются одной из ключевых возможностей Angular.JS. Они позволяют разработчику описать поведение отдельных элементов и расширить синтаксис HTML. В состав angular входит лишь базовый набор директив. Однако, никто не мешает нам его расширить своими собственными наработками. Правильно созданные директивы могут использоваться и в других проектах. Некоторые разработчики даже практикуют выкладывать свои коллекции компонент в публичный доступ. Ярким примером тому является команда AngularUI, которые выложили и поддерживают в актуальном состоянии порядка двадцати готовых к использованию компонент.

Я неспроста сказал, что директивы являются одной из ключевых возможностей. Начинающие разработчики частенько пропускают эту мысль мимо ушей и начинают мудрить по своему – изменяют напрямую DOM. Этого делать ни в коем случае нельзя. Почему? Во-первых, так гласят священные заповеди Angular.JS, а во-вторых разработчик лишается вкусностей вроде многоразового использования своих наработок, простого сопровождения кода и т.д.

Scope, производительность и мифы

О производительности Angular можно найти много негативных мнений. По некоторым заявлениям, производительность фреймворка недостаточно хороша и не годится для серьезных приложений. Например, нередко можно встретить примеры, авторы которых демонстрируют непригодность фреймворка для обработки нескольких десятков тысяч объектов. «Тормозит, ваш angular с его продвинутым биндингом!» — кричат ярые противники. При детальном рассмотрении примеров становится, очевидно, что проблема надуманна и их авторы не удосужились прочитать до конца документацию и вспомогательные материалы с официального блога.

Чтобы раз и навсегда развеять мифы о производительности разберемся с таинственной сущностью scope (область видимости). Scope – это не модель и ненужно пытаться ее из него делать. Ничего хорошего из этого не получится. В руководстве по angular четко сказано, что под моделью подразумевается любой массив данных, а scope может содержать ссылку на модель. Не нужно пихать все данные из модели в scope. Да, в таком контексте ими удобно манипулировать, но кроме тормозов никакой выгоды ты не получишь. Не стоит считать все вышесказанное банальным обходным маневром и отмазкой со стороны разработчиков angular. Это архитектура angular.js и с ней нужно считаться. Тем более, не стоит забывать о паттерне MVVM. Помимо традиционной сущности «модель» он выделяет «модель-представление» и в данном случае, scope это есть модель-представление, а значит, в ней должны быть данные, которые требуется отображать.

Получается, что наезды на производительность angular по большей части неуместны. Во всяком случае, на озвученных выше примерах. Хорошо, один миф разрушен. Но ведь, проблемы могут случиться (теоретически) и на более скромных объемах. Некоторые разработчики утверждают, что тормоза могут проявляться, когда в scope напихано ни много, ни мало, а 2000-3000 объектов. Как быть с этим аргументом? Частично ответ я уже дал – не нужно пихать в scope то, что не нужно отображать прямо сейчас. Вот серьезно, я не могу представить ни одной задачи, которая может потребовать вывод такого большего количества объектов на одной странице. Тут либо закралась ошибка в архитектуре приложения, либо разработчик неправильно трактует решаемую задачу.

Почему же несколько тысяч элементов могут вызывать серьезные проблемы с производительностью? Ну, ей, богу, в каком веке мы живем? Неужели пару тысяч объектов могут стать серьезной проблемой для современного ПК? На самом все несколько сложнее, чем просто большое количество объектов. Причина кроется в работе биндинга. Во время компоновки шаблона директивы создают так называемых наблюдателей ($watch). Наблюдатели уведомляют директивы об изменения свойств, чтобы те в свою очередь во время обновили значения элементов в DOM. Эта операция производится часто, поэтому при большом количестве объектов в scope тормоза будут неизбежны.

Загрузка angular-приложения

Начальная загрузка angular приложения выполняется при помощи директивы ngApp. Данный способ подходит в большинстве случаев, но при желании можно все сделать ручками. В нашем примере мы пойдем простым путем, т.е. воспользуемся директивой ngApp, указав ее в корневом элементе страницы. После объявления этой директивы произойдет следующее:

  • создается injector (механизм, применяемый для получения экземпляров объектов, предоставляемые поставщиком; загрузки модулей и т.д.), который будет использоваться для внедрения зависимостей в пределах приложения;
  • injector, сформирует глобальный scope в контексте модели нашего приложения;
  • angular начнет обрабатывать дерево DOM, начиная с элемента в котором была объявлена директива ngApp. Во время этого процесса будут созданы все найденные биндинги и выполнены обнаруженные директивы.

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

    ToDo лист. Держим задачи под зорким надзором

    Я долго думал, какой лучше подобрать пример для демонстрации angular. Скажу честно, сначала у меня была грандиозная идея сотворить матерое расширение для браузера Google Chrome, способное взаимодействовать с различными сервисами корпорации добра. Но, к сожалению, до конца отладить весь задуманный функционал у меня не вышло. Что-то постоянно не работало и глючило. В итоге я решил рассмотреть классический пример – создание ToDo листа, а про разработку расширений для Google Chrome, когда-нибудь сделаю, с позволения редактора рубрики, отдельную статью.

    Для начала сформулируем задачу. Что из себя представляет типичный ToDo лист? В первую очередь – это список задач, которые необходимо выполнить в определенное время. Каждая задача это отдельный элемент, обладающий минимум двумя свойствами: наименование (описание задачи) и состояние.

    Представление

    Часть кода представления я привел в первом листинге, а полную версию ты всегда можешь взять с нашего диска. Любое angular приложение начинается с объявление директивы ngApp. Обрати внимание, что в коде название директив пишется через тире, а в хелпе и в тексте стать слитно. Для директивы ngApp можно указать дополнительный атрибут – имя модуля, который будет загружен при инициализации приложения. Пока оставим этот вопрос открытым, а в качестве имени модуля укажем todomvc. Далее я привожу описание формы с одним единственным полем. В него пользователь будет вводить новую задачу и при нажатии кнопки «Отправить» она будет отправляться в общий список.

    Обработать событие отправки данных введенных в форму поможет директива ngSubmit. Она позволяет забиндить действие, которое будет выполняться при отправке данных из формы. В нашем случае таким действием будет метод контроллера addTodo(). В теле метода будет описан код, добавляющий новую задачу в модель. Сам текст задачи будет вводиться в поле ввода, для которого я указываю директиву ngModel, тем самым устанавливая двухстороннюю привязку с моделью отображения.

    Теперь взглянем на вывод данных из модели. Каждая новая задача обрамляется тегом li, включающий в себя элементы управления: изменение состояния, редактирование или удаление. Функционал этих кнопок реализуется тем же способом, что и был применен для добавления новых задач. С одним лишь отличием, вместо директивы ngSubmit используется ngClick (обрабатываем клик по кнопке) или ngDblClick (двойной щелчок).

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

    Для пущей красоты нам необходимо позаботиться об альтернативном оформлении выполненных задач. По задумке, ко всем завершенным таскам должны применяться стиль «зачеркнуто». Эффективно решить эту задачу поможет директива ngClass. Она устанавливает класс оформления для определенного html элемента в зависимости от результата вычисления выражения.

    Последнее, что нуждается в пояснении – конструкция filter:statusFilter . Здесь filter – встроенная функция, позволяющая отфильтровать данные из массива todos, соответствующие значению переменной statusFilter (ее значение будет изменяться в контроллере).

    Контроллер

    В втором листинге я привел описание контроллера — ключевой части нашего примера. Контроллер в angular оформляется в виде обычной JavaScript-функции. Например: function MyController () .

    Мы можем объявить контроллер как в теле самой странице (там, где у нас представление), так и в отдельном файле. Второй способ предпочтительней, т.к. позволяет отделить логику от представления (вспоминаем теорию паттерна MVC) и упростить поддержку приложения в будущем.

    Правда, при вынесении контроллера в отдельный файл мы должны как-то сообщить angular, что в контексте нашего приложения необходимо использовать именно этот контроллер. Решением этого вопроса занимается директива ngApp. В качестве дополнительного атрибута она принимает имя модуля, который будет загружен при инициализации приложения. Под модулем в Angular подразумевается совокупность служб, директив, фильтров и различной вспомогательной информации, которая может быть использована для конфигурирования injector. Для нашего примера в качестве модуля я указываю «todomvc», а его создание описываю в файле app.js:

    После этого, в рамках данного модуля можно описать наш контроллер, что я и делаю конструкций:

    Давай разберем ее на кусочки:

  • todomvc – имя модуля (вспоминаем про директиву ngApp и файл app.js);
  • controller – служба, отвечающая за создание экземпляра контроллера. В качестве параметров мы должны передать название функции с контроллером и ссылка на объект, соответствующий контроллеру. Обрати внимание, как я передаю ссылку на объект контроллера. Поскольку отдельной функции контроллера у нас нет, то я ее определяю прямо в параметре.
  • function TodoCtrl($scope, $location, todoStorage) – функция, определяющая контроллер.В качестве параметров передаем:
  • $scope. Область видимости, созданная при объявлении директивы ngController;
  • $location. Служба, предназначенная для работы с URL, введенным в адресной строке браузера;
  • todoStorage. Самописная служба, созданная для взаимодействия с локальным хранилищем.

    А теперь самое интересное, ни один из этих параметров (для функции контроллера), кроме Scope, ни является обязательным. Все остальное добро мы передаем на свое усмотрение и сугубо для решения конкретной задачи. Количество параметров и их тип для функций-контроллеров может быть любым.

    С объявлением контроллера разобрались. Теперь посмотрим на его внутренности. В самой первой строчке я объявляю модель (todos), которая представляет собой обычный массив. В нем будут храниться все добавленные пользователем задачи. Чтобы получить список задач, который отображен в представлении в настоящее время, достаточно обратиться к свойству todos в scope. Однако, нас должны интересовать не только текущие данные, но и ранее сохраненные в локальном хранилище, которые мы можем получить через описанную мной службу todoStorage. После этих манипуляций, в модели будут абсолютно все данные.

    Сформировав модель, я регистрирую функцию обратного вызова, которая будет срабатывать при изменении содержимого нашей модели. В angular этот механизм выполняется при помощи метода $watch. В качестве параметров ему требуется передать:

  • значение, за которым требуется наблюдать;
  • функция, которая вызывается при изменении значения переданного в качестве первого параметра;
  • признак необходимости сравнивать объект;

    В теле функции, которая будет вызывать при изменении содержимого модели, я определяю всего лишь один метод – todoStorage.put(todos) . Он отвечает за сохранение списка задач в локальное хранилище.

    Чуть ниже по тексту второго листинга ты можешь увидеть похожий трюк. Только на этот раз следить нужно за изменением адресной строки. Появление параметра «active» означает необходимость установки фильтра, отображающего пользователю только невыполненные задачи. Ну а если в url присутствует параметр «completed», то делаем обратную операцию – невыполненные задачи скрываем, а завершенные отображаем.

    После всех вспомогательных манипуляций, направленных на сохранение и фильтрацию данных я описываю функции, для взаимодействия с моделью: добавление, редактирование и удаление задач. Этот код вряд ли требует дополнительных пояснений.

    Тестируем

    Написание тестов – неотъемлемая часть разработки приложения с использованием angular. Для написания и выполнения тестов есть все необходимое из коробки и сейчас ты в этом убедишься на реальном примере. Я не буду заходить далеко, а просто приведу часть кода, тестирующего контроллер с необходимыми для понимания комментариями. Все подробности ты узнаешь из документации.

    Вместо заключения

    Однозначно, Angular.JS получился качественным и интересным решением, которое стоит применять в своих проектах. Компания Google вновь смогла удивить нас релизом хорошо продуманного продукта. Нельзя сказать, что он получился идеальным, но с возложенными на него задачами ему справиться под силу, а это самое главное. На этом спешу откланяться и пожелать тебе взглянуть иначе на мир JS разработки.

    Листинг 1. Представление

    Листинг 2. Контроллер в Angular.JS

    Листинг 3. Тестируем код контроллера

    Как изучать Angular.JS

    Братья по духу

    Как отладить Angular приложение

    При разработке на angular тебе однозначно понадобится дополнительный инструмент отладки. К счастью, такой инструмент уже создан и выполнен в виде расширения для Google Chrome. Называется оно Angular JS Batarag и после установки из Google Play расширение встраивается дополнительной примочкой в Developers Tools. Batarag позволит тебе просматривать иерархию scope, их содержимое и при желании изменять значения прямо из консоли. Более подробную информацию ты сможешь получить из видео, доступного на странице расширения в Google Play.

    Топ-пост этого месяца:  Как сделать выпадающее меню CSS грамотная навигация сайта с помощью стилей
  • Добавить комментарий