SlideShare a Scribd company logo

Backbone js

Download as KEY, PDF
rstankov
rstankov

The document appears to be notes on Backbone.js. It includes summaries of Backbone models, events, views and how to bind events. It demonstrates creating a model with defaults, getting/setting attributes, and binding event handlers. It also shows creating a view with tagName, className and attributes, and logging the generated HTML element.

1 of 166
Downloaded 71 times
Радослав Станков OpenFest 05/11/2011
Кой съм аз? @rstankov http://rstankov.com http://github.com/rstankov
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Controller Model View Сървър
Browser Dom View Model
Browser Dom View Model
Browser Dom View Model
Browser Dom View Model
Browser Dom View Model
Browser Dom View Model
Browser Dom View Model
Browser Dom View Model
Browser Dom View Model
Backbone.Events
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
Backbone.Model
var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); });
var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); });
var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); });
var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); });
var cal = new Calculator(); cal.bind('myEvent', function(){ console.log('KaBoom....'); }); cal.trigger('myEvent');
var Product = Backbone.Model.extend({ urlRoot: '/products' }); var chair = new Product({ name: 'chair', price: 10 }); chair.save(); // POST /products
var Product = Backbone.Model.extend({ url: function(){ return '/products/' + (this.isNew() ? '' : this.id); } }); var chair = new Product({ id: 5, name: 'chair', price: 10 }); chair.save(); // PUT /products/1
http://documentcloud.github.com/backbone/#Model-save
И още... • validate • escape • has • unset • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • clone
Backbone.View
Backbone js
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
var UsersListView = Backbone.View.extend({ el: '#users-list' }); var userList = new UsersListView(); console.log(userList.el);
var EditBoxView = Backbone.View.extend({}); var element = $('#edit-box-view').get(0), editBox = new EditBoxView({el: element}); console.log(editBox.el === element);
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
<script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>
var NewsView = Backbone.View.extend({ template: _.template($('#news').html()), render: function() { this.el.innerHTML = this.template(this.model); return this; } });
var view = new NewsView({ model: { title: "News Title", created_at: "Today", text: "Long text" } }); document.body.appendChild(view.render().el);
<script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>
<div> <h1>News Title</h1> <time>Today</time> <p>Long text</p> </div>
View Model DOM
View Model DOM
View Model DOM
View Model DOM
View Model DOM
View Model DOM
View Model DOM
View Model DOM
View Model DOM
View Model DOM
View Model DOM View 2
View Model DOM View 2
View Model DOM View 2
View Model DOM View 2
View Model DOM View 2
View Model DOM View 2
View Model DOM View 2
View Model DOM View 2
View Model DOM View 2
View Model DOM View 2
View View 2 Model DOM
View View 2 Model DOM View 3
View View 2 Model DOM View 3 View 4
View View 2 Model DOM View 3 View 4 View .. N
View View 2 Model DOM View 3 View 4 View .. N
View View 2 Model DOM View 3 View 4 View .. N
View View 2 Model DOM View 3 View 4 View .. N
View View 2 Model DOM View 3 View 4 View .. N
View View 2 Model DOM View 3 View 4 View .. N
View View 2 Model DOM View 3 View 4 View .. N
View View 2 Model DOM View 3 View 4 View .. N
View View 2 Model DOM View 3 View 4 View .. N
Demo
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, increment: function() { this.set({'value': this.get('value') + 1}); }, decrement: function() { this.set({'value': this.get('value') - 1}); }, getValue: function() { return this.get('value'); } });
var ButtonsView = Backbone.View.extend({ events: { 'click .plus': 'plus', 'click .minus': 'minus' }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); } });
var DisplayView = Backbone.View.extend({ initialize: function() { this.model.bind('change:value', this.render, this); this.render(); }, render: function() { this.el.innerHTML = this.model.getValue(); return this; } });
var cal = new Calculator(); new ButtonsView({model: cal, el: '.buttons'}); new DisplayView({model: cal, el: '.display'});
Backbone.Collection
var ProductsCollection = Backbone.Collection.extend({ model: Product }); var products = new ProductsCollection(); products.fetch(); products.bind('reset', function(list) { console.log('Loaded', list.length, 'records'); });
products.bind('add', function(model) { console.log('new product added'); }); products.bind('remove', function(model) { console.log('item product removed'); });
И още... • Underscore Methods • add / remove / at • sort / comparator • reset • create • url • toJSON
Backbone.Router
Backbone js
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
app.navigate('pages', true); app.navigate('pages/search/title', true); app.navigate('pages/3', true);
site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3
Backbone js
Backbone.history.start({pushState: true});
site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3
site.com/path/pages site.com/path/pages/search/title site.com/path/pages/3
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Недостатъци
Алтернативи
Алтернативи
Алтернативи
Алтернативи
Въпроси?
Благодаря за вниманието @rstankov
Ad

