Angular 6 что нового интересные функции, поддержка TypeScript и другие моменты


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

Table of Contents #

Функции — фундаментальные строительные блоки каждого приложения на JavaScript. С их помощью строятся слои абстракции, реализуются классы, сокрытие данных и модули. Хотя в TypeScript есть и классы, и пространства имен, и модули, функции по-прежнему играют ключевую роль в описании того, как все работает. Кроме того, TypeScript добавляет несколько новых возможностей к стандартным JavaScript-функциям, и делает работу с ними проще.

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

Напомним, как эти два варианта выглядят в JavaScript:

Как и в JavaScript, функции могут обращаться к переменным вне своего тела. Когда такое происходит, говорят, что функция «захватывает» переменные. Хотя объяснять то, как это работает и каковы подводные камни данной техники — не задача данной статьи, важно иметь четкое понимание этого механизма, чтобы работать с JavaScript и TypeScript.

Типы функций #

Добавление типов к функции

Добавим к функции из предыдущих простых примеров типы:

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

Пишем тип функции

Теперь, когда мы добавили к функции типы, можно описать ее полный тип, собрав его по кусочкам из определения:

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

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

Вторая часть типа функции — тип возвращаемого значения. На него указывает толстая стрелка ( => ) между параметрами и типом возвращаемого значения. Как писалось выше, эта часть необходима, и поэтому, если функция не возвращает ничего, в качестве типа возвращаемого значения нужно указать void .

Отметим, что параметров и типа возвращаемого значения вполне достаточно, чтобы описать тип функции. Переменные, которые функция захватывает, в ее типе не отражаются. По сути, захваченные переменные — часть так называемого «скрытого состояния» функции, и они не являются частью её API.

Выведение типов

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

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

Опциональные параметры и параметры по умолчанию #

В TypeScript считается, что каждый параметр функции обязателен. Это не значит, что ей нельзя передать null или undefined : это означает, что при вызове функции компилятор проверит, задал ли пользователь значение для каждого ее параметра. Кроме того, компилятор считает, что никакие параметры, кроме указанных, не будут передаваться. Проще говоря, число передаваемых параметров должно совпадать с числом параметров, которые ожидает функция.

В JavaScript все параметры необязательны, и пользователи могут пропускать их, если нужно. В таких случаях значение пропущенных параметров принимается за undefined . В TypeScript тоже можно добиться этого: для этого в конце параметра, который нужно сделать необязательным, добавляется ? . К примеру, мы хотим сделать необязательным lastName из предыдущего примера:

Все необязательные параметры должны идти после обязательных. Если бы первый параметр ( firstName ) нужно было сделать опциональным вместо lastName , то порядок параметров в функции пришлось бы изменить, чтобы firstName оказался последним.

Также TypeScript позволяет указать для параметра значение, которое он будет принимать, если пользователь пропустит его или передаст undefined . Такие параметры называются параметрами со значением по умолчанию или просто параметрами по умолчанию. Возьмем предыдущий пример и зададим для lastName значение по умолчанию, равное «Smith» .

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

будут иметь одинаковый тип (firstName: string, lastName?: string) => string . Значение по умолчанию для параметра lastName в описании типа функции исчезает, и остается лишь тот факт, что последний параметр необязателен.

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

Остаточные параметры (rest parameters) #

Обязательные, опциональные и параметры по умолчанию имеют одну общую для всех черту — они описывают по одному параметру за раз. В некоторых случаях нужно работать с несколькими параметрами, рассматривая их как группу; а иногда заранее неизвестно, сколько параметров функция будет принимать. В JavaScript с аргументами можно работать напрямую, используя переменную arguments , которая доступна внутри любой функции.

В TypeScript можно собрать аргументы в одну переменную:

Остаточные параметры (rest parameters) можно понимать как неограниченное число необязательных параметров. При передаче аргументов для остаточных параметров их можно передать столько, сколько угодно; а можно и вообще ничего не передавать. Компилятор построит массив из переданных аргументов, присвоит ему имя, которое указано после многоточия ( . ), и сделает его доступным внутри функции.

Многоточие используется и при описании типа функции с остаточными параметрами:

Научиться правильно использовать this в JavaScript — нечто вроде обряда посвящения в разработчики. Поскольку TypeScript — это надмножество JavaScript, программистам на TypeScript также нужно понимать, как использовать this и как замечать, когда this используется неправильно. К счастью, TypeScript позволяет обнаруживать неправильное использование this с помощью нескольких приемов. Если вам только предстоит разобраться с тем, как работает this , то для начала прочтите статью Yehuda Katz Понятие о вызове функций в JavaScript и «this». Эта статья очень хорошо объясняет, как работает this «под капотом», поэтому здесь мы рассмотрим только основы.

Прим. переводчика — на русском языке по данной теме можно посоветовать прочесть соответствующую статью из учебника javascript.ru, а также Ключевое слово this в JavaScript.

this и стрелочные функции

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

Давайте посмотрим на пример:

Обратите внимание, что createCardPicker — функция, которая возвращает функцию. Если попытаться запустить этот пример, то мы получим ошибку вместо ожидаемого сообщения. Так происходит по той причине, что this , которая используется в функции, созданной createCardPicker , указывает на window , а не на объект deck . Все это из-за того, что cardPicker() вызывается сама по себе. При использовании подобного синтаксиса, когда функция вызывается не как метод, и при том на самом верхнем уровне программы, this будет указывать на window . (Замечание: в режиме соответствия стандартам ( strict mode ) в таких случаях this будет иметь значение undefined , а не window ).

