</TECH NEWS>
NEUESTES VON UNSEREN ENTWICKLERN:

07.06.2018 – von Eike Eschmann|

Angular – Das Framework hinter der Sparhandy Webshop-Entwicklung

Wer darüber nachdenkt eine benutzerfreundliche Web-Applikation zu entwickeln oder eine bereits bestehende Applikation weiter entwickeln möchte, der kommt an JavaScript nicht mehr vorbei.Besonders zwei sogenannten Frameworks verdanken wir das die Tatsache, dass Webseiten heute schneller, interaktiver und wesentlich benutzerfreundlicher sind. Die Rede ist von Angular und React.

Festhalten an der Eigenentwicklung oder Webpack? 
So standen auch wir, die Entwickler des B2C Shop www.sparhandy.de, vor der Entscheidung ob wir bei unserer Eigenentwicklung bleiben, welche mittels Bower die von uns benutzten Pakete in unser Projekt geladen wurden. Ohne eine große Umbau Maßnahme wäre es uns nicht möglich gewesen die von require.js nachgeladen AMD (Asynchronous module definition) Module so umzubauen das wir nicht mehr von Bower abhängig gewesen wären. Ein weiteres Problem war der Wasserfall in dem die Scripte geladen wurden. Wir entschieden uns, da ein Umbau unumgänglich war, für den Einsatz von Webpack.

Die Antwort: Nutzt ein Framework!
Aber das schien noch nicht die Lösung zu sein nach der wir strebten, es fühlte sich noch nicht richtig an. Nun arbeiten wir bei SH Telekommunikation Deutschland GmbH agil und dies spiegelt sich natürlich in der Entwicklung wieder. Unsere Sprints sollen effizient sein und wir wollen schnell auf Probleme oder Aufgaben reagieren können. Neue Mitarbeiter, vielleicht demnächst du, sollen sich direkt im modularen Aufbau zurecht finden. All diese Anforderungen die wir für uns definierten beantworteten die Fragen, die wir uns stellten mit: Nutzt ein Framework!

Nach ein paar Meetings überzeugte Angular uns mehr und mehr. Die JavascriptDays in München, auf die einige Entwickler von uns fuhren und für drei Tage an Workshops und Gesprächen rund um das Thema Frontend-Techniken (JS/CSS/HTML/ und viel mehr) teilnahmen, festigte den gefassten Entschluss und die ersten Programmier-Sessions mit dem Angular Framework starteten in House.

Der Shop www.sparhandy.de lebt von seiner Conversion-Rate, das sollte klar sein. Daher ist es von großer Wichtigkeit das die Geschwindigkeit mit schnellen Ladezeiten dazu beitragen dem User ein Einkaufserlebnis zu bescheren. Kein lästiges warten, keine Performance Schwankungen sondern Sprünge. Module nur zu laden wenn sie tatsächlich benötigt werden um Mobile Verbindungen nicht unnötig zu belasten. Wir können hier von einem echten Game Changer sprechen. Kurze Ladezeiten spiegeln sich in den Verkaufszahlen wieder. Begeistert hat auch die Skalierbarkeit durch ECMAScript 6 Module, Typescript und natürlich das Lazy Loading.

Die Vorteile von Angular
Durch die objektorientierte Programmierung war es uns ja bereits möglich wiederverwendbare Module mittels Javascript zu erstellen. Hier ist aber wie bereits angesprochen die Frage gewesen, weiter mit der Eigenentwicklung und ggf. auf Features und Know How verzichten. Der Gebrauch von den Funktionen der neuesten Javascript Version (ECMAScript 6) ist ein weiterer Vorteil von Angular den man nicht un diskutiert lassen kann.

Mit Typescript wird dem Entwickler ein gutes und mächtiges Tool zu Verfügung gestellt das es möglich macht schneller Code zu schreiben und einfacher Fehler zu finden. Dank Angular muss nun nicht mehr über Umwege ein Lazy Loading eingebunden werden, dies wird on Board mit geliefert und sorgt dafür das nur Code geladen wird der auch vom User benötigt wird, so werden auch große Projekte sehr schnell geladen. Aktuell setzen wir Symfony als Backend-Sprache ein und streben ein nahezu 100% Testabdeckung des von uns geschrieben Code an. Da liegt es nahe auch den Code für die Frontend Seite testen zu wollen. Auch hier spielt uns Angular in die Karten und dem Entwickler die Möglichkeit, leicht für seinen geschriebenen Code automatisierte Tests zu erstellen. Und wir wissen, je einfacher das Testen ist, desto öfters wird dies auch gemacht.

Das Fazit: Darum nutzen wir Angular
Unser Fazit ist das Angular das technisch umfassendste und architektonisch durchdachteste Javascript Framework, das uns Webentwicklern derzeit zur Verfügung steht ist. Es gibt uns einen neuen State-of-the- Art und dieser wird sich in den nächsten Monaten in unseren Arbeit und unserem Alltag wiederspiegeln.
Wir freuen uns darauf.

Die Evaluations-Kriterien

Die folgenden Evaluations-Kriterien stellen einen Utility-Tree nach der Architecture Tradeoff Analysis Method (ATAM) dar.

1. Performance
a. Data Latency / Time To First Byte
b. Transaction Throughput
c. Scaling Dynamicity

2. Modifiability
a. New Features:
i. Frontend-Components
ii. Backend-Services
b. Frontend-Workflow-Änderungen
c. Support verschiedener Verticals

3. Availability
a. Hardware Failures
b. Software Failures
c. Security

4. Team Support
a. Internal Knowledge
b. Hiring
c. Fun to work with
d. Lernkurve

5. Operations
a. Setup
b. Observability
c. Known Stability
d. Team Knowledge
e. Aufsetzung des Build- und Deployment-Prozesses
f. User Experience

Die einzelnen Kriterien wurden auf einer Skala von 5 (wichtig) bis 1 (unwichtig) eingeschätzt.



WEITERE SPANNENDE BEITRÄGE



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