MasterView: Evolution of a WYSIWYG Template Engine

Mountain West Ruby Conference - Mar 16-17, 2007

Jeff Barczewski

MasterView project founder
Inspired Horizons Trainer / Mentor

jeffb at inspiredhorizons dot com

Press the key 't' to toggle into Handout mode vs Slide mode

Overview

• Background
• Goals
• Demonstration
• How it works
• Evolution
• Future directions

Background

• Why another templating engine?
• WYSIWYG editing with full power of ERB
• Began using Rails March 2005
• Embraced the productivity of Rails
  
• Felt we could do better with the view

Goals

• WYSIWYG (x)html
  
• Keep it simple. DRY. Simple syntax with Ruby flavor
• Designed for Ruby and Rails
• Utilize Rails layouts, partials, and helpers
• Reduce complexity, no extra view (presentation) objects or hashes
• Production ready scaffold templates or work from html prototype
• Reduce number of files. Preview in browser

Reviewed / Considered

• Amrita2
• Kwartz
• PageTemplate
  
• IOWA, Liquid
• Components WebObjects, JSF
• PHP/Zope TAL, Tapestry

Analysis

• Liked the simplicity of Rails but wanted some features of components
• Amrita2 felt the closest
• After digging into Amrita2, I found that it wouldn't be easy to adapt
• Same was true for the others
• Realized that I could start by creating a thin wrapper above ERb
• Decided to run the idea by the St. Louis Ruby User Group

Thoughts - St. Louis Ruby User Group

• Users could clearly understand my goals
• No existing projects seemed to meet our needs
• Kyle Cordes suggested the idea that the template engine would user extendable
• Idea that users could create their own directives
• Would allow teams to encapsulate common code
• Would open the project up to the needs of the community

Demonstration

• Installation as gem or plugin
• Rails vs MasterView scaffold generator
  
• Html templates with dummy data, javascript allows it to function without server running
  
• Live use, WYSIWYG editing
• Admin tools (synchronization)
• View similar demo on MasterView site

How it works

• Rexml listener
• Generates one or more ERb files from each template
• Directives = html attributes which manipulate output at runtime
• API to provide easy access to the data along with nesting and priority
• To stay DRY but yet retain WYSIWYG editing, template needed to contain multiple pieces
• Dummy data is replaced with live data at runtime, javascript enables offline simulation

How it works 2

• Directives could get the html style features directly from html
• Directives can create Rails helper calls which are extensible
• Directives are classes which are dynamically loaded
• Several generators and a plugin engine

MasterView Diagram

• Show MasterView rendering diagram

Evolution

• Put together basics to prove concept
• Added tests, began TDD
• First version generated single template (fully DRY)
• Didn't work well for teams, also hard to use for WYSIWYG
• Created templates for each view but with imports

Evolution 2

• Needed process to synchronize (console/rake and web admin)
• Tidy needed for invalid xhtml
• Deb Lewis joined project, refactored configuration, created much needed documentation
• We quickly grew into a team. Productivity and creativity boomed.
• Together we would evolve the project into something much better

Evolution 3

• We didn't like the clutter and confusion of the generated ERb files
• MasterView IO was created
• MIO abstracted IO functionality, provided consistency
• MIO made testing much easier
• Enabled fileless opereration, opened door for DB driven
• Filters could be applied (escaping, tidy, caching, logging, default_generate)

Evolution 4

• Met most of the functional goals, but first API was too complex, fragile, required too much internal knowlege for developers to use
  
• Simplified the API by creating a DSL that insulated the end user from the complexities
• Looked at what parts of API were heavily used, made those dead simple, eliminate the bloat
• TDD made refactoring easy
• Directive simplification using custom DSL was amazing

DSL Examples

• Text area directive (before) (after)
• Collection select directive (before) (after)

Evolution 5

• Admin tools created to help find problems
• Testing page to help with learning / understanding
• Needed way to facilitate distribution
• Needed namespace to insulate from collisions
• Single file format but with meta information
• Meta data to drive namspace, attribute name, priority, description. Default for folder, override in directive DSL
• Provide mechanism for directives to communicate when nested

Future directions

• REST scaffold generator
• Directive upload / community site
• Power directives (grid, ajax grid, calendar widgets, address widgets, nav menus)
• Themes
• Non-evaling / sandboxed templates
• DB loaded templates
• Reverse engineering ERb into MV templates
• Mongrel + ERB (MERB), Nitro integration

Questions

• What additional questions do you have?

Summary

• Background
• Goals
• Demonstration
• How it works
• Evolution
• Future directions

Thank you for inviting me!!!

• If you have ideas or suggestions for the project, we would love to hear them!
• Inspired Horizons provides Ruby on Rails and MasterView training, mentoring, and consulting
• MasterView core team: Deb Lewis and Jeff Barczewski
• MasterView site: http://masterview.org
• Rubyforge project: http://rubyforge.org/projects/masterview
• MasterView mailing lists, sign up at Rubyforge
• Contact me directly using jeffb at inspiredhorizons dot com