Можно исправить это, удостоверившись в том, что функция привязана к правильному значению this , прежде чем возвращать ее. В таком случае, независимо от того, как она будет использоваться в дальнейшем, ей все равно будет доступен оригинальный объект deck . Чтобы сделать это, нужно изменить функцию, и использовать синтаксис стрелочной функции из стандарта ECMAScript 6. Стрелочные функции захватывают значение this таким, каким оно было на момент ее создания (а не во время вызова):

Что еще лучше, если передать компилятору флаг —noImplicitThis , то TypeScript будет выдавать предупреждение, если вы сделаете подобную ошибку. Он укажет на то, что this в выражении this.suits[pickedSuit] имеет тип any .

Параметры this

К сожалению, тип выражения this.suits[pickedSuit] по прежнему any , поскольку this берется из функционального выражения внутри объектного литерала. Чтобы исправить это, можно явно указать this в качестве параметра. Параметр this — это «фальшивый» параметр, который идет первым в списке параметров функции:

Добавим к предыдущему примеру несколько интерфейсов: Card и Deck , чтобы сделать типы более понятными и простыми для повторного использования:

Теперь компилятор знает, что функция createCardPicker ожидает, что будет вызвана на объекте с типом Deck . Это значит, что тип значения this теперь — Deck , а не any , и флаг —noImplicitThis не будет выдавать ошибок.

Параметры this для функций обратного вызова

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

this: void означает, что addClickListener предполагает, что функция onclick не требует this . Во-вторых, код, который вызывается, нужно также сопроводить параметром this :

Когда this указан, это явно отражает тот факт, что onClickBad должна вызываться на экземпляре класса Handler . Теперь TypeScript обнаружит, что addClickListener требует функцию с this: void . Чтобы исправить эту ошибку, изменим тип this :

Так как в функции onClickGood указано, что тип this — void , ее можно передать в addClickListener . Конечно, это означает и то, что теперь в ней нельзя использовать this.info . Но если нужно и то, и другое, то придется использовать стрелочную функцию:

Это будет работать, поскольку стрелочные функции не захватывают this из контекста, в котором выполняются, и их можно свободно передавать там, где ожидается функция с this: void . Недостаток такого решения в том, что для каждого объекта Handler будет создаваться своя стрелочная функция. Методы же, напротив, создаются только однажды, ассоциируются с прототипом Handler , и являются общими для всех объектов этого класса.

Перегрузки #

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

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

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

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

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

Обратите внимание, что участок кода function pickCard(x): any не входит в список перегрузок; в этом списке всего два элемента, один из которых принимает object , а другой — число. Вызов pickCard с параметрами любых других типов приведет к ошибке.

Что делает метод subscribe в angular5

Помогите все разобрать по полочкам что делает метод subscribe в angular5

2 ответа 2

Метод subscribe() подписывает на обновление запроса. Если говорить простыми словами, то после «get» Запроса на сервер, последний высылает нам стрим с асинхронными данными и чтобы их «поймать» и обработать мы используем метод subscribe(). Пример:

Пример по другому:

В данном примере применяется стрелочная функция или лямбда-выражение(поправьте, если неправильно).

subscribe не имеет отношения к typescript’у как таковому, это название метода объекта типа observable библиотеки RxJs . Подробнее можно почитать в документации или применительно к angular’у. Если коротко то на вход даются 1-2-3 ссылки на анонимные функции-обработчика которые будут вызваны при обновлении данных observable, при возникновении ошибки и при завершении observable. Observable бывают разных типов с разным функционалом и поведением.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками angular2 typescript rxjs или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

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.

Стоит ли сейчас учить TypeScript?

Я уже давно первый AngularJS использую с TypeScript 🙂 Собственно, я уже давно не использую голый JavaScript.

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

но вторая его версия пишется на TypeScrip

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

Давайте проясним. TypeScript это ES6/ES7-stage1 + информация о типах. То есть если вы знаете ES6/ES7-stage1 то вы автоматически знаете TypeScript (добавится только информация о типах и некоторые нюансы, но в целом они строго следует стандарту).

То есть вот это валидный TypeScript:

Одновременно с тем что это валидный TypeScript код это так же валидный код с точки зрения ES (с учетом драфтов находящихся в stage1, вроде пропертей для объектов)

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

copal: опять вы со своей любовью к ООП и т.д.

Все правильно я преподношу. Это надстройка над JS которая позволяет в рамках очень больших проектов (А angular это очень большой проект сам по себе) улучшить управление сложностью, получить статический анализ и т.д.

Для людей которые боятся TypeScript в Angular2 (а их немало, люди просто не знают что это такое) следует как раз таки указать, что если убрать информацию о типах, то это все тот же EcmaScript (тобиш JS). И это основной поинт. Со временем возможно они начнут прописывать типы и т.д. Но на некоторых проектов это ненужный оверхэд.

И да, то что вы описали это плохой пример смешивания концепций а не «JS плохой».

copal:
> И мне кажется что первопричиной типизированных языков является человекочитаемость, а преимущества от выявления ошибок на этапе компиляция, это уже побочный эффект.

Неправильно вам кажется.
Про удобночитаемость вообще не скажу.
А вот то что это прежде всего эффективнейший метод уменьшения ошибок — это да.

Сергей Протько: вот пример из жизни. Есть стор, чтобы на сервере отрендерить что-то нужно сначала полностью загрузить стор. Вот самый минимальный код, который написан по правилам ts —

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

copal: вся идеология TS сводится к «было бы круто иметь информацию о типах во время сборки проекта, а не в рантайме». И все. Это не значит что для любой переменной надо прописывать типы, их в большинстве случаев можно вывести. Достаточно типы описать для аргументов и возвращаемых значений публичных фукнций.

