1.
Infusion For The Birds
Colin Clark, Lead Software Architect,
Inclusive Design Research Centre
Sunday, January 9, 2011

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.
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.
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.
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.
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.
Flexible User Interfaces
Infusion is an application framework designed to
provide unprecedented flexibility while
preserving interoperability.
Sunday, January 9, 2011

8.
Types of JavaScript Tools
• Foundational Toolkits
• Application Frameworks
... compare and contrast
Sunday, January 9, 2011

9.
Foundational toolkits
• Totally presentation focused
• DOM manipulation
• Event binding jQuery
• Ajax Prototype
Dojo core
Sunday, January 9, 2011

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.
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.
Open Architecture
Sunday, January 9, 2011

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.
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.
Handling Markup: jQuery UI
Sunday, January 9, 2011

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.
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.
Component Families: Reorderer
lists images layouts
Infusion components come in families
Sunday, January 9, 2011

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.
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.
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.
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.
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.
Playing Nice With Others
Sunday, January 9, 2011

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.
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.
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.
The Web
Sunday, January 9, 2011

29.
Architecture of the Web
• Separation of structure from presentation
• Declarative
• Stateless
• Interoperable
Sunday, January 9, 2011

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.
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.
Declarative Programming
what
not
how
Sunday, January 9, 2011

33.
Compare & Contrast
Sunday, January 9, 2011

34.
Compare & Contrast
Scroller
Sunday, January 9, 2011

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.
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.
Statelessness
“The Web is broken. It can’t remember me
between requests”
Sunday, January 9, 2011

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.
Interoperable
• Web formats are:
• Plain text
• Declarative
• Openly published and standardized
• This means they are adaptable and extensible
Sunday, January 9, 2011

40.
Context is Everything
Sunday, January 9, 2011

41.
Our Mission
Sunday, January 9, 2011

42.
Where We’re Going
Sunday, January 9, 2011

43.
Goals and Next Steps
• Accessibility sprint
• Make it mature and production-ready
• Mobile
• Authoring
• Context-based transformation
Sunday, January 9, 2011

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.
Three Pillars of OO
1. Inheritance
2. Encapsulation
3. Polymorphism
Sunday, January 9, 2011

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.
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.
Encapsulation
• Hide away the internals of an object
• Define a contract through methods
• Traditionally, data is considered opaque
Sunday, January 9, 2011

49.
Encapsulated Object
Method
Method
Method
Data
Method
Sunday, January 9, 2011

50.
Polymorphism
• The ability for different objects to
respond to the same method in different
ways
• Interface vs. implementation
Sunday, January 9, 2011

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.
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.
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.
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.
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.
Model View (controller)
Model
Change Noti cation
State Query State Change
View
Framework
Sunday, January 9, 2011

57.
Questions?
Sunday, January 9, 2011