Backbone js in drupal core

Apr 14, 20130 likes1,041 views

This document discusses using the JavaScript framework Backbone.js in Drupal. It begins by explaining why JavaScript matters for modern web development. It then introduces Backbone and its key concepts like the model-view-controller (MVC) pattern. Specific Backbone components are demonstrated, like models, templates, collections, views, routing, and using the Underscore.js library. Ways to incorporate Backbone in a Drupal module are presented. The document concludes by mentioning additional Backbone resources and posing questions.

BackboneJs in Drupal
core
DrupalCamp Wroclaw, 14 April, 2013

Advantages of new approach

Server

js &
JSON REST
templates

Client

Programming best practices in front end?

Model
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},

toggle: function () {
this.save({
completed: !this.get('completed')
}); } });

$Template var html = _.template('<li><%= name %></li>' , { name: 'John Smith' });$

Collection
var TodoList = Backbone.Collection.extend({
model: app.Todo,

localStorage: new Backbone
.LocalStorage('todos-backbone'),

$View app.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); }$

$Routing var 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();$

Front end templating

● allows us to dynamically build html on
browser side
● non-hacky approach to ajax

What we can use Backbone for?

Internal app

Admin panel

$Using Backbone in module function 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'), ));$

Drupal as webservice
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
}}

Materials

● Backbone fundamentals by Andy Osmani
● Choosing right js framework with ToDo MVc
● Backbone tutorials

Contact

● @MarcinWosinek
● presentation notes:
http://bit.ly/DcWrocBackbone
● marcin.wosinek@gmail.com

$Template var html = _.template('<li><%= name %></li>' , { name: 'John Smith' });$

Backbone.js is a client-side MVC framework that provides structure and reusable components for JavaScript applications. It includes models for data, collections for grouping models, views for displaying data and handling user interaction, and routers for handling application routes and linking views. Backbone.js uses REST and JSON for communicating with servers and emphasizes separation of concerns and modular, reusable code through its MVC architecture.

[Coscup 2012] JavascriptMVCAlive Kuo

This document discusses JavascriptMVC, an alternative Javascript MVC framework to BackboneJS. It provides an overview of JavascriptMVC's features such as MIT licensing, clear documentation, and providing an almost total solution for building web applications. Potential pros include the licensing, documentation, and comprehensive features. Potential cons include it being less well known and having fewer online resources than BackboneJS in Taiwan. Examples of how it handles classes, CSS, data loading/validation, and views are also provided.

AngularJS and SPALorenzo Dematté

This document discusses AngularJS and single page applications (SPAs). It begins by defining what a SPA is - a client-side application that functions like a desktop application with rich and responsive functionality. Technically, SPAs use HTML5 and JavaScript with lightweight REST/JSON services and data binding. AngularJS is introduced as a complete framework for building rich SPAs that hides DOM manipulation and uses data binding instead of direct DOM changes. The document then covers key aspects of AngularJS including directives, views/controllers/scopes, modules/routes/services, and custom directives. It concludes by discussing some UI elements in AngularJS and notes that real-world SPAs often blur the lines between client and server.

AngulrJS OverviewEyal Vardi

Responsive Design with WordPressJoe Casabona

【前端Mvc】之豆瓣说实践taobao.com

This document provides an overview of the Model-View-Controller (MVC) pattern and the Backbone.js JavaScript library for building web applications using MVC. It discusses how Backbone.js implements the core components of MVC - Models, Collections, Views and Routers. Models contain the data and logic, Collections are ordered sets of models, Views are responsible for rendering HTML/CSS templates, and Routers provide URL routing functionality. The document also provides code examples for defining and using Backbone.js Models, Collections, Views and Routers.

JavaScript the Smart Way - Getting Started with jQuerykatbailey

Responsive Design with WordPress (WCPHX)Joe Casabona

hachioji.pm #40 : asynchronous in JSKotaro Kawashima

This document introduces Kkotaro0111, a web designer and front-end engineer who enjoys JavaScript. It then discusses various ways to handle asynchronous functions in JavaScript, including using jQuery's ajax method, deferred objects, promises, and the $.when method to wait for multiple asynchronous functions to complete. It provides examples of using $.when to handle an unknown number of asynchronous calls.

JQuery In Drupalkatbailey

Using JavaScript in Drupalkatbailey

JavaScript and jQuery BasicsKaloyan Kosev

PHPConf-TW 2012 # TwigWake Liu

The document discusses the Twig template engine and its advantages over traditional PHP templates. Some key points: 1. Twig templates are compiled and cached for better performance compared to PHP templates. It also uses extensions and caching like APC for further optimizations. 2. Twig templates promote cleaner and more beautiful code through features like variables, filters, functions, logic/loops, inheritance/extensions, and reusability. 3. Twig helps enforce separation of concerns in MVC by handling data, view binding, and view structures/macros while keeping control logic in controllers.

MongoDB and RDBMSfrancescapasha

