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.

Infusion for the birds

599 views

Published on

An overview of the Infusion JavaScript application framework and its value for creating accessible open Web apps. Presented at a Fluid Community Workshop in Toronto, September 2010.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Infusion for the birds

  1. 1. Infusion For The Birds Colin Clark, Lead Software Architect, Inclusive Design Research Centre Sunday, January 9, 2011
  2. 2. Stuff we’ll talk about • What is Infusion and why did we make it? • JavaScript tools: compare and contrast • DOM Agnosticism • Model,View, but no Controller • Play nice with others • Inspired by the Web • What’s our mission? • Where we’re going Sunday, January 9, 2011
  3. 3. World, Meet Infusion • Application framework built on top of jQuery • The culmination of our work helping others • Designed for usability and accessibility • Open architecture: everything is configurable Sunday, January 9, 2011
  4. 4. What’s in Infusion? • A development framework for building apps • UI components you can reuse and adapt • Lightweight CSS framework for styling • Accessibility tools and plugins for jQuery Sunday, January 9, 2011
  5. 5. Why bother? • We didn’t build a framework because they’re fun to write. They’re not. • We built a bunch of components, suffered, and then built a framework that addressed real challenges. Sunday, January 9, 2011
  6. 6. Building Great UIs Is Hard • Your code gets unruly as it grows • UIs are hard to reuse or repurpose • Design change requires big code change • Accessibility is confusing • Combining different code/libraries doesn’t always work Sunday, January 9, 2011
  7. 7. Flexible User Interfaces Infusion is an application framework designed to provide unprecedented flexibility while preserving interoperability. Sunday, January 9, 2011
  8. 8. Types of JavaScript Tools • Foundational Toolkits • Application Frameworks ... compare and contrast Sunday, January 9, 2011
  9. 9. Foundational toolkits • Totally presentation focused • DOM manipulation • Event binding jQuery • Ajax Prototype Dojo core Sunday, January 9, 2011
  10. 10. Application frameworks • Model notifications “something changed here” • Views to help keep your presentational code clean • Data binding to sync the display with your model SproutCore Dojo/Dijit/ Dojox Cappuccino Sunday, January 9, 2011
  11. 11. Infusion is Different • Accessibility baked right in • Carefully designed interactions • Markup is in your control • Not the same old MVC • Supports portals, mashups and CMS’s Sunday, January 9, 2011
  12. 12. Open Architecture Sunday, January 9, 2011
  13. 13. Markup Agnosticism • HTML is so fundamental to Web UIs • Others lock away markup in a black box • Markup should be totally free to edit, adapt, or replace • Libraries shouldn’t bake in assumptions about your markup • Unobtrusiveness everywhere Sunday, January 9, 2011
  14. 14. Handling Markup: Dojo <div class="dijitDialog" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title"> <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar"> <span dojoAttachPoint="titleNode" class="dijitDialogTitle" id="${id}_title"></span> <span dojoAttachPoint="closeButtonNode" class="dijitDialogCloseIcon" dojoAttachEvent="onclick: onCancel, onmouseenter: _onCloseEnter, onmouseleave: _onCloseLeave" title="${buttonCancel}"> <span dojoAttachPoint="closeText" class="closeText" title="${buttonCancel}">x</span> </span> </div> <div dojoAttachPoint="containerNode" class="dijitDialogPaneContent"></div> </div> Sunday, January 9, 2011
  15. 15. Handling Markup: jQuery UI Sunday, January 9, 2011
  16. 16. Handling Markup: Infusion fluid.defaults("fluid.fileQueueView", { selectors: { fileRows: ".flc-uploader-file", fileName: ".flc-uploader-file-name", fileSize: ".flc-uploader-file-size", fileIconBtn: ".flc-uploader-file-action", errorText: ".flc-uploader-file-error" }, Sunday, January 9, 2011
  17. 17. Components “Components suck. Apps built with components look like it” • Infusion components aren’t black boxes • They’re fundamentally adaptable: • Change the markup • Restyle with CSS • Add/replace actual behaviour • Everything is super-loosely coupled Sunday, January 9, 2011
  18. 18. Component Families: Reorderer lists images layouts Infusion components come in families Sunday, January 9, 2011
  19. 19. Traditional MVC Model n atio oti c State Query State Change ge N n Cha View Selection View Controller User Gestures Sunday, January 9, 2011
  20. 20. The Problem with Controllers • Controllers are the least defined • What’s “glue?” • Always referred to as the non-reusable part • MVC has been warped over the decades • The framework should take care of the glue Sunday, January 9, 2011
  21. 21. Infusion Models & Views Model • Controller is replaced by events Change Noti cation • Reads to the model are transparent • State changes and notification are just events State Query State Change • Transparent architecture: you can use View the same events we use Framework Sunday, January 9, 2011
  22. 22. Model, View... but not Controller • MVC is a given in most framework • JavaScript’s functional idioms offer alternatives (hint: events) • Infusion has no controller layer at all • ... and none of the classical inheritance cruft that usually goes with it Sunday, January 9, 2011
  23. 23. Plain Old Models • M is the most important thing in your app • Data needs to travel seamlessly between client and server • Most toolkits force a model to extend some base class or particular structure In Infusion, models are just plain old JSON Sunday, January 9, 2011
  24. 24. Playing Nice With Others Sunday, January 9, 2011
  25. 25. Portals, Mashups, and CMS’s • These days, diverse code and markup coexists • Most JavaScript is written as if it owns the whole browser • As you combine stuff, things can break • Namespacing and privacy is essential Sunday, January 9, 2011
  26. 26. Keeping it to Ourselves • Infusion takes namespacing seriously • We won’t steal your names • Components are carefully scoped • We won’t accidentally grab the wrong stuff • Infusion doesn’t expect control of the page Sunday, January 9, 2011
  27. 27. Tying it All Together • Infusion helps you with accessibility • Components you can really work with • Simple structure so your code can grow • Totally transparent, event-driven design • Markup and models are under your control • No inheritance or controller cruft Sunday, January 9, 2011
  28. 28. The Web Sunday, January 9, 2011
  29. 29. Architecture of the Web • Separation of structure from presentation • Declarative • Stateless • Interoperable Sunday, January 9, 2011
  30. 30. Structure vs. Presentation <ul class="fl-list-menu"> .fl-list-menu li { <li> padding:0; <a href="#">Link Text</a> } </li> .fl-list-menu li a {   <li> display:block; <a href="#">Link Text</a> padding: 12px 0px 12px </li> 12px;   <li> text-decoration: none; <a href="#">Link Text</a> font-weight: bold; </li> outline: none; </ul> } Sunday, January 9, 2011
  31. 31. Declarative Programming Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow Sunday, January 9, 2011
  32. 32. Declarative Programming what not how Sunday, January 9, 2011
  33. 33. Compare & Contrast Sunday, January 9, 2011
  34. 34. Compare & Contrast Scroller Sunday, January 9, 2011
  35. 35. Imperative if (!highlighted) { ctx.globalAlpha = 0.3; } else { // Draw the scroll track rectangle. var clientLength = this._getClientLength(); ctx.fillStyle = theme.scrollTrackFillStyle; ctx.fillRect(NIB_PADDING + 0.5, 0.5, clientLength - 2*NIB_PADDING, thickness - 1); ctx.strokeStyle = theme.scrollTrackStrokeStyle; ctx.strokeRect(NIB_PADDING + 0.5, 0.5, clientLength - 2*NIB_PADDING, thickness - 1); } var buildHandlePath = function() { ctx.beginPath(); ctx.arc(handleDistance + halfThickness + 0.5, // x halfThickness, // y halfThickness - 0.5, Math.PI / 2, 3 * Math.PI / 2, false); ctx.arc(handleDistance + handleLength - halfThickness - 0.5, // x halfThickness, // y halfThickness - 0.5, 3 * Math.PI / 2, Math.PI / 2, false); ctx.lineTo(handleDistance + halfThickness + 0.5, thickness - 0.5); ctx.closePath(); }; buildHandlePath(); // Paint the interior of the handle path. var gradient = ctx.createLinearGradient(handleDistance, 0, handleDistance, thickness); gradient.addColorStop(0, theme.scrollBarFillGradientTopStart.replace(/%a/, alpha)); gradient.addColorStop(0.4, theme.scrollBarFillGradientTopStop.replace(/%a/, alpha)); gradient.addColorStop(0.41, theme.scrollBarFillStyle.replace(/%a/, alpha)); gradient.addColorStop(0.8, theme.scrollBarFillGradientBottomStart.replace(/%a/, alpha)); gradient.addColorStop(1, theme.scrollBarFillGradientBottomStop.replace(/%a/, alpha)); ctx.fillStyle = gradient; ctx.fill(); Sunday, January 9, 2011
  36. 36. Declarative .fl-thumbnailContainer { position: absolute; top: 0pt; <form class="fl-thumbnailContainer"> left: 0pt; ... bottom: 0pt; </form> overflow: auto; width: 185px; z-index: 100; } Sunday, January 9, 2011
  37. 37. Statelessness “The Web is broken. It can’t remember me between requests” Sunday, January 9, 2011
  38. 38. Statelessness • The Web is stateless for a reason: it scales • State is visible, not encapsulated http://build.fluidproject.org:8095/engage/artifacts/view.html? accessNumber=M2000.38.97&db=mccord&lang=en Sunday, January 9, 2011
  39. 39. Interoperable • Web formats are: • Plain text • Declarative • Openly published and standardized • This means they are adaptable and extensible Sunday, January 9, 2011
  40. 40. Context is Everything Sunday, January 9, 2011
  41. 41. Our Mission Sunday, January 9, 2011
  42. 42. Where We’re Going Sunday, January 9, 2011
  43. 43. Goals and Next Steps • Accessibility sprint • Make it mature and production-ready • Mobile • Authoring • Context-based transformation Sunday, January 9, 2011
  44. 44. Goals of OO • Define a system in real-world terms • Hide away the guts of an implementation • Create small, useful modules • Enable reusability Sunday, January 9, 2011
  45. 45. Three Pillars of OO 1. Inheritance 2. Encapsulation 3. Polymorphism Sunday, January 9, 2011
  46. 46. Inheritance • A way of structuring dependencies and reusing code • Defines the identity of an object (is a) • Mammals, Felines, Cats and Lions • Vehicles, Cars, and Trucks • Fruit, Apples, Oranges • Lots of other contrived examples... Sunday, January 9, 2011
  47. 47. Inheritance AbstractMap Method Method Method Data Method IdentityHashMap HashMap Method Method Method Method Method Method Data Data Method Method PrinterStateReasons LinkedHashMap Method Method Method Method Method Method Data Data Method Method Sunday, January 9, 2011
  48. 48. Encapsulation • Hide away the internals of an object • Define a contract through methods • Traditionally, data is considered opaque Sunday, January 9, 2011
  49. 49. Encapsulated Object Method Method Method Data Method Sunday, January 9, 2011
  50. 50. Polymorphism • The ability for different objects to respond to the same method in different ways • Interface vs. implementation Sunday, January 9, 2011
  51. 51. Crumbling Pillars • Inheritance is brittle and ineffective • Composition (has a) works better • Encapsulation leads to overzealousness: • Cuts off access to useful information • Assumes custom structures are better than plain old, interoperable standards Sunday, January 9, 2011
  52. 52. Model View Controller • Model is the application data and associated behaviour • View presents the model and drives the interaction logic • Controller is glue, mediating access between model and view Sunday, January 9, 2011
  53. 53. Traditional MVC Model n atio oti c State Query State Change ge N n Cha View Selection View Controller User Gestures Sunday, January 9, 2011
  54. 54. The Problem with Controllers • Controllers are the least defined part of the equation • What’s “glue?” • Always referred to as the non-reusable part • MVC has been warped over the decades Sunday, January 9, 2011
  55. 55. Controllers and Frameworks • Orginally, in Smalltalk, the Controller managed the low-level event loop for an application • In Web apps, they’re usually responsible for parsing requests and dispatching • These are both things that high-level frameworks do for us now • E.g. The event loop in a Web browser Sunday, January 9, 2011
  56. 56. Model View (controller) Model Change Noti cation State Query State Change View Framework Sunday, January 9, 2011
  57. 57. Questions? Sunday, January 9, 2011

×