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.
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
Using Backbone.js to move state to the client-side and the benefits of using a JavaScript MVC framework.
Delivered at SuperMondays, Newcastle upon Tyne, on 26th September 2011.
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
Using Backbone.js to move state to the client-side and the benefits of using a JavaScript MVC framework.
Delivered at SuperMondays, Newcastle upon Tyne, on 26th September 2011.
This is my talk from Rails Israel 2014. I'm talking about web components, how they work, what libraries exist and how to use web components with Ruby on Rails.
In this meetup Eyal Vardi will talk about Angular 2.0 architecture. The session will focus on the main parts of Angular 2.0:
Application Bootstrap
Angular Compiler
Hierarchical Injector
Component Lifecycle Hooks
Change Detector
Renderer
Dynamic component creation
Each part will be explained and analyzed. In some cases we will dive into Angular 2.0 source code. Our purpose is to list the Do's & Don’ts of Angular.
The session is mostly targeted for developers which already have some experience with Angular 2.0.
This presentation was given at DevFest Twin Cities in 2013, and introduces droidQuery - the Android port of jQuery, that allows UI manipulation and traversal of the Android layout, asynchronous REST client calls, event handling, animations, and much more.
This is my talk from Rails Israel 2014. I'm talking about web components, how they work, what libraries exist and how to use web components with Ruby on Rails.
In this meetup Eyal Vardi will talk about Angular 2.0 architecture. The session will focus on the main parts of Angular 2.0:
Application Bootstrap
Angular Compiler
Hierarchical Injector
Component Lifecycle Hooks
Change Detector
Renderer
Dynamic component creation
Each part will be explained and analyzed. In some cases we will dive into Angular 2.0 source code. Our purpose is to list the Do's & Don’ts of Angular.
The session is mostly targeted for developers which already have some experience with Angular 2.0.
This presentation was given at DevFest Twin Cities in 2013, and introduces droidQuery - the Android port of jQuery, that allows UI manipulation and traversal of the Android layout, asynchronous REST client calls, event handling, animations, and much more.
Creating Single Page Web App using Backbone JSAkshay Mathur
This was presented during the workshop on the topic. The complete code of the app that was created during the workshop is available at Github https://github.com/mathurakshay/explore-venues
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
This gives a jump start to Backbone.js. The session would cover various topics like Introduction to backbone js / Why would you use Backbone js? / Dependencies for Backbone js. and Getting started with backbone MVC etc.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
A walkthrough of how to write a complete HTML5 web app (both front end and back end) using Google App Engine (Python), Backbone.js, Require.js, underscore.js and jQuery.
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.
This DrupalCon 2019 Amsterdam talk provides a look beyond the world of PHP and Javascript. It explores how other languages such as Ruby, Java, Rust and Perl handle things and highlights some interesting features of those languages. Not all the things that other languages can do can be done in PHP or Javascript but the concepts and ideas can still be used.
Come to this talk prepared to learn about the Doctrine PHP open source project. The Doctrine project has been around for over a decade and has evolved from database abstraction software that dates back to the PEAR days. The packages provided by the Doctrine project have been downloaded almost 500 million times from packagist. In this talk we will take you through how to get started with Doctrine and how to take advantage of some of the more advanced features.
MongoDB is the trusted document store we turn to when we have tough data store problems to solve. For this talk we are going to go a little bit off the path and explore what other roles we can fit MongoDB into. Others have discussed how to turn MongoDB’s capped collections into a publish/subscribe server. We stretch that a little further and turn MongoDB into a full fledged broker with both publish/subscribe and queue semantics, and a the ability to mix them. We will provide code and a running demo of the queue producers and consumers. Next we will turn to coordination services: We will explore the fundamental features and show how to implement them using MongoDB as the storage engine. Again we will show the code and demo the coordination of multiple applications.
20 Comprehensive Checklist of Designing and Developing a WebsitePixlogix Infotech
Dive into the world of Website Designing and Developing with Pixlogix! Looking to create a stunning online presence? Look no further! Our comprehensive checklist covers everything you need to know to craft a website that stands out. From user-friendly design to seamless functionality, we've got you covered. Don't miss out on this invaluable resource! Check out our checklist now at Pixlogix and start your journey towards a captivating online presence today.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!SOFTTECHHUB
As the digital landscape continually evolves, operating systems play a critical role in shaping user experiences and productivity. The launch of Nitrux Linux 3.5.0 marks a significant milestone, offering a robust alternative to traditional systems such as Windows 11. This article delves into the essence of Nitrux Linux 3.5.0, exploring its unique features, advantages, and how it stands as a compelling choice for both casual users and tech enthusiasts.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
Full-RAG: A modern architecture for hyper-personalizationZilliz
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIVladimir Iglovikov, Ph.D.
Presented by Vladimir Iglovikov:
- https://www.linkedin.com/in/iglovikov/
- https://x.com/viglovikov
- https://www.instagram.com/ternaus/
This presentation delves into the journey of Albumentations.ai, a highly successful open-source library for data augmentation.
Created out of a necessity for superior performance in Kaggle competitions, Albumentations has grown to become a widely used tool among data scientists and machine learning practitioners.
This case study covers various aspects, including:
People: The contributors and community that have supported Albumentations.
Metrics: The success indicators such as downloads, daily active users, GitHub stars, and financial contributions.
Challenges: The hurdles in monetizing open-source projects and measuring user engagement.
Development Practices: Best practices for creating, maintaining, and scaling open-source libraries, including code hygiene, CI/CD, and fast iteration.
Community Building: Strategies for making adoption easy, iterating quickly, and fostering a vibrant, engaged community.
Marketing: Both online and offline marketing tactics, focusing on real, impactful interactions and collaborations.
Mental Health: Maintaining balance and not feeling pressured by user demands.
Key insights include the importance of automation, making the adoption process seamless, and leveraging offline interactions for marketing. The presentation also emphasizes the need for continuous small improvements and building a friendly, inclusive community that contributes to the project's growth.
Vladimir Iglovikov brings his extensive experience as a Kaggle Grandmaster, ex-Staff ML Engineer at Lyft, sharing valuable lessons and practical advice for anyone looking to enhance the adoption of their open-source projects.
Explore more about Albumentations and join the community at:
GitHub: https://github.com/albumentations-team/albumentations
Website: https://albumentations.ai/
LinkedIn: https://www.linkedin.com/company/100504475
Twitter: https://x.com/albumentations
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
17. Backbone.js
• URL: http://backbonejs.org/
• Created by Jeremy Ashkenas in 2010, an author of
CoffeeScript
• Based on Underscore.js: http://backbonejs.org/
• Requires jQuery or Zepto
#17
18. Backbone.js features
• Minimalistic
• Modular
• Perfect OOP design
• Over 100 available extensions:
https://github.com/documentcloud/backbone/wiki/Exten
sions,-Plugins,-Resources
• Community
#18
27. Define the model and
the collection
// Define new model.
var InvoiceItemModel = Backbone.Model.extend({
calculateAmount: function() {
return this.get('price') * this.get('quantity');
}
});
// Define new collection object.
var InvoiceItemCollection = Backbone.Collection.extend({
model: InvoiceItemModel
});
#27
28. Define the view to
render the model
var InvoiceItemView = Backbone.View.extend({
// Define element tag name.
tagName: 'tr',
// Define template.
template: _.template($('#item-row-template').html()),
// Render the view.
render: function() {
var data = this.model.toJSON();
data.amount = this.model.calculateAmount();
$(this.el).html(this.template(data));
return this;
},
});
#28
29. Define the view to
render the collection
var InvoiceItemListView = Backbone.View.extend({
tagName: 'table',
template: _.template($('#item-table-template').html()),
// Render the view.
render: function() {
$(this.el).html(this.template());
_.each(this.collection.models, function(model, key)
{ this.append(model); }, this);
return this;
},
// Add an invoice item row to the table.
append: function(model) {
$(this.el).append(new InvoiceItemView({ model: model }).render().el);
}
});#29
42. REST in Backbone
var PostModel = Backbone.Model.extend({
// Override id attribute.
idAttribute: '_id',
// Define URL root to access model resource. Otherwise use
// url() method to provide full path to the model resource.
urlRoot: function() { return 'http://example.com/posts/'; }
});
var PostCollection = Backbone.Collection.extend({
model: PostModel,
// Define path to the collection resource.
url: function() { return 'http://example.com/posts/'; }
});
#42
43. REST in Backbone.js
// Fetches data into a model.
model.fetch();
// Saves a model.
model.save();
// Destroys a model.
model.destroy();
// Fetches data into a collection.
collection.fetch();
// Adds models to a collection.
collection.add(models);
// Removes specific models from collection.
collection.remove(models);
#43
44. Backbone module
• URL: http://drupal.org/project/backbone
• Provides models and collections for Drupal entities
via REST:
– Node: Node model
– All node: NodeIndex collection
– Arbitrary view: NodeView collection
• Works with both Services and RESTful Web Services
modules.
#44
45. Backbone module
// Create new NodeView collection.
var viewCollection = new
Drupal.Backbone.Collections.NodeView();
// Set Drupal View name.
viewCollection.viewName = 'backbone_example';
// Fetch data from the collection.
viewCollection.fetch({success: function() {
console.log(viewCollection.toJSON());
});
#45
48. Backbone and Drupal 8
• It is in core!
• Used for In-place editing
issue:http://drupal.org/node/1824500
• Used for layouts issue:http://drupal.org/node/1841584
• Used for toolbar issue:http://drupal.org/node/1860434
• META issue: http://drupal.org/node/1858368
#48
50. One more thing!
• Web services initiative
– REST in core
– Storage controllers
• Twig
– Templating engine
– Twig in core (Twig sandbox)
– Works both for PHP and JS
#50
Just remind how fun it was in 1995!
Actually I started to use Internet in 1999, when I was still in school. There was no so many JavaScript powered web pages, but it was very cool to see snowflakes floating on the screen on the Merry Christmas eve!
This is how JS was used at this time.
And then in 2000 Microsoft invented XMLHttpRequest.
5 years (!) had been passed since we called it AJAX.
Incredible, but in 1998 people were using iframes to do the same!
In 2006 we first saw jQuery. It was awesome! It allowed do so many new things:
* Use CSS selectors for DOM traversing
* Do vent handling
* Perform AJAX
* Make animation
* Achieve compatibility with old browsers
It was amazing!
BTW is is going to be jQuery conference in Portland soon: on June 13 & 14 this year.
And what we are working with in the 2013?
There are so many new things that have appeared during recent years.
Now it is time remind them.
Alright!
* Now we have HTML5 that provides so many cool things.
* Fore example in HTML5 there is Local Storage and if is used, your application can keep data in the browser storage when there is no Internet connection, and synchronize data with a remote server when connection is available.
* Push state allows to update URL in the browser without need to reload the page.. Remember that before we used # in the URL to be able to change. And now not, this gives us some possibilities to create Search Engines compatible dynamic web apps.
* Now we also have JS templating engines on the client-side that allows to unload the server and to transfer JSON instead of HTML code.
* We also have REST (Representational State Transfer), which is an architectural style which implies that server deals with data, while client is involved into interaction with a user. With REST we can easily replace the server or the client with alternative server or a cleint.
And what about JS evolution seen last years.
First, clients is eacoming more complex be able to do much more things then ever before.
Second, they became more thick, may contain some business logic and, obviously, perform rendering.
Server just stores data and checks access permissions.
Also just want to note, that we are seeing this thin-to-thick clients transition once again.
TODO: In Unix time there was X Windows System that allowed user to access server resources, and client was very thin.
And third, browsers executes JavaScript 10 times faster then it was 10 years ago. JS client applications works really fast now! And even performance on mobile devices is not bad.
But we still have some problems!
Right now typical AJAX code looks like this.
And there is something wrong about it!
Here we do:
a) Event handling
b) AJAX request
c) Data rendering
d) DOM updates
That's to much for the single piece of code!
This code looks the same as it was when developers where creating first desktop programs at the dawn of programming. Or the same as website development when there was no many MVC frameworks for the web.
Also, AJAX in Drupal.
Have you ever deal with any JavaScript when building AJAX application with Drupal?
There is cool form API, AHAH, we are defining AJAX settings in PHP arrays.
D'oh!
Let's do things properly!
Can we?
I mean use just JavaScript when it is intended to be used, and use proper MVC framework so there is no mess in the code.
Yeah, there is a way!
Meet! ... Backbone... JS!
Whoohoo!
Backbone.js was created by Jeremy Ashkenas, author of the CoffeScript in 2010.
Backbone.js is based on the Undersore.js library which provides many useful functions to work with arrays, collections, objects, events, and so on.
Backbone.js requires jQuery or Zepto
Zepto is 99% compatible with jQuety, which is smaller and faster but works only in modern browsers.
Let's speak about Backbone.js advantages.
* It is minimalistic and easy integrates with other frameworks.
* It is modular, which means you can use only required functionality.
* It also has perfect OOP design and can be easily extended and overridden
* Also there is a growing amount of Backbone.js extension. And now it is more then 100.
* And there is a nice community. 90% of my issues I created on GitHub received feedback. This is really great. Community grows the day after the day. And I like it.
There are many similar frameworks, why we are speaking about Backbone.js now?
Because you should now how new frameworks appears.
Look at this slide!
And finally Backbone.js was chosen by many world knows startups and websites.
* Groupon Now!'s team decided their first product to be AJAX heavy, but still linkable and shareable. Despite they were completely new in Backbone, they found it's learning curve was incredible quick, so they were able to deliver the working product just in two weeks.
* Foursquare used Backbone.js library to create model classes for the entities in foursquare (e.g. venues, checkins, users). They found that Backbone’s model classes provide a simple and lightweight mechanism to capture object data and state, complete with the semantics of classical inheritance.
* LinkedIn Mobile used Backbone.js to create it's ts next-generation HTML5 mobile web app. Backbone made it easy to keep the app modular, organized and extensible so that it was possible to program the complexities of LinkedIn's user experience.
* Airbnb is a community marketplace for users to list, discover, and book unique spaces around the world. Development team uses Backbone in many latest products. Recently they rebuilt mobile website with Backbone.js and Node.js tied together with a library they're calling Rendr.
Let's learn how to create backbone applications.
Backbone.js operates with following objects
* Model contains data and provides business logic used in the application.
* Collection is a set of models that can be processed in the loop and supports sorting and filtering.
* View renders model or collection and interacts with the user.
* Templates are used for separation HTML from JavaSript in the View. By default Undescore template engine is used, but it can be replaced with Twig, which is used in Drupal 8 or Mustache.
* Router is similar to hook_menu. It allows to define a path and provide callbacks.
* History is global object, which contains router that is currently in use.
* Backbone objects such as Models, Collections, Views and Router implements Events object, they can provide own events and listen to events from other objects.
There are some differences in Backbone architecture and traditional MVC pattern.
At the left there is a MVC structure . Here we see, that the Model updates the View seen by the user. User can perform actions which are handled by the Controller. Controller manipulates model data and can trigger business logic methods. Also Models is synchronized with a storage.
At the right you can see Backbone.js structure. The main difference is that some of the controller functionality is implemented by the View, while other by the router. Typically view can listen model events and update DOM. View also listens to user events and updates model accordingly. Model is synchronized with a server using REST approach. Read ops are typically controlled by the Router, while write ops by the View.
Let's make some demo!
Let's start with some easy example. Here we just render the collection of models with Backbone.js.
Now we can move forward and learn how to add some cool features into our application.
Here is how we can use REST with our models and collections.
Here is how we can use REST with our models and collections.
Here is how we can use REST with our models and collections.
Here is how we can use REST with our models and collections.
Here is how we can use REST with our models and collections.
Some other cool things you will find in Backbone.js CookBook. I am working on final chapters and soon the book will be published.
Contact me or leave your business card please, so I can provide you with a discount voucher.
Ok, now let's understand how Backbone deals with Drupal.
To pass data from Drupal to Backbone.js we can use following methods.
Bootstrapping. This is the technique we saw above: we can create model and collection objects and populate them with data directly in JS code. In D7 we can pass data as settings into JS code. (TODO: add example).
REST (Representational State Transfer) – is an architectural style for designing network applications which communicate between each other using HTTP protocol and passing data in JSON format or any other appropriate HTTP data type. In this case Backbone.js client and Drupal synchronizes data via REST. In Drupal 7 RESTful service can be implemented using Services / RESTful web-services modules.
Backbone module provides more convenient way for Backbone client to communicate with Drupal. It is also based on the REST approach.
Let's see how those approaches works in detail.
Let's understand how REST works.
REST-style architectures consists of clients and servers. Client calls HTTP request method (POST, GET, PUT, DELETE) to perform CRUD (created, read, update, delete) operation over a resource, which can be either a collection or a single element.
There can be a resource that represents multiple or single object. Depending on the request and resource type one or another operation can be performed.
Following table shows it.
Here is how we can use REST with our models and collections.
Here is how we can use REST or our models and collections.
Here is one more way of dealing with Backbone.js in Drupal.
There is Drupal module called Backbone that can provide node, comment and user entities on the client side where Backbone is running. It works via REST and integrates with both Services and RESTful web services modules.
It also provides lists of users and nodes and even content of Drupal view to the Backbone app!
This module just saves much time.
Let's see how it works.
As we said before Backbone is pretty extensible, so we extend default models and collections.
This example shows how we can get Drupal entities from the View and work with them as with Backbone Collection.
We simply need to know view name and nothing else to get those entities. That's really cool!
Thanks to ****, author of this module.
This module is still in development, which means that there will be many new features. Such as bootstrapping support, better views support. It will allow to do in-place content editing, drag and drop support to reorder things. And may be we will see D8 version.
Guess how Bakcbone.js is related to Drupal8?
It's in core! Along with other libraries such as jQuery or jQuery UI!
It is event in D8 Wow!
Some of the existing functionality is completely being rebuilt using Backbone.js: in-place editing, layouts, toolbar and many other.
You can refer to the following links to understand what's going on in D8. You can also take part in the Drupal Code sprint at Friday.
One more thing we need to talk about.
Drupal 8 is now much powerful then it was. It is based on Symphony and uses much more OOP then ever before.
There can be controller class for operating with entities, configuration, permissions and other data stored in the system. Now logic is completely separated from the representation. And it is quite easy module to define REST resources to access it's data. So REST support is in core and will basically provided by any Drupal 8 module.
Also Twig is in core too. Twig is a templating engine that is brought to Drupal 8 to provide better security and convenience when doing theming. There is also Twig implementation for JS.
This is very simplified scheme of how things will work in D8.
Let's imagine that we can use Twig templates on the client side. This means that we can easily re-do some of the front-end functionality with Backbone.js.
And it would work for mobile too.
Even more, we can wrapp such application in a mobile app with PhoneGap or Trigger.io. Those tools allows to build mobile application from HTML5 / CSS3 / JS.