Angular 2.0.0-alpha для тех, кто не в силах ждать

  • Tutorial

Совсем недавно (5-6 марта) прошла конференция ng-conf, и много докладов на ней было посвящено грядущему релизу Angular 2, на нескольких из них даже показали альфа версию. Конечно же после прослушивания очень захотелось опробовать его лично. Если вам тоже не терпится — прошу под кат.

В этой статье мы разберёмся, где взять билд альфа версии Angular 2.0, создадим на нём небольшое приложение — To-do list, и запустим его в браузере без полной поддержки ECMAScript 6.

Angular 2 очень сильно отличается от нынешней версии, переосмыслено практически всё. Многие из отличий вытекают из того, что он на всю катушку использует ES6 с аннотациями и типами, разработчики называют этот язык AtScript. Теперь же, судя по всему, команда Angular начала плотно сотрудничать с Microsoft и разработка будет вестись на TypeScript, и после выхода его версии 1.5, туда будет полностью включен AtScript.

Приложение Angular 2 теперь состоит из компонентов и представляет из себя их дерево. Идея похожа на Web-components, даже разметка Angular 2 компонентов помещается в Shadow DOM. Причём если вы соберётесь использовать в своём приложении Web-components, или, например, Polymer – то синтаксис ничем не будет отличаться от использования ваших собственных Angular 2 компонентов. Сами компоненты представляют из себя ES6 классы с аннотациями, никакого специального синтаксиса как, например, для директив в версии 1.х не требуется. Сервисы теперь тоже стали обычными классами, а благодаря поддержке типизации в AtScript, инъектировать их можно по типу, без использования синтаксиса .$inject или ngAnnotate.

Давайте сейчас попробуем создать наше первое To-do приложение и по ходу дела разберёмся, что да как.

На сегодня ни один браузер не поддерживает весь тот функционал, который нужен Angular 2 для работы, поэтому нам понадобится целый ворох инструментов:

Чтобы всем желающим пощупать альфу не приходилось ставить это всё по-отдельности, разработчики собрали quick start. Его можно установить набрав в папке проекта:

git clone https://github.com/angular/quickstart.git 

Теперь все необходимое лежит у нас в папке quickstart, а для красоты добавим ещё angular-material, но использовать из него будем, разумеется, только css:

bower install angular-material 

Теперь создадим в проекте файл index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>To Do</title>
    <script src="/quickstart/dist/es6-shim.js"></script>
    <link href="bower_components/angular-material/angular-material.css" rel="stylesheet" />
</head>
<body layout="row">
    <style>
        md-progress-circular.md-default-theme.blue .md-inner .md-right .md-half-circle {
            border-right-color: #039be5;
        }

        md-progress-circular.md-default-theme.blue .md-inner .md-left .md-half-circle, md-progress-circular.md-default-theme .md-inner .md-right .md-half-circle {
            border-top-color: #039be5;
        }

        md-progress-circular.md-default-theme.blue .md-inner .md-left .md-half-circle {
            border-left-color: #039be5;
        }

        md-progress-circular.md-default-theme.blue .md-inner .md-gap {
            border-top-color: #039be5;
            border-bottom-color: #039be5;
        }
    </style>
    <app flex layout="row" layout-fill>
        <div layout-fill layout="row" layout-align="center center" layout-margin>
            <md-progress-circular md-mode="indeterminate" class="md-default-theme blue" style="-webkit-transform: scale(1);">
                <div class="md-spinner-wrapper">
                    <div class="md-inner">
                        <div class="md-gap">
                        </div>
                        <div class="md-left">
                            <div class="md-half-circle"></div>
                        </div>
                        <div class="md-right">
                            <div class="md-half-circle"></div>
                        </div>
                    </div>
                </div>
            </md-progress-circular>
            <h4>
                    To do app is loading...
            </h4>
        </div>
    </app>
    <script>
        System.paths = {
            'angular2/*': 'quickstart/angular2/*.js',
            'rtts_assert/*': 'quickstart/rtts_assert/*.js',
            'app/*': 'app/*.js'
        };
        System.import('app/App');
    </script>
</body>
</html>


Здесь следует обратить внимание на три момента:

Прежде всего мы подключили файл es6-shim, в нем заботливо собрано всё вышеперечисленное, что нам нужно для запуска приложения.

Далее обратим внимание на элемент app. Это и будет наш главный компонент приложения. Сейчас в нем содержится просто разметка со спиннером и надписью To do app is loading… она будет показываться пока ангуляр не загрузит класс компонента и не заменит эту разметку на его template.