Ваш пример к слову — просто плохой пример кода на typesript. Вместо этих бездумных void лучше бы описали через дженерики типы возвращаемые промисами. Ну и да, arrow-function expressions нету, без них в .then код хуже читается, ну и функции в .then нифига не void.

можно пример, а то я не понимаю.

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

Сергей Протько: нет, у меня как раз обратное. Если разобраться, то функциональный подход я, как и любой другой использует каждый день и не задумывается над тем что он функциональный. Но когда меня спрашивают, как лучше что-то делать я не зацикливаюсь и не говорю что Вам нужно смотреть в сторону функционального подхода, а говорю решение. То есть не подменяю повседневность модными словами. Вот Вы посоветовали человеку отказаться от любимых ему событий в пользу action’s, а Вы сами их используете?
Вы сами используете подход cqrs, который не допускает исправление ошибок, так как исправить одну маленькую ошибку означает убить базу данных.. Вы сами cqrs + action используете на маленьких приложениях, о которых Вы все время говорите?

Топ-пост этого месяца:  Как сделать в Grid CSS колонки с автоматическим подбором размера auto-fit и auto-fill

И спасибо за кастомный генераторный промис, но мне кажется что это немного не то.
Ведь предназначение генераторов это, как можно сказать в контексте js, асинхронное выполнение, сохранение контекста вызова функции до следующего вызова. И для чего это нужно натягивать на кастомный промис, когда есть нативные.
Хотя при помощи генераторов + промисы можно создать «череду асинхронного выполнения», типа сначала(. ).потом(. ).затем(. ).. Но я читал Ваш пост в котором Вы говорили что такую реализацию бы не стали использовать. Когда Вам показывали пример из as3..

copal: не навязываете свое мнение? Модные слова? Напомню с чего началась эта дискуссия:

Вы не правильно подносите ts. Это не js там «какой-то», это ооп язык, который нельзя использовать как обычный js.

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

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

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

Введение в Angular

Что такое Angular. Начало работы с фреймворком

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Последняя версия Angular — Angular 8 вышла в мае 2020 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm , если они отсутствуют на рабочей машине. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm. При этом особого какого-то знания для работы с NodeJS и npm не требуется.

После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку приложения. Путь она будет называться helloapp . В этой папке создадим новый файл package.json со следующим содержимым:

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для сборки приложения в один файл с помощью сборщика webpack.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

И затем выполним команду npm install , которая установит все необходимые модули:

После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.

Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .

Создание компонента Angular

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

В начале файла определяется директива import , которая импортирует функциональность модуля angular/core , предоставляя доступ к функции декоратора @Component .

Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent. В этой функции, во-первых, определяется параметр selector или селектор css для HTML-элемента, который будет представлять компонент. Во-вторых, здесь определяется параметр template или шаблон, который указывает, как надо визуализировать компонент. В этом шаблоне задана двусторонняя привязка с помощью выражений [(ngModel)]=»name» и <> к некоторой модели name.

И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name — в данном случае это пустая строка.

Создание модуля приложения

Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

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

С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule. Для работы с браузером также требуется модуль BrowserModule. Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule. И далее импортируется созданный ранее компонент.

Запуск приложения

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts) файл main.ts со следующим содержимым:

Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule.

Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

Данный файл определяет полифилы — инструменты, которые необходимы для поддержки приложения на Angular различными браузерами.

Определение конфигурации

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

Данный файл определяет настройки для компилятора TypeScript. Опция «compilerOptions» устанавливает параметры компиляции. А опция «exclude» исключает из компиляции папку node_modules, которая содержит все загруженные пакеты.

Если мы используем TypeScript для работы с Angular, то эти два файла фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript, но в целом общая организация будет той же.

Поскольку наше приложение будет разбито на несколько отдельных файлов, то для их сборки будем использовать популярняй сборщик webpack . Поэтому также определим в корневой папке проекта еще один файл webpack.config.js :

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

В данном случае я не буду подробно разбирать конфигурацию webpack, так как она более подробно разбирается в соответствующей теме. Отмечу только основные моменты. В секции entry определяются входные файлы для компиляции и имена сборок. В данном случае для файла «src/polyfills.ts» будет создаваться сборка «polyfills», а из файла «src/main.ts» (который в свою очередь подтягивает другие файлы приложения) будет комилироваться сборка «app».

В секции output определяется, что сборки будут находиться в каталоге public, и для них будут созданы файлы с названиями сборок. Плейсхолдер [name] будет передать название сборки, то есть polyfills или app.

В секции resolve указываются расширения, которые будут применяться к модулям в файлах typescript.

Секция module.rules определяет загрузчики файлов typescript, которые будут использоваться для сборки проекта. По умолчанию Webpack понимает только файлы javascript, поэтому для файлов ts необходимы специальные инструменты — загрузчики. Здесь для загрузки файлов typescript применяются загрузчики awesome-typescript-loader и angular2-template-loader .

Последняя часть файла — секция plugins определяет плагины — вспомогательные инструменты, которые применяются при сборке. В частности, плагин webpack.ContextReplacementPlugin позволяет управлять путями к файлам вне зависимости используем мы Windows или Linux.

Создание главной страницы

В конце определим главную страницу index.html в корневой папке проекта:

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

Далее подгружаются скомпилированные и собранные с помощью TypeScript и Webpack сборки — polyfills.js и app.js.

В итоге у нас получится следующая структура проекта:

И теперь, когда все готово, мы можем собрать проект и запустить приложение. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду npm run dev :

После этого в веб-браузере будет запущено приложение, и мы сможем протестировать его работу:

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

Начинаем работать с Angular 2 и TypeScript

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

