infusion for the birds

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


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


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


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.


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


Flexible User Interfaces

Infusion is an application framework designed to provide unprecedented flexibility while preserving interoperability.


Types of JavaScript Tools

• Foundational Toolkits

• Application Frameworks

... compare and contrast


Foundational toolkits

• Totally presentation focused

• DOM manipulation

• Event binding

• AjaxjQuery

Prototype

Dojo core


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


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


Open Architecture


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


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>


Handling Markup: jQuery UI


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"},


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”


Component Families: Reorderer

Infusion components come in families

lists images layouts


Traditional MVC

Controller

Model

View

State ChangeState Query

View Selection

Chan

ge N

oti!

catio

n

User Gestures


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


Infusion Models & Views


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


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


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


Playing Nice With Others


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


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


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


The Web


Architecture of the Web

• Separation of structure from presentation

• Declarative

• Stateless

• Interoperable


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;}


Declarative Programming

Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow


http://en.wikipedia.org/wiki/Programming_paradigm




http://en.wikipedia.org/wiki/Computation

http://en.wikipedia.org/wiki/Computation

http://en.wikipedia.org/wiki/Control_flow




Declarative Programming

what

not

howSunday, January 9, 2011

Compare & Contrast


Compare & Contrast

Scroller


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();


Declarative

<form class="fl-thumbnailContainer">...

</form>

.fl-thumbnailContainer { position: absolute; top: 0pt; left: 0pt; bottom: 0pt; overflow: auto; width: 185px; z-index: 100;}


Statelessness

“The Web is broken. It can’t remember me between requests”


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


http://build.fluidproject.org:8095/engage/home/home.html#artifacts/view.html?accessNumber=M2000.38.97&db=mccord&lang=en




Interoperable

• Web formats are:

• Plain text

• Declarative

• Openly published and standardized

• This means they are adaptable and extensible


Context is Everything


Our Mission


Where We’re Going


Goals and Next Steps

• Accessibility sprint

• Make it mature and production-ready

• Mobile

• Authoring

• Context-based transformation


Goals of OO

• Define a system in real-world terms

• Hide away the guts of an implementation

• Create small, useful modules

• Enable reusability


Three Pillars of OO

1. Inheritance

2. Encapsulation

3. Polymorphism


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...


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


Encapsulation

• Hide away the internals of an object

• Define a contract through methods

• Traditionally, data is considered opaque


Encapsulated Object

Data

Method

Method

Method Method


Polymorphism

• The ability for different objects to respond to the same method in different ways

• Interface vs. implementation


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


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


Traditional MVC

Controller

Model

View


View Selection

Chan

ge N

oti!

catio

n

User Gestures


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


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


Model View (controller)


View

Framework

Change Noti!cation

Model


Questions?


infusion for the birds

Technology

components components

events infusion

infusion application

accessibility components

handling markup

markup unobtrusiveness

controller mvc

designed interactions