© best_vector/Shutterstock.com
Teil 2: Von Dev bis Prod: Cross-Plattform-Build-Systeme

Das Angular CLI in Aktion


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 Desktop­anwendungen, 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.

Artikelserie

Teil 1: Moderne Cross-Plattform-Applikationen mit Angular

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

Teil 3: Touch it: Native Application Packaging mit Apache Cordova

Teil 4: .exe, .app und Co.: Mit Electron werden Desktops froh

Teil 5: Apps ohne App Store? Cutting Edge mit Progressive Web-Apps

Im ersten Teil dieser Serie 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 Artikel haben wir allerdings nicht geklärt, welche Magie hier passiert. Daher werden wir uns in diesem Artikel 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 SystemJS

Als 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 Anwendungscod...

Neugierig geworden?

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