The fluid project and the new state
1 / 90

The Fluid Project and the New State - PowerPoint PPT Presentation

  • Uploaded on

The Fluid Project and the New State. Antranig Basman, Core Framework Architect, The Fluid Project. Roadmap. Who am I, and what is Fluid Fluid Academic and Fluid Engage Fluid Infusion and Fluid Kettle New Approaches: IoC and State Where we’re headed. Antranig Basman.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'The Fluid Project and the New State' - dacey

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
The fluid project and the new state
The Fluid Project and the New State

Antranig Basman, Core Framework Architect,

The Fluid Project


  • Who am I, and what is Fluid

  • Fluid Academic and Fluid Engage

  • Fluid Infusion and Fluid Kettle

  • New Approaches: IoC and State

  • Where we’re headed

Antranig basman
Antranig Basman

  • BA and Part III, Mathematics, Cambridge, 1994

  • PhD, Information Engineering, Cambridge, 1999

  • Senior Developer, Amedis Pharmaceuticals, 2001-2002 (ADME Prediction)

  • Chief Software Architect, Choracle Ltd., 2002-2004 (Drug Toxicity Prediction)

  • Consultant, CARET, University of Cambridge, 2004 –

  • Core Framework Architect, Fluid Project, 2008 –


  • Is an open source community of

    • Designers

    • Developers

    • Accessibility experts

  • Helps other open communities

  • Consists of universities, museums and individuals

What we do
What We Do

  • Offer design advice and resources

  • Contribute to other communities:

    • jQuery UI

    • Dojo

    • W3C Accessibility

  • Build Infusion, our JavaScript application framework

  • Build Kettle, our JavaScript server-side infrastructure

The strategic nature of javascript
The Strategic Nature of Javascript

  • Designed in 1995 as “LiveScript”

  • Syntax ordered by Netscape at last moment to be “more Java-like”

  • “OO” features bolted on at the last moment

  • Until recently:

    • Has received little CS attention

    • not taken seriously as a programming language

    • Most code produced of low quality with little attention to scalability and engineering principles

The strategic nature of javascript ii
The Strategic Nature of Javascript II

  • Actually a functional programming language, and OO features are a distraction

  • Now receiving serious engineering efforts from Google, Mozilla, Microsoft

    • Performance enhancements previously considered impossible for an untyped language (“type speculation”, class-based optimisation)

  • Underlying language theory developed by Douglas Crockford, and now by us

  • Becoming attractive for uses other than in user agents (persistence via CouchDB, server middleware through Kettle)

Javascript the good parts
Javascript: The Good Parts

  • First presentation of what has come to be called “that-ism”

  • Many other hygienic Javascript practices

Two functional snippets
Two functional snippets

