Удивительный Угловатый

От переводчиков

Отметим только, что если вы ожидаете от этой статьи ответа на вопрос «Почему Angular лучше других технологийЭ», то нам придется вас разочаровать, ответа на него у нас не будет. Почему? Как правило, все мнения вида «Технология X лучше, чем технология Y» почти всегда являются не чем иным, как отражением точки зрения говорящего.

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

Что ж, давайте начнем.

Содержание :

1. Угловой 1.1. Что вам дает Angular? 1.2. Angular-RU - Русскоязычное сообщество 1.3. Встречи Angular в России 1.4. Угловой + StackBlitz 1.5. Angular 6: скоро
2. Угловой дайджест 2.1. Официальные ресурсы 2.2. Новости в твиттере 2.3. Сообщества 2.4. Серверный рендеринг 2.5. Шпаргалка 2.6. библиотеки пользовательского интерфейса 2.7. Важные особенности 2.8. Угловой интерфейс командной строки 2.9. Инструменты разработки 2.10. Стартовый комплект 2.11. Стартеры веб-пакетов 2.12. Угловой универсальный 2.13. Публикации 2.14. Видео уроки 2.15. Руководства по стилю 2.16. Конференция Angular Connect 2.17. Книги 2.18. Курсы и тренинги 2.19. Подборка статей 2.20. Интеграция 2.21. Выбор компонентов 2.22. Трубы 2.23. Структуры данных 2.24. Маршрутизация 2.25. Проверка 2.26. Ведение журнала 2.27. i18n 2.28. Производительность 2.29. Ленивая загрузка 2.30. Погрузчики 2.31. Примеры приложений 2.32. Генераторы 2.33. Инструменты документации 2.34. ТодоMVC 2.35. Расширения для IDE 2.36. Машинопись 2.37. Дарт 2.38. Вавилон 2.39. ES5 2.40. ионный 2.41. Метеор 2.42. НативСкрипт 2.43. Реагировать нативный 2.44. Хаксе 2.45. С# 2.46. Джава 2.47. Котлин 2.48. Скала 2.49. Кусочек 2.50. Безопасность 2.51. НгРкс

Угловой

Angular — платформа для разработки мобильных и настольных веб-приложений.

Текущая версия Angular:

Текущая поддержка Angular в браузере:

Брэд проработал в Google почти 12 лет и работал во многих местах, но больше всего гордится тем, что проработал вместе со Стивом Джобсом почти 5 лет. Даже здесь, говоря об Angular, мы можем вспомнить старого Джобса и почтить его память.

1.1. Что вам дает Angular?

Angular был полным переосмыслением AngularJS, это было, пожалуй, самое болезненное, но оно того стоило, сам фреймворк стал намного чище и гибче, более корпоративным и с этой точки зрения высокомасштабируемым.

Каковы преимущества? :

• Поддержка Google, Microsoft;
• Инструменты разработчика (CLI);
• Единая структура проекта;
• TypeScript «из коробки» (можно писать строго типизированный код);
• Реактивное программирование с помощью RxJS;
• Единственный фреймворк с внедрением зависимостей «из коробки»;
• Шаблоны на основе расширения HTML;
• Кроссбраузерность Shadow DOM из коробки (или его эмуляция);
• Кроссбраузерная поддержка HTTP, WebSockets, Service Workers;
• Ничего дополнительно настраивать не нужно.

  Больше никаких оберток;

• Более современный фреймворк, чем AngularJS (на уровне React, Vue);
• Отличное сообщество.

:

• Порог входа выше из-за Observable (RxJS) и Dependency Injeciton;
• Чтобы все работало хорошо и быстро, нужно потратить время на дополнительные оптимизации (по умолчанию он не супербыстрый, но во много раз быстрее AngularJS и становится быстрее с каждой новой версией);
• Фактически, если вы планируете разрабатывать крупное корпоративное приложение, то в этом случае у вас нет архитектуры управления состоянием из коробки — вам нужно добавить Mobx, Redux, CQRS/CQS или другой менеджер состояний, чтобы не сломать тебе мозг потом;
• Angular-Univesal имеет множество подводных камней;
• Динамическое создание компонентов оказывается нетривиальной задачей.

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

