CCE Cokestrap


Projektkategorie(n): , ,

Beschreibung

Cokestrap ist ein Framework für das erstellen von Webanwendungen für die CCE AG (Coca Cola Erfrischungsgetränke AG), das ich in meiner Zeit bei der move:elevator GmbH mit Herz, Seele und meinem Team erarbeitet habe. Basierend auf bestehenden und eigenen Lösungen wuchs es schnell zu dem „Style Framework 2.0“ im Coke-Kontext. Basis für das Frontend verschiedener Projekte wie CCE Customer Activation und CCE Login Instanz, ermöglichte es das schnelle erstellen von verschiedensten Ansichten.

Durch eine Bibliothek an Komponenten, Hilfsklassen, Icons und mehr, kombiniert mit umfangreichen Code-Beispielen in der Dokumentation, wurde das erstellen von Frontends deutlich beschleunigt und vereinfacht.

Ebenfalls steht für Entwickler eine umfangreiche JavaScript API zur Verfügung, die den JavaScript Service Handler nutzt, um nur die aktuell in einem View genutzten Scripte zu laden.

Komponentseite des CCE Cokestrap Frameworks

Umsetzung

Als Basis von Cokestrap diente eine erweiterte Variante von Bootstrap 3 mit Sass. Die Bootstrap Version haben wir umstrukturiert, den Support für ältere Browser entfernt und mit unseren eigenen Komponenten erweitert. Das enthaltene JavaScript wurde auf ES2015 umgeschrieben und als Service per JavaScript Service Handler geladen.

Genutzt wurde BrowserifyBabel für ES2015, Karma zum ausführen der Tests geschrieben in Mocha mit Chai und NPM als Build Tool. Eine wichtige Erfahrung aus dem Projekt war der Nutzen von NPM als Build Tool. Dies hatte den Vorteil von deutlich weniger Abhängigkeiten für die einzelnen Pakete wie ESLint und Babel, allerdings war auch ein Rückgang an Performance zu spüren wenn es sehr viele und umfangreiche Tasks wurden (aktuell ist eine Art „NPM Scripts Proxy“ in Entwicklung um diesen Nachteil zu entfernen, dazu später mehr 😛 ).

Zusammenfassung

Abschließend kann ich nur sagen das es echt ein tolles Projekt war, aus dem ich viel Erfahrung gezogen habe für ES2015, Build-Prozesse mit NPM und Performance-Optimierungen für mobile Anwendungen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.