Посмотрите этот видео урок из моего курса, Начинаем работать с Angular 2, где мы рассмотрим как TypeScript работает c Angular 2. А также я показываю некоторые основной синтаксис TypeScript.


Начинаем работать с Angular 2 и TypeScript

Насколько TypeScript соответствует Angular 2

Angular 2 построен на TypeScript, который использует синтаксис ES6 и компилируется в обычный JavaScript. Стандарт ES5 JavaScript также подходит для TypeScript, поэтому вы всё ещё можете использовать ваш существующий код.

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

Это распространяется на массивы и объекты и позволяет редактору, такому как Visual Studio Code, распознавать ожидаемое значение. Это полезно в большом проекте или когда другие разработчики будут работать с вашим кодом. Вместо того, чтобы задаваться вопросом, какие данные вы должны использовать в общей переменной, вы будете знать, какой тип значения использовать.

TypeScript в действии

Прежде чем мы рассмотрим небольшой кусок синтаксиса TypeScript, мы обсудим файлы tsconfig.json и typings.json, на которых мы основываем наши проекты.

Файл tsconfig.json

Сначала будет скомпилирован, файл tsconfig.json, которым управляется TypeScript. Ключ target в параметрах компилятора указывает компилятору на создание ES5 JavaScript.

Module определяет стиль загрузчика модулей, который мы используем; другие параметры — общие JS, AMD и UMD. ModuleResolution определяет, как модули будут расставлены, а sourceMap генерирует соответствующий файл карты, который отображает сгенерированный JavaScript в его исходный TypeScript. EmitDecoratorMetadata и experimentalDecorators позволяют нам использовать декораторы в нашем приложении. Мы поговорим о декораторах чуть позже. RemoveComments определяет, будут ли удалены какие-либо комментарии, добавленные при компиляции, и, наконец — noImplicitAny . Это параметр определяет, как будет вести себя компилятор, если он не сможет определить тип. Так как TypeScript может быть типизирован, если мы не укажем тип, он должен определить тип, основываясь на том, какую переменную мы используем.

Если noImplicitAny установлено в false , компилятор будет использовать any для типа, который он не может определить. Если мы установим для этого значение true , TypeScript сообщит об ошибке, если он не сможет определить тип. Затем у нас есть блок exclude , которым исключаем любые файлы, которые мы хотим, чтобы компилятор проигнорировал.

В дополнение к node модулям, которые содержат файлы TypeScript, мы также включили некоторые файлы из папки typings. Это связано с тем, что установлены два набора типов, поэтому мы должны игнорировать один из них.

Файл typings.json

Если мы перейдем к typings.json, мы увидим es6-shim . Это отражает типизацию, которая была добавлена в наш проект.

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

В этом случае, признак внешней среды и связанные зависимости указывают на то, что типизация файла поступает из DefinitelyTyped. DefinitelyTyped является огромным хранилищем файлов типизации для большинства популярных библиотек. В нашем файле typings.json, мы берем типизацию файла es6-shim . Число в конце показывает ID файла типизации. Типизация была установлена после установки и затем файл типизации был скопирован в нашу папку typings.

Типизация значений

Теперь, когда мы поняли, что мы установили касательно компилятора TypeScript, давайте посмотрим на сам язык. Первое, что мы рассмотрим, это типизация значений.

Здесь у нас основные типы, которые мы использовали в JavaScript, но мы добавили идентификатор, который сообщает компилятору, какой тип значения был использован для переменной.

Если мы попытаемся сохранить число в переменной myName , мы получим ошибку. Это будет справедливо, если мы попытаемся сохранить неправильный тип в любой переменной. Также, мы можем использовать any , для указания на то, что для переменной может быть задан любой тип:

Мы также можем использовать void в качестве типа, как правило, в качестве типа ответа функции, которая не возвращает значение.

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

Также, мы можем записать тип массива вот так:

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

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

В функции, мы определили интерфейс как форму аргумента, который мы передаем в эту функцию. Затем мы создаем объект. Последняя строка выведет наш заголовок, если мы скомпилируем и выполним этот код.

В этом интерфейсе требуется использовать только свойство title. Мы добавили другое свойство, но TypeScript это не интересует тех пор, пока в объекте есть свойство title. Если бы его не было, мы бы получили ошибку. Также заметьте, что порядок свойств не имеет значения, пока присутствует требуемое значение.

Классы

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

Вместо изучения синтаксиса фреймворка, синтаксис Angular 2 основан на TypeScript. Таким образом, вы не ограничиваете себя изучением Angular 2, так как синтаксис будет полезен при разработке за пределами Angular 2. По своей сути, класс создается следующим образом:

Любая логика, а также функция-конструктор могут быть включены в этот класс.

Мы расширяем это в Angular 2 используя декораторы, такие как @Component(<>) . Этот декоратор добавляет метаданные, которые сообщают приложению, что этот класс является компонентом Angular. Мы строим наши приложения для добавления метаданных в наши компоненты, сервисы, директивы и т.д. Все, что мы создаем для Angular 2, будет основано на классе. Мы изучим это в дальнейшем, при создании наших приложений.

Наконец, когда мы создаем наше приложение, мы запустим скрипт запуска NPM. Это запустит наше приложение для просмотра и запустит компилятор в режиме слежения. Любые изменения будут скомпилированы и отражены в предварительном просмотре. Это все основы языка TypeScript, которые вам нужно знать, чтобы начать работу с Angular 2.

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

Смотрите полный курс

