The fluid project and the new state
1 / 90

The Fluid Project and the New State - PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

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 Presentationdownload

The Fluid Project and the New State

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 mobile experience

The Mobile Experience

The fluid project and the new state

Big Question for Museums:

What platforms should we support?








Cocoa Touch

Android SDK


Only one

Only One?

Only one1

Only One?

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)

Hybrid app illustrated

Hybrid App Illustrated

Deeply accessible

Deeply Accessible

What is accessibility

What is Accessibility?

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

Supporting assistive technology

Supporting Assistive Technology

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>

Opaque markup tabs

Opaque Markup: Tabs

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 accessibility

Keyboard Accessibility

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.

Keyboard a11y tabs

Keyboard a11y: Tabs

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

Ui options fss

UI Options & FSS

Ui options fss1

UI Options & FSS

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

Open architecture

Open Architecture

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 jquery ui

Handling Markup: jQuery UI

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

Traditional mvc

Traditional MVC

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

The fluid project and the new state

Playing Nice With Others

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

The fluid project and the new state

Where We’re Going

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!



  • Login