Intro to Backbone.js by Azat Mardanov for General Assembly
3 likes1,692 views
This document serves as an introduction to Backbone.js and covers its history, structure, and advantages in front-end development. It emphasizes the importance of using the MVC architecture for better code organization and maintenance, and provides insights into Backbone's components, best practices, and a starter kit. It also includes resources for building Backbone applications and exercises for hands-on learning.
![REQUIRE.JS AND AMD
ASYNCHRONOUS MODULE
DEFINITION
Require.js allows for asynchronous loading of JS and other files (HTML):
define(["alpha"], function (alpha) {
return {
verb: function(){
return alpha.verb() + 2;
}
};
});
27
GOOD
TO
KNOW
Saturday, February 2, 13](https://image.slidesharecdn.com/gaintrobackbone-130509154229-phpapp01/85/Intro-to-Backbone-js-by-Azat-Mardanov-for-General-Assembly-27-320.jpg)
Intro to Backbone.js by Azat Mardanov for General Assembly
- 1. Azat Mardanov Engineer, Storify.com INTRODUCTION TO BACKBONE.JS Saturday, February 2, 13
- 2. AGENDA ‣ History, Problems and Solutions ‣ Brief Overview of Backbone Components ‣ Building Backbone App From Scratch ‣ Backbone Starter Kit ‣ Subviews ‣ AMD 2 Saturday, February 2, 13
- 3. INTRODUCTION ‣ Over 12 years in software development ‣ Author of RapidPrototypingWithJS.com ‣ 500 Startups grad (Gizmo) AZAT MARDANOV ENGINEER, STORIFY 3 @azat_co azat.co Saturday, February 2, 13
- 4. INTRODUCTION TO BACKBONE.JS HISTORY, PROBLEMS AND SOLUTIONS 4 Saturday, February 2, 13
- 5. HISTORY, PROBLEMS AND SOLUTIONS HISTORY 1. Before: Pure HTML from the server, client just a painting instructions 2. Some client code to style (DHTML, AJAX), 90% of server 3. Spaghetti code (~4yr ago), no structure in who calls who 4. Now: 10-60% of interaction on client: data transferred in DOM, a.k.a lossy transformation, trying to use DOM as a database — sucks 5. Future: client will own entire complexity of application (?) 5 Saturday, February 2, 13
- 6. HISTORY, PROBLEMS AND SOLUTIONS PROBLEMS IN FRONT-END DEVELOPMENT ‣ Client has more responsibility but not all (bugs) ‣ Complexity grows polynomial, features *2, must keep in mind all features before, ‣ Leads to re-writes, throwing away all code ‣ Accumulation of technical debt, more resource (developers) 6 DANGER ZONE! Saturday, February 2, 13
- 7. HISTORY, PROBLEMS AND SOLUTIONS SOLUTIONS ‣ Better architecture (MVC) ‣ Best practices ‣ More developers (not scalable) 7 RIGHT CHOICE Saturday, February 2, 13
- 8. HISTORY, PROBLEMS AND SOLUTIONS WHY USE MVC FOR FRONT-END DEVELOPMENT? “Code is not an asset, it’s a liability” - Unknown source 8 Saturday, February 2, 13
- 9. HISTORY, PROBLEMS AND SOLUTIONS MODEL VIEW CONTROLLER ‣ Better code organization leads to faster/cheaper maintenance ‣ Reusability ‣ Separation of components/concerns 9 Saturday, February 2, 13
- 10. HISTORY, PROBLEMS AND SOLUTIONS MODEL VIEW CONTROLLER ‣ Model: data and information ‣ View: visual representation ‣ Controller: interaction between a user and the system 10 Saturday, February 2, 13
- 11. WHAT IS BACKBONE.JS? WHY USE MVC FOR FRONT-END DEVELOPMENT? ‣ Desktop-like applications in a browser (think GMail) ‣ Thick client and mobile apps ‣ Lots of interactions via HTTP Request (ex-AJAX) ‣ Updating DOM and dealing with callbacks quickly becomes PITA 11 Saturday, February 2, 13
- 12. HISTORY, PROBLEMS AND SOLUTIONS ADVANTAGES OF BACKBONE.JS ‣ Simple: (View, Models, Collections, Router) ‣ Uses Underscore, jQuery/Zepto ‣ Customizable, works well with mobile apps 12 Saturday, February 2, 13
- 13. HISTORY, PROBLEMS AND SOLUTIONS OTHER MVC FRAMEWORKS ‣ Ember.js: live-templates (Handebars), scaffolding, more desktop-like apps ‣ Knockout.js: lightweight http://todomvc.com/ — Todo app in various frameworks 13 GOOD TO KNOW Saturday, February 2, 13
- 14. BACKBONE.JS COMPONENTS MAIN COMPONENTS ‣ Router: Controller in MVC concept ‣ Templates and Views: View (and Controller) in MVC concept ‣ Collections and Models: Model in MVC concept 14 Saturday, February 2, 13
- 15. BACKBONE.JS COMPONENTS BEST PRACTICE ‣ Router: defines routes a.k.a nice URLs (/stories/:id/element/:id), calls views/collections ‣ Views: accept data, bind events, compile and render HTML ‣ Templates: HTML templates with JS instructions (Underscore) ‣ Collections: fetch, parse data via REST API, represent sets of Models ‣ Models: manipulate attributes, fetch and parse data via REST API 15 Saturday, February 2, 13
- 16. BACKBONE.JS COMPONENTS FLEXIBILITY ‣ Router: not required ‣ Templates: can be just variables inside of Views or separate file (AMD) ‣ View can use Models directly 16 Saturday, February 2, 13
- 17. BACKBONE.JS COMPONENTS STANDARD TRANSACTIONS MADE EASIER WITH A FRAMEWORK ‣ fetchAll: collection.fetchAll() instead of $.ajax(...) via REST API ‣ save(): model.save() instead of $.ajax(...) via REST API ‣ Updates Views based on data changes 17 Saturday, February 2, 13
- 18. Q&A INTRODUCTION TO BACKBONE.JS 18 Saturday, February 2, 13
- 19. KEY OBJECTIVE(S) AGENDA RESOURCESDELIVERABLE EXERCISE 1 - “HELLO WORLD” Build ‘Hello World” Backbone.js app from scratch 15m 1. Download jQuery, Underscore and Backbone 2. Create HTML and link libraries 3. Create Router 4. Create View 5. Run HTML file Insert deliverable/outcome http://github.com/azat-co/ga-backbone/ 19 Saturday, February 2, 13
- 20. IMAGES 20 Saturday, February 2, 13
- 21. DISCUSSION TIME INTRODUCTION TO BACKBONE.JS 21 Saturday, February 2, 13
- 22. EVENT BINDING BAD PRACTICE Have lots of ajax calls with callback inside of them: $.ajax (... //fetch data success: function(... //update view )) 22 DANGER ZONE! Saturday, February 2, 13
- 23. EVENT BINDING GOOD PRACTICE In a view listen to Backbone collection.on(‘change’) event: collection.fetch() triggers ‘change’ event 23 RIGHT CHOICE Saturday, February 2, 13
- 24. EVENT BINDING FURTHER READING Awesome guide on on going from jQuery to Backbone.js: https://github.com/kjbekkelund/writings/blob/master/published/ understanding-backbone.md/ or http://bit.ly/NGqFeK 24 GOOD TO KNOW Saturday, February 2, 13
- 25. KEY OBJECTIVE(S) AGENDA RESOURCESDELIVERABLE EXERCISE 2 - “EVENT BINDING” Extend SSBSK to use subviews 15m 1. Download SSBSK 2. Create subview 3. Populate subview with models 4. Render subview 5. Run HTML file Insert deliverable/outcome http://github.com/azat-co/ga-backbone/ 25 Saturday, February 2, 13
- 26. DISCUSSION TIME INSERT CLASS TITLE 26 Saturday, February 2, 13
- 27. REQUIRE.JS AND AMD ASYNCHRONOUS MODULE DEFINITION Require.js allows for asynchronous loading of JS and other files (HTML): define(["alpha"], function (alpha) { return { verb: function(){ return alpha.verb() + 2; } }; }); 27 GOOD TO KNOW Saturday, February 2, 13
- 28. BACKBONE.JS STARTER KIT 28 SUPER SIMPLE BACKBONE STARTER KIT Backbone + Twitter Bootstarp + Require.js (AMD) Boilerplate: https://github.com/azat-co/super-simple-backbone-starter-kit GOOD TO KNOW Saturday, February 2, 13
- 29. KEY OBJECTIVE(S) AGENDA RESOURCESDELIVERABLE EXERCISE 3 - SSBSK Extend SSBSK to use subviews 15m 1. Download SSBSK 2. Create subview 3. Populate subview with models 4. Render subview 5. Run HTML file Insert deliverable/outcome http://github.com/azat-co/ga-backbone/ 29 Saturday, February 2, 13
- 30. BOILERPLATE FURTHER READING Backbone Boilerplate Buddy: https://github.com/backbone-boilerplate/grunt-bbb Backbone.js Applications: http://addyosmani.github.com/backbone-fundamentals/ 30 GOOD TO KNOW Saturday, February 2, 13
- 31. DISCUSSION TIME INSERT CLASS TITLE 31 Saturday, February 2, 13
- 32. Q&A INSERT CLASS TITLE 32 Saturday, February 2, 13