Inspired by Step by Step from jQuery to Backbone, this is an example of how to take a small gallery component, primarily authored within the PHP of a WordPress theme and refactor it to render on the front-end, first with jQuery and then finally by using Backbone models and views.
- Our baseline: an old-fashioned PHP-heavy solution
- Move gallery rendering to JS): Reduce iteration within the PHP by adding
data-attributes to the trigger links, and use that object's.data()to render out the featured image JS-side - Get that HTML out of our JavaScript by embedding the markup back in the .php file as an inline template and using
_.templateto render - Move the markup into an HTML partial and pre-compile the template with Grunt
- Refactor the jQuery used to render the featured image using a Backbone model and view
- Move the model and view code into separate files
- Refactor the remaining pure jQuery code into Backbone views
With the exception of the first step, each of those links will take you to the pull request where I walk through the code changes being made as we move from one step to the next.