В самом низу мы использовали библиотеку system.js, она реализует систему загрузки модулей ES6. Сначала при помощи System.paths мы настроили пути к .js файлам, затем с помощью System.import загрузили файл с компонентом app, а он, в свою очередь, уже и потянет за собой все нужные библиотеки и компоненты.

Теперь создадим папку app и положим в неё файл App.js:

import {Component, Template, bootstrap, Foreach} from 'angular2/angular2';
import {TodoStore} from 'app/TodoStore';
import {ItemEditor} from 'app/ItemEditor';

@Component({
    selector: 'app',
    componentServices: [
	  TodoStore
    ]
})
@Template({
    url: 'app/todo.html',
    directives: [Foreach, ItemEditor]
})
class App {
    constructor(store:TodoStore) {
        this.store=store;
    }
}

bootstrap(App);


Сначала мы импортируем классы Component, Template, Foreach из angular2.js, оттуда же импортируем функцию bootstrap, уже знакомую тем, кто в версии 1.x не использует директиву ng-app, она инициализирует главный компонент приложения, следом мы импортируем классы TodoStore из app/todoStore.js (это будет сервис, отвечающий за работу со списком задач и его хранение в localStorage браузера) и ItemEditor из app/item-editor.js (это будет компонент — директива, отображающий элемент списка). Мы их пока не написали, поэтому рассмотрим их позже.

Далее мы создаём класс App, ему в конструктор при помощи инъектора передаётся объект класса TodoStore, который мы присваиваем свойству store.

При объявлении класса мы использовали аннотации Component и Template из angular2.js:
Component – аннотация, которая и делает класс компонентом. Свойство selector — это селектор, позволяющий обнаружить элемент в разметке шаблона, у нас это элемент app. Свойство componentServices – это список классов для инъектора.

Template – помогает указать для компонента шаблон. Свойство url указывает путь, где будет находиться шаблон, свойство directives указывает список директив, которые используются в разметке этого шаблона.

В конце файла мы используем функцию bootstrap, чтобы инициализировать наш главный компонент.

Давайте теперь создадим файл app/TodoStore.js:

export class TodoStore {
    constructor() {
        this.load();
    }
    save() {
        window.localStorage['todoItems']=JSON.stringify(this.items);
    }
    addItem(name, checked) {
        this.items.push(new Item(name,checked));
    }
    clear() {
        this.items.length=0;
    }
    load() {
        this.items=[];
        let itemsStr=window.localStorage['todoItems'];
        if(itemsStr) {
            JSON.parse(itemsStr).forEach((e) => {
                this.addItem(e.name, e.checked);
            });
        }
    }
}


class Item {
    constructor (name, checked){
        this.name = name;
        this.checked=checked || false;
    }
    toggleCheck() {
        this.checked=!this.checked;
    }
}

У класса TodoStore есть методы save(), load(), clear(), и addItem(name, checked).

Сам список задач будет храниться в свойстве items. Метод save() сохраняет значение свойства items в localStorage. Метод clear() очищает свойство items. Метод load() загружает из localStorage все элементы списка и добавляет их в items с помощью метода addItem. Метод addItem(name, checked) принимает имя пункта списка, создаёт новый объект Item и добавляет его в Items.

Следом идёт объявление класса Item, конструктор принимает name — имя пункта списка и checked — отмечен ли он как выполненный. Ещё у класса есть метод toggleCheck(), который меняет значение checked на противоположное.

Далее создаём файл app/todo.html с шаблоном главного компонента:

<style>
    @import "../bower_components/angular-material/angular-material.css";

    .md-primary {
        background-color: #039be5;
        color: white;
    }

    md-toolbar {
        background-color: #CFD8DC;
    }

    md-input-container {
        padding-bottom: 0;
    }
