ElitePartner

„Tech Stack – Pants Down”

AngularJS + REST
Marcel Sauer, Head of Software Development, ElitePartner
Oliver ...
ElitePartner

Inhalt
Mobile @ ElitePartner
–

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

–

m.elitepartner.de

Tech S...
ElitePartner

Mobile @ ElitePartner
Mobile

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

3
ElitePartner

iPhone

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

4
ElitePartner

Android

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

5
ElitePartner

m.elitepartner.de

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

6
ElitePartner

Persönlichkeitstest

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

7
ElitePartner

Persö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

Angular.js
HTML enhanced for web apps!

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

...
ElitePartner

Angular.js


Client-Side MVC-Framework



Reiches HTML ala Web-Components



2-Wege Bindung von Modell un...
ElitePartner

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

13
ElitePartner

REST


Backend in Java und Tomcat



MongoDB für Test-Daten



Endpunkte mit Jersey



Authentisierung ü...
ElitePartner

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

15
Buildprozess

Bild: CC BY-SA by Tony Buser
ElitePartner

Node.js

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

ElitePartner ...
ElitePartner

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

18
ElitePartner

Yeoman
Yo generiert das
Grundgerüst für eine
neue Anwendung,
schreibt eine
entsprechende GruntKonfiguration ...
ElitePartner

Bower
Bower wird für das
Dependency-Management
verwendet. So müssen keine
Scripte von Dritten
heruntergelade...
ElitePartner

Bower Dependencies

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

21
ElitePartner

GRUNT
Grunt wird als Buildsystem zum
Testen, für Previews und zum
Build verwendet. Es gibt eine
Vielzahl von...
ElitePartner

Verwendete NPMs

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

23
ElitePartner

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

ElitePartner ist ...
ElitePartner

UseMin
Baut Gruntfile und kümmert sich um
Konkatenierung, Minifizierung
(Uglify.js, CSSMin, HTMLMin) und
Fin...
ElitePartner

UseMin

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

26
ElitePartner

Compass
Sass / Compass für CSS
Preprocessing und Spriting.

ElitePartner ist die beliebteste Partnervermittl...
ElitePartner

Plato

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

28
ElitePartner

Testing

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

29
ElitePartner

Unit-Tests mit Jasmine

describe("Jasmine", function() {
it("makes testing JavaScript awesome!", function() ...
ElitePartner

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

31
ElitePartner

E2E-Tests mit Angular-Scenario

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

32
ElitePartner

Karma-Server
Durch einen Karma-Server lassen
sich echte Browser fernsteuern.

ElitePartner ist die beliebtes...
ElitePartner

Karma-Server

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

34
ElitePartner

Karma-Server

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

35
ElitePartner

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

36
ElitePartner

Coverage

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

37
ElitePartner

CI - Teamcity

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

38
ElitePartner

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

39
ElitePartner

Puppet

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

40
ElitePartner

Testumgebung

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

41
ElitePartner

CI - Teamcity

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

42
ElitePartner

CI - Teamcity

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

43
ElitePartner

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

44
ElitePartner

Capistrano

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

45
ElitePartner

Logging

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

Learnings
JS für Java-Entwickler
Turnaround Zeiten
Tool-Support (WebStorm, Chrome Dev Tools)
HTML5-Support a...
ElitePartner

Demo

www.elitepartner.de/mobile

ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012)

50
ElitePartner

Danke
Fragen
Diskussionen
P.S.: We are hiring ;-)
https://www.elitepartner.de/jobs/
EliteMedianet GmbH  Am ...
Nächste SlideShare
Wird geladen in …5
×

ElitePartner: Mobile mit AngularJS und REST

1.574 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.574
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
66
Aktionen
Geteilt
0
Downloads
17
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

ElitePartner: Mobile mit AngularJS und REST

  1. 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. 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. 3. ElitePartner Mobile @ ElitePartner Mobile ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 3
  4. 4. ElitePartner iPhone ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 4
  5. 5. ElitePartner Android ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 5
  6. 6. ElitePartner m.elitepartner.de ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 6
  7. 7. ElitePartner Persönlichkeitstest ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 7
  8. 8. ElitePartner Persönlichkeitstest ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 8
  9. 9. ElitePartner Persönlichkeitstest ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 9
  10. 10. ElitePartner Persönlichkeitstest ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 10
  11. 11. ElitePartner Angular.js HTML enhanced for web apps! ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 11
  12. 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. 13. ElitePartner ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 13
  14. 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. 15. ElitePartner ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 15
  16. 16. Buildprozess Bild: CC BY-SA by Tony Buser
  17. 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. 18. ElitePartner ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 18
  19. 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. 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. 21. ElitePartner Bower Dependencies ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 21
  22. 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. 23. ElitePartner Verwendete NPMs ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 23
  24. 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. 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. 26. ElitePartner UseMin ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 26
  27. 27. ElitePartner Compass Sass / Compass für CSS Preprocessing und Spriting. ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 27
  28. 28. ElitePartner Plato ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 28
  29. 29. ElitePartner Testing ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 29
  30. 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. 31. ElitePartner ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 31
  32. 32. ElitePartner E2E-Tests mit Angular-Scenario ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 32
  33. 33. ElitePartner Karma-Server Durch einen Karma-Server lassen sich echte Browser fernsteuern. ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 33
  34. 34. ElitePartner Karma-Server ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 34
  35. 35. ElitePartner Karma-Server ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 35
  36. 36. ElitePartner ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 36
  37. 37. ElitePartner Coverage ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 37
  38. 38. ElitePartner CI - Teamcity ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 38
  39. 39. ElitePartner ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 39
  40. 40. ElitePartner Puppet ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 40
  41. 41. ElitePartner Testumgebung ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 41
  42. 42. ElitePartner CI - Teamcity ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 42
  43. 43. ElitePartner CI - Teamcity ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 43
  44. 44. ElitePartner ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 44
  45. 45. ElitePartner Capistrano ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 45
  46. 46. ElitePartner Logging ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 46
  47. 47. ElitePartner Logging ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 47
  48. 48. ElitePartner Logging ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 48
  49. 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. 50. ElitePartner Demo www.elitepartner.de/mobile ElitePartner ist die beliebteste Partnervermittlung (DISQ 06/2012) 50
  51. 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

×