Angular 2 - TypeScript en runtime

Nov 2, 2015 8:00:00 AM / by daniel.comas

Otra opción si queremos ejecutar TypeScript en el navegador es hacerlo on the fly o en tiempo de ejecución. Vamos a ver que diferencias tenemos entre estas formas.

 

Tendremos la siguiente estructura

│ 
│ index.html

└───src
app.ts
main.ts

 

index.html

 

<!DOCTYPE html>
<html>

<head>
<title>Angular 2 - Typescript in runtime</title>
<script>
var start = new Date().getTime();
</script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<!-- typescript.js es el que nos realizará la mágia -->
<script src="https://code.angularjs.org/tools/typescript.js"></script>

<script>
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
</script>
<script src="https://code.angularjs.org/2.0.0-alpha.40/angular2.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>

</head>

<body>
<app>
loading...
</app>
</body>

</html>
<script>
var end = new Date().getTime();
var loadTime = end - start;
</script>

 

app.ts

import {Component, View, Query} from 'angular2/angular2';

@Component({
selector: 'app'
})
@View({
template: `
module_151811850626664
`
})
export class App {
name: string;
constructor() {
this.name = 'Alice';
this.name = 'dd3';
var end = new Date().getTime();
var executionTime = end - start;
alert('Load Time(ms): ' + loadTime + '\n' + 'Load Time + Execution time(ms): ' + executionTime);
}
}

 

main.ts (bootsrap)

//main entry point
import {bootstrap} from 'angular2/angular2'
import {App} from './app'

bootstrap(App)
.catch(err => console.error(err));

 

Si vamos al Chrome, veremos que se generan una espécie de sourcemaps. Si vamos a app.ts!transpiled veremos el fichero ES5 el cuál si intentamos añadir un punto de interrupción irá directo al fichero app.ts.

 

 

 

¿Penalización en runtime?

 

Para las pruebas se utilizará:

- Cache Killer Chrome Extension (todo será obtenido de nuevo)

 

 

Typescript pasado a ES5 préviamente transpiled (Con este ejemplo):

 

 

Typescript transpiled en Runtime (simple):

Con el ejemplo actual. 1 sólo component en el fichero app.ts (404 bytes). -> 3 segundos

 

 

Typescript transpiled en Runtime (large):

Con la misma prueba que la anterior pero con 10 components. Tamaño del archivo 3,43KB. -> 4 segundos

 

 

Typescript transpiled en Runtime (x-large):

Con la misma prueba que la anterior pero con 5000 components. Tamaño del archivo 1,64MB. -> 8 segundos

 

 

Typescript transpiled en Runtime (xxx-large):

Con la misma prueba que la anterior pero con 20000 components. Tamaño del archivo 6,59MB. -> 23 segundos

 

 

A nivel de Scripting no hay una penalización exagerada con pequeños ficheros pero no a medidad que vayamos incrementando el volumen. No debería de utilizarse esta forma en producción a no ser que queramos esta penalización de rendimiento. Si podemos para hacer códigos de ejemplo Plunker, codepen, ...

 

 

 

Topics: AngularJS, Chrome, Debug, Ingens Developments, JavaScript, Performance, Programación, TypeScript

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas