elitepartner: mobile mit angularjs und rest
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 learnedTRANSCRIPT
![Page 1: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/1.jpg)
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
![Page 2: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/2.jpg)
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
![Page 3: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/3.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 3
ElitePartner
MobileMobile @ ElitePartner
![Page 4: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/4.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 4
ElitePartner
iPhone
![Page 5: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/5.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 5
ElitePartner
Android
![Page 6: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/6.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 6
ElitePartner
m.elitepartner.de
![Page 7: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/7.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 7
ElitePartnerPersönlichkeitstest
![Page 8: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/8.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 8
ElitePartner
Persönlichkeitstest
![Page 9: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/9.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 9
ElitePartner
Persönlichkeitstest
![Page 10: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/10.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 10
ElitePartner
Persönlichkeitstest
![Page 11: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/11.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 11
ElitePartner
HTML enhanced for web apps!
Angular.js
![Page 12: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/12.jpg)
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
![Page 13: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/13.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 13
ElitePartner
![Page 14: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/14.jpg)
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
![Page 15: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/15.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 15
ElitePartner
![Page 16: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/16.jpg)
Buildprozess
Bild: CC BY-SA by Tony Buser
![Page 17: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/17.jpg)
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
![Page 18: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/18.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 18
ElitePartner
![Page 19: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/19.jpg)
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
![Page 20: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/20.jpg)
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
![Page 21: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/21.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 21
ElitePartner
Bower Dependencies
![Page 22: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/22.jpg)
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
![Page 23: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/23.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 23
ElitePartner
Verwendete NPMs
![Page 24: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/24.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 24
ElitePartner
JSHint
Überprüft Best-Practices und unsere Coding Conventions, definiert in “.jshint.rc”.
![Page 25: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/25.jpg)
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/
![Page 26: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/26.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 26
ElitePartner
UseMin
![Page 27: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/27.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 27
ElitePartner
Compass
Sass / Compass für CSS Preprocessing und Spriting.
![Page 28: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/28.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 28
ElitePartner
Plato
![Page 29: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/29.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 29
ElitePartnerTesting
![Page 30: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/30.jpg)
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(); });
});
![Page 31: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/31.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 31
ElitePartner
![Page 32: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/32.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 32
ElitePartner
E2E-Tests mit Angular-Scenario
![Page 33: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/33.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 33
ElitePartner
Karma-Server
Durch einen Karma-Server lassen sich echte Browser fernsteuern.
![Page 34: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/34.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 34
ElitePartner
Karma-Server
![Page 35: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/35.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 35
ElitePartner
Karma-Server
![Page 36: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/36.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 36
ElitePartner
![Page 37: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/37.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 37
ElitePartner
Coverage
![Page 38: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/38.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 38
ElitePartner
CI - Teamcity
![Page 39: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/39.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 39
ElitePartner
![Page 40: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/40.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 40
ElitePartner
Puppet
![Page 41: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/41.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 41
ElitePartner
Testumgebung
![Page 42: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/42.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 42
ElitePartner
CI - Teamcity
![Page 43: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/43.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 43
ElitePartner
CI - Teamcity
![Page 44: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/44.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 44
ElitePartner
![Page 45: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/45.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 45
ElitePartner
Capistrano
![Page 46: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/46.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 46
ElitePartner
Logging
![Page 47: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/47.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 47
ElitePartner
Logging
![Page 48: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/48.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 48
ElitePartner
Logging
![Page 49: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/49.jpg)
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
![Page 50: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/50.jpg)
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 50
ElitePartner
Demo
www.elitepartner.de/mobile
![Page 51: ElitePartner: Mobile mit AngularJS und REST](https://reader034.vdocument.in/reader034/viewer/2022042816/5598a0951a28aba40a8b4616/html5/thumbnails/51.jpg)
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/