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

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