• Конструктор форм - чтобы разработать по-настоящему сложные формы, нужно знать реактивные формы , а точнее, принципиально забыть о декларативных формах.

  Вот один из хороших Примеры (реактивная форма + валидация);

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

  Вы можете посмотреть различные проекты OpenSource: PrimeNG, Angular Material, Clarity UI, Angular Bootstrap и другие, все они используют ChangeDetection.OnPush.

• Шаблонизация — синтаксис шаблонов с точки зрения абстракции не слишком изменился по сравнению с AngularJS, то есть мы также можем писать условия, циклы, связывать модель данных и т. д. Все, что вам нужно хорошо понимать и понимать шаблоны Angular — это что такое структурные и декларативные директивы, а также что такое входные параметры и выходные события.

• Маршрутизация — Наверное, это одно из фундаментальных явлений в разработке веб-приложений.

  Здесь просто важно понимать, что маршрутизация, как и компоненты, имеет свой жизненный цикл.

  Поняв это, вы сможете писать по-настоящему крутые приложения.

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

  по требованию .

• Аннотации — кстати, многие новички не знают, но это стоит отметить.

  Декораторы, которые в изобилии используются при написании приложений Angular, не являются какой-то жесткой магией TypeScript. Декораторы — это спецификация EcmaScript, и когда браузеры начнут их поддерживать, они будут выполняться в среде выполнения браузера.

  На самом деле декораторы весьма полезны и делают ваш код легко читаемым.

  Одним из примеров является Проверка модели данных с использованием декораторов или десериализация/сериализация данные.

• Наблюдаемые — по сути, единственное, что здесь стоит отметить, это то, что Observables скоро станет спецификацией EcmaScript и всё это будет нативно поддерживаться в браузерах.

  С теоретической точки зрения, если расширить концепцию Observer, это поведенческий шаблон проектирования.

  Также известен как «Иждивенцы».

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

• Тень ДОМ — спецификация W3C для создания отдельного DOM-дерева внутри элемента, невидимого снаружи, без использования специальных методов.

  Грубо говоря, это удобный способ создания изолированных и повторно используемых веб-компонентов.

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

1.2. Angular-RU - Русскоязычное сообщество

Развивающееся сообщество

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

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

Текущий список общественных разработок

• webpack-угловой-стартер — простая среда на основе Webpack + Angular
  
  
  
  
  
  
  
  
  
  
  
  
• webpack-typescript-starter — простой стартер на основе Webpack + Typescript
  
  
  
  
  
  
  
  
  
  
  
  
• угловой-универсальный-стартер - репозиторий с настроенным Angular Universal
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• угловое гнездо-стартер — простая единая среда на TypeScript (Angular + Nest)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• angular-kendo-ui-стартер — репозиторий с настроенным Angular и Kendo UI
  
  
  
  
  
  
  
  
  
  
  
  
• угловая ясность-UI-стартер — репозиторий с настроенным Angular и Clarity UI
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• угловой-ngx-комплект — набор генераторов кода компонентов
  
  
  
  
  
  
  
  
  
  
  
  
• угловой ионный стартер — описания взаимодействия Angular + Ionic
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• angular-sws-библиотека-стартер - создание и тестирование библиотек Angular
  
  
  
  
  
  
  
  
  
  
  
  

• @angular-ru/ngx-i18n-combine — Объединить файлы i18n (json, ts, js, jsx, tsx)
  
  
  
  
  
  
  
  
  
  
  
  

1.3. Встречи Angular в России

В этом году планируется провести первую встречу в Санкт-Петербурге (скоро появится информация, за которой также можно следить в чате) Угловой Питер ).

Если у вас есть идеи или вы хотите провести презентацию, вы можете присылать свои заявки.

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

Проблема относительно этого вопроса, чтобы мы могли вас добавить.

1.4. Угловой + StackBlitz

Если раньше они все были на SystemJS и работали в Plunker, то теперь достаточно зайти на официальный сайт. СтекБлиц и запустите приложение Angular или Ionic одной кнопкой.

Все это работает прямо в браузере, тут же вы можете устанавливать пакеты npm и писать свой код на TypeScript. Но это не все.

Удивительно то, что теперь вы можете запустить любой репозиторий GitHub с приложением Angular прямо на StackBlitz.



Как это работает? Все, что вам нужно сделать, это написать в адресной строке следующее:

   

 stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}

   

/github/{GH_USERNAME}/{REPO_NAME}/tree/{TAG|BRANCH|COMMIT}

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

Спасибо команде Angular за это.

