Tag Archives: Backbone

Adam Silverstein: Put a Little Backbone in Your WordPress!

Backbone (and Underscore!) are bundled with WordPress – explore how you can leverage their power to deliver complex user experiences while keeping your code organized and maintainable.
First, we will explore why Backbone is awesome, and what it lets you create is amazing! We will look at some examples of where and how it is used to power web apps and increasingly large areas of the WordPress dashboard. Seeing these incredible user experiences built in Backbone will help get you excited about using Backbone in your next project.
Next, we will dig into Backbone fundamentals to get a crystal clear understanding of the fundamental concepts underlying Backbone applications: Models, Views and Collections. We’ll look at how these tie to templates, events and routes for rendering, interaction and state handling. We discuss using Backbone in themes and plugins: how to include Backbone, how to interact with the back end to get and put data, including using the new WP REST API. We will cover WordPress specific helper functions that help our Backbone projects.
Finally, we will explore several very simple Backbone applications that demonstrate interacting with WordPress using the Rest API.


Video Playlist: Backbone Conf III – 2014

Using Backbone for html5 canvas

Using Backbone for html5 canvas

Developing our mind map application Slash System, we chose Backbone as the main library to build an application. The mind map is drawn into <canvas> element using various primitives. We chose KineticJS library for work with canvas, as it perfectly supports events for the objects on the canvas. In order to match the architecture of Backbone, all work with canvas (or rather with the object instances of KineticJS) occurred in Backbone.View instances:

Navigation for Single Page Applications

This screencast covers how to construct a single page application with a tab-like navigation user interface and routing. A solution is introduced that uses only Web Standards (HTML, JavaScript, CSS, The DOM).

Even though libraries like Bootstrap, Backbone, Angular, Knockout and Ember do most of the work for you when implementing this kind of system, this screencast does not use any libraries at all. This emphasizes the core technogies, and provides a foundation for understanding how those libraries work.