Sebastian Springer@basti_springerWednesday, June 26, 13
WER BIN ICH?• Sebastian Springer• https://github.com/sspringer82• @basti_springer• Teamlead @ MayflowerWednesday, June 26, 13
THEMEN• require.js• Bootstrap - das vonTwitter...• Backbone.js• Router• Model• View• CollectionWednesday, June 26, 13
DIE AUFGABE• Filmdatenbank• CRUD• Single Page Appliakation• AMD Modulloader• LayoutWednesday, June 26, 13
Wednesday, June 26, 13
Wednesday, June 26, 13
AUFBAUWednesday, June 26, 13
AUFBAUrequire.jsbackbone.js BootstrapjQuerylodashWednesday, June 26, 13
public/!"" img!"" js#   !"" app#   #   !"" app.js#   #   !"" config.js#   #   !"" main.js#   #   !"" router.js#   #   !"" ...
INDEX.HTMLDer EinstiegWednesday, June 26, 13
<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/style/bootstrap.<link rel="stylesheet" type="text...
<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/style/bootstrap.<link rel="stylesheet" type="text...
<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/style/bootstrap.<link rel="stylesheet" type="text...
MODULLOADERWednesday, June 26, 13
MODULLOADER• Keine <script>-Tags zum Laden• Abhängigkeiten auflösen• CommonJS ModulesWednesday, June 26, 13
MODULLOADERdefine(“name”,[deps...],function (deps) {...return x;});Wednesday, June 26, 13
APP/CONFIG.JSApplikationskonfigurationWednesday, June 26, 13
require.config({"deps": ["main"],"paths": {"jquery": "../lib/jquery-1.9.1.min",...},"shim": {"backbone": {"deps": ["jquery...
APP/MAIN.JSBootstrappingWednesday, June 26, 13
require(["app", "router"], function (app, Router) {app.router = new Router();Backbone.history.start({ pushState: true, roo...
APP/APP.JSApplication NamespaceWednesday, June 26, 13
define(["backbone", "bootstrap"], function() {return {root: "/"};});Wednesday, June 26, 13
ROUTERWednesday, June 26, 13
ROUTER• Navigation innerhalb der Applikation• Bookmark-Unterstützung• Back Button-Unterstützung• Voraussetzung: Backbone.h...
APP/ROUTER.JSDer RouterWednesday, June 26, 13
define(["backbone", ...],function(Backbone, ...) {var Router = Backbone.Router.extend({routes: {"": "index","new": "addMov...
MODELWednesday, June 26, 13
MODEL• Enthalten die Daten der Applikation• Enthalten die Businesslogik der Applikation• Validierung, Konvertierung, Zugri...
MODEL• get()• set()• save()• fetch()• destroy()• ...• id• cid• urlRootWednesday, June 26, 13
APP/MODELS/MOVIE.JSDas ModelWednesday, June 26, 13
define("models/movie", [backbone],function (Backbone) {"use strict";return Backbone.Model.extend({idAttribute: "id",urlRoo...
COLLECTIONWednesday, June 26, 13
COLLECTION• Sammlung von Models• Hilfsmethoden für z.B. Suche, SortierungWednesday, June 26, 13
COLLECTION• add()• remove()• reset()• fetch()• get()• model• modelsWednesday, June 26, 13
APP/MODELS/MOVIESDie CollectionWednesday, June 26, 13
define([backbone, models/movie],function (Backbone, Movie) {return Backbone.Collection.extend({model: Movie});});Wednesday...
VIEWWednesday, June 26, 13
VIEW• Darstellung der Daten der Models• Displaylogik undTemplates• Templating mit UnderscoreTemplate• HTMLTemplate Einbind...
VIEW• render() • events• el• tagName• className• idWednesday, June 26, 13
APP/VIEWS/MOVIE.JSDieViewWednesday, June 26, 13
define([text!views/movie.html, app],function (template, app) {return Backbone.View.extend({tagName: tr,events: {"click .ic...
APP/VIEWS/MOVIE.HTMLDasTemplateWednesday, June 26, 13
<td><%= name %></td><td><%= year %></td><td><%= genre %></td><td class="rating"><% if (rating >= 1) { %><i class="icon-sta...
READWednesday, June 26, 13
READ• Collection initialisieren - reset()• Models mitViews verknüpfen• CollectionTemplate• Models rendernWednesday, June 2...
CREATEWednesday, June 26, 13
CREATE• NeueView &Template• Neues Model erstellen• Model mitView verbinden• POST Anfrage an den Server• In die Collection ...
UPDATEWednesday, June 26, 13
UPDATE• CREATEView verwenden• Daten per PUT an den Server senden• Anzeige aktualisierenWednesday, June 26, 13
DELETEWednesday, June 26, 13
DELETE• Daten per DELETE-Anfrage löschen• Knoten aus dem DOM entfernenWednesday, June 26, 13
UND WIE GEHT ES WEITER?Wednesday, June 26, 13
UND WIE GEHT ES WEITER?• Tests (Jasmine, Karma)• Unittests• E2ETests• Build (r.js)• Minifying• CombiningWednesday, June 26...
FRAGEN?Wednesday, June 26, 13
KONTAKTSebastian Springersebastian.springer@mayflower.deMayflower GmbHMannhardtstr. 680538 MünchenDeutschland@basti_spring...
Upcoming SlideShare
Loading in …5
×

Webapplikationen mit Backbone.js

1,036 views

Published on

Published in: Technology
2 Comments
1 Like
Statistics
Notes
  • Max - hier gibts mehr Infos zu Require: http://requirejs.org/. Wenn du eine Applikation baust, willst du die modularisieren. Wenn du module hast, willst du Abhängigkeiten sauber aufgelöst haben und dich nicht selbst drum kümmern müssen. Das ist z.B. ein Vorteil eines Modulloaders... Ansonsten: komm einfach das nächste Mal vorbei ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Slides sind super cool.
    Backbone alleine habe ich schon sehr erfolgreich angewenet. Finde ich auch richtig geil. Gerade das Event-System funktioniert völlig unkompliziert.
    Was mir aber jetzt noch nicht sagt ist dieser Modulloader, wo du den Code in diese define(); - Sache wrappst, gehört der zum Konzept von Require.js?
    Mir fehlt natürlich der Ton dazu ;-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,036
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
27
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Webapplikationen mit Backbone.js

  1. 1. Sebastian Springer@basti_springerWednesday, June 26, 13
  2. 2. WER BIN ICH?• Sebastian Springer• https://github.com/sspringer82• @basti_springer• Teamlead @ MayflowerWednesday, June 26, 13
  3. 3. THEMEN• require.js• Bootstrap - das vonTwitter...• Backbone.js• Router• Model• View• CollectionWednesday, June 26, 13
  4. 4. DIE AUFGABE• Filmdatenbank• CRUD• Single Page Appliakation• AMD Modulloader• LayoutWednesday, June 26, 13
  5. 5. Wednesday, June 26, 13
  6. 6. Wednesday, June 26, 13
  7. 7. AUFBAUWednesday, June 26, 13
  8. 8. AUFBAUrequire.jsbackbone.js BootstrapjQuerylodashWednesday, June 26, 13
  9. 9. public/!"" img!"" js#   !"" app#   #   !"" app.js#   #   !"" config.js#   #   !"" main.js#   #   !"" router.js#   #   !"" text.js#   #   !"" models#   #   $"" views#   $"" lib#   !"" backbone-min.js#   !"" bootstrap.min.js#   !"" jquery-1.9.1.min.js#   !"" lodash.min.js#   $"" require.js$"" styleWednesday, June 26, 13
  10. 10. INDEX.HTMLDer EinstiegWednesday, June 26, 13
  11. 11. <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/style/bootstrap.<link rel="stylesheet" type="text/css" href="/style/style.css"</head><body><div class="text-right"><a id="logout" href="/logout"><i class="icon-off"></i></a></div><div id="main"></div><a id="newMovie"><i class="icon-file"></i><span>neuen Film anlegen</span></a><script data-main="/js/app/config" src="/js/lib/require.js"></scri<script>var data = ...</script></body></html>Wednesday, June 26, 13
  12. 12. <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/style/bootstrap.<link rel="stylesheet" type="text/css" href="/style/style.css"</head><body><div class="text-right"><a id="logout" href="/logout"><i class="icon-off"></i></a></div><div id="main"></div><a id="newMovie"><i class="icon-file"></i><span>neuen Film anlegen</span></a><script data-main="/js/app/config" src="/js/lib/require.js"></scri<script>var data = ...</script></body></html>Wednesday, June 26, 13
  13. 13. <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/style/bootstrap.<link rel="stylesheet" type="text/css" href="/style/style.css"</head><body><div class="text-right"><a id="logout" href="/logout"><i class="icon-off"></i></a></div><div id="main"></div><a id="newMovie"><i class="icon-file"></i><span>neuen Film anlegen</span></a><script data-main="/js/app/config" src="/js/lib/require.js"></scri<script>var data = ...</script></body></html>Wednesday, June 26, 13
  14. 14. MODULLOADERWednesday, June 26, 13
  15. 15. MODULLOADER• Keine <script>-Tags zum Laden• Abhängigkeiten auflösen• CommonJS ModulesWednesday, June 26, 13
  16. 16. MODULLOADERdefine(“name”,[deps...],function (deps) {...return x;});Wednesday, June 26, 13
  17. 17. APP/CONFIG.JSApplikationskonfigurationWednesday, June 26, 13
  18. 18. require.config({"deps": ["main"],"paths": {"jquery": "../lib/jquery-1.9.1.min",...},"shim": {"backbone": {"deps": ["jquery","lodash"],"exports": "Backbone"},"bootstrap": {"deps": ["jquery"]}}});Wednesday, June 26, 13
  19. 19. APP/MAIN.JSBootstrappingWednesday, June 26, 13
  20. 20. require(["app", "router"], function (app, Router) {app.router = new Router();Backbone.history.start({ pushState: true, root: app.root });app.router.navigate(app.root, {trigger: true});});Wednesday, June 26, 13
  21. 21. APP/APP.JSApplication NamespaceWednesday, June 26, 13
  22. 22. define(["backbone", "bootstrap"], function() {return {root: "/"};});Wednesday, June 26, 13
  23. 23. ROUTERWednesday, June 26, 13
  24. 24. ROUTER• Navigation innerhalb der Applikation• Bookmark-Unterstützung• Back Button-Unterstützung• Voraussetzung: Backbone.history.startWednesday, June 26, 13
  25. 25. APP/ROUTER.JSDer RouterWednesday, June 26, 13
  26. 26. define(["backbone", ...],function(Backbone, ...) {var Router = Backbone.Router.extend({routes: {"": "index","new": "addMovie","edit/:id": "editMovie"},index: function() {...},addMovie: function () {...},editMovie: function (id) {...}});return Router;});Wednesday, June 26, 13
  27. 27. MODELWednesday, June 26, 13
  28. 28. MODEL• Enthalten die Daten der Applikation• Enthalten die Businesslogik der Applikation• Validierung, Konvertierung, Zugriffsberechtigungen• Kann RESTWednesday, June 26, 13
  29. 29. MODEL• get()• set()• save()• fetch()• destroy()• ...• id• cid• urlRootWednesday, June 26, 13
  30. 30. APP/MODELS/MOVIE.JSDas ModelWednesday, June 26, 13
  31. 31. define("models/movie", [backbone],function (Backbone) {"use strict";return Backbone.Model.extend({idAttribute: "id",urlRoot: /movie});});Wednesday, June 26, 13
  32. 32. COLLECTIONWednesday, June 26, 13
  33. 33. COLLECTION• Sammlung von Models• Hilfsmethoden für z.B. Suche, SortierungWednesday, June 26, 13
  34. 34. COLLECTION• add()• remove()• reset()• fetch()• get()• model• modelsWednesday, June 26, 13
  35. 35. APP/MODELS/MOVIESDie CollectionWednesday, June 26, 13
  36. 36. define([backbone, models/movie],function (Backbone, Movie) {return Backbone.Collection.extend({model: Movie});});Wednesday, June 26, 13
  37. 37. VIEWWednesday, June 26, 13
  38. 38. VIEW• Darstellung der Daten der Models• Displaylogik undTemplates• Templating mit UnderscoreTemplate• HTMLTemplate Einbindung mit dem require text-PluginWednesday, June 26, 13
  39. 39. VIEW• render() • events• el• tagName• className• idWednesday, June 26, 13
  40. 40. APP/VIEWS/MOVIE.JSDieViewWednesday, June 26, 13
  41. 41. define([text!views/movie.html, app],function (template, app) {return Backbone.View.extend({tagName: tr,events: {"click .icon-trash": "remove","click .icon-edit": "edit","click .rating": "rate"},initialize: function () {this.listenTo(this.model, "change",this.render);},render: function () {...},remove: function () {...},edit: function () {...},rate: function (e) {...}});});Wednesday, June 26, 13
  42. 42. APP/VIEWS/MOVIE.HTMLDasTemplateWednesday, June 26, 13
  43. 43. <td><%= name %></td><td><%= year %></td><td><%= genre %></td><td class="rating"><% if (rating >= 1) { %><i class="icon-star r1"></i><% } else { %><i class="icon-star-empty r1"></i><% } %>...</td><td><i class="icon-edit"></i><i class="icon-trash"></i></td>Wednesday, June 26, 13
  44. 44. READWednesday, June 26, 13
  45. 45. READ• Collection initialisieren - reset()• Models mitViews verknüpfen• CollectionTemplate• Models rendernWednesday, June 26, 13
  46. 46. CREATEWednesday, June 26, 13
  47. 47. CREATE• NeueView &Template• Neues Model erstellen• Model mitView verbinden• POST Anfrage an den Server• In die Collection aufnehmenWednesday, June 26, 13
  48. 48. UPDATEWednesday, June 26, 13
  49. 49. UPDATE• CREATEView verwenden• Daten per PUT an den Server senden• Anzeige aktualisierenWednesday, June 26, 13
  50. 50. DELETEWednesday, June 26, 13
  51. 51. DELETE• Daten per DELETE-Anfrage löschen• Knoten aus dem DOM entfernenWednesday, June 26, 13
  52. 52. UND WIE GEHT ES WEITER?Wednesday, June 26, 13
  53. 53. UND WIE GEHT ES WEITER?• Tests (Jasmine, Karma)• Unittests• E2ETests• Build (r.js)• Minifying• CombiningWednesday, June 26, 13
  54. 54. FRAGEN?Wednesday, June 26, 13
  55. 55. KONTAKTSebastian Springersebastian.springer@mayflower.deMayflower GmbHMannhardtstr. 680538 MünchenDeutschland@basti_springerhttps://github.com/sspringer82Wednesday, June 26, 13

×