В полном курсе Начинаем работать с Angular 2, вы узнаете, как создать простое веб-приложение с нуля, начиная со скаффолдинга, заканчивая конфигурацией инструментов. Вы узнаете, как использовать статически-типизированные вариации TypeScript в JavaScript для создания компонентов Angular 2, сервисов и директив. По пути вы увидите, как реализовать основы современного одностраничного приложения: включая маршрутизацию, внешний доступ к API, пользовательский ввод и проверку данных.

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

Angular 2.0: поддерживает ли Typescript все функции ES6?

Typescript начал с заявления о том, что это расширенный набор Javascript. Теперь с ES6 за углом. Поддерживает ли текущий транспортный / компилятор машинописи все функции и синтаксис es6 как есть или он отличается от синтаксиса es6 для экспорта / импорта модулей, функций стрелок и т. Д.?

Я спрашиваю, потому что я пытаюсь изучить angular 2.0, но не могу решить, следует ли следовать машинописному пути или ванильному JS-пути.

3 ответа

Что касается функций, см. Что нового в TypeScript и Roadmap . ( Похоже, не существует какой-либо страницы, которая напрямую сравнивала бы функции ES6 / ES2015 с TypeScript. См. Ответ @ alexpod.)

Я предлагаю вам использовать TypeScript, если ни для чего, для дополнительной проверки типов. Когда Angular преобразовал их код в TypeScript, он выявил ряд ошибок.

Основная цель TypeScript — не добавлять функции в JavaScript — как это делается в ES2015 — но сделать его проще и безопаснее для разработчиков для написания и поддержки больших приложений JavaScript. Основное преимущество TypeScript проявляется до запуска вашего приложения — когда вы пишете или поддерживаете код. Intellisense, завершение кода, проверка типов и т. Д.

Информационный портал по безопасности

Информационный портал по безопасности » Программирование » Веб-разработка » WebStorm 2020.2 – что нового в поддержке JavaScript, TypeScript, Angular и Sass и работе с ESLint, Karma и Mocha

WebStorm 2020.2 – что нового в поддержке JavaScript, TypeScript, Angular и Sass и работе с ESLint, Karma и Mocha

На этой неделе вышло большое обновление WebStorm. В этом посте мы расскажем подробнее о том, какие улучшения ждут javascript-разработчиков в WebStorm 2020.2 и других IDE JetBrains версии 2020.2.

Вы можете прочитать подробнее о WebStorm 2020.2 и скачать его на нашем сайте .

Улучшения в поддержке javascript и TypeScript

Move symbol

Новый рефакторинг Move symbol переносит классы, глобальные функции и переменные из одного javascript или TypeScript файла в другой. IDE автоматически добавит экспорт и обновит ES6-импорты в файлах, где используется этот символ.

Чтобы вызвать этот рефакторинг, поставьте курсор на символ в ES6-модуле и нажмите F6.

Улучшенная поддержка javascript в проектах с webpack

Автодополнение кода и навигация в javascript-файлах стали точнее в проектах, использующих webpack aliases и modules . WebStorm запускает webpack.config.js в корне проекта и использует результаты для построения более точной модели проекта. В результате WebStorm правильно поймет символы и пути в импортах.

Кстати, ES6-импорты в javascript-файлах теперь добавляются автоматически при автодополнении символов, объявленных и явно заэкспортированных в вашем проекте.

Параметры и выведенные типы в TypeScript

В TypeScript-файлах имена параметров отображаются прямо в редакторе, чтобы было проще читать код. По умолчанию, подсказки отображаются только для параметров, являющихся literals или function expressions. Настроить отображение подсказок можно в настройках: Editor | General | Appearance – Show parameter name hints.

Нажмите cmd или Ctrl и наведите на символ в TypeScript-коде, и WebStorm покажет информацию о его типе с учетом текущего контекста. Это помогает быстрее находить проблемы, связанные с использованием типов.

Форматирование кода

Импорт стилей форматирования из .eslintrc

Если вы используете ESLint для проверки стиля форматирования javascript-кода, WebStorm предложит применить правила, описанные в .eslintrc или в поле eslintConfig в package.json, к проектным настройкам форматирования javascript. Когда вы откроете javascript-файл в таком проекте, вы увидите нотификацию “Apply code style from ESLint?”.

Мы нашли соответствие между 37 правилами ESLint и настройками форматирования в WebStorm. Например: indent, curly или no-trailing-spaces. Стоит иметь в виду, что WebStorm не всегда поддерживает сложные опции в правилах и не поддерживает правила из плагинов и пресетов, добавленных через поле extends.

Главная цель этой интеграции – сделать так, чтобы переформатирование кода с помощью IDE не ломало верно отформатированный код с точки зрения ESLint и помогало писать новый код, максимально соответствующий правилам из .eslintrc.

Rearrange code

С новыми настройками стиля Arrangement теперь можно настроить порядок блоков в javascript- и TypeScript-классах и применить их с помощью действия Rearrange code. Его можно вызвать через Find action (Cmd/Ctrl-Shift-A) или выполнять при переформатировании кода. Для этого вызовите расширенный диалог форматирования, нажав Alt-Shift-Cmd-L на macOS или Ctrl+Alt+Shift+L на Windows and Linux, и отметьте галочкой Rearrange Code.

С новыми настройками Code Style | Blank lines можно указать необходимое число пустых строк после импортов, классов, методов и функций.

Топ-пост этого месяца:  Проблема Internet Explorer есть ли возможность развития при отсутствии поддержки

Форматирование JSX

Если вы следуете стилю Airbnb для React , поставьте значение When multiline для новых опций New line before first attribute и New line after last attribute в настройках стиля форматирования HTML (эти правила применяются к JSX-тегам).

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

Запуск Karma-тестов

