© DrHitch/Shutterstock.com
Shortcuts
Cross-Plattform

2 Von Dev bis Prod: Cross-Plattform-Build-Systeme

Denkt man einige Jahre zurück, waren HTML5-Anwendungen ein paar HTML5-Dateien, die mit JavaScript angereichert wurden. Heutzutage sieht diese Welt anders aus. Nicht nur, dass sich teilweise die Programmiersprache von JavaScript zu TypeScript ändert, sondern auch die Mächtigkeit und Komplexität der HTML5-Anwendungen haben sich vervielfacht. Viele Komponenten und Module, Paketierung in Container für native mobile und Desktopanwendungen, Ahead-of-Time Compiling oder Tree Shaking sind hier einige Buzzwords, die das Build-System auf eine harte Probe stellen. Denn es muss all dies verstehen und verarbeiten können.

Shortcut Autorenteam


Im ersten Kapitel dieses shortcuts haben wir uns mit den Grundlagen von Angular vertraut gemacht. Dabei haben wir uns angesehen, welche Konzepte Angular bietet, um moderne Cross-Plattform-Software zu entwickeln. Eine Beispielanwendung auf GitHub [1] hat diese Konzepte im Zusammenspiel gezeigt und dabei eine einfache Master-Detail-Ansicht implementiert. Die Daten werden dabei von einem öffentlichen API abgerufen: SWAPI – dem Star-Wars-API [2]. Ein Angular-Service half uns, die Daten abzufragen und einer Komponente mit einer View bereitzustellen, sodass sie dem Benutzer präsentiert werden konnten. Damit wir das alles im Browser ansehen konnten, haben wir zum Start der Anwendung einen Befehl auf der Kommandozeile ausgeführt: npm start. Mit dem Befehl haben wir auf magische Art und Weise einen Server zur Verfügung gestellt bekommen, der unter http://localhost:4200/ unsere Anwendung hostet. Im ersten Kapitel haben wir allerdings nicht geklärt, welche Magie hier passiert. Daher werden wir uns in diesem Kapitel mit der Magie beschäftigen und schauen, was alles hinter unserer Anwendung werkelt, um sie im Browser anzuzeigen. Zudem werden wir schauen, was sich hinter den Begriffen Ahead-of-Time Compiling (AoT) und Tree Shaking verbirgt, und warum man immer wieder auf die zwei verschiedenen Module-Bundler SystemJS und webpack trifft.Die ersten Schritte mit SystemJSAls 2015 die ersten Alphaversionen von Angular veröffentlicht wurden, gab es einen Stern unter den Module-Bundlern: SystemJS [3]. Mit SystemJS ist es möglich, sowohl unseren Anwendungscode als auch abhängige Module (wie auch Angular selbst) über mehrere Dateien aufzusplitten und dynamisch dann nachzuladen, sobald er benötigt wird. Dies hat den Vorteil, dass der Browser nicht direkt den vollständigen Anwendungscode laden und parsen muss, was natürlich der Startzeit unserer Anwendung zugutekommt. Wie so oft hat jede Medaille zwei Seiten. Der Aufwand, die eigene Anwendung fit für SystemJS zu machen, ist enorm hoch. Angefangen vom Transpilieren der TypeScript-Sourcen über das Transpilieren von LESS oder SCSS bis hin zum Kopieren von integrierten Modulen und Assets, musste alles selbst übernommen werden. So benötigte man unter Umständen einen guten Tag, um die entsprechenden Build-Tasks zu erstellen, bevor man die erste Zeile Angular entwickeln und ausführen konnte. Kommen dann noch weitere Features, wie Live-Reloading bei TypeScript-Änderungen oder Live-Injection von CSS-Änderungen dazu, durfte man abermals ...

Shortcuts
Cross-Plattform

2 Von Dev bis Prod: Cross-Plattform-Build-Systeme

Denkt man einige Jahre zurück, waren HTML5-Anwendungen ein paar HTML5-Dateien, die mit JavaScript angereichert wurden. Heutzutage sieht diese Welt anders aus. Nicht nur, dass sich teilweise die Programmiersprache von JavaScript zu TypeScript ändert, sondern auch die Mächtigkeit und Komplexität der HTML5-Anwendungen haben sich vervielfacht. Viele Komponenten und Module, Paketierung in Container für native mobile und Desktopanwendungen, Ahead-of-Time Compiling oder Tree Shaking sind hier einige Buzzwords, die das Build-System auf eine harte Probe stellen. Denn es muss all dies verstehen und verarbeiten können.

Shortcut Autorenteam


Im ersten Kapitel dieses shortcuts haben wir uns mit den Grundlagen von Angular vertraut gemacht. Dabei haben wir uns angesehen, welche Konzepte Angular bietet, um moderne Cross-Plattform-Software zu entwickeln. Eine Beispielanwendung auf GitHub [1] hat diese Konzepte im Zusammenspiel gezeigt und dabei eine einfache Master-Detail-Ansicht implementiert. Die Daten werden dabei von einem öffentlichen API abgerufen: SWAPI – dem Star-Wars-API [2]. Ein Angular-Service half uns, die Daten abzufragen und einer Komponente mit einer View bereitzustellen, sodass sie dem Benutzer präsentiert werden konnten. Damit wir das alles im Browser ansehen konnten, haben wir zum Start der Anwendung einen Befehl auf der Kommandozeile ausgeführt: npm start. Mit dem Befehl haben wir auf magische Art und Weise einen Server zur Verfügung gestellt bekommen, der unter http://localhost:4200/ unsere Anwendung hostet. Im ersten Kapitel haben wir allerdings nicht geklärt, welche Magie hier passiert. Daher werden wir uns in diesem Kapitel mit der Magie beschäftigen und schauen, was alles hinter unserer Anwendung werkelt, um sie im Browser anzuzeigen. Zudem werden wir schauen, was sich hinter den Begriffen Ahead-of-Time Compiling (AoT) und Tree Shaking verbirgt, und warum man immer wieder auf die zwei verschiedenen Module-Bundler SystemJS und webpack trifft.Die ersten Schritte mit SystemJSAls 2015 die ersten Alphaversionen von Angular veröffentlicht wurden, gab es einen Stern unter den Module-Bundlern: SystemJS [3]. Mit SystemJS ist es möglich, sowohl unseren Anwendungscode als auch abhängige Module (wie auch Angular selbst) über mehrere Dateien aufzusplitten und dynamisch dann nachzuladen, sobald er benötigt wird. Dies hat den Vorteil, dass der Browser nicht direkt den vollständigen Anwendungscode laden und parsen muss, was natürlich der Startzeit unserer Anwendung zugutekommt. Wie so oft hat jede Medaille zwei Seiten. Der Aufwand, die eigene Anwendung fit für SystemJS zu machen, ist enorm hoch. Angefangen vom Transpilieren der TypeScript-Sourcen über das Transpilieren von LESS oder SCSS bis hin zum Kopieren von integrierten Modulen und Assets, musste alles selbst übernommen werden. So benötigte man unter Umständen einen guten Tag, um die entsprechenden Build-Tasks zu erstellen, bevor man die erste Zeile Angular entwickeln und ausführen konnte. Kommen dann noch weitere Features, wie Live-Reloading bei TypeScript-Änderungen oder Live-Injection von CSS-Änderungen dazu, durfte man abermals ...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang