Backbone js in drupal core
-
Upload
marcin-wosinek -
Category
Technology
-
view
594 -
download
5
Transcript of Backbone js in drupal core
![Page 1: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/1.jpg)
BackboneJs in Drupal core
DrupalCamp Wroclaw, 14 April, 2013
![Page 2: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/2.jpg)
Who am I?
![Page 3: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/3.jpg)
You?
![Page 4: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/4.jpg)
Why js matters?
![Page 5: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/5.jpg)
Web 1.0: JS for Almost Nothing
![Page 6: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/6.jpg)
Web 2.0: JS for AJAX
![Page 7: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/7.jpg)
Web Today: JS for Everything
![Page 8: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/8.jpg)
Advantages of new approach
Server
Client
js & templates RESTJSON
![Page 9: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/9.jpg)
Challenges
![Page 10: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/10.jpg)
jQuery is not enough
![Page 11: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/11.jpg)
Programming best practices in front end?
![Page 12: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/12.jpg)
Solution: Browserside js frameworks
![Page 13: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/13.jpg)
Backbone is in Drupal Core
![Page 14: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/14.jpg)
What is Backbone?
?
![Page 15: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/15.jpg)
MV* in Backbone
![Page 16: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/16.jpg)
Modelapp.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},
toggle: function () {
this.save({
completed: !this.get('completed')
}); } });
![Page 17: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/17.jpg)
Templatevar html =
_.template('<li><%= name %></li>'
, { name: 'John Smith' });
![Page 18: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/18.jpg)
Collectionvar TodoList = Backbone.Collection.extend({
model: app.Todo,
localStorage: new Backbone
.LocalStorage('todos-backbone'),
![Page 19: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/19.jpg)
Viewapp.AppView = Backbone.View.extend({
el: '#todoapp',
statTemplate: _.template($('#id').html()),
events: {
'click #clear': 'clear'},
initialize: function () {
this.$input = this.$('#new-todo');
this.listenTo(app.Todos, 'add', this.
addOne);
}
![Page 20: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/20.jpg)
Routingvar AppRouter = Backbone.Router.extend({
routes: { "posts/:id": "getPost"}});
var app_router = new AppRouter;
app_router.on('route:getPost', function (id)
{
alert( "Get post number " + id );
});
Backbone.history.start();
![Page 21: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/21.jpg)
Underscore
![Page 22: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/22.jpg)
Front end templating
● allows us to dynamically build html on browser side
● non-hacky approach to ajax
![Page 23: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/23.jpg)
What we can use Backbone for?
Internal app
Admin panel
![Page 24: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/24.jpg)
Using Backbone in modulefunction backbone_todo_library_info() {
$libraries['backbone_todo'] = array(
'js' => array(
$path . '/js/todo.js' => $options,
),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'underscore'),
array('system', 'backbone'),
));
![Page 25: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/25.jpg)
Yeoman
![Page 26: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/26.jpg)
Drupal as webservice
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
}}
![Page 27: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/27.jpg)
Questions
?
![Page 28: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/28.jpg)
Materials
● Backbone fundamentals by Andy Osmani● Choosing right js framework with ToDo MVc● Backbone tutorials
![Page 29: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/29.jpg)
Summary
![Page 31: Backbone js in drupal core](https://reader033.fdocuments.us/reader033/viewer/2022052700/55a061851a28ab372e8b47ea/html5/thumbnails/31.jpg)
Credits● logo of BackboneJs: https://github.com/documentcloud/backbone/blob/master/docs/images/backbone.png● logo of AngularJs:https://github.com/angular/angular.js/blob/master/images/logo/AngularJS.exports/AngularJS-large.png● http://www.teaching-materials.org/jsmvc/#/2● http://www.teaching-materials.org/jsmvc/#/3● http://www.teaching-materials.org/jsmvc/#/4● http://www.teaching-materials.org/jsmvc/#/18● photo with audience http://www.flickr.com/photos/dougbelshaw/5604047370/in/photostream/ ● kid in sandbox: http://www.flickr.com/photos/thenickster/266142840/● underscore logo: https://github.com/documentcloud/underscore/blob/master/docs/images/underscore.png● http://yeoman.io/