Comments 80
Ради любопытства — сколько по времени вы уже используете 2-ю версию и много ли на ней готовых проектов? Какие используете библиотеки / наборы компонентов? Есть ли свои наработки? Если да, есть ли что-то в опенсорсе (или, может быть, планируете).
Просто сам имею уже год работаю со второй версией, есть своя библиотека (пока внутренняя, но хочется привести её в порядок и сделать публичной) со многими UI компонентами. Интересно, как это всё обстоит в других командах.
Вот недавно начали 3-й проект на нём.
Фреймворк и его конечный размер, как мне кажется, больше подходят для средних и больших приложений. В нашем случае это:
- система мониторинга за состоянием крупной системы в реальном времени,
- большая база данных с возможностью просмотра всевозможных её срезов и агрегатов,
- и что-то типа сетевой игры в реальном времени.
В таких проектах каждый компонент или элемент может быть сильно кастомизирован. Поэтому, по возможности, ради однородности кода пишем всё сами (если нет нативного аналога в браузере). Это не так уж и сложно, интересно и лишает боли в случае «неудобной» кастомизации. А такое случается часто, когда в календарь, например, необходимо встроить отображение различных событий, произошедших в системе с учётом их типов и интенсивности.
Поэтому, конечно, есть внутренние наработки некоторых типичных решений, но всё оно довольно частное, не заслуживает называться библиотекой и быть выложенной публично.
К тому же, у нас хорошая команда дизайнеров, по запросу рисуют и дорисовывают всё необходимое — замена поиска необходимого элемента в UI библиотеке :-) — конечно, если бюджет проекта позволяет.
А библиотеками пользуемся лишь базовыми moment.js, lodash, highcharts и подобными для удобства в различных ситуациях.
angular.js, подключить его в теге script и поехали. Для второй же версии понадобится целый зоопарк технологий и утилит — npm, tsc, typings, system.js, rx.js. Это нормально, потому что более серьезный подход требует больше усилий при старте, но порог вхождения абсолютно точно выше.Первая настройка рабочего окружения у меня заняла полтора дня. Наверняка так получилось из-за того, что только-только вышел RC с довольно серьезными изменениями, а все мануалы еще были ориентированы на Beta. Надеюсь, с тех пор это сильно упростилось.
Angular CLI сильно упрощает настройку окружения и других рутинных штук до 4-5 команд в консоли. Но да, чтобы начать разрабатывать что-то более-менее серьёзное, нужно немного потрудиться. Порог вхождения действительно не такой уж низкий.
script и никакой динамической загрузки.Так что чтобы утилита начала упрощать жизнь, сначала к ней самой нужно как следует привыкнуть :)
можете поделиться рецептом?
я работаю из VS, и пытаюсь сделать все там.
максимум чего я добился это чтоб мне создало единый файл, но он все равно не был единым нифига(
(то есть тот же zone.js был нужен и тп)
"Скачивать" её надо через пакетный менеджер npm. Это азы современной фронт-енд разработки. Вы уж извините, но совсем без знаний и желания разобраться в матчасти не стоит заниматься разработкой.
Извините, но вас что, забанили в гугле?
- Идете по ссылке, которую вам дали. Видите команду в разделе Installation:
npm install -g angular-cli - Вбиваете в гугл непонятную программу (npm). Первая же ссылка — на Википедию:
npm(Node.js Package Manager) — менеджер пакетов, входящий в состав Node.js.
- Идете на сайт node.js и скачиваете. Той самой кнопкой download.
- После установки ноды пишете в консоли
npm install -g angular-cli.
Все, программа у вас.
ReferenceError: help is not defined
at repl:1:1
at sigintHandlersWrap (vm.js:22:35)
at sigintHandlersWrap (vm.js:96:12)
at ContextifyScript.Script.runInThisContext (vm.js:21:12)
at REPLServer.defaultEval (repl.js:346:29)
at bound (domain.js:280:14)
at REPLServer.runBound [as eval] (domain.js:293:12)
at REPLServer. (repl.js:545:10)
at emitOne (events.js:101:20)
at REPLServer.emit (events.js:188:7)
Вы невнимательны. Надо не node запускать, а npm. Они вместе ставятся.
А теперь покажите мне строку в документации, где сказано, что нужно запускать ноду? Там же явно написно: npm i -g angular-cli. Ну где там хоть строка про ноду?
Потому что angular-cli — это скрипт, а не программа. Более того, это скрипт, который создает окружение разработчика, используещее инструменты, которые тоже являются скриптами, а не программами.
Более того, angular-cli загружает библиотеки при помощи npm. Вот и получается, что нет никакого смысла ставить angular-cli отдельно.
После запуска этого магического скрипта, мне станет доступна команда ng, она то хоть является программой?
ng — это и есть angular-cli.
Вспомнились сразу целая куча юмористических статей на тему «что нужно знать чтобы ...» Только там это как анекдот, а тут — на полном серьёзе… Мне жаль сейчас любого кто начинает что-то изучать в айти. У меня опыт около 30 лет и то иногда трудно… А новичкам… не завидую.
Если вы хотите заниматься современной веб-разработкой сложных проектов (для которых как раз и подходит второй ангуляр), но не смогли поставить ноду и набрать в консоли 4 команды:
npm install -g angular-cli
ng new PROJECT_NAME
cd PROJECT_NAME
ng serveто да, я отказываюсь объяснять такие элементарные вещи. Если не понимаете, то сходите на курсы, почитайте материал в интернете, его очень много. Почитайте официальные доки и quickstart. Если хотите зарабатывать знаниями, в них надо вложиться сперва. Либо деньгами, либо временем, либо и тем и другим. Увы, по-другому никак, само собой всё не получится.
Я разобрался сам. Мои коллеги из мира бэк-енда разобрались.
На счёт адских азов: 2-й ангуляр не требует ни знания typescript (и даже es6), ни npm, ни webpack или systemjs. Просто с ними куда удобнее. Хотите — подключайте готовые js прямо на страницу и пишите на чистом javascript.
Насчет "и даже es6" вы лукавите. Там же в документации все примеры — на typescript или es6. На старом js писать можно — но для этого надо знать es6 в объеме, достаточном для транслирования документации к старым стандартам "в уме".
Нет, там есть DSL для написания кода без фишек es6.
https://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html
Даже в доках где-то видел сравнение, там были версии кода на TS, es6-7 + декораторы, es6 без декораторов и es5 + DSL
https://angular.io/docs/ts/latest/cookbook/ts-to-js.html#!#dsl
Хотите — подключайте готовые js прямо на страницу
Где взять готовые js, которые можно подключить?
<script src="https://unpkg.com/rxjs@5.0.1/bundles/Rx.js"></script>
<script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>Хотя сомневаюсь, что это как-то поможет. Ведь всё это есть в документации (ссылку на нужную страницу я уже приводил в комментах тут). Но вы, как вижу, документаций не читаете.
Надо просто разделять бэкенд API и сервер, где лежит статика.
С Angular 2 не работал, но шаблон там указывается так же как и в первой версии.
А как собирается проект/компонент? С импортами понятно, а что происходит со всеми этими литералами './player.component.html', ['./player.component.styl']?
18 секунд? Обалдеть. Что это у вас там такое монструозное? Вероятно, какие-то проблемы с модульностью? Отсутствие динамической подгрузки и пр.?
Судя по 5мб видимо вы собирали не в режиме prod а в режиме dev. В этом случае все скрипты не минифицируются зато за счет этого всегда можно посмотреть на какой строке произошла ошибка. В режиме prod среднеразмерный проект у нас компилируется в ~700КБ
Благодаря этой реализации в Angular 2 нет вотчеров, которые ранее являлись источников многих проблем с производительностью. Теперь всё более естественно.
Не понятно как избавились от вотчеров? Если есть компонент с одним полем foo: string = "bar"; а в шаблоне биндится это поле <otherComponent [field]="foo"></otherComponent> то тут нету EventEmmiter'ов — но обновление данных в шаблоне при изменении в родительском компоненте все равно работает. Выглядит так будто все таки в ангуляре происходит пулл данных в цикле, потому что явно событие об изменении поля foo ни где не генерируется.
зы: Пока из того что бесит в ng2:
Непонятно как работает интерполяция.
Внутри не работает (пришлось писать костыль);
Директиву интерполяцией в элемент нельзя добавить
<div {{flag ? 'someDirective' : ''}}> — так интерполяция работает, но директива потом не отрабатывает, просто вставляется как текст.
Из за этого не получается добавить директиву по условию. Пока нашел только способ передавать в саму директиву флаг "включения" <div someDirective="flag">, но это костыль.
Вот в такой ситуации <div class="123" [class]="classField"> — класс 123 будет выкинут. Тоже самое если добавлять классы к хосту @Component(... host: {'[class]': '123' }). Не очевидное место — долго искал почему у меня нифига стили не накладываются.
Наследование компонентов не работает ни фига (вроде что то добавили в последних версиях — не тестил еще).
Пробовал наследовать только базовый класс а саму декларацию компоненты делать только в наследниках — получилось что ng2 при обработке шаблона почемуто вызывал реализацию метода из базового класса, а не перегруженную версию в наследнике. С абстрактным классом тоже какаято беда была.
Статичные поля напрямую использовать в шаблонах нельзя. Нужно писать getter-обертку.
Из за этого не получается добавить директиву по условию.
Используйте *ngIf
Не понятно как избавились от вотчеров?
Насколько я во всём этом разобрался, всё работает следующим образом.
Для избавления от вотчеров Angular использует библиотеку zone.js, которая создаёт для приложения контекст, в котором все нативные асинхронные функции заменяются на их усовершенствованные реализации, которые позволяют встраивать дополнительные коллбэки до и после выполнения этой функции.
После исполнения каждой асинхронной функции Angular сравнивает все поля объектов и ищет, какие изменились, и при обнаружении таковых запускает процедуру обновления. Так что, можно сказать, цикл $digest никуда не делся, просто ушёл на уровень Event Loop — что сильно разгрузило Angular и позволило ему работать со скоростью, сопоставимой с React и ему подобными.
Подробнее в статьях на thoughtram:
Очень важно найти хороший материал, я вот читал статьи на хабре, официальную доку, видео на youtube — и до конца не понимал как там что работает. А все потому что не каждый может объяснить сложные вещи простым языком, обычно на оборот хорошо получается. Ангуляр не сложный и не простой, нужно только правильно «приготовить» материал для обучения.
Лучший курс который я видел по Angular — https://itvdn.com/ru/video/angular-js.
Стайл гайд (говорят по первой версии официального не было, каждый как мог делал, на втором уже есть стандарт) — http://devacademy.ru/posts/rukovodstvo-po-stilyu-programmirovaniya-i-oformleniya-prilozhenij-na-angularjs/
Практические примеры — https://www.codementor.io/learn-angularjs
Angular 2 решает множество проблем, связанных с высоким уровнем связанности кода, новой мощной реализацией Dependency Injection
Казалось бы, причем тут SOLID. Подозреваю что автор путает dependency inversion и dependency injection.
Там ещё говорилось про интерфейсы.
Использование интерфейсов еще не говорит что вы инвертировали зависимости.
Какому модулю будут принадлежать интерфейсы? Если интерфейс будет принадлежать тому же модулю, где будет реализация, то никакой инверсии у нас тут не произошло.
С другой стороны, мы говорим о UI компонентах (если мы рассматриваем пример в статье). Из сервисов им стоит давать только сервисы уровня приложения, которые будут иметь строго одну реализацию (по сути реализация какого-то юз-кейса, ну или проще — делегирование операции записи). В этом случае соблюдать DiP нет особо смысла (вам же важно что бы логика не зависела от UI а не наоборот). Все остальное будет попахивать нарушением SRP (инджект сервисов для получения данных, вместо инджекта непосредственно данных через биндинги компонента).
Вы считаете, этот момент нужно как-то подкорректировать?
Ну по сути в этом абзаце больше про преимущества inversion-of-control нежели SOLID. Хотя отдельный цикл статей (я думаю в одну не влезет) о том как применение этих принципов помогает держать под контролем сложность поддержки приложениа на ангуляре было бы круто увидеть. Может кому-то это даст идею для статей.
Так можно все же услышать подробнее как вы используете DiP в контексте компонентов?
В Angular 2 появился новый синтаксис, который позволяет передавать значения свойств дочерним компонентам (one-way binding).
В пермов ангуляре one-way binding тоже есть, появился вместе с компонентами, больше года назад.
Я бы поставил VueJS и Angular2 на один уровень, Angular2 конечно при этом гораздо более "инженерно ориентированный" (не совсем подойдет для скрипт кидди).
В пермов ангуляре one-way binding тоже есть, появился вместе с компонентами, больше года назад.
Разница в том что в angular как такового 2way биндинга нет, есть сахар для организации оного. В angular 1.x же one-way биндинг сделан поверх two-way. Больше накладных расходов, но безопаснее да.
Я бы поставил VueJS и Angular2 на один уровень,
Это инструменты совершенно разного уровня.
AngularJS vs Angular 2: ключевые различия