Recommended

Ruby/Rails
Ruby/RailsRuby/Rails
Ruby/Rails
rstankov
 
Why ruby
Why rubyWhy ruby
Why ruby
rstankov
 
Testing your javascript code with jasmine
Testing your javascript code with jasmineTesting your javascript code with jasmine
Testing your javascript code with jasmine
Rubyc Slides
 
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneAplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Rafael Felix da Silva
 
Class-based views with Django
Class-based views with DjangoClass-based views with Django
Class-based views with Django
Simon Willison
 
Ruby - Design patterns tdc2011
Ruby - Design patterns tdc2011Ruby - Design patterns tdc2011
Ruby - Design patterns tdc2011
Rafael Felix da Silva
 
Backbone - TDC 2011 Floripa
Backbone - TDC 2011 FloripaBackbone - TDC 2011 Floripa
Backbone - TDC 2011 Floripa
Rafael Felix da Silva
 
JavaScript Unit Testing with Jasmine
JavaScript Unit Testing with JasmineJavaScript Unit Testing with Jasmine
JavaScript Unit Testing with Jasmine
Raimonds Simanovskis
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
Daniel Knell
 
Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015
Konstantin Kudryashov
 
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Thomas Fuchs
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScript
Visual Engineering
 
Node.js in action
Node.js in actionNode.js in action
Node.js in action
Simon Su
 
Min-Maxing Software Costs
Min-Maxing Software CostsMin-Maxing Software Costs
Min-Maxing Software Costs
Konstantin Kudryashov
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Domenic Denicola
 
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICDecoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DIC
Konstantin Kudryashov
 
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby DeveloperVenturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Jon Kruger
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
Todd Anglin
 
Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScriptTestable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
Jon Kruger
 
Dollar symbol
Dollar symbolDollar symbol
Dollar symbol
Aaron Huang
 
Crafting beautiful software
Crafting beautiful softwareCrafting beautiful software
Crafting beautiful software
Jorn Oomen
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
Frank de Jonge
 
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards06 jQuery #burningkeyboards
06 jQuery #burningkeyboards
Denis Ristic
 
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you needDutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Kacper Gunia
 
05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards
Denis Ristic
 
Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
Visual Engineering
 
¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?
jaespinmora
 
Building Your First Widget
Building Your First WidgetBuilding Your First Widget
Building Your First Widget
Chris Wilcoxson
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说
Ting Lv
 
Ad

More Related Content

What's hot (20)

Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
Daniel Knell
 
Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015
Konstantin Kudryashov
 
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Thomas Fuchs
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScript
Visual Engineering
 
Node.js in action
Node.js in actionNode.js in action
Node.js in action
Simon Su
 
Min-Maxing Software Costs
Min-Maxing Software CostsMin-Maxing Software Costs
Min-Maxing Software Costs
Konstantin Kudryashov
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Domenic Denicola
 
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICDecoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DIC
Konstantin Kudryashov
 
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby DeveloperVenturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Jon Kruger
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
Todd Anglin
 
Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScriptTestable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
Jon Kruger
 
