1. Backbone.js
Sebastian Springer I 16.08.2012
© Mayflower GmbH 2010

2. HELLO
MY NAME IS
@basti_springer

3. Heute:
Struktur für Javascript
Mayflower GmbH I 3

4. Backbone.js
Mayflower GmbH I 4

5. Backbone.js
Backbone.js gives structure to web applications by
providing models with key-value binding and custom
events, collections with a rich API of enumerable
functions, views with declarative event handling, and
connects it all to your existing API over a RESTful JSON
interface.
Mayflower GmbH I 5

6. Abhängigkeiten
Mayflower GmbH I 6

7. Abhängigkeiten
Clientside MVC Library
Mayflower GmbH I 7

8. Abhängigkeiten
DOM und Ajax
Mayflower GmbH I 8

9. Abhängigkeiten
Utilities
Mayflower GmbH I 9

10. Abhängigkeiten
Module Loader
Mayflower GmbH I 10

11. Der Einstieg
Mayflower GmbH I 11

12. Der Einstieg
Mayflower GmbH I 12

13. Der Einstieg
Mayflower GmbH I 13

14. Der Einstieg
Require.js lädt die Anwendung
Mayflower GmbH I 14

15. Die Konfiguration
Mayflower GmbH I 15

16. Die Konfiguration
Mayflower GmbH I 16

17. Die Konfiguration
Mayflower GmbH I 17

18. Die Konfiguration
Lädt die „main“ Datei
Mayflower GmbH I 18

19. Die „main“ Datei
Mayflower GmbH I 19

20. Die „main“ Datei
Mayflower GmbH I 20

21. Die „main“ Datei
Mayflower GmbH I 21

22. Der Router
Mayflower GmbH I 22

23. Der Router
Mayflower GmbH I 23

24. Der Router
Mayflower GmbH I 24

25. Der Router
Routendef nition
i
Methodenmapping
Mayflower GmbH I 25

26. Der Router
I Standard Route
'user': 'user' // #user
user: function () { …
I Mit Parametern
'user/:name': 'user' // #user/lala
user: function (name) { …
I Mit Parametern 2.0
'user/:name/p:page': 'user' // #user/lala/p2
user: function (name, page) { ...
Mayflower GmbH I 26

27. Der Controller
Mayflower GmbH I 27

28. Der Controller
Router
Mayflower GmbH I 28

29. Der Controller
Mayflower GmbH I 29

30. Der Controller
Mayflower GmbH I 30

31. Der Controller
Mayflower GmbH I 31

32. Der Controller
Mayflower GmbH I 32

33. Das Model
Mayflower GmbH I 33

34. Das Model
Controller
Mayflower GmbH I 34

35. Das Model
Mayflower GmbH I 35

36. Das Model
Mayflower GmbH I 36

37. Das Model
Mayflower GmbH I 37

38. Das Model
I Read → GET
model.fetch()
I Create → POST // this.id == null
model.save()
I Update → PUT
model.save() // this.id != null
I Delete → DELETE
model.destroy()
Mayflower GmbH I 38

39. Die View
Mayflower GmbH I 39

40. Die View
Controller
Mayflower GmbH I 40

41. Die View
Mayflower GmbH I 41

42. Die View
Mayflower GmbH I 42

43. Die View
Mayflower GmbH I 43

44. Die View
Mayflower GmbH I 44

45. Die View
Mayflower GmbH I 45

46. Die View
Mayflower GmbH I 46

47. Die View
Mayflower GmbH I 47

48. Die Collection
Mayflower GmbH I 48

49. Die Collection
Controller
Mayflower GmbH I 49

50. Die Collection
Mayflower GmbH I 50

51. Die Collection
Mayflower GmbH I 51

52. Die Collection
Mayflower GmbH I 52

53. Die Collection
I Get → auslesen
I Create → neues Model erstellen
I Add → bestehendes Model einfügen
I Remove → Model entfernen
I Sort → laut comperator sortieren
I Filter → customized Suche
Mayflower GmbH I 53

54. The End
Mayflower GmbH I 54

55. Vielen Dank für Ihre
Aufmerksamkeit!
Kontakt Sebastian Springer
@basti_springer
sebastian.springer@mayflower.de
+49 89 242054 1120
Mayflower GmbH
Mannhardtstrasse 6
17. August 2012
80538 München Mayflower GmbH 55