Karma -тесты теперь можно запускать и отлаживать по одному. Нажмите на иконку в редакторе слева от теста или тест-сьюта и выберите Run или Debug. После того, как тест выполнится, иконка покажет его статус.

Далее вы можете запускать сохраненную или автоматически созданную Karma-конфигурацию через попап Run… (Ctrl-Alt-R на macOS или Alt+Shift+F10 на Windows и Linux).

Покрытие кода тестами для Mocha

При тестировании с Mocha теперь можно узнать, насколько хорошо код покрыт тестами.

Для этого нужно сперва установить nyc (новый командный интерфейс для Istanbul), а потом запустить Mocha Run with coverage… с помощью иконки запуска тестов в редакторе или через Mocha-конфигурацию.

Отчет появится в отдельном окне в WebStorm и покажет сколько файлов покрыто тестами и сколько процентов строк в них покрыто тестами. Из отчета можно быстро перейти в самому файлу. Слева в редакторе строки, покрытие тестами, будут отмечены зеленым цветом, а непокрытые строки – красным.

Stylesheets

Улучшения в поддержке Sass и SCSS

Автодополнение имен классов в HTML-файлах теперь работает для Sass- и SCSS-селекторов, созданных через &.

К таким селекторам, а также к nested-селекторам, можно быстро перейти из HTML-файла с помощью Cmd-click/Ctrl+click.

Angular


Поддержка Angular Material

Angular Material – это библиотека UI-компонентов для Angular. Теперь WebStorm лучше понимает и подсказывает специальные атрибуты из Angular Material в Angular-шаблонах.

Создание метода из Angular-шаблона

Если вы использовали новый метод в Angular-шаблоне, но еще не объявили его в классе компонента, нажмите Alt-Enter на его имени и выберите Create method, чтобы его создать.

Нотификация о npm install

При работе с javascript-проектами часто приходится устанавливать зависимости через npm и легко забыть, что нужно обновить зависимости при обновлении из Git или переключении на другой branch. WebStorm напомнит, что нужно запустить npm install или npm update, когда вы открыли проект или если package.json обновился.

Помимо этого в WebStorm 2020.2 вы можете:

  • Показывать файлы с одинаковыми именами, но разными расширениями из одной директории сгруппированными. Изменить правила группировки можно через File nesting в настройках Project view (иконка с шестеренкой).
  • Использовать улучшенную поддержку React stateless-компонентов и автодополнение props.
  • Использовать breadcrumbs внизу редактора в javascript- и TypeScript-файлах, чтобы быстрее навигировать по файлу.
  • Автоматически заменить module.exports на ES6-экспорт: нажмите Alt-Enter на выражении и выберите Convert to export или запустите Run inspection by name — “module.export is used instead of export”, чтобы внести изменения в нескольких файлах проекта.
  • Настроить и проверять формат сообщения о коммите в настройках Version Control | Commit Dialog.
  • Откатывать коммит в Git и изменять коммит-сообщение через контекстное меню коммита в Logs в окне Version Control.

Скачать WebStorm 2020.2 можно на сайте JetBrains .

Если у вас возникли проблемы с WebStorm, пожалуйста, сообщите об этом на нашем issue tracker .

React vs Angular, что выбрать?

Чтобы сэкономить вам время и не вводить в заблуждение, отвечу сразу – в этой статье не будет четкого ответа какой фреймворк лучше. Но и сотни других статей с подобными тайтлами также вам об этом не скажут. Вы спросите почему? Ответ зависит от широкого круга факторов, которые делают определенную технологию более или менее подходящей для вашей среды и использования.
Поскольку мы не можем напрямую ответить на этот вопрос, то попытаемся сделать кое-что другое. Мы сравним Angular (2+, а не старый AngularJS) и React, чтобы продемонстрировать, как вы можете решать задачи этими фреймворками, адаптируя их к своей среде. Старый подход гласит «дай не рыбу, а удочку», чтобы человек мог самостоятельно принимать решения. Таким образом, когда React и Angular будут заменены СамымЛучшимФреймворком.js через год, на основе этой статьи вы сможете воссоздать тот же самый ход мысли еще раз и сравнить их.

Критерии выбора фреймворка. Откуда начнем?

Прежде чем выбрать какой-либо инструмент, вам нужно ответить на два простых вопроса: «Является ли это хорошим инструментом как таковым?» И «Будет ли он хорошо работать для моего случая использования?» Отдельно друг от друга эти вопросы не имеют смысла, только положительный ответ на оба дают вам возможность принимать решение, поэтому вам всегда нужно держать их в своей голове вместе. Хорошо, с этим определились, но в реальности получить ответ на эти «простые» не так уж легко, поэтому мы попытаемся разбить их на более мелкие.
Вопросы по самому фреймворку:

  • Как давно он на рынке и какое у него комьюнити?
  • Какие «фичи» у него есть?
  • Какую архитектуру, парадигмы развития и шаблоны он использует?
  • Какова экосистема вокруг него?

Вопросы для саморефлексии:

  • Смогу ли я и мои коллеги быстро и легко его изучить?
  • Можно ли его вписать в мой проект?
  • Какой есть опыт внедрения данного фреймворка у меня или других разработчиков?

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

Критерий зрелости

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

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

React

React разрабатывается и поддерживается Facebook и используется в их собственных продуктах, включая Instagram и WhatsApp. Он существует уже около трех с половиной лет, поэтому он не совсем новый. Это также один из самых популярных проектов на GitHub, на момент написания которого было около 74 000 звезд. Звучит неплохо.

Angular