Dollar symbol
Dollar symbolDollar symbol
Dollar symbol
Aaron Huang
 
Crafting beautiful software
Crafting beautiful softwareCrafting beautiful software
Crafting beautiful software
Jorn Oomen
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
Frank de Jonge
 
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards06 jQuery #burningkeyboards
06 jQuery #burningkeyboards
Denis Ristic
 
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you needDutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Kacper Gunia
 
05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards
Denis Ristic
 
Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
Visual Engineering
 
¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?
jaespinmora
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
Daniel Knell
 
Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015
Konstantin Kudryashov
 
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Thomas Fuchs
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScript
Visual Engineering
 
Node.js in action
Node.js in actionNode.js in action
Node.js in action
Simon Su
 
Min-Maxing Software Costs
Min-Maxing Software CostsMin-Maxing Software Costs
Min-Maxing Software Costs
Konstantin Kudryashov
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Domenic Denicola
 
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICDecoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DIC
Konstantin Kudryashov
 
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby DeveloperVenturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Jon Kruger
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
Todd Anglin
 
Testable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScriptTestable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
Jon Kruger
 
Dollar symbol
Dollar symbolDollar symbol
Dollar symbol
Aaron Huang
 
Crafting beautiful software
Crafting beautiful softwareCrafting beautiful software
Crafting beautiful software
Jorn Oomen
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
Frank de Jonge
 
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards06 jQuery #burningkeyboards
06 jQuery #burningkeyboards
Denis Ristic
 
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you needDutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Kacper Gunia
 
05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards
Denis Ristic
 
Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
Visual Engineering
 
¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?
jaespinmora
 

Similar to Backbone js (20)

Building Your First Widget
Building Your First WidgetBuilding Your First Widget
Building Your First Widget
Chris Wilcoxson
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说
Ting Lv
 
JSGeneve - Backbone.js
JSGeneve - Backbone.jsJSGeneve - Backbone.js
JSGeneve - Backbone.js
Pierre Spring
 
JSDay Italy - Backbone.js
JSDay Italy - Backbone.jsJSDay Italy - Backbone.js
JSDay Italy - Backbone.js
Pierre Spring
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
Nick Lee
 
AngularJs
AngularJsAngularJs
AngularJs
Hossein Baghayi
 
Doctrine For Beginners
Doctrine For BeginnersDoctrine For Beginners
Doctrine For Beginners
Jonathan Wage
 
JavaScript patterns
JavaScript patternsJavaScript patterns
JavaScript patterns
Norihito YAMAKAWA
 
Backbone Basics with Examples
Backbone Basics with ExamplesBackbone Basics with Examples
Backbone Basics with Examples
Sergey Bolshchikov
 
Django
DjangoDjango
Django
webuploader
 
Intro to Ember.JS 2016
Intro to Ember.JS 2016Intro to Ember.JS 2016
Intro to Ember.JS 2016
Sandino Núñez
 
TypeScriptで書くAngularJS @ GDG神戸2014.8.23
TypeScriptで書くAngularJS @ GDG神戸2014.8.23TypeScriptで書くAngularJS @ GDG神戸2014.8.23
TypeScriptで書くAngularJS @ GDG神戸2014.8.23
Okuno Kentaro
 
Bonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
Francois Zaninotto
 
How to React Native
How to React NativeHow to React Native
How to React Native
Dmitry Ulyanov
 
jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
Huiyi Yan
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
 
Real Time App with Node.js
Real Time App with Node.jsReal Time App with Node.js
Real Time App with Node.js
Jxck Jxck
 
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2
Christoffer Noring
 
Simple Web Apps With Sinatra
Simple Web Apps With SinatraSimple Web Apps With Sinatra
Simple Web Apps With Sinatra
a_l
 
JS Level Up: Prototypes
JS Level Up: PrototypesJS Level Up: Prototypes
JS Level Up: Prototypes
Vernon Kesner
 
