</TECH NEWS>
NEUESTES VON UNSEREN ENTWICKLERN:

25.01.2019 – von Linus|

Angular – Das Framework hinter der Sparhandy Webshop-Entwicklung (Teil 2)

Im letzten Angular Beitrag haben wir die „Auswahl und Entscheidung“ eines JavaScript Frameworks und unsere Herangehensweisen an das Thema beschrieben. Im Folgenden werden wir beschreiben wie es bei uns mit Angular weiterging.

 Um einen reibungslosen Aufbau der neuen Angular APP zu gewährleisten mussten nicht nur wir IT´ler uns um gewissen Dinge kümmern, sondern auch die SEO und Tracking Kollegen mussten absegnen, dass der Umstieg einzelner Seiten ohne Probleme über die Bühne gehen kann.

SEO-Anmerkungen

Der seit Jahren kontinuierlich gepflegte redaktionelle Content, der zu den guten Rankings beigetragen hat, durfte sich nicht ändern und sollte bei Aufrufen durch den Google Crawler -wie es bisher der Fall war – zur Verfügung stehen.

Unsere aktuelle Struktur der URLs endet mit dem Trailing Slash. Dies ist bei dem Angular Standard nicht vorgesehen und nicht einfach anzuwenden oder umzusetzen. Nach etlichen Gesprächen und einem A/B Test mit einer URL, die keine hohe Relevanz hat, konnten aber auch die SEO Verantwortlichen überzeugt werden.

Aufgrund der beschriebenen nicht ganz einfachen Umstellung gehen wir erstmal Schrittweise an den Umbau der Seite heran und stellen Seite für Seite auf Angular um, sodass Fehler gut analysiert und ausgeschlossen werden können. Eventuelle Verschlechterungen im Ranking fallen dadurch schneller auf und betreffen nicht den gesamten Shop.

Das sind die wichtigsten Tools für unser Angular Projekt

Angular ist im Unterschied zu React keine einfache Bibliothek, sondern ein ganzes Framework. Das bedeutet grundsätzlich, dass Angular uns alle nötigen Tools an die Hand gibt, die wir für das Erstellen einer Website brauchen. Auf der anderen Seite sind damit keine Dateigrößen in der Nähe einer Library möglich. Das Einbinden weiterer Bibliotheken ist möglich, aber nicht zwingend notwendig. Nur über die Version sollte man sich bei Angular einig sein, denn Angular 2 und aufwärts ist nicht rückwärtskompatibel zu Angular.js.

Angular-Einstieg: Was wird benötigt?

Dank Angular CLI ist es sehr einfach ein Angular Projekt aufzusetzen. So benötigt man nur eine Installation von node.js ab Version 6.9 und npm der Version 3 und kann darüber das Command Line Interface laden, das euch Projekte mit allen nötigen Dateien erstellt. Den Server könnt ihr aus dem Projekt heraus mit npm start starten.

Um Angular zu schreiben, benötigt ihr TypeScript. Das Framework ist in dieser Variante in JavaScript geschrieben und wird auch vom Entwicklerteam zur Arbeit mit Angular vorausgesetzt.
TypeScripts Vorteile und Besonderheiten haben wir an anderer Stelle schon genauer besprochen, deswegen soll das hier nicht zu sehr ins Detail gehen. Wichtig zu wissen ist, dass ihr dadurch JavaScript um Typdeklarationen erweitert und so eurem Code mehr Struktur gebt als mit JavaScript allein.

Angular bietet euch selbst zwei sehr gute Tutorials, die euch direkt zum Coden bringen und helfen eine Entwicklungsumgebung zu schaffen. Während ihr im ersten Fall nur ein schnelles „Hello World“ erstellt, bietet euch die Tour of Heroes  einen Überblick über die meisten Funktionen des Frameworks und zwingt euch gleichzeitig auch sehr gut dazu, die Übersicht über ein immer größeres Projekt zu behalten.



WEITERE SPANNENDE BEITRÄGE



Unternehmen Marken Team Presse Karriere Tech-Blog SH Händler-Shop