The document compares and contrasts features of relational database management systems (RDBMS) and MongoDB. It outlines key areas such as layering, engines, data structures, schemas, indexing, updating, transactions, and security. For each topic, it provides examples of how data would be represented in RDBMS and MongoDB databases. The document concludes by looking forward to upcoming features in MongoDB like improved aggregation, full text indexing, and geospatial capabilities.

WebApps e Frameworks Javascriptmeet2Brains

jQuery in the [Aol.] EnterpriseDave Artz

Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.

Big Data for each one of usOSCON Byrum

This document discusses how big data and analytics can be used by individuals. It notes that while people used to be able to work alone, big data now requires teams of people. It provides examples of how a team of 1 person grew to 4 people and later 10 people to work on an analytics project over 3 months. It also discusses technologies like REST APIs, Java, RequireJS, Mustache templates, and how they were used to develop applications and widgets to work with and visualize different data sources.

The Dean wants to Make this WordPress Site ResponsiveJoe Casabona

The document discusses responsive web design for WordPress sites. It covers topics like responsive workflows, breakpoints, images, navigation and more. The key aspects are: 1) Responsive web design aims to have a website automatically adapt to different devices. 2) Mobile-first design and testing on various devices and browsers is important. 3) Techniques like breakpoints, responsive images, and responsive navigation help sites render well across devices.

Short intro to JQuery and ModernizrJussi Pohjolainen

The document provides an introduction to JQuery and Modernizr. It discusses how JQuery simplifies common tasks like DOM manipulation, event handling, and Ajax interactions. It also explains how Modernizr detects browser features to avoid unreliable user agent sniffing. The document includes examples of basic JQuery syntax and functions for selecting elements, creating/inserting elements, and animations.

Jquery presentationMevin Mohan

This document provides an overview of jQuery, including how to download and include it in HTML, basic syntax, selectors, events, effects, DOM manipulation methods, AJAX functionality, and links for additional resources. It covers the core concepts like $(selector).action(), chaining methods, and using $(document).ready() to ensure the page is loaded before running scripts. Common selectors, events, effects, and traversal/filtering methods are demonstrated.

Auto tools祺周

JQueryJussi Pohjolainen

The document introduces JQuery, a JavaScript library that simplifies HTML document manipulation, event handling, animations, and AJAX interactions. It explains that JQuery downloads as a JavaScript file that can then be referenced in an HTML page, allowing developers to select elements and use JQuery functions rather than traditional JavaScript methods. Basic JQuery syntax, selectors, DOM manipulation, and animation functions are demonstrated.

React.js触ってみた吉澤和香奈Wakana Yoshizawa

This document provides instructions for setting up a basic React.js application on a server. It details downloading the React and JSX files using wget, creating a js directory to store them, and writing an index.html file that includes the scripts and renders a simple <HelloWorld> component inside a <div> element. The <HelloWorld> component returns JSX to display an <h1> heading saying "Hello, world!".

JavaScript for Flex DevsAaronius

1. The document discusses various JavaScript frameworks and libraries including jQuery, Underscore.js, Backbone.js, and RequireJS. 2. It provides overviews of what each framework/library is used for such as DOM manipulation with jQuery, utility functions with Underscore, and model-view-controller architecture with Backbone. 3. The document also discusses concepts like asynchronous module definition that RequireJS uses to manage dependencies between JavaScript files.

Drupal as a web frameworkAdam Kalsey

Drupal isn't a content management system. It's an application development platform that happens to ship with a great CMS as it's default implementation. Look at any chart comparing features of development frameworks and you'll see user management and authentication, forms management and validation, data storage, database migrations, internationalization and translation, MVC model with flexible templating, unit testing, and caching. Sounds a lot like Drupal. We'll look at why Drupal is an ideal application development platform for apps beyond content management, talk about where Drupal can improve in these areas, and look at an example application.

Casl. isomorphic permission management.pptxSergiy Stotskiy

CASL is a library for managing permissions across applications. It allows defining permissions declaratively using rules. Rules can be defined for different user roles, like "admin" or "writer", and permissions are validated both in memory and for database queries. CASL aims to provide a flexible yet simple way to manage permissions as requirements evolve. It supports features like tree shaking, instance and attribute validation, and database queries.

Automation in angular jsMarcin Wosinek

This document discusses automation tools and techniques for AngularJS applications. It covers setting up automation for code development, building, deploying, testing and continuous integration. Specific tools mentioned include Grunt, Karma, Jasmine, CasperJS, NPM and Bower for managing dependencies. The benefits of automation include increased code quality, faster feedback loops and more consistent releases through continuous integration.

Backbone jshusnara mohammad

The document discusses the evolution of JavaScript and AJAX technologies over time, including the introduction of frameworks like jQuery, Backbone.js, and AngularJS. It then focuses on explaining the concepts and features of Backbone.js, including models, collections, views, templates, and routers. Examples are provided to demonstrate how to define a basic model and collection in Backbone.js, create views to render them, and fetch and display the data.

More Related Content

What's hot (20)

JavaScript the Smart Way - Getting Started with jQuerykatbailey

Responsive Design with WordPress (WCPHX)Joe Casabona

