ElitePartner: Mobile mit AngularJS und REST

ElitePartner

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 1

„Tech Stack – Pants Down”

AngularJS + RESTMarcel Sauer, Head of Software Development, ElitePartnerOliver Ochs (@oochs), Leitung Geschäftsfeld Architektur, HolisticonOliver Zeigermann (@DJCordhose), Entwickler, Autor, Ninja 10.12.2013


ElitePartner

InhaltMobile @ ElitePartner

– Iphone, Android (kurze Vorstellung der App(s))

– m.elitepartner.de

Tech Stack

– Frontend: AngularJS

– Backend: REST(ful) API

– Build Process

– Testing – Unit / e2e / on-device

– CI (Build Prozess)

– Deployment Process (TC, Capistrano, Puppet)

– Logging

Lessons Learned


ElitePartner

MobileMobile @ ElitePartner


ElitePartner

iPhone


ElitePartner

Android


ElitePartner

m.elitepartner.de


ElitePartnerPersönlichkeitstest


ElitePartner

Persönlichkeitstest


ElitePartner



ElitePartner



ElitePartner

HTML enhanced for web apps!

Angular.js


ElitePartner

Angular.js

Client-Side MVC-Framework

Reiches HTML ala Web-Components

2-Wege Bindung von Modell und UI

Erlaubt SPA und Offline-Modus

Grundlage für mobilen Persönlichkeitstest

Komplette Anwendung

inkl. HTML-Templates in Modulen minifizierte JS-Files ~ 75kB


ElitePartner


ElitePartner

REST

Backend in Java und Tomcat

MongoDB für Test-Daten

Endpunkte mit Jersey

Authentisierung über oauth mit Spring-Security

Übertragung im JSON-Format

Typisierung im JavaScript-Client über TypeScript


ElitePartner

Buildprozess

Bild: CC BY-SA by Tony Buser


ElitePartner

Werkzeuge basieren auf Node.js und dem„Node Packaged Modules“ Package Manager „npm“

Node.js


ElitePartner


ElitePartner

Yo generiert das Grundgerüst für eine neue Anwendung, schreibt eine entsprechende Grunt-Konfiguration und trägt nötige Abhänigkeiten für NPM und Bower ein.

Yeoman


ElitePartner

Bower wird für das Dependency-Management verwendet. So müssen keine Scripte von Dritten heruntergeladen und eingecheckt werden.

Bower


ElitePartner

Bower Dependencies


ElitePartner

Grunt wird als Buildsystem zum Testen, für Previews und zum Build verwendet. Es gibt eine Vielzahl von grunt-contributions (PlugIns).

GRUNT


ElitePartner

Verwendete NPMs


ElitePartner

JSHint

Überprüft Best-Practices und unsere Coding Conventions, definiert in “.jshint.rc”.


ElitePartner

UseMin

Baut Gruntfile und kümmert sich um Konkatenierung, Minifizierung (Uglify.js, CSSMin, HTMLMin) und Fingerprinting/Revving.

Bild: Dr. E Brown Enterprises, http://www.xconsoles.com/


ElitePartner

UseMin


ElitePartner

Compass

Sass / Compass für CSS Preprocessing und Spriting.


ElitePartner

Plato


ElitePartnerTesting


ElitePartner

Unit-Tests mit Jasmine

describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); });

});


ElitePartner


ElitePartner

E2E-Tests mit Angular-Scenario


ElitePartner

Karma-Server

Durch einen Karma-Server lassen sich echte Browser fernsteuern.


ElitePartner

Karma-Server


ElitePartner

Karma-Server


ElitePartner


ElitePartner

Coverage


ElitePartner

CI - Teamcity


ElitePartner


ElitePartner

Puppet


ElitePartner

Testumgebung


ElitePartner

CI - Teamcity


ElitePartner

CI - Teamcity


ElitePartner


ElitePartner

Capistrano


ElitePartner

Logging


ElitePartner

Logging


ElitePartner

Logging


ElitePartner

Learnings

JS für Java-EntwicklerTurnaround ZeitenTool-Support (WebStorm, Chrome Dev Tools)HTML5-Support auf Mobile DevicesDesign (responsive / adaptive) & StylingRESTful APICI-Prozess


ElitePartner

Demo

www.elitepartner.de/mobile

ElitePartner


EliteMedianet GmbH Am Sandtorkai 50 20457 Hamburgwww.ElitePartner.de www.ElitePartner.de/Magazin www.ElitePartner.de/Forum www.ElitePartner-Akademie.de

DankeFragenDiskussionen

P.S.: We are hiring ;-)https://www.elitepartner.de/jobs/

Technology

ElitePartner: Mobile mit AngularJS und REST