Migració de components iniciada

Una altra setmana acabada. Els exàmens van limitar el meu progrés aquesta setmana, però el projecte va avançar significativament. Quatre assoliments clau:

1. Arreglat el procés de construcció per a producció.
2. Afegit test runner.
3. Migrat el primer component a Angular 2.
4. Afegit el primer test per a un component migrat.

Arreglant el procés de construcció

La setmana passada l'entorn de desenvolupament estava llest, i presumiblement el de distribució també. Però al llarg de la setmana, vaig notar que la build distribuïda causava problemes amb els elements de la quadrícula a la sala de vídeo xat. Després de provar diverses configuracions de Webpack, vaig rastrejar els problemes fins al procés d'uglify.

El problema involucrava el sistema de quadrícula de la sala de vídeo, implementat amb angular-gridster. Podia venir dels estils d'angular-gridster o del mòdul JavaScript. Primer, vaig intentar importar el CSS de la llibreria directament sense Webpack. Va fallar. La solució: utilitzar la versió font en lloc de la minificada a vendors.ts.

Estrany, ja que ambdues versions haurien de comportar-se igual. Independentment, la versió font soluciona el problema, i Webpack minifica tot el codi de totes maneres, incloent vendor.ts.

Afegint test runner

Més fàcil del que esperava. Vaig utilitzar angular2-webpack-starter de @AngularClass com a inspiració. Després d'adaptar els seus arxius webpack.test.js i karma.conf.js amb canvis menors, tot va funcionar. El codi obert en la seva millor expressió: Don't Repeat Yourself.

Migrant el primer component

Esperava aquest moment des que vaig enviar la meva proposta al GSoC. Vaig començar amb el component més simple de Jangouts: el peu de pàgina. Només mostra un enllaç a SUSE i la versió de Jangouts.

A l'antic Jangouts (pre-migració), el peu de pàgina consistia en una simple directiva d'Angular 1 amb una plantilla i una plantilla jade. Gulp la renderitzava, injectant la versió actual.

El nou peu de pàgina segueix sent simple: un arxiu TypeScript (definició de component amb una classe buida) i una plantilla Angular 2. La diferència clau: res modifica la plantilla per injectar la versió. En el seu lloc, el DefinePlugin de Webpack afegeix la versió com a constant global en temps de construcció, llegint de package.json.

Dos beneficis: el peu de pàgina és ara un component Angular pur, i és més fàcil de provar.

Afegint tests

Afegir tests a tota la plataforma és essencial durant la migració a Angular 2. El nou component de peu de pàgina té els seus propis tests. Simplement verifiquen que la variable version estigui definida correctament. Però aquests tests serveixen un segon propòsit: confirmen que el test runner i el reporter de cobertura funcionen correctament.