Your SlideShare is downloading. ×
0
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Creating MVC Application with backbone js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Creating MVC Application with backbone js

321

Published on

This presentation shows the use of Backbone.js with ASP.NET MVC. How.How can backbone be helpful in maintaining complexity on client side.

This presentation shows the use of Backbone.js with ASP.NET MVC. How.How can backbone be helpful in maintaining complexity on client side.

Published in: Software, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
321
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
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. Create MVC application using Backbone js Presenter: Padmalochan, Mindfire Solutions Date: 14/04/2014
  • 2. Presenter: Padmalochan, Mindfire Solutions Agenda  Why should we use backbone.  Quick review about basics of Backbone.  Preparing server side code.  Getting data efficiently.  Foundation and adding a view.  Client-Side Templating.  Creating app from Scratch.
  • 3. Presenter: Padmalochan, Mindfire Solutions SPA  Single Page Applications.  No round tripping  Loads all of resources at one go.  Its a concept not proper defination.  Rich user experience.  Net latency is reduced.  Performance is increased.
  • 4. Presenter: Padmalochan, Mindfire Solutions SPA Challenges  Search Engine Optimization.  Lack of tooling and experience.  Working with different browser
  • 5. Presenter: Padmalochan, Mindfire Solutions Prerequisites  Basics of Javascript.  HTML,CSS,Web programming knowledge.  JQuery.  FireBug,WebKit. Required Dependencies  Underscore.  Jquery/Zepto.
  • 6. Presenter: Padmalochan, Mindfire Solutions What is 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. http://backbonejs.org/
  • 7. Presenter: Padmalochan, Mindfire Solutions Why to use Backbone  It encourages you to abstract your data into models and your DOM manipulation into views and bind the two together using events.  Need to Build complex UI in Browser.  No More jQuery,no need to store data in DOM, store data in models instead event binding just works.  If what you plan to build is something where the UI regularly changes how it displays but does not go to the server to get entire new pages then you probably need something like Backbone.js.  Provides a structure into client side application
  • 8. Before and After effects of Backbone Presenter: Padmalochan, Mindfire Solutions
  • 9. Presenter: Padmalochan, Mindfire Solutions Architecture Pros : 1. Fast 2. Highly Interactive. 3. Scalable Cons: 1. SEO problem (can't index) 2. Difficult to test 3. Security issues. 1. Routers 2. Models 3. Collection 4. Views
  • 10. Presenter: Padmalochan, Mindfire Solutions Models  Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.  Communicate to View through events.  Provide LifeCycle.  Read attribute with get method and write with set method.  Validation – Validate & isValid  Model Identity  Defaults,initialize.  Backbone.Model vs Backbone.Model.extend  Model have save,fetch and destroy methods for synchronizing with the server
  • 11. Presenter: Padmalochan, Mindfire Solutions Collection  Collections group of related model.  Fetch model from server.  Create them and save them back.  Array like object.
  • 12. Presenter: Padmalochan, Mindfire Solutions Views  The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page  Handles Model events as well as DOM events.  All views have associated el property.  $el is a Jquery wrapper.  Every view maps to exact one DOM element  Render the UI as you see fit.  Declarative syntax to register handlers for DOM elements.
  • 13. Presenter: Padmalochan, Mindfire Solutions Templating  Underscore.js Template.  Client-side templatating.Templating happens in views render method.  Dynamically build markup from template and some data.  Backbone doesn't have its own templating engine. Underscore Templates  <%.... %> - execute arbitary code.  <% ...%> - evaluate an expression and render in result inline.  <% ...%> - evaluate an expression and render html escaped in result inline.
  • 14. Presenter: Padmalochan, Mindfire Solutions Demo
  • 15. Presenter: Padmalochan, Mindfire Solutions Question and Answer
  • 16. Presenter: Padmalochan, Mindfire Solutions Thank you
  • 17. www.mindfiresolutions.com https://www.facebook.com/MindfireSolutions http://www.linkedin.com/company/mindfire-solutions http://twitter.com/mindfires

×