hachioji.pm #40 : asynchronous in JSKotaro Kawashima

JQuery In Drupalkatbailey

Using JavaScript in Drupalkatbailey

JavaScript and jQuery BasicsKaloyan Kosev

PHPConf-TW 2012 # TwigWake Liu

MongoDB and RDBMSfrancescapasha

WebApps e Frameworks Javascriptmeet2Brains

jQuery in the [Aol.] EnterpriseDave Artz

Big Data for each one of usOSCON Byrum

The Dean wants to Make this WordPress Site ResponsiveJoe Casabona

Short intro to JQuery and ModernizrJussi Pohjolainen

Jquery presentationMevin Mohan

Auto tools祺周

JQueryJussi Pohjolainen

React.js触ってみた吉澤和香奈Wakana Yoshizawa

JavaScript for Flex DevsAaronius

Drupal as a web frameworkAdam Kalsey

Casl. isomorphic permission management.pptxSergiy Stotskiy

JavaScript the Smart Way - Getting Started with jQuerykatbailey

Responsive Design with WordPress (WCPHX)Joe Casabona

hachioji.pm #40 : asynchronous in JSKotaro Kawashima

JQuery In Drupalkatbailey

Using JavaScript in Drupalkatbailey

JavaScript and jQuery BasicsKaloyan Kosev

PHPConf-TW 2012 # TwigWake Liu

MongoDB and RDBMSfrancescapasha

WebApps e Frameworks Javascriptmeet2Brains

jQuery in the [Aol.] EnterpriseDave Artz

Big Data for each one of usOSCON Byrum

The Dean wants to Make this WordPress Site ResponsiveJoe Casabona

Short intro to JQuery and ModernizrJussi Pohjolainen

Jquery presentationMevin Mohan

Auto tools祺周

JQueryJussi Pohjolainen

React.js触ってみた吉澤和香奈Wakana Yoshizawa

JavaScript for Flex DevsAaronius

Drupal as a web frameworkAdam Kalsey

Casl. isomorphic permission management.pptxSergiy Stotskiy

Viewers also liked (6)

Automation in angular jsMarcin Wosinek

Backbone jshusnara mohammad

Introduction to backbone jsMindfire Solutions

This document provides an introduction and overview of Backbone.js. It outlines the agenda which includes what Backbone is, its dependencies, getting started with a basic setup and "Hello World" example, and an explanation of Backbone's MVC components including models, views, collections, routers, and events. Specific topics covered are defining models and collections, creating and rendering views, routing URLs, and handling events. The presenter aims to explain the structure, reuse, and separation of concerns that Backbone provides for building richer client-side applications.

Introduction to backbone_jsMohammed Saqib

This document provides an introduction to the JavaScript library Backbone.js. It describes some common problems with JavaScript applications, such as tangled code and difficulty keeping the UI, logic and database in sync. Backbone.js addresses these issues by providing an MVC-inspired framework that organizes code into structured models, views and controllers. It also supports single page applications through its use of a router and by handling synchronization between the client and server through RESTful APIs. Several large companies are highlighted that use Backbone.js for its modularity, extensibility and ability to build complex, interactive interfaces.

Backbone jsRohan Chandane

Backbone.js is a popular JavaScript MVC framework that provides structure for single-page web applications. It includes models for managing application data, views for rendering UI components, and a router for handling navigation between views. Backbone promotes separation of concerns, giving each component clearly defined responsibilities. Models can communicate with servers via RESTful APIs or websockets to retrieve and sync data. Collections manage ordered sets of models and can also fetch data from servers. Views are used to render templates and interface with models. The router maps URLs to functions that control navigation between views. Overall, Backbone provides a useful framework for building structured, scalable client-side JavaScript applications.

JavaScript MVC Frameworks: Backbone, Ember and Angular JSHarbinger Systems - HRTech Builder of Choice

In this fast paced world, how many users would like to stare at loading screen or the spinning wheel, while the request or process is being completed? If your answer is "None", you are spot on. The application developers work does not get easier with the myriad range of devices they need to cater to. We already have desktops, laptops,tablets, smartphones, smart TVs and adding further to this complexity are the distinctive characteristics of these devices like screen size, operating system, computing power, limited battery life, storage and many more. This leaves the developers to make variety of decisions regarding application compatibility, performance, usability and maintainability. One also needs to ensure that the application is scalable to meet future goals and needs of an organization. Here is where JavaScript frameworks come to the rescue; many of them work on the Model-View-Controller (MVC) design, thus enabling you to focus on making your applications rich and engaging rather than on their code structure and maintenance. However, with the large number of JavaScript frameworks available, it can become a nightmare on the development team to choose the right framework for their web app development. Thank you, for joining us for webinar on "JavaScript MVC Frameworks: Backbone, Ember and Angular JS - The paradigm shift and the impact on application development" on May 6. Attendees gained insights on the major JavaScript frameworks utilized for web app development and selecting the right framework. THE WEBINAR KEY TAKEAWAYS : 1- How JavaScript MVC frameworks are becoming the cornerstone in Web Application development: The business need, the impact, and the advantages 2-Who are the key players? - Backbone JS, Ember JS, Angular JS -A brief introduction 3-What are the Key considerations while selecting a framework 4-The salient features and constraints of each framework 5-Use case walk-through

