View
922
Download
4
Category
Tags:
Preview:
DESCRIPTION
Folien zur Veranstaltung "ElitePartner: Mobile mit AngularJS und REST" vom 10.12.2013. http://youtu.be/kkIcWLJtGSE Wir stellen hier unsere neue mobile Webseite unter dem Motto "Tech Stack - pants down" vor. Inhalte sind unter anderem (Achtung Buzzword Bingo): - AngularJS (JavaScript) - REST(ful) API - Logstash + Graylog2 - Build Infrastruktur - CI / Testing Prozess (incl. "On-Device-Testing") - Lessons learned
Citation preview
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 ist die beliebteste Partnervermittlung (DISQ 06/2012) 2
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 ist die beliebteste Partnervermittlung (DISQ 06/2012) 3
ElitePartner
MobileMobile @ ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 4
ElitePartner
iPhone
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 5
ElitePartner
Android
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 6
ElitePartner
m.elitepartner.de
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 7
ElitePartnerPersönlichkeitstest
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 8
ElitePartner
Persönlichkeitstest
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 9
ElitePartner
Persönlichkeitstest
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 10
ElitePartner
Persönlichkeitstest
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 11
ElitePartner
HTML enhanced for web apps!
Angular.js
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 12
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 ist die beliebteste Partnervermittlung (DISQ 06/2012) 13
ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 14
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 ist die beliebteste Partnervermittlung (DISQ 06/2012) 15
ElitePartner
Buildprozess
Bild: CC BY-SA by Tony Buser
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 17
ElitePartner
Werkzeuge basieren auf Node.js und dem„Node Packaged Modules“ Package Manager „npm“
Node.js
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 18
ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 19
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 ist die beliebteste Partnervermittlung (DISQ 06/2012) 20
ElitePartner
Bower wird für das Dependency-Management verwendet. So müssen keine Scripte von Dritten heruntergeladen und eingecheckt werden.
Bower
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 21
ElitePartner
Bower Dependencies
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 22
ElitePartner
Grunt wird als Buildsystem zum Testen, für Previews und zum Build verwendet. Es gibt eine Vielzahl von grunt-contributions (PlugIns).
GRUNT
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 23
ElitePartner
Verwendete NPMs
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 24
ElitePartner
JSHint
Überprüft Best-Practices und unsere Coding Conventions, definiert in “.jshint.rc”.
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 25
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 ist die beliebteste Partnervermittlung (DISQ 06/2012) 26
ElitePartner
UseMin
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 27
ElitePartner
Compass
Sass / Compass für CSS Preprocessing und Spriting.
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 28
ElitePartner
Plato
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 29
ElitePartnerTesting
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 30
ElitePartner
Unit-Tests mit Jasmine
describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); });
});
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 31
ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 32
ElitePartner
E2E-Tests mit Angular-Scenario
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 33
ElitePartner
Karma-Server
Durch einen Karma-Server lassen sich echte Browser fernsteuern.
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 34
ElitePartner
Karma-Server
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 35
ElitePartner
Karma-Server
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 36
ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 37
ElitePartner
Coverage
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 38
ElitePartner
CI - Teamcity
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 39
ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 40
ElitePartner
Puppet
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 41
ElitePartner
Testumgebung
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 42
ElitePartner
CI - Teamcity
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 43
ElitePartner
CI - Teamcity
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 44
ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 45
ElitePartner
Capistrano
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 46
ElitePartner
Logging
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 47
ElitePartner
Logging
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 48
ElitePartner
Logging
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 49
ElitePartner
Learnings
JS für Java-EntwicklerTurnaround ZeitenTool-Support (WebStorm, Chrome Dev Tools)HTML5-Support auf Mobile DevicesDesign (responsive / adaptive) & StylingRESTful APICI-Prozess
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 50
ElitePartner
Demo
www.elitepartner.de/mobile
ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 51
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/
Recommended