Building Your First Widget
Building Your First WidgetBuilding Your First Widget
Building Your First Widget
Chris Wilcoxson
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说
Ting Lv
 
JSGeneve - Backbone.js
JSGeneve - Backbone.jsJSGeneve - Backbone.js
JSGeneve - Backbone.js
Pierre Spring
 
JSDay Italy - Backbone.js
JSDay Italy - Backbone.jsJSDay Italy - Backbone.js
JSDay Italy - Backbone.js
Pierre Spring
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
Nick Lee
 
AngularJs
AngularJsAngularJs
AngularJs
Hossein Baghayi
 
Doctrine For Beginners
Doctrine For BeginnersDoctrine For Beginners
Doctrine For Beginners
Jonathan Wage
 
JavaScript patterns
JavaScript patternsJavaScript patterns
JavaScript patterns
Norihito YAMAKAWA
 
Backbone Basics with Examples
Backbone Basics with ExamplesBackbone Basics with Examples
Backbone Basics with Examples
Sergey Bolshchikov
 
Django
DjangoDjango
Django
webuploader
 
Intro to Ember.JS 2016
Intro to Ember.JS 2016Intro to Ember.JS 2016
Intro to Ember.JS 2016
Sandino Núñez
 
TypeScriptで書くAngularJS @ GDG神戸2014.8.23
TypeScriptで書くAngularJS @ GDG神戸2014.8.23TypeScriptで書くAngularJS @ GDG神戸2014.8.23
TypeScriptで書くAngularJS @ GDG神戸2014.8.23
Okuno Kentaro
 
Bonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
Francois Zaninotto
 
How to React Native
How to React NativeHow to React Native
How to React Native
Dmitry Ulyanov
 
jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
Huiyi Yan
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
 
Real Time App with Node.js
Real Time App with Node.jsReal Time App with Node.js
Real Time App with Node.js
Jxck Jxck
 
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2
Christoffer Noring
 
Simple Web Apps With Sinatra
Simple Web Apps With SinatraSimple Web Apps With Sinatra
Simple Web Apps With Sinatra
a_l
 
JS Level Up: Prototypes
JS Level Up: PrototypesJS Level Up: Prototypes
JS Level Up: Prototypes
Vernon Kesner
 
Ad

Recently uploaded (20)

Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfComplete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Software Company
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxProcurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptx
Jon Hansen
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfComplete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Software Company
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxProcurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptx
Jon Hansen
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
Ad

