Single Page Application Development with backbone.js and Simple.Web

5,421 views
5,307 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,421
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
74
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.
  • Loading text documents as dependencies
  • Single Page Application Development with backbone.js and Simple.Web

    1. 1. Single Page Application Development withbackbone.js and Simple.Web Chris Canal
    2. 2. Who am I?• Senior Developer at StormID• Developed our in-house SDK• Does too much Umbraco• Trying to stop my boss from crazy• Being opinionated• Been doing this for too long, 11 years!• Crap at making PowerPoint presentations• Probably wrong 90% of the time, so please correct me when I made a stupid comment
    3. 3. Agenda• Introduction• Backbone • Backbone Marionette • Underscore • Handlebars • RequireJS• Simple.Web
    4. 4. Single Page Applications
    5. 5. Single Page Application?• A software application• On a single web page• Pretty much exactly what it says on the tin, if it came in a tin
    6. 6. Gmailmail.google.com
    7. 7. Twittertwitter.com
    8. 8. Facebookfacebook.com
    9. 9. Spinspin.com
    10. 10. A Quick Web App History
    11. 11. Web 1.0 GET Webserver
    12. 12. Web 1.0 GET GET Webserver
    13. 13. AJAX, BOOYA
    14. 14. AJAX (Web 2.0?) GET GET Webserver
    15. 15. AJAX (Web 2.0?) GET GET Webserver
    16. 16. AJAX (Web 2.0?) GET GET API Application
    17. 17. MV*
    18. 18. MV*• MVPresenter• MVController• MVPresentationModel• MVViewModel• MVHandler
    19. 19. Serverside MV*
    20. 20. Small TalkFirst implentation of MVC
    21. 21. Ruby on RailsMVC
    22. 22. Cake PHPMVC
    23. 23. WebFormsWut?
    24. 24. Castle MonorailMVC
    25. 25. ASP.NET MVCMVC
    26. 26. FubuMVCMVC
    27. 27. Simple.WebMVHandler
    28. 28. Simple.Web
    29. 29. Conventions &Structure
    30. 30. Clientside MV*
    31. 31. YUI
    32. 32. Ember JS
    33. 33. Knockout
    34. 34. AngularJS
    35. 35. Backbone.js
    36. 36. Backbone.js
    37. 37. What is it?• Event driven MV* Framework
    38. 38. Annotated Source
    39. 39. Github
    40. 40. Who uses Backbone.js?• Hulu• Foursquare• Stripe• Khan Academy• Wordpress.com• Many more…
    41. 41. Code Structure• Events• Models• Collections• Views• Router
    42. 42. Eventsonofftrigger
    43. 43. on
    44. 44. off
    45. 45. trigger
    46. 46. Beware memory leaks!
    47. 47. Event Types• add – model, collection• remove – model, collection• reset – collection• change – model, options• change:[attribute] – model, value, options• destroy – model, collection• sync – model, collection• route:[name] – router• all
    48. 48. Modelsextendconstructor/initializeurl/urlRootdefaultsget/setvalidatetoJSONState!saveand more…
    49. 49. extend
    50. 50. extendOverriding base methods
    51. 51. constructor/initialize
    52. 52. initialize
    53. 53. url/urlRoot
    54. 54. defaults
    55. 55. get/set
    56. 56. validate
    57. 57. toJSON
    58. 58. State!
    59. 59. save
    60. 60. More!
    61. 61. Collectionsmodelurlcreateaddgetwherefetchresetand more…
    62. 62. model
    63. 63. url
    64. 64. create
    65. 65. add
    66. 66. get
    67. 67. where
    68. 68. fetch
    69. 69. reset
    70. 70. More!
    71. 71. Viewsel/tagName/$elrenderremoveevents
    72. 72. el/tagName/$el
    73. 73. render
    74. 74. remove
    75. 75. events
    76. 76. routerroutesRoutenavigateHistory
    77. 77. routes
    78. 78. route
    79. 79. navigate
    80. 80. Demo?
    81. 81. Questions?
    82. 82. Backbone Marionette
    83. 83. What is it?Application Library for Backbone
    84. 84. What does it give you?• Backbone.Marionette.Application• Backbone.Marionette.AppRouter• Backbone.Marionette.ItemView• Backbone.Marionette.CollectionView• Backbone.Marionette.EventAggregator• And more…
    85. 85. Backbone.Marionette.ApplicationStarting An ApplicationeventsaddInitializerregions
    86. 86. Starting
    87. 87. events
    88. 88. addInitializer
    89. 89. regions
    90. 90. Backbone.Marionette.AppRoutercontroller
    91. 91. controller
    92. 92. Backbone.Marionette.ItemViewon*eventsserializeData
    93. 93. On*
    94. 94. events
    95. 95. serializeData
    96. 96. Backbone.Marionette.CollectionViewitemViewemptyViewon*events
    97. 97. itemView
    98. 98. emptyView
    99. 99. on*
    100. 100. events
    101. 101. Backbone.Marionette.EventAggregator
    102. 102. Demo?
    103. 103. Questions?
    104. 104. Underscore
    105. 105. What is it?Batman utility belt
    106. 106. Handlebars
    107. 107. What is it?Mustache templating implemetation
    108. 108. Basic
    109. 109. Compiling
    110. 110. Using it with Backbone.Marionette
    111. 111. RequireJS
    112. 112. What is it?Clientside Dependency ManagementAMD/CommonJS implentation
    113. 113. What does it give you?• Dependency Management
    114. 114. Config
    115. 115. Config
    116. 116. require()
    117. 117. define()
    118. 118. Text plugin
    119. 119. Using it with Backbone.Marionette
    120. 120. r.js
    121. 121. What is it?• Combines related scripts together into build layers and minifies them via UglifyJS• Optimizes CSS by inlining CSS files referenced by @import and removing comments.
    122. 122. Getting it…• You have Node.js installed, yea?• npm install –g requires• node r.js path/tp/buildscript.js
    123. 123. Config
    124. 124. Config
    125. 125. Demo?
    126. 126. Questions?
    127. 127. Simple.Web
    128. 128. What is it?SOLID Driven RESTful web frameworkModel-View-Hander
    129. 129. What does it give you?• Proper Separation on Concerns – One class per action• Easily Testable• SOLID Compliant
    130. 130. Interfaces• IGet• IPost• IPost<T>• IDelete• IPut• IPut<T>• IOutput• And more…
    131. 131. IGet
    132. 132. IPost
    133. 133. IPost<T>
    134. 134. IDelete
    135. 135. IPut<T>
    136. 136. IOutput<T>
    137. 137. DemoWiring it all up!
    138. 138. Questions?
    139. 139. Resources• http://backbonetraining.net/resources Loads of Backbone resources• https://github.com/markrendle/Simple.Web• http://blog.markrendle.net/2012/06/01/simple-web/
    140. 140. Thanks!

    ×