Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blast Mojo Overview


Published on

Learn more at

Published in: Technology
  • Dating direct: ❤❤❤ ❤❤❤
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here
  • 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>