Backbone js

  • 15. Browser Controller Model View Сървър
  • 16. Browser Controller Model View Сървър
  • 17. Browser Controller Model View Сървър
  • 18. Browser Controller Model View Сървър
  • 19. Browser Controller Model View Сървър
  • 20. Browser Controller Model View Сървър
  • 21. Browser Controller Model View Сървър
  • 22. Browser Controller Model View Сървър
  • 23. Browser Controller Model View Сървър
  • 24. Browser Controller Model View Сървър
  • 25. Browser Controller Model View Сървър
  • 26. Browser Controller Model View Сървър
  • 27. Browser Controller Model View Сървър
  • 38. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  • 39. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  • 40. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  • 41. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  • 42. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2'
  • 44. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
  • 45. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
  • 46. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
  • 47. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 48. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 49. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 50. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 51. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 52. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  • 53. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  • 54. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  • 55. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  • 56. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
  • 57. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
  • 58. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
  • 59. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
  • 60. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } });
  • 61. var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); });
  • 62. var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); });
  • 63. var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); });
  • 64. var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); });
  • 65. var cal = new Calculator(); cal.bind('myEvent', function(){ console.log('KaBoom....'); }); cal.trigger('myEvent');
  • 66. var Product = Backbone.Model.extend({ urlRoot: '/products' }); var chair = new Product({ name: 'chair', price: 10 }); chair.save(); // POST /products
  • 67. var Product = Backbone.Model.extend({ url: function(){ return '/products/' + (this.isNew() ? '' : this.id); } }); var chair = new Product({ id: 5, name: 'chair', price: 10 }); chair.save(); // PUT /products/1
  • 69. И още... • validate • escape • has • unset • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • clone
  • 72. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
  • 73. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
  • 74. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
  • 75. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
  • 76. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
  • 77. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
  • 78. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional">
  • 79. var UsersListView = Backbone.View.extend({ el: '#users-list' }); var userList = new UsersListView(); console.log(userList.el);
  • 80. var EditBoxView = Backbone.View.extend({}); var element = $('#edit-box-view').get(0), editBox = new EditBoxView({el: element}); console.log(editBox.el === element);
  • 81. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 82. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 83. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 84. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 85. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 86. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 87. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 88. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>
  • 89. var NewsView = Backbone.View.extend({ template: _.template($('#news').html()), render: function() { this.el.innerHTML = this.template(this.model); return this; } });
  • 90. var view = new NewsView({ model: { title: "News Title", created_at: "Today", text: "Long text" } }); document.body.appendChild(view.render().el);
  • 91. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>
  • 92. <div> <h1>News Title</h1> <time>Today</time> <p>Long text</p> </div>
  • 93. View Model DOM
  • 94. View Model DOM
  • 95. View Model DOM
  • 96. View Model DOM
  • 97. View Model DOM
  • 98. View Model DOM
  • 99. View Model DOM
  • 100. View Model DOM
  • 101. View Model DOM
  • 102. View Model DOM
  • 103. View Model DOM View 2
  • 104. View Model DOM View 2
  • 105. View Model DOM View 2
  • 106. View Model DOM View 2
  • 107. View Model DOM View 2
  • 108. View Model DOM View 2
  • 109. View Model DOM View 2
  • 110. View Model DOM View 2
  • 111. View Model DOM View 2
  • 112. View Model DOM View 2
  • 113. View View 2 Model DOM
  • 114. View View 2 Model DOM View 3
  • 115. View View 2 Model DOM View 3 View 4
  • 116. View View 2 Model DOM View 3 View 4 View .. N
  • 117. View View 2 Model DOM View 3 View 4 View .. N
  • 118. View View 2 Model DOM View 3 View 4 View .. N
  • 119. View View 2 Model DOM View 3 View 4 View .. N
  • 120. View View 2 Model DOM View 3 View 4 View .. N
  • 121. View View 2 Model DOM View 3 View 4 View .. N
  • 122. View View 2 Model DOM View 3 View 4 View .. N
  • 123. View View 2 Model DOM View 3 View 4 View .. N
  • 124. View View 2 Model DOM View 3 View 4 View .. N
  • 125. Demo
  • 126. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, increment: function() { this.set({'value': this.get('value') + 1}); }, decrement: function() { this.set({'value': this.get('value') - 1}); }, getValue: function() { return this.get('value'); } });
  • 127. var ButtonsView = Backbone.View.extend({ events: { 'click .plus': 'plus', 'click .minus': 'minus' }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); } });
  • 128. var DisplayView = Backbone.View.extend({ initialize: function() { this.model.bind('change:value', this.render, this); this.render(); }, render: function() { this.el.innerHTML = this.model.getValue(); return this; } });
  • 129. var cal = new Calculator(); new ButtonsView({model: cal, el: '.buttons'}); new DisplayView({model: cal, el: '.display'});
  • 131. var ProductsCollection = Backbone.Collection.extend({ model: Product }); var products = new ProductsCollection(); products.fetch(); products.bind('reset', function(list) { console.log('Loaded', list.length, 'records'); });
  • 132. products.bind('add', function(model) { console.log('new product added'); }); products.bind('remove', function(model) { console.log('item product removed'); });
  • 133. И още... • Underscore Methods • add / remove / at • sort / comparator • reset • create • url • toJSON
  • 136. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 137. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 138. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 139. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 140. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 141. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 142. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 143. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 144. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 145. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();
  • 146. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start();

Editor's Notes