The fluid project and the new state
This presentation is the property of its rightful owner.
Sponsored Links
1 / 90

The Fluid Project and the New State PowerPoint PPT Presentation


  • 94 Views
  • 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.

Download Presentation

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


Roadmap

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

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 –


Fluid

Fluid...

http://fluidproject.org

  • 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

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)

  • http://fluidproject.org/blog/2008/07/21/about-this-and-that/


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

  • http://rsf.fluidproject.org/Wiki.jsp?page=Levelization


Implications of levelization

Implications of Levelization

3

A

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?

2

2

B

C

0

1

0

1

D

E

F

G

0

0

0

0

H

I

J

K


Introducing

Introducing

http://fluidproject.org/products/infusion/


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

jQuery

Prototype

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

SproutCore

Dojo/Dijit/Dojox

Cappuccino


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?


Everything

Everything?


Everything1

Everything?

Objective-C

Java

C++

Cocoa Touch

Android SDK

Carbide


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

ARIA

  • 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

http://dev.aol.com/dhtml_style_guide


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:

  • http://fluidproject.org/blog/2008/01/09/

  • 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()?

  • });


Documentation

Documentation

  • Tutorial:

    • http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility+Tutorial

  • API Reference:

    • http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility+Plugin+API


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

http://wiki.fluidproject.org/x/96M7


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>

</span>

</div>

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

</div>

</div>


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

Components

“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!


Questions

Questions?

http://fluidproject.org


  • Login