Automation in angular jsMarcin Wosinek

Backbone jshusnara mohammad

Introduction to backbone jsMindfire Solutions

Introduction to backbone_jsMohammed Saqib

Backbone jsRohan Chandane

JavaScript MVC Frameworks: Backbone, Ember and Angular JSHarbinger Systems - HRTech Builder of Choice

Similar to Backbone js in drupal core (20)

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy

09 - Express Nodes on the right Angle - Vitaliy Basyuk - IT Event 2013 (5) 60 вузлів під правильним кутом - миттєва розробка програмних додатків використовуючи Node.js + Express + MongoDB + AngularJS. Коли ми беремось за новий продукт, передусім ми думаємо про пристрасть, яка необхідна йому, щоб зробити користувача задоволеним і відданим нашому баченню. А що допомагає нам здобути прихильність користувачів? Очевидно, що окрім самої ідеї, також важлими будуть: зручний користувацький інтерфейс, взаємодія в реальному часі та прозора робота з даними. Ці три властивості ми можемо здобути використовучи ті чи інші засоби, проте, коли все лиш починається, набагато зручніше, якщо інструменти допомагають втілити бажане, а не відволікають від головної мети. Ми розглянемо процес розробки, використовуючи Node.js, Express, MongoDB та AngularJS як найбільш корисного поєднання для отримання вагомої переваги вже на старті вашого продукту. Віталій Басюк http://itevent.if.ua/lecture/express-nodes-right-angle-rapid-application-development-using-nodejs-express-mongodb-angular

Dependency Management with RequireJSAaronius

This document provides an overview of dependency management with RequireJS. It defines key concepts like modules, AMD, and RequireJS. It demonstrates how to define modules, request dependencies, and configure RequireJS. It also covers more advanced topics like defining constructor modules, configuring paths and shimming non-AMD libraries, using plugins, conditional dependencies, error handling, and optimization.

jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse

Long ago, in the late days of the first Internet boom, before jQuery, before Underscore, before Angular, there was a web application built by a large corporation. This application was written as a server-side application using server-side technology like Java or PHP. A tiny seed of JavaScript was added to some of the pages of this application to give it a little sizzle. Over the ages, this tiny bit of JavaScript grew like kudzu. Most of it was embedded in the HTML in

Javascript first-class citizenerytoddbr

Javascript and first-class citizenry: require.js & node.js Javascript on web pages is ubiquitous and its problems are legendary. Javascript, seen as a second-class code citizen, is usually hacked together even by seasoned developers. New libraries (jQuery, prototype, backbone, knockout, underscore) and runtime tools (firebug, jasmine) look like they solve many problems - and they do. But they still leave poorly written code as just that. One key problem is that all javascript code lives globally and this results in poorly managed, tested and delivered code. In this session, I will illustrate that we can treat javascript as a first-class citizen using with require.js and node.js: it can be modular, encapsulated and easily unit tested and added to continuous integration cycle. The dependencies between javascript modules can also be managed and packaged just like in C# and Java. In the end, we can resolve many javascript difficulties at compile time rather than waiting until runtime.

Backbone.js — Introduction to client-side JavaScript MVCpootsbook

Backbone jsKnoldus Inc.

AngularJS On-RampMark Freedman

The document provides an overview of AngularJS concepts including data binding, directives, controllers, routing, services, and remote data handling. It demonstrates how to build AngularJS applications with controllers, filters, directives and routing. Examples show setting up controllers, binding data to the view, building custom directives and filters, and using the $http service to retrieve remote data. Learning resources are also provided for learning more about AngularJS.

Drupal & javascriptAlmog Baku

Heroku pop-behind-the-senseBen Lin

The document discusses software architecture for node.js applications. It covers using a home-brewed MVC framework called COKE, implementing RESTful routing and validation, separating concerns between controllers, models, and views, using libraries to extract reusable code, and scaling node.js applications from a single server to multiple distributed services. It also discusses deployment strategies from single server with downtime to zero downtime across multiple instances.

Building Applications Using Ajaxs_pradeep

Understanding backbonejsNick Lee

HTML5 for the Silverlight GuyDavid Padbury

The document provides an introduction to developing complex front-end applications using HTML and JavaScript. It discusses how JavaScript modules can be organized in a way that is similar to frameworks like WPF and Silverlight using simple constructs like the module pattern. It also covers asynchronous module definition (AMD) and how modules can be loaded and dependencies managed using RequireJS. The document demonstrates unit testing jQuery code and using pubsub for loose coupling between modules. Finally, it discusses how CSS compilers like SASS can make CSS authoring more productive by allowing variables, nesting and mixins.

NodeJSAlok Guha

