Blast Mojo Overview


Published on

Learn more at

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Blast Mojo Overview

  1. 1. The Blast Mojo Framework Loyal Chow | Technical Experience Director
  2. 2. What is Blast Mojo? <ul><li>Blast Mojo is a patterns-based JavaScript framework that provides a consistent event- </li></ul><ul><li>driven architecture for complex client-side web applications, built on existing best-of- </li></ul><ul><li>breed JS libraries. Its objectives are to provide a structured way of developing Rich </li></ul><ul><li>Internet Applications, abstract complexities by separation of concerns, and maximize </li></ul><ul><li>re-use of existing code, in order to maintain knowledge and improve on speed and quality </li></ul><ul><li>of deliverables. </li></ul>
  3. 3. Why create another Framework? <ul><li>In 2005-2006, we discovered that: </li></ul><ul><li>The JS landscape was constantly changing, and there was no clear standard </li></ul><ul><li>Different developers liked different libraries such as jQuery, Prototype, MooTools, Dojo and YUI, causing large amounts of developer ramp-up between projects as code was written differently </li></ul><ul><li>Each project team applied their own structure tied to their own uses of a particular library. As the code-base grew, this eliminated the initial savings of using these libraries as the code eventually became so customized, under-documented, and complex that it became difficult to read, manage and maintain </li></ul><ul><li>Code became tightly integrated, making it difficult to develop in parallel and debug without impacting someone or something </li></ul><ul><li>With a lack of consistency across JavaScript projects, code written on one project was not re-usable in another, causing us to rebuild the same components again </li></ul>
  4. 4. Why create another Framework? <ul><li>So in early 2007, Blast Mojo was born in order to: </li></ul><ul><li>Provide a standard, consistent architecture for developing with JavaScript </li></ul><ul><li>Work with different libraries without conflict </li></ul><ul><li>Structure and organize JavaScript </li></ul><ul><li>Enforce separation of concerns </li></ul><ul><li>Ensure code can be shared and re-used </li></ul>
  5. 5. Why use Blast Mojo? <ul><li>Key Benefits </li></ul><ul><li>Blast Mojo offers a foundation that other libraries and developers can take advantage of. It was built to provide a consistent architectural structure for development of small to massive projects allowing for code reuse and flexibility </li></ul><ul><li>Enforces organization and clean separation of code to ease readability and maintainability </li></ul><ul><li>Includes Mojo StdLib library which consists of well-tested and reusable behaviors and components for rapid prototyping and development </li></ul><ul><li>Increases productivity of large teams working in parallel, particularly on Agile projects, by dividing work into implementation silos and allowing incremental development </li></ul><ul><li>Reduces developer ramp-up time starting on new projects because they are already accustomed to the coding structures, patterns and practices </li></ul><ul><li>Development speeds up as times goes on compared to the opposite that happens when code becomes too tightly bound </li></ul>
  6. 6. Why use Blast Mojo? <ul><li>Core Philosophies </li></ul><ul><li>Readability is paramount. It is more important to have readable code than less lines of code </li></ul><ul><li>Cover the fundamentals. Keep it simple, keep it generic – include a small set of tools that can be used in many ways </li></ul><ul><li>Build good separation from the beginning. Implementation silos, clearly separated, maximize refactorability </li></ul><ul><li>Add just what is needed. Evolution is driven 100% by real-world project requirements </li></ul><ul><li>Don't try to do too much, and don't repeat yourself (DRY). Stand on the shoulders of others </li></ul><ul><li>Better Debugging = Faster Development </li></ul>
  7. 7. How does Blast Mojo work? <ul><li>Components </li></ul>
  8. 8. How does Blast Mojo work? <ul><li>Sample Data Flow </li></ul>
  9. 9. How does Blast Mojo work? <ul><li>Components: SiteMap </li></ul><ul><li>HTML code has no knowledge of any JavaScript </li></ul><ul><li>Page functionality is stored in Controllers which are “mapped” to DOM elements via a SiteMap configuration file </li></ul><ul><li>Blast Mojo automatically injects Controller dependencies into the HTML code as needed at run-time </li></ul><ul><li>This form of Dependency Injection ensures JS and HTML are completely de-coupled, and allows code to be easily added or removed </li></ul>
  10. 10. How does Blast Mojo work? <ul><li>Components: Controllers </li></ul><ul><li>Controllers are event-driven and observer-based </li></ul><ul><li>Wire everything together in Mojo </li></ul><ul><li>Decouples all event handling from markup (no inline JS in HTML) </li></ul><ul><li>Allows attaching observers to any object, function, or via CSS selectors </li></ul><ul><li>Observers delegate to a command or behavior action </li></ul><ul><li>Encourages developing applications by building upon fine-grained commands that are chained together (maximizing reusability) </li></ul><ul><li>Are automatically mapped to page components via the Mojo SiteMap, and avoid ID collisions by maintaining a scoped DOM context </li></ul><ul><li>Allows AOP-style interceptions of commands for code injection </li></ul>
  11. 11. How does Blast Mojo work? <ul><li>Components: Command Types </li></ul>event process data (async / sync) event UI reaction event condition action Command Behavior Rule
  12. 12. How does Blast Mojo work? <ul><li>Components: Service Layer </li></ul><ul><li>The Service layer consists of a Service Locator and a collection of Service </li></ul><ul><li>Delegates. The Service Locator provides a single central point to manage all services, </li></ul><ul><li>and abstracts each service into a lookup ID, decoupling it from its specific details </li></ul><ul><li>The Service Delegate acts as an Ajax proxy, and provides additional helper </li></ul><ul><li>functionality: </li></ul><ul><li>handle service-level exceptions, normalize errors </li></ul><ul><li>transparently perform retry and failure recovery </li></ul><ul><li>perform client-side caching of results </li></ul><ul><li>automatically map http methods based on abstract service name </li></ul><ul><li>instantiate JSON data objects </li></ul>
  13. 13. How does Blast Mojo work? <ul><li>Components: Model & Data Binding </li></ul><ul><li>One of the key benefits of RIAs, compared to traditional </li></ul><ul><li>web applications, is that the client is stateful. Mojo keeps </li></ul><ul><li>state on the client with the Mojo Model, providing a </li></ul><ul><li>storage interface to manage state data, and abstracts data </li></ul><ul><li>into keys with semantic meaning. Data stored can be </li></ul><ul><li>strings to complex objects. </li></ul><ul><li>Mojo comes with a client-side templating component called </li></ul><ul><li>Mojo Template, which registers to a Model source, and </li></ul><ul><li>automatically data binds when the model is updated. </li></ul><ul><li>This greatly simplifies development, and ensures that </li></ul><ul><li>presentation stays decoupled from functional code. </li></ul>