infusion for the birds
DESCRIPTION
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.TRANSCRIPT
![Page 1: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/1.jpg)
Colin Clark, Lead Software Architect,Inclusive Design Research Centre
Infusion For The Birds
Sunday, January 9, 2011
![Page 2: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/2.jpg)
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
![Page 3: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/3.jpg)
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
![Page 4: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/4.jpg)
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
![Page 5: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/5.jpg)
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
![Page 6: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/6.jpg)
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
![Page 7: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/7.jpg)
Flexible User Interfaces
Infusion is an application framework designed to provide unprecedented flexibility while preserving interoperability.
Sunday, January 9, 2011
![Page 8: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/8.jpg)
Types of JavaScript Tools
• Foundational Toolkits
• Application Frameworks
... compare and contrast
Sunday, January 9, 2011
![Page 9: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/9.jpg)
Foundational toolkits
• Totally presentation focused
• DOM manipulation
• Event binding
• AjaxjQuery
Prototype
Dojo core
Sunday, January 9, 2011
![Page 10: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/10.jpg)
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
![Page 11: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/11.jpg)
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
![Page 12: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/12.jpg)
Open Architecture
Sunday, January 9, 2011
![Page 13: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/13.jpg)
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
![Page 14: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/14.jpg)
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
![Page 15: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/15.jpg)
Handling Markup: jQuery UI
Sunday, January 9, 2011
![Page 16: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/16.jpg)
Handling Markup: Infusionfluid.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
![Page 17: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/17.jpg)
Components
• 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
“Components suck. Apps built with components look like it”
Sunday, January 9, 2011
![Page 18: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/18.jpg)
Component Families: Reorderer
Infusion components come in families
lists images layouts
Sunday, January 9, 2011
![Page 19: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/19.jpg)
Traditional MVC
Controller
Model
View
State ChangeState Query
View Selection
Chan
ge N
oti!
catio
n
User Gestures
Sunday, January 9, 2011
![Page 20: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/20.jpg)
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
![Page 21: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/21.jpg)
Infusion Models & Views
State ChangeState Query
View
Framework
Change Noti!cation
Model
• Controller is replaced by events
• Reads to the model are transparent
• State changes and notification are just events
• Transparent architecture: you can use the same events we use
Sunday, January 9, 2011
![Page 22: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/22.jpg)
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
![Page 23: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/23.jpg)
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
![Page 24: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/24.jpg)
Playing Nice With Others
Sunday, January 9, 2011
![Page 25: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/25.jpg)
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
![Page 26: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/26.jpg)
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
![Page 27: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/27.jpg)
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
![Page 28: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/28.jpg)
The Web
Sunday, January 9, 2011
![Page 29: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/29.jpg)
Architecture of the Web
• Separation of structure from presentation
• Declarative
• Stateless
• Interoperable
Sunday, January 9, 2011
![Page 30: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/30.jpg)
Structure vs. Presentation
<ul class="fl-list-menu"> <li> <a href="#">Link Text</a> </li> <li> <a href="#">Link Text</a> </li> <li> <a href="#">Link Text</a> </li></ul>
.fl-list-menu li { padding:0;}.fl-list-menu li a { display:block; padding: 12px 0px 12px 12px; text-decoration: none; font-weight: bold; outline: none;}
Sunday, January 9, 2011
![Page 31: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/31.jpg)
Declarative Programming
Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow
Sunday, January 9, 2011
![Page 32: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/32.jpg)
Declarative Programming
what
not
howSunday, January 9, 2011
![Page 33: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/33.jpg)
Compare & Contrast
Sunday, January 9, 2011
![Page 34: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/34.jpg)
Compare & Contrast
Scroller
Sunday, January 9, 2011
![Page 35: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/35.jpg)
Imperativeif (!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
![Page 36: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/36.jpg)
Declarative
<form class="fl-thumbnailContainer">...
</form>
.fl-thumbnailContainer { position: absolute; top: 0pt; left: 0pt; bottom: 0pt; overflow: auto; width: 185px; z-index: 100;}
Sunday, January 9, 2011
![Page 37: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/37.jpg)
Statelessness
“The Web is broken. It can’t remember me between requests”
Sunday, January 9, 2011
![Page 38: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/38.jpg)
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
![Page 39: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/39.jpg)
Interoperable
• Web formats are:
• Plain text
• Declarative
• Openly published and standardized
• This means they are adaptable and extensible
Sunday, January 9, 2011
![Page 40: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/40.jpg)
Context is Everything
Sunday, January 9, 2011
![Page 41: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/41.jpg)
Our Mission
Sunday, January 9, 2011
![Page 42: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/42.jpg)
Where We’re Going
Sunday, January 9, 2011
![Page 43: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/43.jpg)
Goals and Next Steps
• Accessibility sprint
• Make it mature and production-ready
• Mobile
• Authoring
• Context-based transformation
Sunday, January 9, 2011
![Page 44: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/44.jpg)
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
![Page 45: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/45.jpg)
Three Pillars of OO
1. Inheritance
2. Encapsulation
3. Polymorphism
Sunday, January 9, 2011
![Page 46: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/46.jpg)
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
![Page 47: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/47.jpg)
Inheritance
Data
Method
Method
Method M
ethod
Data
Method
Method
Method M
ethod Data
Method
Method
Method M
ethod
Data
Method
Method
Method M
ethod Data
Method
Method
Method M
ethod
AbstractMap
HashMap
LinkedHashMap
IdentityHashMap
PrinterStateReasons
Sunday, January 9, 2011
![Page 48: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/48.jpg)
Encapsulation
• Hide away the internals of an object
• Define a contract through methods
• Traditionally, data is considered opaque
Sunday, January 9, 2011
![Page 49: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/49.jpg)
Encapsulated Object
Data
Method
Method
Method Method
Sunday, January 9, 2011
![Page 50: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/50.jpg)
Polymorphism
• The ability for different objects to respond to the same method in different ways
• Interface vs. implementation
Sunday, January 9, 2011
![Page 51: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/51.jpg)
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
![Page 52: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/52.jpg)
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
![Page 53: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/53.jpg)
Traditional MVC
Controller
Model
View
State ChangeState Query
View Selection
Chan
ge N
oti!
catio
n
User Gestures
Sunday, January 9, 2011
![Page 54: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/54.jpg)
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
![Page 55: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/55.jpg)
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
![Page 56: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/56.jpg)
Model View (controller)
State ChangeState Query
View
Framework
Change Noti!cation
Model
Sunday, January 9, 2011
![Page 57: Infusion for the birds](https://reader033.vdocuments.us/reader033/viewer/2022061300/54c79c964a79599e2b8b4569/html5/thumbnails/57.jpg)
Questions?
Sunday, January 9, 2011