The document provides an overview of Node.js, a JavaScript runtime environment for building scalable network applications. Some key points covered include: - Node.js is built on Google's V8 JavaScript engine and is event-driven and non-blocking. - It is well-suited for data-intensive real-time applications due to its lightweight and efficient nature. - Node.js differs from other scripting languages by being non-blocking, single-threaded, and having an event-based approach built-in.

BlackBerry DevCon 2011 - PhoneGap and WebWorksmwbrooks

PhoneGap and BlackBerry WebWorks allow developers to create cross-platform mobile apps using web technologies like HTML, CSS, and JavaScript. The document discusses how these tools were used to build a nursing app, including overcoming challenges related to platform differences and limitations. Feature detection was used to handle quirks across platforms. Performance was improved by dispatching functions asynchronously on BlackBerry 5. The developer recommends alternative approaches like using Backbone.js, jQuery Mobile, Jasmine BDD, and pre-generated JSON files for future projects.

Javascript frameworks: Backbone.jsSoós Gábor

1. Backbone.js is a lightweight JavaScript framework that brings structure to client-side code through an MVC pattern. 2. It separates presentation logic from business logic by defining Models, Collections, and Views. Models represent data, Collections hold lists of Models, and Views render the UI and handle events. 3. While Backbone.js allows building single page applications quickly, code can become disorganized without its structure. The framework encourages maintainable, loosely coupled code through its MVC implementation.

SproutCore and the Future of Web AppsMike Subelsky

How to React NativeDmitry Ulyanov

Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Nicolás Bouhid

This document provides an overview of using AJAX on Drupal, including: - What the AJAX API is and how it works through commands to dynamically update content without page refreshes - How to use it with forms to reload fields or content through callbacks - Attaching JavaScript behaviors to allow AJAX functionality - Creating custom commands to extend its capabilities - Triggering AJAX requests without forms by linking or instantiating AJAX objects - New features in Drupal 8 like improved commands and documentation

Writing HTML5 Web Apps using Backbone.js and GAERon Reiter

Javascript Frameworks for JoomlaLuke Summerfield

The document discusses how JavaScript frameworks like MooTools can be leveraged in Joomla sites to provide features like DOM manipulation, classes, event listeners, and effects. It describes how MooTools is the default framework used by Joomla and provides examples of its key capabilities. Additionally, it offers suggestions for optimizing framework usage, such as implementing the Google Loader API to decrease page load times.

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy

Dependency Management with RequireJSAaronius

jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse

Javascript first-class citizenerytoddbr

Backbone.js — Introduction to client-side JavaScript MVCpootsbook

Backbone jsKnoldus Inc.

AngularJS On-RampMark Freedman

Drupal & javascriptAlmog Baku

Heroku pop-behind-the-senseBen Lin

Building Applications Using Ajaxs_pradeep

Understanding backbonejsNick Lee

HTML5 for the Silverlight GuyDavid Padbury

NodeJSAlok Guha

BlackBerry DevCon 2011 - PhoneGap and WebWorksmwbrooks

Javascript frameworks: Backbone.jsSoós Gábor

SproutCore and the Future of Web AppsMike Subelsky

How to React NativeDmitry Ulyanov

Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Nicolás Bouhid

Writing HTML5 Web Apps using Backbone.js and GAERon Reiter

Javascript Frameworks for JoomlaLuke Summerfield

More from Marcin Wosinek (7)

Automatyzacja w ng świecie - ng-poznań 11 września 2014Marcin Wosinek

AngularJs in Las Palmas de GCMarcin Wosinek

This document discusses AngularJS, a framework for building client-side web applications. It is divided into four parts. Part I provides background on AngularJS and its benefits like being test-driven development friendly. Part II contrasts imperative vs declarative programming and provides AngularJS code examples. Part III discusses how AngularJS is used for everyday work, separating frontend logic from backend logic. Part IV discusses using AngularJS for testing and automation. The document concludes with contact information and credits.

The angular way 19 october 2013 GdańskMarcin Wosinek

There is a lot of positive buzz about angular in front end js framework community - directives, two-way bindings, 'by google'. There is as well some critic - it's bigger then backbone, unlike ember it does dirty checking. In this presentation we will take a look on 'the angular way' the set of practice that is necessary to know if we want to fairy judge angular. So we will take a look on: * TDD and unit tests with karma test runner * yo generators * grunt server * angular separation of concerns

Angular js warsztaty stopień 2Marcin Wosinek

Angular js 24 april 2013 amsterdamjsMarcin Wosinek

This document discusses AngularJS, a framework for building client-side web applications. It introduces AngularJS concepts like MV* architecture, two-way data binding, dependency injection, services, directives, routing and testing. AngularJS allows building single page applications with MVC-like structure, separating concerns into modular components. Data binding and dependency injection improve testability. Common gotchas are discussed around ng-repeat, code minification, and updating data outside AngularJS. Resources for learning more about AngularJS include their website, Egghead.io tutorials, and YouTube channel.

Angular js warsztaty stopień 1Marcin Wosinek

Angular js - 4developers 12 kwietnia 2013Marcin Wosinek

Automatyzacja w ng świecie - ng-poznań 11 września 2014Marcin Wosinek