</style>
<div flex layout="column" layout-fill layout-margin>
    <md-toolbar class="md-primary">
        <h2 class="md-toolbar-tools">
            <span>To do list</span>
        </h2>
    </md-toolbar>
    <md-content layout="row" layout-align="center start" flex>
        <div flex="50" flex-md="80" flex-sm="100">
            <div layout="row" layout-margin flex>
                <button flex class="md-button md-primary md-raised md-default-theme" (click)="store.save()">Save</button>
                <button flex class="md-button md-primary md-raised md-default-theme" (click)="store.load()">Load</button>
                <button flex class="md-button md-primary md-raised md-default-theme" (click)="store.clear()">Clear</button>
            </div>
            <div layout="row" layout-margin flex>
                <md-input-container class="md-input-has-value" flex="60">
                    <input #newitem class="md-input" placeholder="New to do item" />
                </md-input-container>
                <button flex class="md-button md-primary md-raised md-default-theme" (click)="store.addItem(newitem.value)">Add new item</button>
            </div>
            <md-list>
                <md-item *foreach="#item in store.items">
                    <md-item-content>
                        <item-editor [item]="item"></item-editor>
                    </md-item-content>
                </md-item>
            </md-list>
        </div>
    </md-content>
</div>

Здесь у нас есть три кнопки, которые вызывают методы хранилища store.save(), store.load() и store.clear(). Мы привязываемся к событию click каждой кнопки с помощью атрибута (click). В нынешней версии ангуляра порой довольно трудно с первого взгляда отличить в разметке, какой атрибут используется для привязки к событию, а какой для привязки данных, теперь же всё будет видно сразу, круглые скобки () нужны, чтобы реагировать на события элемента или компонента, а атрибут в квадратных скобках [] осуществляет привязку к данным, подразумевается, что значение атрибута — это выражение, которое будет вычислено, а его результат будет присвоен атрибуту элемента, если атрибут указан вообще без всяких скобок — то подразумевается, что в нём просто текстовое значение.

Далее обратим внимание на input с атрибутом #newitem таким образом мы теперь можем задавать элементу имя, по которому он будет нам доступен, как в событии click кнопки ниже, где мы берём значение input'а — newitem.value и передаём его в store.addItem().

Следом идёт список задач, который мы вывели с помощью новой директивы *foreach (это замена ng-repeat), здесь, как и в input'е выше, мы написали #item, чтобы обращаться далее к каждому элементу списка по имени item.

Каждый элемент списка мы собираемся выводить при помощи директивы item-editor, которой мы привязываем элемент списка с помощью атрибута [item].

Теперь создадим файл app/ItemEditor.js с компонентом ItemEditor, который будет отвечать за отображение элементов списка.

import {Component, Template} from 'angular2/angular2';

@Component({
    selector: 'item-editor',
    bind: {
        'item': 'item'
    }
})
@Template({
    inline: `
        <style>
        
        @import "../bower_components/angular-material/angular-material.css";
        md-checkbox.md-checked .md-icon {
            background-color: #039be5;
            color: white;
        }
        </style>
        <md-checkbox [class.md-checked]="item.checked" (click)="item.toggleCheck()">
        <div class="md-label">
            <div class="md-container">
                <div class="md-icon"></div>
            </div>
            <span>
                {{item.name}}
            </span>
        </div>
        </md-checkbox>
        ` 
})
export class ItemEditor {

}


Здесь в @Component мы указали селектор 'item-editor', это элемент, который используется в *foreach в todo.html. Следом указано свойство bind, оно указывает, что нужно привязать значение атрибута item к свойству item класса компонента(что-то вроде bindToController).

В Template на этот раз вместо url для примера указано свойство inline, оно служит для указания текста шаблона прямо в коде. Это снижает количество требуемых http запросов, поэтому после выхода Angular 2 скорее всего появится кокой-нибудь плагин для Gulp, который будет менять url на inline, на замену нынешнему gulp-angular-templatecache.

В самом шаблоне можно увидеть атрибут [class.md-checked] — это лаконичная замена ng-class. А ниже выводится имя элемента списка с помощью уже ставшего родным синтаксиса с фигурными скобками {{item.name}}.

Вот и всё, теперь можно запустить проект(проверял только в Хроме) и посмотреть, как работает будущий Angular 2.0.

Как мы видим, разработчики полностью переосмыслили концепцию Angular.js и нас теперь ждёт абсолютно новый фреймворк с новым, более лаконичным синтаксисом. Благодаря абсолютно новой архитектуре, созданной с расчётом на большие приложения, производительность рендеринга, главный бич версий 1.x, возрастает во много раз (наглядное сравнение можно посмотреть в конце доклада Дейва Смита Angular + React = Speed). Возможность использовать типизацию открывает перспективы развития IDE для продвинутой поддержки дополнения кода и статического анализа (как минимум, Microsoft заявляет поддержку Angular в Visual Studio одним из приоритетов). А новшества ES6 сделают разработку ещё быстрее и приятнее.