Angular (версия 2 и выше) моложе, чем React, но если посчитать историю своего предшественника, AngularJS, картина выравнивается. Он поддерживается Google и используется в AdWords и Google Fiber. Поскольку AdWords является одним из ключевых проектов в Google, ясно, что они сделали большую ставку на него и вряд ли исчезнут в ближайшее время.

Особенности React и Angular

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

Фичи Angular

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

  • Внедрение зависимостей
  • Шаблоны, основанные на расширенной версии HTML
  • Маршрутизация, предоставляемая @ Angular / router
  • Запросы Ajax на @ angular / http
  • @ angular / form для составления форм
  • Инкапсуляция для CSS
  • Защита XSS
  • Утилиты юнит-тестирования компонентов

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

Фичи React

С React вы начинаете с более минималистического подхода. Если мы смотрим только на React из коробки, то вот что мы имеем:

  • Отсутствие зависимостей
  • Вместо классических шаблонов у него есть JSX, XML-подобный язык, построенный поверх JavaScript
  • Защита XSS
  • Утилиты юнит-тестирования компонентов

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

  • React-router для маршрутизации
  • Fetch (или axios) для HTTP-запросов
  • Широкий спектр методов для инкапсуляции CSS
  • Enzyme для утилит юнит-тестирования

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

Языки, парадигмы и паттерны

Сделав шаг назад от особенностей каждой структуры, давайте посмотрим, какие концепции более высокого уровня пользуются популярностью в обеих фреймворках.
Паттерны React
Вот, что первое приходит на ум, когда мы говорим о React: JSX, Flow и Redux.

JSX – спорная вещь для многих разработчиков: некоторым это нравится, а другие считают, что это огромный шаг назад. Вместо того, чтобы следовать классическому подходу разделения разметки и логики, React решил объединить их в компонентах с использованием XML-подобного языка, который позволяет писать разметку непосредственно в вашем JavaScript-коде.

Хотя достоинства смешивания разметки с JavaScript могут быть спорными, он имеет неоспоримое преимущество: статический анализ кода. Если вы сделаете ошибку в своей разметке JSX компилятор не упустит ошибку и оповестит об этом. Это помогает мгновенно ловить опечатки и другие глупые ошибки.

Flow – это инструмент проверки типов для JavaScript, также разработанный Facebook. Он может анализировать код и проверять ошибки общего типа, такие как неявное приведение типов переменных или разыменование в null. В отличие от TypeScript, который имеет аналогичную цель, он не требует перехода на новый язык и дополнительных комментариев в коде для дальнейшего его удобного рефакторинга. В Flow синтекс аннотаций является необязательным и может использоваться для предоставления дополнительных фич. Это делает Flow хорошим вариантом, если вам нравиться статический анализ кода, и вы не хотите переписывать существующий код.

Redux

Redux – это библиотека, которая помогает явным образом управлять изменениями состояния. Redux похож на Flux, но имеет некоторые упрощениями. Основная идея Redux заключается в том, что всё приложение представлено одним объектом, который мутируется функциями, называемыми редукторами. Редукторы сами по себе являются чистыми функциями и реализуются отдельно от компонентов. Это позволяет лучше разделять проблемы и тестируемость.
Если вы работаете над простым проектом, то внедрять Redux не имеет особо смысла, но для среднесрочных и масштабных проектов это очень эффективное решение. Библиотека стала настолько популярной, что есть проекты, реализующие этот принцип в Angular.
Все три функции могут значительно улучшить вашу работу над проектом: JSX и Flow позволяют быстро выявлять места с потенциальными ошибками, а Redux поможет достичь четкой структуры.

Парадигма Angular

У Angular также есть несколько интересных вещей, а именно TypeScript и RxJS.

TypeScript

TypeScript – это новый язык, созданный поверх JavaScript и разработанный Microsoft. Это надмножество JavaScript ES2015 и включает в себя функции из более новых версий языка. Его можно использовать вместо Babel для написания современного JavaScript. Он также имеет чрезвычайно мощную систему набора текста, которая может статически анализировать ваш код, используя комбинацию аннотаций и приведение типа.
Есть и более существенная выгода от этого нового языка. На TypeScript сильно влияют Java и .NET, поэтому, если ваши разработчики имеют опыт работы на одном из этих языков, они, скорее всего, изучат TypeScript быстрее, чем обычный JavaScript (обратите внимание, как мы переключились с инструмента на вашу личную среду). Хотя Angular стала первой основным фреймворком для активного использования TypeScript, его также можно использовать вместе с React.

RxJS – это библиотека реактивного программирования, которая позволяет более гибко обрабатывать асинхронные операции и события. Это сочетание шаблонов Observer и Iterator, смешанных с использованием функционального программирования. RxJS позволяет рассматривать что-либо как непрерывный поток значений и выполнять различные операции над ним, такие как отображение, фильтрация, разделение (splitting) или слияние (merging).
RxJS библиотека была принята в Angular в их HTTP-модуле и внутреннего использования. Когда вы выполняете HTTP-запрос, он возвращает Observable вместо обычного Promise. Хотя эта библиотека чрезвычайно мощная и, как следствие, сложная. Чтобы овладеть этой библиотекой, вам нужно знать, как работают типы в Observables, Subjects, а также около сотни методов и операторов. И, кажется, это немного избыточно, чтобы просто сделать HTTP-запрос!
RxJS полезен, когда вы много работаете с непрерывными потоками данных, такими как веб-сокеты, но RxJS сильно усложняет жизнь в задачах другого рода. Во всяком случае, при работе с Angular вам нужно изучить его, по крайней мере, на базовом уровне.
Окей, TypeScript это отличный инструмент для улучшения рефакторинга наших проектов, особенно с большим количеством кода или сложной бизнес-логикой. Код, написанный на языке TypeScript, информативен и достаточно прост в использовании. Поскольку TypeScript был принят в Angular, мы надеемся увидеть еще больше проектов, использующих его. С другой стороны, RxJS, по-видимому, только полезен в некоторых случаях и должен приниматься с осторожностью. В противном случае проект будет усложняться без веских на то причин.

