Трудности перехода

Вячеслав Бухарин, Денис Омельков

СКБ Контур

UralJS

Екатеринбург 2017

Контур.Стафф

• Single page application
• TypeScript
• AngularJS 1.x
• Grunt + scripts

Дерево компонентов

Components

module staff.components {
    export class ButtonComponent {

        text: string; // prop
        click: IEventEmitter; // event

        initializeComponent() { 
            // do stuff
        }

    }
}

{
  "properties": "text",
  "events": "click",
  "template": "./button.html",
  "type": "component",
  "ctrl": "staff.components.ButtonComponent"
}

Масштаб SPA

• 117K строк кода
• 440 компонентов
• 3.2MB (minified)
• 20 chunks

Chunks

• ES6 модули
• Производительность
• Новый сборщик

Мотивация обновления

Angular 2 

Angular 4

План миграции

• Написать конвертер
• Сконвертировать
• ???
• PROFIT!

План миграции

Правила конвертирования 

Правила конвертирования

преобразование манифеста компонента

{
  "properties": "text",
  "events": "click",
  "template": "./button.html",
  "type": "component",
  "ctrl": "staff.components.ButtonComponent"
}

@Component({
  selector: "my-button",
  templateUrl: "./button.html",
}) export class MyButtonComponent {
    @Input() text: string;
    @Output() click = new EventEmitter<any>();
}

Правила конвертирования 

initializeComponent() 

destroyComponent() 
		
prop_change() 

ngOnInit()

ngOnDestroy()
		
ngOnChanges(changes){
if(changes["prop"]){
    this.prop_change(...)
    ...
}

Конвертер

• Обход каталога
• Применение трансформаций
• Сохранение копии исходного файла

Конвертер

Подходы

• Модификации на основе синтаксического дерева (TypeScript API + html parser)
• Регулярные выражения

AST

if (params.id) url += getRouteId(params.id);

• API TypeScript не позволяет сериализовать синтаксическое дерево в TS код

Проблемы конвертации

TypeScript

Проблемы конвертации

HTML

• Шаблоны Angular не являются валидным HTML

Пример преобразования с AST

for (let pk of obj.properties) {
  if (pk.kind == SyntaxKind.PropertyAssignment) {
      if (prop.name.text == 'properties') {
        // будем удалять properties из декоратора
        replacements.push({
	    start: prop.pos,
            end: prop.end + 1,
	    replacement: ''
	});
        inputProperties = prop.value.split(' ');
      }
   }
} 
...
if (member.kind == SyntaxKind.PropertyDeclaration 
    && inputProperties.includes(member.name)){
    replacements.push({
            start: offset,
            end: offset,
            replacement: ' @Input()'
    });
}

Пример преобразования

с AST (шаблон)

for(let name in dom.attribs){
    if(dom.attribs.hasOwnProperty(name) && name == 'ng-repeat'){
        dom.attribs['*ngFor'] = 'let ' + (dom.attribs[name])
            .replace(' in ', ' of ')
            .replace('track by', '; trackBy:');
        delete dom.attribs[name];
    }
}

Ручная проверка и рефакторинг

• Отсутствующие API
• Сильно отличающиеся API
• Устаревший код
• Сравнение со старой версией

Сборка на webpack

Сложно описать зависимости

Сборка на webpack

Проблема вложенного require.ensure

require.ensure([], () => {
    require('./A');
}, "A");

require.ensure([], () => {
    require('./B');
}, "B");

require.ensure([], () => {
    require('./A');
    require.ensure([], () => {
        require('./B');
        require.ensure([], () => {
            let C = require('./C');
            C.C();
        }, "C")
    }, "B");
}, "A");

Chunk A

Module A

Chunk B

Module B

Chunk C

Module A

Module C

commonsChunkPlugin

Сборка на webpack

Кеширование между билдами

v 1.0

Chunk Alpha

• Module A (id1)
• Module AA (id 2)

Chunk Beta

• Module B (id 3)

Chunk Gamma

• Module C (id 4)

Сборка на webpack

Кеширование между билдами

• [name][chunkhash].chunk.js
• HashedModuleIdsPlugin
• ChunkManifestPlugin

Сравнение версий

Размер бандла

Сравнение версий

Bootstrap

Сравнение версий

Скорость рендера

Сравнение версий

Продакшн сборка

Свой сборщик:

3 минуты, 400 Мб ОЗУ

Трудозатраты

• около 80 чел/дней
• примерно 4 месяца
• 1,5 человека

Выводы

• Повысили производительность
• Отрефакторили код
• Cовместимость с новыми библиотеками и технологиями  (RxJS, ES6 modules)
• Поддержка со стороны IDE
• Проверка типов еще и в шаблонах

• Снизилось удобство разработки
• Время сборки увеличилось
• Проблемы с кешированием

Спасибо за внимание!

omelkov@skbkontur.ru

buhv@skbkontur.ru

@apocalyp_sys

tech.skbkontur.ru

Text