AngularJs in Las Palmas de GCMarcin Wosinek

The angular way 19 october 2013 GdańskMarcin Wosinek

Angular js warsztaty stopień 2Marcin Wosinek

Angular js 24 april 2013 amsterdamjsMarcin Wosinek

Angular js warsztaty stopień 1Marcin Wosinek

Angular js - 4developers 12 kwietnia 2013Marcin Wosinek

Recently uploaded (20)

How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfRejig Digital

Unlock the future of oil & gas safety with advanced environmental detection technologies that transform hazard monitoring and risk management. This presentation explores cutting-edge innovations that enhance workplace safety, protect critical assets, and ensure regulatory compliance in high-risk environments. 🔍 What You’ll Learn: ✅ How advanced sensors detect environmental threats in real-time for proactive hazard prevention 🔧 Integration of IoT and AI to enable rapid response and minimize incident impact 📡 Enhancing workforce protection through continuous monitoring and data-driven safety protocols 💡 Case studies highlighting successful deployment of environmental detection systems in oil & gas operations Ideal for safety managers, operations leaders, and technology innovators in the oil & gas industry, this presentation offers practical insights and strategies to revolutionize safety standards and boost operational resilience. 👉 Learn more: https://www.rejigdigital.com/blog/continuous-monitoring-prevent-blowouts-well-control-issues/

Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfAlkin Tezuysal

As the demand for vector databases and Generative AI continues to rise, integrating vector storage and search capabilities into traditional databases has become increasingly important. This session introduces the *MyVector Plugin*, a project that brings native vector storage and similarity search to MySQL. Unlike PostgreSQL, which offers interfaces for adding new data types and index methods, MySQL lacks such extensibility. However, by utilizing MySQL's server component plugin and UDF, the *MyVector Plugin* successfully adds a fully functional vector search feature within the existing MySQL + InnoDB infrastructure, eliminating the need for a separate vector database. The session explains the technical aspects of integrating vector support into MySQL, the challenges posed by its architecture, and real-world use cases that showcase the advantages of combining vector search with MySQL's robust features. Attendees will leave with practical insights on how to add vector search capabilities to their MySQL systems.

Domino IQ – What to Expect, First Steps and Use Casespanagenda

Webinar Recording: https://www.panagenda.com/webinars/domino-iq-what-to-expect-first-steps-and-use-cases/ HCL Domino iQ Server – From Ideas Portal to implemented Feature. Discover what it is, what it isn’t, and explore the opportunities and challenges it presents. Key Takeaways - What are Large Language Models (LLMs) and how do they relate to Domino iQ - Essential prerequisites for deploying Domino iQ Server - Step-by-step instructions on setting up your Domino iQ Server - Share and discuss thoughts and ideas to maximize the potential of Domino iQ

Data Virtualization: Bringing the Power of FME to Any ApplicationSafe Software

Imagine building web applications or dashboards on top of all your systems. With FME’s new Data Virtualization feature, you can deliver the full CRUD (create, read, update, and delete) capabilities on top of all your data that exploit the full power of FME’s all data, any AI capabilities. Data Virtualization enables you to build OpenAPI compliant API endpoints using FME Form’s no-code development platform. In this webinar, you’ll see how easy it is to turn complex data into real-time, usable REST API based services. We’ll walk through a real example of building a map-based app using FME’s Data Virtualization, and show you how to get started in your own environment – no dev team required. What you’ll take away: -How to build live applications and dashboards with federated data -Ways to control what’s exposed: filter, transform, and secure responses -How to scale access with caching, asynchronous web call support, with API endpoint level security. -Where this fits in your stack: from web apps, to AI, to automation Whether you’re building internal tools, public portals, or powering automation – this webinar is your starting point to real-time data delivery.

Introduction to Typescript - GDG On Campus EUEGoogle Developer Group On Campus European Universities in Egypt

Interested in leveling up your JavaScript skills? Join us for our Introduction to TypeScript workshop. Learn how TypeScript can improve your code with dynamic typing, better tooling, and cleaner architecture. Whether you're a beginner or have some experience with JavaScript, this session will give you a solid foundation in TypeScript and how to integrate it into your projects. Workshop content: - What is TypeScript? - What is the problem with JavaScript? - Why TypeScript is the solution - Coding demo

Co-Constructing Explanations for AI Systems using ProvenancePaul Groth

Explanation is not a one off - it's a process where people and systems work together to gain understanding. This idea of co-constructing explanations or explanation by exploration is powerful way to frame the problem of explanation. In this talk, I discuss our first experiments with this approach for explaining complex AI systems by using provenance. Importantly, I discuss the difficulty of evaluation and discuss some of our first approaches to evaluating these systems at scale. Finally, I touch on the importance of explanation to the comprehensive evaluation of AI systems.

Improving Developer Productivity With DORA, SPACE, and DevExJustin Reock

