Upload
colinbdclark
View
111
Download
0
Tags:
Embed Size (px)
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.
Citation preview
Colin Clark, Lead Software Architect,Inclusive Design Research Centre
Infusion For The Birds
Sunday, January 9, 2011
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
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
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
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
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
Flexible User Interfaces
Infusion is an application framework designed to provide unprecedented flexibility while preserving interoperability.
Sunday, January 9, 2011
Types of JavaScript Tools
• Foundational Toolkits
• Application Frameworks
... compare and contrast
Sunday, January 9, 2011
Foundational toolkits
• Totally presentation focused
• DOM manipulation
• Event binding
• AjaxjQuery
Prototype
Dojo core
Sunday, January 9, 2011
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
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
Open Architecture
Sunday, January 9, 2011
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
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
Handling Markup: jQuery UI
Sunday, January 9, 2011
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
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
Component Families: Reorderer
Infusion components come in families
lists images layouts
Sunday, January 9, 2011
Traditional MVC
Controller
Model
View
State ChangeState Query
View Selection
Chan
ge N
oti!
catio
n
User Gestures
Sunday, January 9, 2011
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
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
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
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
Playing Nice With Others
Sunday, January 9, 2011
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
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
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
The Web
Sunday, January 9, 2011
Architecture of the Web
• Separation of structure from presentation
• Declarative
• Stateless
• Interoperable
Sunday, January 9, 2011
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
Declarative Programming
Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow
Sunday, January 9, 2011
Declarative Programming
what
not
howSunday, January 9, 2011
Compare & Contrast
Sunday, January 9, 2011
Compare & Contrast
Scroller
Sunday, January 9, 2011
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
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
Statelessness
“The Web is broken. It can’t remember me between requests”
Sunday, January 9, 2011
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
Interoperable
• Web formats are:
• Plain text
• Declarative
• Openly published and standardized
• This means they are adaptable and extensible
Sunday, January 9, 2011
Context is Everything
Sunday, January 9, 2011
Our Mission
Sunday, January 9, 2011
Where We’re Going
Sunday, January 9, 2011
Goals and Next Steps
• Accessibility sprint
• Make it mature and production-ready
• Mobile
• Authoring
• Context-based transformation
Sunday, January 9, 2011
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
Three Pillars of OO
1. Inheritance
2. Encapsulation
3. Polymorphism
Sunday, January 9, 2011
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
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
Encapsulation
• Hide away the internals of an object
• Define a contract through methods
• Traditionally, data is considered opaque
Sunday, January 9, 2011
Encapsulated Object
Data
Method
Method
Method Method
Sunday, January 9, 2011
Polymorphism
• The ability for different objects to respond to the same method in different ways
• Interface vs. implementation
Sunday, January 9, 2011
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
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
Traditional MVC
Controller
Model
View
State ChangeState Query
View Selection
Chan
ge N
oti!
catio
n
User Gestures
Sunday, January 9, 2011
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
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
Model View (controller)
State ChangeState Query
View
Framework
Change Noti!cation
Model
Sunday, January 9, 2011
Questions?
Sunday, January 9, 2011