Javascript-форум - Angular 2. Как правильно создавать компоненты.

Всем привет. Начал свое знакомство с angular 2. Перерыл большое количество зарубежной литературы, в т. ч. официальный ресурс https://angular.io для того, что бы понять как стартануть с Angular 2. Везде информация очень скудная, примеры на typeScript, хотя мне хочется работать с js и т. д.

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

app.component.js

var myComponent =
    ng.core.Component({
        selector: 'my-app',
        templateUrl: '../component.html'
    })
    .Class({
        constructor: function() {
            this.myName = 'Alice';
            this.myFriends = ['Aaron', 'Martin', 'Arianna', 'Kai', 'Shannon'];
        }
    });

main.js

document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(myComponent);
});

index.html

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='main.js'></script>
</head>
<body>
<div class="container">
    <h1>LeaderBoard</h1>
    <h3>TOP 3 participants</h3>
    <my-app></my-app>
</div>
</body>
</html>

Вопрос. Как оптимизировать код, потому что код создания компонента мне не нравится.