“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/state-space-models-vs-transformers-for-ultra-low-power-edge-ai-a-presentation-from-brainchip/ Tony Lewis, Chief Technology Officer at BrainChip, presents the “State-space Models vs. Transformers for Ultra-low-power Edge AI” tutorial at the May 2025 Embedded Vision Summit. At the embedded edge, choices of language model architectures have profound implications on the ability to meet demanding performance, latency and energy efficiency requirements. In this presentation, Lewis contrasts state-space models (SSMs) with transformers for use in this constrained regime. While transformers rely on a read-write key-value cache, SSMs can be constructed as read-only architectures, enabling the use of novel memory types and reducing power consumption. Furthermore, SSMs require significantly fewer multiply-accumulate units—drastically reducing compute energy and chip area. New techniques enable distillation-based migration from transformer models such as Llama to SSMs without major performance loss. In latency-sensitive applications, techniques such as precomputing input sequences allow SSMs to achieve sub-100 ms time-to-first-token, enabling real-time interactivity. Lewis presents a detailed side-by-side comparison of these architectures, outlining their trade-offs and opportunities at the extreme edge.

Oracle Cloud Infrastructure Generative AI ProfessionalVICTOR MAESTRE RAMIREZ

How to Detect Outliers in IBM SPSS Statistics.pptxVersion 1 Analytics

Your startup on AWS - How to architect and maintain a Lean and Mean accountangelo60207

Prevent infrastructure costs from becoming a significant line item on your startup’s budget! Serial entrepreneur and software architect Angelo Mandato will share his experience with AWS Activate (startup credits from AWS) and knowledge on how to architect a lean and mean AWS account ideal for budget minded and bootstrapped startups. In this session you will learn how to manage a production ready AWS account capable of scaling as your startup grows for less than $100/month before credits. We will discuss AWS Budgets, Cost Explorer, architect priorities, and the importance of having flexible, optimized Infrastructure as Code. We will wrap everything up discussing opportunities where to save with AWS services such as S3, EC2, Load Balancers, Lambda Functions, RDS, and many others.

Jeremy Millul - A Talented Software DeveloperJeremy Millul

Jeremy Millul is a talented software developer based in NYC, known for leading impactful projects such as a Community Engagement Platform and a Hiking Trail Finder. Using React, MongoDB, and geolocation tools, Jeremy delivers intuitive applications that foster engagement and usability. A graduate of NYU’s Computer Science program, he brings creativity and technical expertise to every project, ensuring seamless user experiences and meaningful results in software development.

What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowSMACT Works

In today's fast-paced business landscape, financial planning and performance management demand powerful tools that deliver accurate insights. Oracle EPM (Enterprise Performance Management) stands as a leading solution for organizations seeking to transform their financial processes. This comprehensive guide explores what Oracle EPM is, its key benefits, and how partnering with the right Oracle EPM consulting team can maximize your investment.

Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Anish Kumar

Presented by: Anish Kumar LinkedIn: https://www.linkedin.com/in/anishkumar/ This lightning talk dives into real-world GenAI projects that scaled from prototype to production using Databricks’ fully managed tools. Facing cost and time constraints, we leveraged four key Databricks features—Workflows, Model Serving, Serverless Compute, and Notebooks—to build an AI inference pipeline processing millions of documents (text and audiobooks). This approach enables rapid experimentation, easy tuning of GenAI prompts and compute settings, seamless data iteration and efficient quality testing—allowing Data Scientists and Engineers to collaborate effectively. Learn how to design modular, parameterized notebooks that run concurrently, manage dependencies and accelerate AI-driven insights. Whether you're optimizing AI inference, automating complex data workflows or architecting next-gen serverless AI systems, this session delivers actionable strategies to maximize performance while keeping costs low.

Dancing with AI - A Developer's Journey.pptxElliott Richmond

In this talk, Elliott explores how developers can embrace AI not as a threat, but as a collaborative partner. We’ll examine the shift from routine coding to creative leadership, highlighting the new developer superpowers of vision, integration, and innovation. We'll touch on security, legacy code, and the future of democratized development. Whether you're AI-curious or already a prompt engineering, this session will help you find your rhythm in the new dance of modern development.

Your startup on AWS - How to architect and maintain a Lean and Mean account J...angelo60207

LSNIF: Locally-Subdivided Neural Intersection FunctionTakahiro Harada

Neural representations have shown the potential to accelerate ray casting in a conventional ray-tracing-based rendering pipeline. We introduce a novel approach called Locally-Subdivided Neural Intersection Function (LSNIF) that replaces bottom-level BVHs used as traditional geometric representations with a neural network. Our method introduces a sparse hash grid encoding scheme incorporating geometry voxelization, a scene-agnostic training data collection, and a tailored loss function. It enables the network to output not only visibility but also hit-point information and material indices. LSNIF can be trained offline for a single object, allowing us to use LSNIF as a replacement for its corresponding BVH. With these designs, the network can handle hit-point queries from any arbitrary viewpoint, supporting all types of rays in the rendering pipeline. We demonstrate that LSNIF can render a variety of scenes, including real-world scenes designed for other path tracers, while achieving a memory footprint reduction of up to 106.2x compared to a compressed BVH. https://arxiv.org/abs/2504.21627