1,5. Угловой 6

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

воспроизвести его).

Многим также интересно, чем занимаются разработчики команды Angular, какова их дорожная карта? Теперь вы можете это отслеживать, для нас есть специальный ресурс hq.angular.io , там задачи команды рассортированы по приоритету.

Новый движок рендеринга

Производительность и скорость приложения (по результатам синтетических тестов) оказались лучше, чем у последней версии Vue. А размер приложения сократился на 90%.

Помните тот троллинг про Angular 2 (когда многие начали переходить с AngularJS на Angular 2), когда наши приложения весили 1 МБ и когда Webpack 2 вылетал со странными ошибками? Эти времена почти прошли.

Да, на самом деле Angular 2 на тот момент был сырым, но из-за сжатых сроков команда Angular выпустила фреймворк как есть.

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

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

Новый компилятор - ABC

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

На самом деле, когда ваш проект становится очень большим (в случае, когда он состоит из 1000 модулей, система сборки вебпака начинает очень сильно тормозить, и это заметно: вебпаку просто не хватает оперативной памяти).

Многие считают, что именно поэтому команда Angular до сих пор не включила режим -aot для инкрементных сборок.

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

).

Angular, конечно, ни к чему не привязан.

Однако ваша задача — придерживаться Angular CLI и жить в гармонии с ним (и тогда вам будет все равно, что находится под капотом).

Сейчас известно, по словам команды Angular, что сборка проектов с помощью Bazel занимает 2 секунды при инкрементальной сборке, а ваши приложения будут весить несколько килобайт из-за встроенных Rollup и Uglify2. Но на данный момент известно (из последних коммитов), что нас ждет следующая версия Webpack 4, а использование Bazel пока не точно и пока только в планах.

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

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

Угловые элементы

Это позволит вам практически избавиться от экосистемы Angular (там, где она не требуется).

Вы можете увидеть пример Здесь .

Был скомпилирован компонент, написанный на Angular, который вместе с ядром Angular в сумме (без дополнительных манипуляций по сжатию, минификации и т.п.

) дает на выходе всего 44кб.

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1,0"> <meta http-equiv="X-UA-Compatible" content="т.е.

=край"> <title>Ng Elements Test</title> <script type="module" src="/hello-world.js"></script> </head> <body> <hello-world name="World"></hello-world> </body> </html>





Уже есть куча примеров использования компонентов Angular в React или Preact. Но самое главное, что теперь это возможно.

Однако впереди еще много работы.

Многие вопросы еще предстоит решить.

Вы можете прочитать больше об Angular Elements здесь .

Обновление Angular CLI

То есть, если вы ранее написали:

this.http.get(url).

map(data => /* do something with data */);

Тогда Angular CLI автоматически заменит устаревший код на этот (скорее всего, опять же с включенным флагом):

this.http.get(url).

pipe( map(data => /* do something with data */) );

Угловой дайджест

Официальные ресурсы

• Веб-сайт
• Блог
• Доска задач команды Angular (отсортирована по приоритету)
• Рамочная документация
• Чит-лист общих вещей в Angular
• Быстрый старт
• Репозиторий GitHub

Новости в твиттере

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

Angular Team (эксперты команды Angular)

• Мишко Хевери (@mhevery)
• Игорь Минар (@igorminar)
• Брэд Грин (bradlygreen)
• Наоми Блэк (@naomitraveller)

• Как Создать Потрясающий Эффект Drop Capital На Ваших Веб-Страницах

  19 Oct, 24

• Фотогалерея: Лаборатория Apple Для Тестирования Новинок

  19 Oct, 24

• Google Научился Понимать Текст, Содержащийся В Flash-Файлах.

  19 Oct, 24

• Swiz Framework (Краткий Обзор)

  19 Oct, 24

• Коды Состояния Прототипа Rfc Http Для Ошибок Разработчика (Диапазон 7Xx)

  19 Oct, 24

• У Android-Флагмана Galaxy Nexus Проблемы С Мультитачем

  19 Oct, 24

• Youtube — Убыточный Бизнес?

  19 Oct, 24

• На Какой Конкурс Вы Не Подаете Заявку?

  19 Oct, 24

• Нексус Один. Презентация Началась

  19 Oct, 24

• Чем Грозит Движок Бизнес-Процессов Программисту На Примере Apache Activiti?

  19 Oct, 24