Примечание от переводчика: перевести эту статью меня побудила запись в соц сети от автора, запись была следующего содержания: "#Angular2 для #dartlang 11.7 KB меньше чем JS версия. Я выжал что мог из обоих.". Меня это ошеломило, как так, транслируемый язык, который тянет хаки для собственной работы, кроссбраузерность и еще кучу библиотек помимо Angular, и после уродования и минификации обоих вариантов побеждает не JS. Это же так естественно, что за удобство языка приходится платить размером и скоростью работы результата. В синтетических тестах результат трансляции опережает по производительности чистый JS, в реальной работе разница в производительности незаметна. Итого получается, размер собранного Dart-проекта будет примерно равен JS-проекту, скорость работы примерно одинакова. Последнее обновление Dart позволяет в несколько строк подключить любую JS-библиотеку. А писать на Dart это одно удовольствие. Последнее утверждение частично раскрывается переведённой статьёй, приятного чтения.
За последние пол года мне удалось поработать над JavaScript и TypeScript проектами. Перед этим около года я работал с Dart. С апреля 2015 года я и мой соавтор работаем над книгой об Angular 2, этот фреймворк официально поддерживается тремя языками JS, TS и Dart. В основном я использую TS, но периодически проверяю состояние Angular 2 для Dart.
Неделю назад Angular 2 перешёл в стадию беты. Пионеры и энтузиасты Angular 2 знают, что перед этим вышло целых 7 альфа-версий. Этому сопутствовало несколько критических изменений, обновление из-за которых было весьма болезненным(не для этого ли существуют альфы). И после того как мы закончили обновление всех примеров в книге для версии beta.0, я решил взглянуть как дела у Angular 2 с Dart.
Я взял маленькое приложение, которое не менялось с версии alpha.35, и решил его обновить до beta.0. Мой опыт обновления на Dart радикально отличается от TS, чем я и хочу с вами поделиться.
Обновление Dart приложения
Заранее могу сказать, что процесс обновления тривиален и включает в себя обычные шаги обновления для любого другого Dart проекта. Несмотря на это я хочу поделиться своим опытом с теми, у кого нет опыта работы с Dart.
Тестовое приложение довольно минималистично, вы можете здесь найти исходный код: тыц. Оно состоит из Dart-файла:
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart';
@Component(selector: 'my-app')
@View(template: '<h1>Hello from Angular 2!</h1>')
class AppComponent {}
main() => bootstrap(AppComponent);
И pubspec.yaml(эквивалент package.json):
name: ng2_dart_upgrade
dependencies:
angular2: 2.0.0-alpha.35
browser: any
transformers:
- angular2:
entry_points: web/main.dart
Для обновления с alpha.35 до betta.0 нужно сделать две вещи:
1) В pubspec.yaml изменить версию angular2:
angular2: 2.0.0-beta.0
2) Запустить pub upgrade чтобы получить новую версию и все зависимости.
Вот и всё. Вы можете тестировать работающее приложение.
Если до этого вы обновляли Angular 2 проекты для TS или JS до beta.0, то наверняка удивлены тому как невероятно просто это делается в Dart. А для тех, кто такого опыта не имеет, позвольте обрисовать ситуацию в общих чертах.
Я не стану перечислять все изменения между alpha.35 и beta.0, но вот основные:
JS и TS Angular2 приложения имеют зависимости от сторонних библиотек(zone.js, rxjs и т. д.), которые так же находятся в стадии альфы. И они тоже обновлялись по мере перехода к beta.0, что вызвало некоторые проблемы. Dart разработчиков это обошло стороной, т. к. их Angular2 не имеет никаких сторонних зависимостей.
Некоторые из самых используемых в Angular классов, аннотаций и директив были перемещены в иные модули с целью лучше организовать публичный API. Отчасти причиной тому незрелость модульной экосистемы ES6 и нехватка лучших практик. В контраст к этому Dart-библиотеки(аналог модулей в ES6) существуют с самого создания языка. Есть определённые соглашения о том в каком виде библиотеки должны выставлять публичные API. Angular следует этим соглашениям и последние изменения не оказали сильного влияния на Dart-приложения. В сущности для нашего минимального приложения не изменилось вообще ничего.
Zone.js, который помогает Angular2 реализовать связывание стал частью angular2-polyfills.js. Этот код должен быть исполнен и добавлен на страницу самым первым. Это изменение вызвало путаницу и ряд проблем в JS приложениях. Зоны, произошедшие из Dart'а и как часть платформы, работают прямо из коробки.
Reflect-metadata.js это библиотека, реализующая API отражений, предложена в качестве части ES2016. Теперь она так же является частью angular-polyfills.js, что тянет за собой соответствующие изменения в коде. В то же время в Dart pub transformer заменяет код отражений на его статичный эквивалент во время сборки и reflect-metadata.js просто не нужен.
Observable объекты в Angular2 являются основой в API. Тип Observable так же предложен в качестве части стандарта ES2016. Однако, в настоящий момент, RxJS заполняет этот пробел. Angular использует полностью переписанный RxJS 5. Он находится в стадии активной разработки на уровне beta-версий. Beta-версия RxJS ввела кардинальные изменения, требующие соответствующих изменений в JS и TS проектах. А в Dart Streams(частный случай Observables) являются частью SDK и нет необходимости в RxJS. Если вы сомневаетесь, что streams из Dart способны заменить observables из RxJS, то вот что я скажу:
Angular 2 написан на TS и опирается на возможности ES2015, следовательно для работы требует такие прослойки как es6-promise.js и es6-shim.js. Версионные ограничения этих библиотек так же вызвали серьёзные проблемы в ходе обновления. И угадайте что? Dart приложениям эти прослойки так же не нужны. Dart2js компилятор заботится обо всех кросс-браузерных проблемах совместимости
С новой структурой Angular пакетов надо соблюдать определённый порядок загрузки скриптов. Например zone.js должен быть загружен первым, затем system.js, затем Rx.js, es6-shim.js, es6-promise и только потом можно загружать код Angular. При использовании UMD порядок может измениться(UMD это другой формат JS-модулей, который может быть выбран целевым для сборки Angular проекта). Это такая штука, о которой даже и вспоминать не надо, когда работаешь с Dart, по той причине, что единственный скрипт, который надо добавить — это файл с функцией main().
Заключение
Возможно вездесущая мантра «В Dart всё включено» вас раздражает, но взгляните на написанное выше, это не какая-то абстрактная презентация или «Hello world». Angular это один из самых популярных веб-фреймворков в мире. Миллионы строк кода написаны на AngularJS, и я ожидаю увидеть еще больше написанных на Angular2. Так что не надо недооценивать эту мантру.
Я не принуждаю вас бросить TS или JS и немедленно перейти на сторону с печеньками(Dart). Dart имеет свои недостатки. Однако, удобство разработки и ощущения от разработки в Dart это то, чего мне очень не хватало в мире JS. Надеюсь, со временем JS экосистема сократит разрыв и разработка станет более продуктивной.
Автор: Vilyx