Create Your First AI Agent with UiPath Agent BuilderDianaGray10

Join us for an exciting virtual event where you'll learn how to create your first AI Agent using UiPath Agent Builder. This session will cover everything you need to know about what an agent is and how easy it is to create one using the powerful AI-driven UiPath platform. You'll also discover the steps to successfully publish your AI agent. This is a wonderful opportunity for beginners and enthusiasts to gain hands-on insights and kickstart their journey in AI-powered automation.

6th Power Grid Model Meetup - 21 May 2025DanBrown980551

6th Power Grid Model Meetup Join the Power Grid Model community for an exciting day of sharing experiences, learning from each other, planning, and collaborating. This hybrid in-person/online event will include a full day agenda, with the opportunity to socialize afterwards for in-person attendees. If you have a hackathon proposal, tell us when you register! About Power Grid Model The global energy transition is placing new and unprecedented demands on Distribution System Operators (DSOs). Alongside upgrades to grid capacity, processes such as digitization, capacity optimization, and congestion management are becoming vital for delivering reliable services. Power Grid Model is an open source project from Linux Foundation Energy and provides a calculation engine that is increasingly essential for DSOs. It offers a standards-based foundation enabling real-time power systems analysis, simulations of electrical power grids, and sophisticated what-if analysis. In addition, it enables in-depth studies and analysis of the electrical power grid’s behavior and performance. This comprehensive model incorporates essential factors such as power generation capacity, electrical losses, voltage levels, power flows, and system stability. Power Grid Model is currently being applied in a wide variety of use cases, including grid planning, expansion, reliability, and congestion studies. It can also help in analyzing the impact of renewable energy integration, assessing the effects of disturbances or faults, and developing strategies for grid control and optimization.

End-to-end Assurance for SD-WAN & SASE with ThousandEyesThousandEyes

How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfRejig Digital

Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfAlkin Tezuysal

Domino IQ – What to Expect, First Steps and Use Casespanagenda

Data Virtualization: Bringing the Power of FME to Any ApplicationSafe Software

Introduction to Typescript - GDG On Campus EUEGoogle Developer Group On Campus European Universities in Egypt

Co-Constructing Explanations for AI Systems using ProvenancePaul Groth

Improving Developer Productivity With DORA, SPACE, and DevExJustin Reock

“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...Edge AI and Vision Alliance

Oracle Cloud Infrastructure Generative AI ProfessionalVICTOR MAESTRE RAMIREZ

How to Detect Outliers in IBM SPSS Statistics.pptxVersion 1 Analytics

Your startup on AWS - How to architect and maintain a Lean and Mean accountangelo60207

Jeremy Millul - A Talented Software DeveloperJeremy Millul

What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowSMACT Works

Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Anish Kumar

Dancing with AI - A Developer's Journey.pptxElliott Richmond

Your startup on AWS - How to architect and maintain a Lean and Mean account J...angelo60207

LSNIF: Locally-Subdivided Neural Intersection FunctionTakahiro Harada

Create Your First AI Agent with UiPath Agent BuilderDianaGray10

6th Power Grid Model Meetup - 21 May 2025DanBrown980551

End-to-end Assurance for SD-WAN & SASE with ThousandEyesThousandEyes

Backbone js in drupal core

1. BackboneJs in Drupal core DrupalCamp Wroclaw, 14 April, 2013

2. Who am I?

3. You?

4. Why js matters?

5. Web 1.0: JS for Almost Nothing

6. Web 2.0: JS for AJAX

7. Web Today: JS for Everything

8. Advantages of new approach Server js & JSON REST templates Client

9. Challenges

10. jQuery is not enough

11. Programming best practices in front end?

12. Solution: Browserside js frameworks

13. Backbone is in Drupal Core

14. What is Backbone? ?

15. MV* in Backbone

16. Model app.Todo = Backbone.Model.extend({ defaults: { title: '', completed: false }, toggle: function () { this.save({ completed: !this.get('completed') }); } });

17. Template var html = _.template('<li><%= name %></li>' , { name: 'John Smith' });

18. Collection var TodoList = Backbone.Collection.extend({ model: app.Todo, localStorage: new Backbone .LocalStorage('todos-backbone'),

19. View app.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); }

20. Routing var 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();

21. Underscore

22. Front end templating ● allows us to dynamically build html on browser side ● non-hacky approach to ajax

23. What we can use Backbone for? Internal app Admin panel

24. Using Backbone in module function 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'), ));

25. Yeoman

26. Drupal as webservice { "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }}

27. Questions ?

28. Materials ● Backbone fundamentals by Andy Osmani ● Choosing right js framework with ToDo MVc ● Backbone tutorials

29. Summary

30. Contact ● @MarcinWosinek ● presentation notes: http://bit.ly/DcWrocBackbone ● [email protected]

31. 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/

Backbone js in drupal core

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Backbone js in drupal core (20)

More from Marcin Wosinek (7)

Recently uploaded (20)

Backbone js in drupal core