Comparison of the transition process of Angular2 applications to version beta.0 in Dart and TypeScript languages

Note from the translator: I was prompted to translate this article by writing to the social network from the author, the record was as follows: "# Angular2 for #dartlang 11.7 KB less than the JS version. I squeezed what I could from both.". I was stunned by the way the translated language, which draws hacks for its own work, cross-browser compatibility and a bunch of libraries besides Angular, and after disfiguring and minifying both options, it is not JS that wins. It is so natural that one has to pay for the convenience of the language in the size and speed of work of the result. In synthetic tests, the translation result is ahead of the performance of pure JS, in real work the difference in performance is not noticeable. Total it turns out, the size of the assembled Dart-project will be approximately equal to the JS-project, the speed of work is approximately the same. The latest Dart update allows you to connect any JS library in several lines. And writing on Dart is a pleasure. The last statement is partially revealed by the translated article, a pleasant reading.

Over the past six months, I have been able to work on JavaScript and TypeScript projects. Before that, I worked with Dart for about a year. Since April 2015, my co-author and I have been working on a book about Angular 2, this framework is officially supported in three languages ​​JS, TS and Dart. I mainly use TS, but periodically check the status of Angular 2 for Dart.

A week ago, Angular 2 went into beta. Pioneers and enthusiasts of Angular 2 know that before this came as many as 7 alpha versions. This was accompanied by several critical changes, the updating of which was very painful (if there are alphas for that). And after we finished updating all the examples in the book for version beta.0, I decided to take a look at how Angular 2 is doing with Dart.

I took a small application that did not change from the alpha.35 version, and decided to upgrade it to beta.0. My upgrade experience on Dart is radically different from TS, which is what I want to share with you.
')
Dart application update

I can say in advance that the update process is trivial and includes the usual update steps for any other Dart project. Despite this, I want to share my experience with those who have no experience with Dart.

The test application is pretty minimalist, you can find the source code here: tyts . It consists of a Dart file:

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); 

And pubspec.yaml (equivalent to package.json):

 name: ng2_dart_upgrade dependencies: angular2: 2.0.0-alpha.35 browser: any transformers: - angular2: entry_points: web/main.dart 

To upgrade from alpha.35 to betta.0, you need to do two things:

1) In pubspec.yaml, change the version of angular2:

 angular2: 2.0.0-beta.0 

2) Run pub upgrade to get the new version and all dependencies.
That's all. You can test a running application.
If before that you updated Angular 2 projects for TS or JS to beta.0, then you are probably surprised at how incredibly easy this is done in Dart. And for those who have no such experience, let me outline the situation in general.

I will not list all the changes between alpha.35 and beta.0, but here are the main ones:

JS and TS Angular2 applications have dependencies on third-party libraries (zone.js, rxjs, etc.), which are also in the alpha stage. And they were also updated as we move on to beta.0, which caused some problems. Dart developers it bypassed, since their Angular2 has no third-party dependencies.

Some of the most used in Angular classes, annotations and directives have been moved to other modules in order to better organize a public API. This is partly due to the immaturity of the modular ecosystem of the ES6 and the lack of best practices. In contrast to this, Dart libraries (analog modules in ES6) have existed since the very creation of the language. There are certain agreements on how libraries should expose public APIs. Angular follows these conventions and recent changes have not had a strong impact on Dart applications. In essence, for our minimal application, nothing has changed at all.

Zone.js, which helps Angular2 to implement the binding, has become part of angular2-polyfills.js. This code must be executed and added to the page first. This change caused confusion and a number of problems in JS applications. Zones that originated from Dart and as part of the platform work right out of the box.

Reflect-metadata.js is a library that implements the reflection API, proposed as part of ES2016. Now it is also part of angular-polyfills.js, which draws the corresponding changes in the code. At the same time, in Dart pub, transformer replaces the reflection code with its static equivalent at the time of assembly and reflect-metadata.js is simply not needed.

Observable objects in Angular2 are the basis of the API. The Observable type is also proposed as part of the ES2016 standard. However, at the moment, RxJS fills this gap. Angular uses a completely rewritten RxJS 5. It is under active development at the beta level. The beta version of RxJS has introduced major changes that require corresponding changes in JS and TS projects. And in Dart Streams (a special case of Observables) are part of the SDK and there is no need for RxJS. If you doubt that streams from Dart can replace observables from RxJS, then I will say this:

Angular 2 is written in TS and is based on the capabilities of ES2015, therefore, it requires layers such as es6-promise.js and es6-shim.js to work. The version restrictions of these libraries also caused serious problems during the upgrade. And guess what? Dart applications also do not need these layers. Dart2js compiler takes care of all cross-browser compatibility issues

With the new structure of the Angular package, you must follow a certain order of loading scripts. For example, zone.js should be loaded first, then system.js, then Rx.js, es6-shim.js, es6-promise and only then you can download the Angular code. When using UMD, the order may change (UMD is a different format of JS modules that can be chosen as the target for building an Angular project). This is such a thing that you don’t even need to remember when working with Dart, for the reason that the only script that needs to be added is a file with the main () function.

Conclusion

Perhaps the ubiquitous mantra of "In Dart All Inclusive" annoys you, but take a look at the above, this is not some abstract presentation or "Hello world". Angular is one of the most popular web frameworks in the world. Millions of lines of code are written in AngularJS, and I expect to see even more written in Angular2. So do not underestimate this mantra.

I do not force you to throw TS or JS and immediately go to the side with the cookies (Dart). Dart has its drawbacks. However, the ease of development and the thrill of development in Dart is something I really lacked in the JS world. Hopefully, over time, JS ecosystem will close the gap and development will become more productive.