function invert(func) {

return function() {

return !func.apply(null, arguments);



var isOdd(a) {

return (a % 2) === 0;


var isEven = invert(isOdd);

  • Unlike the C/C++/Java family of physical resemblance, function invocations allocate heap storage.

function curryAdd(a) {

return function(b) {

return a + b;



var add2 = curryAdd(2);

var four = add2(2);

That ism

var creator = function(arg1, arg2) {

var privateState = arg2;


var that = {};

that.publicState = arg1;

that.publicMember = function(arg) {

return arg + privateState + that.publicState;



return that;


  • All of the useful physical effects of programming with “objects” with none of the encumbrance of types and inheritance

    • Encapsulation of private state

    • Unforgeable bindings to self reference

    • Context-safe members (including 0-arg for use as event handlers)


Namespacing and versioning
Namespacing and Versioning

var fluid_1_2 = fluid_1_2 || {};

var fluid = fluid || fluid_1_2;

(function ($, fluid) {

var private = 3;

fluid.publicFunc = function(){ {

// All file contents here

})(jQuery, fluid_1_2);

  • Standard armouring for every source file

  • All internal and external clients agree on use of “fluid” symbol

  • All versions remain in the address space and accessible via simple assignment

  • Better than the affordances of many “mainstream” languages (C/C++/Java)

The challenge of scale free programming
The challenge of scale-free programming

  • Many books available on “refactoring”, “design patterns”, other aspects of OO philosophy

  • Very few books available on underlying motivation of code structure, and planning for indefinite growth

  • In general, “object orientation”, types, and APIs can appear as a source of dependency weakness rather than a strength – especially in large-scale designs over long timescales

  • An appealing idea is also that understanding lessons from the largest scales help us to properly organise the smallest scales

Lakosian dependency
Lakosian Dependency

  • The only rigorous approach (IME) to the function of dependency in logical design

  • Not just another “C++ gimmicks book” - issues which cut across all languages, and all designs


Implications of levelization
Implications of Levelization



What happens here?

Arrow Of Knowledge

  • Lakos takes us this far – but raises (at least) two major concerns

    • How does this structure get constructed?

    • What does the code in A come to look like, given that, for example, it may need to broker a functional interaction between G and H?






















Role of infusion
Role of Infusion

  • “Application framework” built with jQuery as foundation

  • Originally conceived as a client-side framework, but “DOM-free” portions now deployed on server

  • Open architecture: “more than usual” configurability is required

What s in infusion
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

Building great uis is hard
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
Flexible User Interfaces

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

Types of javascript tools
Types of JavaScript Tools

  • Foundational Toolkits

  • Application Frameworks

... compare and contrast

Foundational toolkits
Foundational toolkits

  • Totally presentation focused

  • DOM manipulation

  • Event binding

  • Ajax



Dojo core

Application frameworks
Application frameworks

  • Model notifications “something changed here”

  • Views to help keep your presentational code clean

  • Data binding to sync the display with your model




Infusion is different
Infusion is Different

  • Accessibility baked right in

  • Carefully designed interactions

  • Markup is in your control

  • Not the same old MVC

    • Model-based idiom is enriched with a conception of “transparent state

    • Controller layer is destroyed

A metaphor ux weave
A Metaphor: UX Weave

freeform knit & crochet fabric by Prudence Mapstone

A metaphor ux weave1
A Metaphor: UX Weave

hand-dyed weave by Felicia Lo

Engage s technology goals
Engage’s Technology Goals

  • Enable great design

  • Interconnected data

  • Approachable: easy to extend/adapt

  • Bridging: connect physical and online

  • Scalable (up & down) and forward-looking

  • Fun, cheaper, easier development

The open web today
The Open Web Today

  • Multi-touch gestures

  • Audio and video

  • Vector graphics and animation

  • Great accessibility

  • All work on mobile today!

  • Stable and deeply interoperable

  • Everyone knows it

Engage at a glance
Engage at a Glance

  • Interconnected data: services and feeds

  • Bridging spaces: mobile apps

  • Exhibit toolkit: great user experiences

  • Making connections: mapping

  • Accessibility all the way through

The fluid project and the new state

Big Question for Museums:

What platforms should we support?





Cocoa Touch

Android SDK


Mobile embrace the web
Mobile: Embrace the Web

  • Phones now have great browsers built in

  • Web design is ubiquitous and familiar

  • Use standard HTML, CSS, and JavaScript

  • Blends seamless into existing sites

  • Thin native apps provide access to interactive features (camera, bluetooth)

A new definition
A New Definition

  • Accessibility is the ability of the system to accommodate the needs of the user

  • Disability is the mismatch between the user and the interface provided

  • We all experience disability

  • Accessible software = better software

Assistive technologies
Assistive Technologies

  • Present and control the user interface in different ways

  • Not just screen readers!

  • Use built-in operating system APIs to understand the user interface

Screen readers

Screen magnifiers

On-screen keyboards

Dhtml a new can of worms
DHTML: A New Can of Worms

  • Shift from documents to applications

  • Familiar a11y techniques aren’t enough

  • Most DHTML is completely inaccessible

  • New techniques are still being figured out

The problem
The Problem

  • Custom widgets often look, but don’t act, like their counterparts on the desktop

  • HTML provides only simple semantics

  • Not enough information for ATs

  • Dynamic updates require new design strategies to be accessible

The solution
The Solution

  • Describe user interfaces with ARIA

  • Add consistent keyboard controls

  • Provide flexible styling and presentation

Opaque markup
Opaque Markup

  • // These are tabs. How would you know?

  • <ol>

    • <li><a href=”#cats”>Cats</a></li>

    • <li><a href=”#dogs”>Dogs</a></li>

    • <li><a href=”#gators”>Gators</a></li>

  • </ol>

  • <div>

    • <div id=”cats”>Cats meow.</div>

    • <div id=”dogs”>Dogs bark.</div>

    • <div id=”gators”>Gators bite.</div>

  • </div>

The fluid project and the new state

  • Accessible Rich Internet Applications

  • W3C specification in the works

  • Fills the semantic gaps in HTML

  • Roles, states, and properties

  • Live regions

Roles states properties
Roles, States, Properties

  • Roles describe widgets not present in HTML 4

    • slider, menubar, tab, dialog

  • Properties describe characteristics:

    • draggable, hasPopup, required

  • States describe what’s happening:

    • busy, disabled, selected, hidden

Using aria
Using ARIA

  • // Now *these* are Tabs!

  • <ol id=”animalTabs” role=”tablist” tabindex=”0”> <!-- Individual Tabs shouldn’t be focusable -->

  • <!-- We’ll focus them with JavaScript instead -->

    • <li role=”tab”><a href=”#” tabindex=”-1”>Cats</a></li>

    • <li role=”tab”><a href=”#” tabindex=”-1”>Dogs</a></li>

    • <li role=”tab”><a href=”#” tabindex=”-1”>Gators</a></li>

  • </ol>

  • <div id=”panels”>

    • <div role=”tabpanel” aria-labelledby=”cats”>Cats meow.</div>

    • <div role=”tabpanel” aria-labelledby=”dogs”>Dogs bark.</div>

    • <div role=”tabpanel” aria-labelledby=”gators”>Gators bite.</div>

  • </div>

Adding aria in code
Adding ARIA in Code

  • // Identify the container as a list of tabs.

  • tabContainer.attr("role", "tablist");

  • // Give each tab the "tab" role.

  • tabs.attr("role", "tab");

  • // Give each panel the appropriate role, panels.attr("role", "tabpanel");

  • panels.each(function (idx, panel) {

  • var tabForPanel = that.tabs.eq(idx);

  • // Relate the panel to the tab that labels it.

  • $(panel).attr("aria-labelledby", tabForPanel[0].id);

  • });

Keyboard navigation
Keyboard Navigation

  • Everything that works with the mouse should work with the keyboard

  • ... but not always in the same way

  • Support familiar conventions

Keyboard conventions
Keyboard Conventions

  • Tab key focuses the control or widget

  • Arrow keys select an item

  • Enter or Spacebar activate an item

  • Tab is handled by the browser. For the rest, you need to write code. A lot of code.

Tabindex examples
Tabindex examples

  • <!-- Tab container should be focusable -->

  • <ol id=”animalTabs” tabindex=”0”> <!-- Individual Tabs shouldn’t be focusable -->

  • <!-- We’ll focus them with JavaScript instead -->

    • <li id=”tab1”>

    • <a href=”#cats” tabindex=”-1”>Cats</a>

    • </li>

    • <li id=”tab2”>

    • <a href=”#cats” tabindex=”-1”>Dogs</a>

    • </li>

    • <li id=”tab3”>

    • <a href=”#cats” tabindex=”-1”>Alligators</a>

    • </li>

  • </ol>

Making things tabbable
Making Things Tabbable

  • Tabindex varies subtly across browsers

  • jquery.attr() normalizes it as of 1.3

  • For all the gory details:


  • getting-setting-and-removing-tabindex-values-with-javascript/

  • // Make the tablist accessible with the Tab key.

  • tabContainer.attr("tabindex", "0");

  • // And take the anchors out of the Tab order.

  • $(“a”, tabs).attr("tabindex", "-1");

Adding the arrow keys
Adding the Arrow Keys

  • // Make each tab accessible with the left and right arrow keys.

  • tabContainer.fluid("selectable", {

  • selectableSelector: that.options.selectors.tabs,

  • direction: fluid.a11y.orientation.HORIZONTAL,

  • onSelect: function (tab) {

  • $(tab).addClass(that.options.styles.highlighted);

  • },

  • onUnselect: function (tab) {

  • $(tab).removeClass(that.options.styles.highlighted);

  • }

  • });

Making them activatable
Making Them Activatable

  • // Make each tab activatable with Spacebar and Enter.

  • tabs.fluid("activatable", function (evt) {

    • // Your handler code here. Maybe the same as .click()?

  • });


  • Tutorial:


  • API Reference:


Infusion goes deeper
Infusion Goes Deeper

  • jQuery Keyboard Navigation Plugin

  • ARIA everywhere

  • Everything is highly adaptable and flexible

  • UI Options and the Fluid Skinning System:

    • Users can customize their environment

Ui options
UI Options

  • One size doesn’t fit all

  • Allows users to customize your app:

    • layout

    • styling

    • navigation

  • Uses FSS by default; can be configured to work with your own classes

Css frameworks
CSS Frameworks

  • “If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.”

  • - Eric Meyer

Fluid skinning system
Fluid Skinning System

  • FSS is built to be hacked on

  • Provides a core set of building blocks

  • Reset, text, layouts, themes

  • Namespaced: no conflicts with your stuff

  • Themes for better legibility & readability

Markup agnosticism
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
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>



<div dojoAttachPoint="containerNode" class="dijitDialogPaneContent">



Handling markup infusion
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"



“Components suck. Apps built with components look like it”

  • Infusion components aren’t black boxes

  • Fundamentally adaptable:

    • Change the markup

    • Restyle with CSS

    • Add/replace actual behaviour

Component families reorderer
Component Families: Reorderer

  • lists

  • images

  • layouts

  • Infusion components come in families

More components
More Components

  • Uploader

  • Inline Edit

  • Pager

Model view but not controller
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

The problem with controllers
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
Infusion Models & Views

  • 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

Plain old models
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

Portals mashups and cms s
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

Writing collision free javascript
Writing Collision-Free JavaScript

  • Put code in a unique namespace

  • Use closures for privacy

  • Support more than one on the page

    • Scope all variables to an instance

    • Avoid hard-baking ID selectors

  • Constrain selectors within a specific element

Keeping it to ourselves
Keeping it to Ourselves

  • Infusion takes namespacing seriously

  • We won’t steal your names

  • Components are carefully scoped

  • We won’t accidently grab the wrong stuff

  • Infusion doesn’t expect control of the page

Tying it all together
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

Our mobile approach
Our Mobile Approach

  • No hard intrusions on your content

  • Don’t subvert good Web idioms

  • Your choice: native-like or webbish

Infusion mobile
Infusion Mobile

  • mFSS: themes for iPhone, Android, more

  • ScreenNavigator: unobtrusive mobile navigation

  • Components designed for the mobile Web

Kettle server side js
Kettle: Server-side JS

  • Built on top of the JSGI server spec

  • Don’t need lots of new APIs on server

  • Envjs provides a full browser

  • Infusion as application framework

  • Choose where markup gets rendered

  • Natural, familiar environment for Web developers and designers

Wrapping up
Wrapping Up

  • Tools for everyone:

    • ARIA

    • Dojo

    • jQuery

    • Infusion

  • Give Infusion a try and let us know

  • We’re a friendly community!