Javascript MVC

My first tech-talk at 8Rays Technosoft due to which I researched about JS-MVC and presented what I learned through it.

Transcript

1. Javascript MVC
2. Agenda
3. What is MVC ?
4. Why Javascript MVC ? • • • •
5. Why Javascript MVC ? • • • • • •
6. BROWSER = FUTURE (Everything is inside a browser) 2:30 PM
7. Why not Javascript MVC ? • • • •
8. All MVCs are not 100% MVC • • •
9. MV* • • •
10. Some (many) popular MV* libraries • • • • • … • • • •
11. Intro to Backbone.js
12. Backbone Model var PersonModel = Backbone.Model.extend({ initialize:function(){ }, defaults:{ “name”:”PersonName” } }); var p = new PersonModel(); /*initialize()*/ p.set(“name”,”Bhavesh”); /*setter method*/ alert(p.get(“name”)); /*getter method*/ p.toJSON();
13. Backbone Model p.fetch(); p.save(); p.destroy(); p.isValid();
14. Backbone Collections var PersonsCollection = Backbone.Collection.extend({ model:Person }); var pc = new PersonsCollection(); push, pop, shift, length, sort, where, fetch
15. Backbone Router var myRouter = Backbone.Router.extend({ routes:{ “” : “home”, “search/:query” : ”search”, “search/:query/p:personId” : ”search” }, home:function(){ … }, search:function(query,personId){ … } });
16. Backbone View var sidebarItems = Backbone.View.extend({ tagName: “li”, className:”item”, events:function(){ “click .icon” : “open”, “click .button.edit” : “openEditDialog” “click .button.delete” : “destroy” }, render:function(){ $(this.el).html(“Hello World!s”); return this; } });
17. Demo Application
18. Which JS-MVC to use ? Factors • • • • •
19. When YES to Javascript MVC ? • • • • •
20. When NO to Javascript MVC ? • • • •
21. References
22. Thanks. Questions ? <%= Happy_Coding %>