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

1. ElitePartner
„Tech Stack – Pants Down”
AngularJS + REST
Marcel Sauer, Head of Software Development, ElitePartner
Oliver Ochs (@oochs), Leitung Geschäftsfeld Architektur, Holisticon
Oliver Zeigermann (@DJCordhose), Entwickler, Autor, Ninja
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
10.12.2013
1

2. ElitePartner
Inhalt
Mobile @ 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)
2

3. ElitePartner
Mobile @ ElitePartner
Mobile
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
3

4. ElitePartner
iPhone
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
4

5. ElitePartner
Android
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
5

6. ElitePartner
m.elitepartner.de
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
6

7. ElitePartner
Persönlichkeitstest
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
7

8. ElitePartner
Persönlichkeitstest
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
8

9. ElitePartner
Persönlichkeitstest
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
9

10. ElitePartner
Persönlichkeitstest
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
10

11. ElitePartner
Angular.js
HTML enhanced for web apps!
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
11

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)
12

13. ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
13

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)
14

15. ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
15

16. Buildprozess
Bild: CC BY-SA by Tony Buser

17. ElitePartner
Node.js
Werkzeuge basieren auf Node.js und dem
„Node Packaged Modules“ Package Manager „npm“
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
17

18. ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
18

19. ElitePartner
Yeoman
Yo generiert das
Grundgerüst für eine
neue Anwendung,
schreibt eine
entsprechende GruntKonfiguration und trägt
nötige Abhänigkeiten für
NPM und Bower ein.
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
19

20. ElitePartner
Bower
Bower wird für das
Dependency-Management
verwendet. So müssen keine
Scripte von Dritten
heruntergeladen und
eingecheckt werden.
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
20

21. ElitePartner
Bower Dependencies
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
21

22. ElitePartner
GRUNT
Grunt wird als Buildsystem zum
Testen, für Previews und zum
Build verwendet. Es gibt eine
Vielzahl von grunt-contributions
(PlugIns).
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
22

23. ElitePartner
Verwendete NPMs
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
23

24. ElitePartner
JSHint
Überprüft Best-Practices und unsere Coding
Conventions, definiert in “.jshint.rc”.
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
24

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)
25

26. ElitePartner
UseMin
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
26

27. ElitePartner
Compass
Sass / Compass für CSS
Preprocessing und Spriting.
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
27

28. ElitePartner
Plato
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
28

29. ElitePartner
Testing
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
29

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)
30

31. ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
31

32. ElitePartner
E2E-Tests mit Angular-Scenario
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
32

33. ElitePartner
Karma-Server
Durch einen Karma-Server lassen
sich echte Browser fernsteuern.
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
33

34. ElitePartner
Karma-Server
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
34

35. ElitePartner
Karma-Server
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
35

36. ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
36

37. ElitePartner
Coverage
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
37

38. ElitePartner
CI - Teamcity
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
38

39. ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
39

40. ElitePartner
Puppet
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
40

41. ElitePartner
Testumgebung
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
41

42. ElitePartner
CI - Teamcity
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
42

43. ElitePartner
CI - Teamcity
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
43

44. ElitePartner
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
44

45. ElitePartner
Capistrano
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
45

46. ElitePartner
Logging
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
46

47. ElitePartner
Logging
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
47

48. ElitePartner
Logging
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
48

49. ElitePartner
Learnings
JS für Java-Entwickler
Turnaround Zeiten
Tool-Support (WebStorm, Chrome Dev Tools)
HTML5-Support auf Mobile Devices
Design (responsive / adaptive) & Styling
RESTful API
CI-Prozess
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
49

50. ElitePartner
Demo
www.elitepartner.de/mobile
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
50

51. ElitePartner
Danke
Fragen
Diskussionen
P.S.: We are hiring ;-)
https://www.elitepartner.de/jobs/
EliteMedianet GmbH  Am Sandtorkai 50  20457 Hamburg
www.ElitePartner.de  www.ElitePartner.de/Magazin  www.ElitePartner.de/Forum  www.ElitePartner-Akademie.de
ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)
51