angular2 TypeScript performance

Question

I am new to Angular, JavaScript, and TypeScript and am playing with Angular2 tutorial at https://angular.io/docs/js/latest/quickstart.html

The TypeScript compiled app.component.js

System.register(['angular2/core'], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };
    var core_1;
    var AppComponent;
    return {
        setters:[
            function (core_1_1) {
                core_1 = core_1_1;
            }],
        execute: function() {
            AppComponent = (function () {
                function AppComponent() {
                }
                AppComponent = __decorate([
                    core_1.Component({
                        selector: 'my-app',
                        template: '<h1>My First Angular 2 App</h1>'
                    }), 
                    __metadata('design:paramtypes', [])
                ], AppComponent);
                return AppComponent;
            }());
            exports_1("AppComponent", AppComponent);
        }
    }
});

The JavaScript example app.component.js

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

To me the JavaScript version of Angular2 is much shorter and easier to understand. The compiled one by TypeScript is a bit hard to swallow, like core_1_1 passed in as parameter but I don't see where I can pass it in.

So my questions are as follows

Will TypeScript version runs slower than the JavaScript version, since usually the more abstraction layers the slower?
Is TypeScript the recommended way to go in the future since the tutorial in JavaScript is not even available other than quick start?
If I use TypeScript for coding Angular to modules do I have to care much compiled JavaScript code other than error/debugging purpose?

Thanks,

Is it because the JS version is compiling to ES2015, whereas TypeScript is compiling down to ES5? — Alex Logan
– Alex Logan, Commented Apr 12, 2016 at 15:28
no, the Class in the standard js is part of the angular core lib, not the es2015 Class. if you are interested in the perf of the transpilled code take a look at benchmarkjs.com — atmd
– atmd, Commented Apr 12, 2016 at 15:34

Tyler · Accepted Answer · 2016-04-12 16:45:57Z

TypeScript is not really designed for extreme readability post-compilation, and machine-compiled code will always be harder to read than well-written-by-a-human code (until AI takes our jobs). So to answer your questions:

I'm unaware of any performance tests that show major speed benefits or drawbacks either way. These days slight differences in JS syntax are not likely to be a bottleneck anyhow. Inefficient algorithms, constant repaints, slow network, etc are much more noticeable.
The Angular team does seem to be pushing hard for TypeScript. TBD if that will catch on, but they have the resources to push for as long as they want.
Not particularly. The main benefit of TypeScript is that you can't be all willy-nilly with your data types like in regular JS. In theory, this leads to maintainable code with fewer errors that are easier to debug. Ultimately it will come down to your preferred methods of debugging, but error messages are not more cryptic with TypeScript.

Collectives™ on Stack Overflow

angular2 TypeScript performance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related