LDSTechForumProjects

Open Web Stack (2012 LDSTech Conference)

This page provides a collective place for those attending the presentation to add their notes.
For more information on the collective summary effort for presentations, see 2012 LDSTech Conference presentation notes.


The Open Web Stack team (http://openweb.ldschurch.org) was developed about seven months ago, to help standardize front-end development of technology projects for the LDS Church and provides tools, training and support for front-end development. The Open Web Stack allows developers to focus on the development and not have to figure out the basic needs of the application.

Lubean references the Open Web Platform and describes it as “an increasingly popular platform for building rich Web applications” that can run on various devices. It includes CSS, JavaScript, and HTML5.

The Open Web Stack doesn't provide a framework that forces people to do things in a certain way. Instead it is a set of recommended, standard, best-of-breed components that work well together. The application then becomes the glue-code and it takes advantage of different standard components.

The five main components of the Open Web Stack are the following:

  1. Require JS (http://requirejs.org) – Structure, Modularity, Scalability, Compression
    • Used to organize JavaScript code into modules
    • Creates one optimized, deployable JavaScript file from the modules
    • Improves the speed of the code
  2. jQuery – DOM, Ajax, Events
    • Handles the Document Object Model (DOM), Ajax, and Events in a cross-browser way
    • Use on() for fewer event listeners
    • Cache data from the DOM for fewer queries
  3. Handlebars – JavaScript Templating
    • Based on cross-platform functionality of Mustache
    • Splits the HTML code into a separate file from the JavaScript
    • Template variables or placeholders designate where the data will be inserted
    • HTML can be edited separately from the business logic
    • Once compiled and created into a string, this can be added to the DOM through jQuery
    • Handlebars templates have been found to be about 70 times faster than jQuery templates (performance tested by Ludean)
  4. LESS – Enhanced CSS
    • A CSS pre-processor
    • Provides functionality missing from CSS code
    • Code in .less files which are compiled by Less into regular CSS files
    • less.js pre-compiles all .less files into one CSS file to fully optimize the production-ready application
    • Uses variables and assigned values to make code more efficient such as for color
    • Uses CSS Mixins along with variables to make code more efficient such as for rounded corners
    • Uses nested rules to organize CSS in a more concise way
    • Has the ability to do functions and basic operations for adaptive or responsive Web design
  5. Backbone – MVC, REST, History, Pubsub
    • Bookmarks sections in an application
    • Handles global events used throughout the application using the publish-subscribe pattern

Vendors using the Open Web Stack are the following:

  • LinkedIn Mobile
  • Pandora
  • Sound CloudMobile
  • Audio Vroom
  • Do
  • Stripe
  • Groupon
  • Base Camp Mobile
  • And Others

Over twenty-five projects are now being processed at ICS using the Open Web Stack. It is recommended that you use buster.js for your testing framework. It is fairly new but very powerful. The syntax for buster.js is similar to Jasmine, but has much more functionality available. Buster is written in node. Multiple open browsers can be tested at one time. It can also run pure JavaScript testing.

The Open Web Stack utilizes Node to optimize for deployment. It combines and compresses all JS files. It compiles LESS into regular CSS. It also precompiles Handlebars templates.

When using the Open Web Stack our projects become the following:

  • Modular
  • Scalable
  • Testable
  • More Secure
  • Maintainable
  • Unified
  • Custom
  • Supportable
  • Rapid to Build

The Open Stack Team is excited to work with all of the volunteers with this new build tool to make things more clear and efficient for developers.

This page was last modified on 9 November 2012, at 12:14.

Note: Content found in this wiki may not always reflect official Church information. See Terms of Use.