Это практически и всё, что мне удалось узнать об Angular 2.0 на сегодня, будем дальше следить за новостями, а пока вот несколько и интересных ссылок по теме:

Канал ng-conf на YouTube с массой интересных докладов
Официальный сайт Angular 2.0
Проект Angular 2 на GitHub
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 53
  • +4
    Мне кажется надо срочно сменить название, а то холивар по поводу обратной совместимости неминуем. По сути, практически новый продукт — зачем ему терять разочарованных предыдущими версиями.
    • +1
      Вообще разработчики уже озаботились вопросом миграции, хотя сначала заявили, что пути не будет вовсе. Вот доклад от Michał Gołębiowski о миграции, а следующие версии 1.х планируются, как некий мост до версии 2.0, например, в 1.4 портировали новый роутер.

      Но, конечно, реальности это не меняет, для перехода с 1.х на 2.0 придётся переписать приложение полностью. Но тут надо задаться вопросом целесообразности, версию 1.х будут поддерживать ещё долго, пока не упадёт посещаемость angularjs.org. А если уперлись в производительность- можно, на крайний случай, запустить в приложении оба ангуляра разом и заменить только узкие места, как некоторые сейчас делают с React.js
      • 0
        Они не заявляли, что пути миграции не будет, они заявляли, что пока нет чего-то хотя бы близкого к финальной версии по API, нет смысла составлять какие-либо планы миграции.

        И уже сейчас, чем больше в приложении будет использоваться компонентный подход (любая страница, ее часть или повторно используемый виджет — это директива с изолированным scope), тем проще потом будет переход. Подобный подход и в текущей версии хорош, потому что позволяет явно прописать интерфейс взаимодействия между родительскими и вложенными состояниями/страницами/виджетами и т.п.
    • –4
      Этот html-код не пройдёт валидацию.
      • 0
        Пройдет.
        • 0
          Запихал в validator.w3.org, не прошел.
          • 0
            Ну, можете добавить все эти flex и т.д. через data-* атрибуты и все будет хорошо. Более того, есть решения для gulp/grunt для автоматизации этого, хоть я и не вижу в этом смысла.
            • 0
              Что-то я с утра туплю.

              Вы пытались темплейт провалидировать или что? Мне кажется что это не правильно как-то.
              • +3
                Может быть зря я заостряю на этом внимание. Просто мне приходилось сталкиваться и со средствами разработки и с серверным кодом, которые отказывались работать с html, если в нём нестандартные теги. Поэтому у меня жёсткий принцип, что нестандартные теги — это зло.
                • +4
                  Тот факт, что какая-то тулза не правильно обрабатывает валидный код, совершенно ничего не говорит об этом коде. Грядут webcomponents, shadow-dom, абсолютно любой атрибут и тег будут валидными.
              • 0
                Создатель ангуляра Misko Hevery утверждает, что это вполне валидный html код и в доказательство приводит этот пункт спецификации html, но если Вас интересует какой-то определённый валидатор допускается вместо [value] можно будет писать bind-value или data-bind-value.
            • +3
              Лучший валидатор — браузер. ©

              <!-- meta name="GENERATOR" content="Microsoft FrontPage 1.0" -->
            • +13
              Это выглядит не менее страшненько, чем версия 1 — просто здесь свои причандалы.
              Кажется, усложнять вещи, которые могут и должны быть простыми — отличительная черта разработчиков ангуляра.
              • +1
                Можете рассказать, что тут для вас «усложнение»?
                • +11
                  [class.md-checked]="item.checked"
                  (click)="item.toggleCheck()"
                  [item]="item"
                  #newitem
                  *foreach="#item in store.items"
                  

                  Вот это всё — рак мозга. Есть ощущение, что им (разработчикам) скоро перестанет хватать спецсимволов.

                  Плюс, import из ES6 насколько я понимаю не умеет работать с конкатенированными файлами.
                  Т.е. если у вас на странице 100 компонентов, то у вас будет как минимум 100 запросов к серверу.
                  • 0
                    Грядет HTTP2, с мультиплексированием и и т.д. Так что хоть 1000 файлов — норм. Да и если кому интересно как собирать проект на модулях — есть es6-module-transpiler и в нем один из форматтеров — bundler — отлично собирает код в один файл, с учетом всех зависимостей и без какого либо футпринта.
                • +1
                  Любой фреймворк будет подразумевать под собой определённый набор своих «причиндалов», которые требуют изучения. По поводу версии 1.х я ещё могу согласиться, что синтаксис несколько громоздкий(из-за специфики ES5), но новый синтаксис мне кажется куда более изящным и выразительным + теперь IDE сможет Вам помогать при разработке благодаря типизации.
                • +6
                  Внутри arrow-function сохраняется родительский контекст.
                   load() {
                       this.items=[];
                  -    let that=this;
                       let itemsStr=window.localStorage['todoItems'];
                       if(itemsStr) {
                           JSON.parse(itemsStr).forEach((e) => {
                  -            that.addItem(e.name, e.checked);
                  +            this.addItem(e.name, e.checked);
                           });
                       }
                   }
                  


                  ES2015 в текущей версии ангуляра можно использовать совершенно без проблем. Вот пример кода из текущего проекта.
                  class CityController {
                    static $inject = ['$routeParams', 'CityApi'];
                    
                    constructor(params, api) {
                      this.api = api;
                      this.load(params.city);
                    }
                  
                    load(id) {
                      this.api.get(id).success((city) => {
                        this.city = city;
                      });
                    }
                  }
                  
                  module.exports = CityController;
                  
                  • +2
                    Внутри arrow-function сохраняется родительский контекст.


                    Большое спасибо, не знал, поправил код в статье.
                    • 0
                      static $inject = ['$routeParams', 'CityApi'];
                      

                      К сожалению, этого в ES2015 нет, property initializers пока только предлагаются к добавлению в ES7. Хотя никто нам не мешает их использовать с препроцессорами :)
                      • 0
                        Я сильно сомневаюсь, что где-то, кроме node/io.js можно будет использовать нативный ES6 в 2015-16 годах. А значит в любом случае прийдется использовать препроцессоры. А раз так, давайте делать это на полную катушку.
                        Ну и пока это в babel не добавили, я использовал
                        static get $inject() {
                          return ['$routeParams', 'CityApi'];
                        }
                        
                  • +1
                    А я надеялся в реальном проекте использовать angular 2, но как написано в статье без костылей он работать не будет.
                    Действительно новый ангулар не нимеет ничего общего со старым по сути название angular это просто маркетинговый ход для популизации нового продукта. Развитие настоящего angulara уже больше не будет.
                    • 0
                      Пока не время его использовать, это ранняя-ранняя альфа, чтобы оценить идеи, заложенные в его основу и подготовить нынешние проекты к менее безболезненной миграции. И Вы не совсем правы, ветка 1.х будет не только поддерживаться, но и развиваться ещё довольно долго.
                      • +3
                        Почему маркетинговый ход? Мажорная версия, мажорные изменения. В крупных проектах такое происходит. Из известных мне — symfony 1 и 2, bootstrap 2 и 3, php 4 и 5. Во всех этих проектах есть обратно не совместимые изменения.
                        Ангуляр как был фреймворком с DI, контроллерами и директивами, так он им и остался. Да, поменялось API, но мир не стоит на месте, особенно в фронтенде.
                        • +1
                          Поддерживаю. Symfony2 вообще практически другой фреймворк по сравнению с первой версией, кстати.
                          • 0
                            И тоже компонентная база и аннотации.
                            • 0
                              Гм. То, что фреймворк использует «компоненты» и «аннотации» не является его отличительной особенностью, мне кажется. Сейчас большое количество библиотек состоит из компонентов и использует аннотации
                              • 0
                                В PHP комьюнити Symfony2 был первым фреймворком в этом плане. И упомянут он тут из-за аналогии, монолитный Symfony1 и компонентный Symfony2 + аннотации. Совсем как у ангуляра.
                                • 0
                                  Мне казалось, скажем, Zend Framework 1 тоже состоял из компонентов. Разве нет? Конечно, зависимости там посерьезнее, чем у Symfony, но тем не менее. То, что он поставляется монолитно и отдельный компонент не установить через Composer, не означает, что архитектурно он монолитен.
                                  • 0
                                    Zend1 был набором библиотек. Как и Symfony1. Использовать большую часть из них вне Zend или Symfony не реально. Разница в том что в случае с Zend2 или Symony2 можно взять пачку компонентов и собрать свой фреймворк. Та же разница и в angular. Можно взять компоненты, какие-то заменить другими и получить свой фреймворк адаптированный под нужды разработки.
                        • 0
                          Основные киты Ангуляра — декларативность, DI, тестируемость. В этом плане ничего не меняется. Что-то просто становится гибче, что-то жестче, меняется API. Если вы старались в своем приложении побольше думать о декомпозиции, повторном использовании и явном интерфейсе взаимодействия между различными частями приложения, то переход будет не настолько сложен, а уж концептуально ничего не поменяется, так только, синтаксически…
                          • 0
                            2-way-binding была одной из базовых фич Angular, теперь ее нет, так что не только сахар.
                            • +1
                              Ну посмотрим, что они там с формами в конце концов сделают. А то может оказаться, что под 2-way-binding каждый понимал что-то немного свое :)
                              • 0
                                Во-во. Без 2-way биндинга с формами очень сложно работать.
                              • 0
                                Скорее change detection а не дата биндинг. Теперь этот функционал предоставляет отдельный компонент — watchtower.js. Все хорошо.
                                • 0
                                  watchtower.js
                                  Кстати где на него посмотреть? А то github.com/angular/watchtower.js заброшен почти год назад, а в основном репозитарии я не нашел упоминания о watchtower.
                                  • +1
                                    github.com/angular/angular/tree/master/modules/angular2/src/change_detection я правда пока не понимаю как они собираются вести разработку. Делать сплит на несколько модулей?
                                    • 0
                                      Спасибо.
                                      Попробовал найти использование Object.observe — не вышло, получается они его ещё не используют или не там ищу?
                                      • 0
                                        Хз… еще не разбирался.
                          • 0
                            Любопытно, если они перейдут на typescript и его генерацию модулей — что они будут делать с циклическими зависимостями? Typescript создает модули CommonJS (или, реже, AMD), в которых если модуль A делает require модуля B, а модуль B с свою очередь делает require модуля A — то с удивлением получит вместо него пустой объект. В node.js для борьбы с этой неприятностью пишут «module.exports = » в начале с последующей инициализацией, но typescript-то так не делает и делать, судя по всему, не планирует.
                            • 0
                              судя по всему будет использоваться System.js, а он умеет разруливать циклические зависимости. Во всяком случае я отказался от этих кастылей с browserify и amd. Babel к примеру умеет конвертировать модули из ES6 в обертку под SystemJS.
                            • +1
                              Свойство componentServices – это список классов для инъектора.

                              Хочу дополнить, при добавлении создается экземпляр классов из этого списка. Так же есть список services, который позволяет инъектировать(странно звучит на русском) в дочерние элементы.

                              Для изучения так же рекоммендую примеры hello world и todo от авторов фреймворка. Забавный факт, при открытии hello world, браузер создает 110 запросов и в сумме скачивает более мегабайта. Это самый тяжелый hello world, который я видел (:

                              Изучая сборку и запуск angular2, создал github.com/htdt/ng2-jspm (без es6-shim через jspm).
                              • 0
                                инъектировать — внедрять.

                                браузер создает 110 запросов и в сумме скачивает более мегабайта

                                Ну так, оно ж не оптимизировано. Если грузить через spdy/http2 проблем с этим не особо много.
                                • 0
                                  Точно, «внедрять» лучше. Полагаю к релизу они сделают сборщик. Кстати, по ссылке выше jspm собирает проект, сокращая до 3 запросов и 344кб (не мало и не стабильно, для изучения, не для продакшена).
                                  • 0
                                    добавить к этому uglify или closure compiler, gzip и уже можно жить. По поводу сборки — есть es6-module-transpiler который может собрать все в красивый бандл, без всяких зависимостей в виде require.js или jspm. Единственное что смущает — как это все будет работать с typescript, хотя думаю проблем не будет.
                                    • 0
                                      jspm bundle тоже без зависимостей, только traceur-runtime.js для es6
                                      • +1
                                        Я babel использую как раз для того что бы избавиться от traceur-runtime.js
                              • 0
                                Fesor, а ты не встречал гайдов как приготовить эту альфу с webpack-ом?
                                И обязательно ли связываться с traceur'ом чтобы всю эту кухню запустить или они его используют потому что гугл?
                                А то я тоже последнее время на бабеле с webpack, хотелось бы как-то в этой среде все это запустить для «попробовать».
                                • 0
                                  Я не перевариваю webpack. Мне больше gulp по душе. Ну и без traceur-а я 2-ую ветку не тыкал, времени не было. Babel-ом только под 1.3 собираю.
                                  • 0
                                    А я как-то подсел на webpack, gulp-ом теперь только его билды запускаю.
                                    Ладно, попробую на досуге, может чего выйдет.
                                • 0
                                  Кто-нибудь знает примерную дату выхода релизной версии angular 2?

                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.