Экосистема фреймворков

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

Angular CLI

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

Ionic 2

Ionic 2 – это новая версия популярной платформы для разработки гибридных мобильных приложений. Он предлагает Cordova контейнер, который хорошо интегрирован с Angular 2 и довольно обширную библиотеку компонентов. Используя Ionic 2, вы можете легко настроить и создать мобильное приложение. Если вы предпочитаете гибридное приложение над нативным, тогда Ionic это ваш выбор.

Компоненты на Material дизайне

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

Angular universal

Angular universal – это проект, который может использоваться для создания проектов с поддержкой рендеринга на стороне сервера.
@ Ngrx / store
@ ngrx / store – это Angular библиотека очень похожая на Redux, которая основана на мутированных состояниях с помощью все тех же редукторов. Его интеграция с RxJS позволяет использовать оптимизацию обнаружения push изменений для лучшей производительности.

React экосистема

Create React App

Create React App – это утилита CLI для React для быстрой настройки новых проектов. Подобно Angular CLI, она позволяет создавать новый проект, запускать сервер разработки и делать сборку. Он использует Jest, относительно новый тестировщик из Facebook, для модульного тестирования, со своими полезными функции. Он также поддерживает гибкое профилирование приложений с использованием переменных среды, бэкэнд-прокси для локальной разработки, Flow и другие функции.

React Native

React Native – это платформа, разработанная Facebook для создания собственных мобильных приложений с использованием React. В отличие от Ionic, который создает гибридное приложение, React Native создает действительно нативные UI. Он предоставляет набор стандартных компонентов React, которые привязаны к их родным аналогам. Он также позволяет создавать ваши собственные компоненты и связывать их с кодом, написанном в Objective-C, Java или Swift.

Material UI

Для React уже давно существует библиотека компонентов на Material дизайне. По сравнению с версией на Angular имеет более широкий набор доступных компонентов.
Next.js

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

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

Storybook

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

Адаптация технологий и простота изучения

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

Первое, с чего стоит начать это JSX. Возможно для некоторых разработчиков JSX покажется странным, однако он не потребует от вас больших усилий в применении; Простые выражения, которые на самом деле являются JavaScript и синтаксис, смахивающий на HTML. Вам также необходимо научиться делать компоненты и использовать конфиги для настройки и управления. Вам не нужно изучать новые логические структуры или циклы, поскольку этот тот же самый JavaScript.
Официальный гайд – это лучший старт для изучения React. Как только вы закончите с документацией, познакомьтесь с react-router. React router v4 может быть немного сложным и нетрадиционным, но не беспокойтесь об этом. Использование Redux потребует изменения парадигмы мышления, чтобы понять, как выполнить уже знакомые задачи новым способом. В зависимости от размера и сложности вашего проекта вам нужно будет найти и изучить дополнительные библиотеки и это может оказаться сложной задачей, но после этого все должно пойти намного легче!

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

Angular не для всех?

В Angular вам прежде всего нужно будет понять TypeScript. Для программистов, обладающих опытом в статически типизированных языках, таких как Java или .NET, это может быть проще, чем для чистых JavaScript разработчиков.
Сама инфраструктура богата темами, которые можно изучить, начиная с базовых, таких как модули, инъекции зависимостей, декораторы, компоненты, сервисы, шаблоны и директивы, до более сложных тем, таких как обнаружение изменений, зоны, компиляция AoT и Rx.js. Все они описаны в документации. Rx.js является серьезной темой сам по себе и подробно описан на официальном сайте. На базовом уровне он кажется простым, но при глубоком изучении Rx.js становиться достаточно сложным для понимания.
В целом мы заметили, что входной барьер для Angular выше, чем для React. Огромное количество новых концепций запутывает новичков. И даже после того, как вы начали изучать Angular, обучение может усложниться, поскольку вам нужно иметь в виду такие вещи, как управление подпиской Rx.js, изменение производительности обнаружения и бананы в коробке (да, это фактический совет из документации). Очень часто в Angular можно столкнуться с ошибками, которые сильно затрудняют работу и понимание фреймворка, поэтому приходится искать решение ошибок и молиться за точное совпадение.
Может показаться, что мы на стороне React’a и это действительно так. У нас был опыт внедрения новых разработчиков в проекты Angular и React, сопоставимые по размеру и сложности, и на React разработчики «въезжали» лучше. Но, как я сказал ранее, всё зависит от множества факторов и конкретной поставленной задачи.


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

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

  • Насколько большой у вас проект?
  • Как долго он будет поддерживаться?
  • Являются ли все функции четко определенными заранее или вы хотите оставаться гибкими к изменениям?
  • Если все функции уже определены, какой функционал вам нужен?
  • Является ли ваша модель бизнес-логики достаточно сложной?
  • Какие платформы для вам в приоритете? Web, mobile или desktop?
  • Нужен ли серверный рендеринг? Важно ли SEO?
  • Будете ли вы обрабатывать много потоков событий в реальном времени?
  • Насколько велика ваша команда?
  • Насколько опытны ваши разработчики и какова их предыстория?
  • Есть ли готовые библиотеки компонентов, которые вы хотели бы использовать?
Топ-пост этого месяца:  Модальное окно Bootstrap принцип работы плагина, добавление кнопки или ссылки для запуска

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

Один фреймворк для всего на свете?

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

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.

  • Добавить комментарий