Your SlideShare is downloading. ×
Webapplikationen mit Backbone.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Webapplikationen mit Backbone.js

807
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
807
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
2
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sebastian Springer@basti_springerWednesday, June 26, 13
  • 2. WER BIN ICH?• Sebastian Springer• https://github.com/sspringer82• @basti_springer• Teamlead @ MayflowerWednesday, June 26, 13
  • 3. THEMEN• require.js• Bootstrap - das vonTwitter...• Backbone.js• Router• Model• View• CollectionWednesday, June 26, 13
  • 4. DIE AUFGABE• Filmdatenbank• CRUD• Single Page Appliakation• AMD Modulloader• LayoutWednesday, June 26, 13
  • 5. Wednesday, June 26, 13
  • 6. Wednesday, June 26, 13
  • 7. AUFBAUWednesday, June 26, 13
  • 8. AUFBAUrequire.jsbackbone.js BootstrapjQuerylodashWednesday, June 26, 13
  • 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. INDEX.HTMLDer EinstiegWednesday, June 26, 13
  • 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. <!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. <!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. MODULLOADERWednesday, June 26, 13
  • 15. MODULLOADER• Keine <script>-Tags zum Laden• Abhängigkeiten auflösen• CommonJS ModulesWednesday, June 26, 13
  • 16. MODULLOADERdefine(“name”,[deps...],function (deps) {...return x;});Wednesday, June 26, 13
  • 17. APP/CONFIG.JSApplikationskonfigurationWednesday, June 26, 13
  • 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. APP/MAIN.JSBootstrappingWednesday, June 26, 13
  • 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. APP/APP.JSApplication NamespaceWednesday, June 26, 13
  • 22. define(["backbone", "bootstrap"], function() {return {root: "/"};});Wednesday, June 26, 13
  • 23. ROUTERWednesday, June 26, 13
  • 24. ROUTER• Navigation innerhalb der Applikation• Bookmark-Unterstützung• Back Button-Unterstützung• Voraussetzung: Backbone.history.startWednesday, June 26, 13
  • 25. APP/ROUTER.JSDer RouterWednesday, June 26, 13
  • 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. MODELWednesday, June 26, 13
  • 28. MODEL• Enthalten die Daten der Applikation• Enthalten die Businesslogik der Applikation• Validierung, Konvertierung, Zugriffsberechtigungen• Kann RESTWednesday, June 26, 13
  • 29. MODEL• get()• set()• save()• fetch()• destroy()• ...• id• cid• urlRootWednesday, June 26, 13
  • 30. APP/MODELS/MOVIE.JSDas ModelWednesday, June 26, 13
  • 31. define("models/movie", [backbone],function (Backbone) {"use strict";return Backbone.Model.extend({idAttribute: "id",urlRoot: /movie});});Wednesday, June 26, 13
  • 32. COLLECTIONWednesday, June 26, 13
  • 33. COLLECTION• Sammlung von Models• Hilfsmethoden für z.B. Suche, SortierungWednesday, June 26, 13
  • 34. COLLECTION• add()• remove()• reset()• fetch()• get()• model• modelsWednesday, June 26, 13
  • 35. APP/MODELS/MOVIESDie CollectionWednesday, June 26, 13
  • 36. define([backbone, models/movie],function (Backbone, Movie) {return Backbone.Collection.extend({model: Movie});});Wednesday, June 26, 13
  • 37. VIEWWednesday, June 26, 13
  • 38. VIEW• Darstellung der Daten der Models• Displaylogik undTemplates• Templating mit UnderscoreTemplate• HTMLTemplate Einbindung mit dem require text-PluginWednesday, June 26, 13
  • 39. VIEW• render() • events• el• tagName• className• idWednesday, June 26, 13
  • 40. APP/VIEWS/MOVIE.JSDieViewWednesday, June 26, 13
  • 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. APP/VIEWS/MOVIE.HTMLDasTemplateWednesday, June 26, 13
  • 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. READWednesday, June 26, 13
  • 45. READ• Collection initialisieren - reset()• Models mitViews verknüpfen• CollectionTemplate• Models rendernWednesday, June 26, 13
  • 46. CREATEWednesday, June 26, 13
  • 47. CREATE• NeueView &Template• Neues Model erstellen• Model mitView verbinden• POST Anfrage an den Server• In die Collection aufnehmenWednesday, June 26, 13
  • 48. UPDATEWednesday, June 26, 13
  • 49. UPDATE• CREATEView verwenden• Daten per PUT an den Server senden• Anzeige aktualisierenWednesday, June 26, 13
  • 50. DELETEWednesday, June 26, 13
  • 51. DELETE• Daten per DELETE-Anfrage löschen• Knoten aus dem DOM entfernenWednesday, June 26, 13
  • 52. UND WIE GEHT ES WEITER?Wednesday, June 26, 13
  • 53. UND WIE GEHT ES WEITER?• Tests (Jasmine, Karma)• Unittests• E2ETests• Build (r.js)• Minifying• CombiningWednesday, June 26, 13
  • 54. FRAGEN?Wednesday, June 26, 13
  • 55. KONTAKTSebastian Springersebastian.springer@mayflower.deMayflower GmbHMannhardtstr. 680538 MünchenDeutschland@basti_springerhttps://github.com/sspringer82Wednesday, June 26, 13