Вячеслав Бухарин, Денис Омельков
СКБ Контур
UralJS
Екатеринбург 2017
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"
}
Chunks
преобразование манифеста компонента
{
"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(...)
...
}
Подходы
if (params.id) url += getRouteId(params.id);
astexplorer.net + jscodeshift
Решение
Замена в исходных файлах
TypeScript
HTML
Решение
Настройка или модификация парсера
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()'
});
}
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];
}
}
Сложно описать зависимости
Проблема вложенного 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
Кеширование между билдами
v 1.0
Chunk Alpha
Chunk Beta
Chunk Gamma
v 1.1
Chunk Alpha
Chunk Beta
Chunk Gamma
Кеширование между билдами
v 1.2
Chunk Alpha
Module A (id "8U58")
Chunk Beta
Module B (id "XCH3")
Chunk Gamma
Module C (id "OPJ6")
Свой сборщик:
3 минуты, 400 Мб ОЗУ
Webpack + Ng2
10 минут, до 3 Гб ОЗУ
Сборка шаблонов в JS на сервере, минификация
+
–
Спасибо за внимание!
omelkov@skbkontur.ru
buhv@skbkontur.ru
@apocalyp_sys
tech.skbkontur.ru
Text