modular, mobile, and reinventing web app development - phoenix mobile festival

© SitePen, Inc. All Rights Reserved

Modular, Mobile, and Reinventing Web App

DevelopmentPhoenix Mobile Festival

April 2012

presents


Nice to Meet you

Co-Founder of Dojo Toolkit

CEO, SitePen, Inc.

President, Dojo Foundation

Dylan Schiemann

@dylans @sitepen @dojo


Evolution of Web App Development

https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/



https://secure.flickr.com/photos/dylans/3439037456/

Web 1.0

Dumb client, smart server

Focus on HTML & CSS, "separation of markup and presentation"



Web 2.0

Smarter client, smart server, con!ict

Initial break of many paradigms

Search indexing, history, navigation

Didn't really account for mobile

DOM-centric

Ajax: sort of real-time



We Want More


Revolution: Separation of Data and UX

Users want access to data, info

in a variety of experiences

relevant to their current context

Aggregation

User Interfaces and experiences

Challenging past assumptions

statelessness, truly embracing REST

abusing markup for "separation of markup and presentation"

control and federation of data



Anatomy of Apps


Performance and Modularity

Difficult to mix and match code from different projects without risk of name collisions or dependency con!icts

Loading and executing dependencies

Cross-domain loading

Multiple versions of the same package, or load two different packages with the same name, or patching a single module with another module


User Interface Widgets

Even with HTML5, form controls are limited and inconsistent in their styling and capabilities.

Native vector graphics, audio, video

Drag-n-Drop, Multi-$le upload, grids, charts, gauges, and more...

Themes


Mobile Heterogeneity

Native requires learning many new languages for many new devices

Web has challenges to overcome.


Separate Data from UX

Separate UI from data handling

Independent evolution of UI components and data components

Separation of concerns (MVC, MVP, etc.)

Inversion of Control (IOC)


Real-Time

Competing Protocols (web sockets, long-polling)

Reconnection

Integration with data stores, local storage, events


Distribution

Web

Native

Hybrid


Code here

Dojo History and Roadmap

2005 2006 2007 2008 2009 2010 2011 20122004

First Code

Dojo Foundation Dojo 0.1 Dojo 0.4

Dojo 0.2 Dojo 0.9

Dojo 1.0

Dojo 1.2

Dojo 1.3

Dojo 1.4

Dojo 1.5

Dojo 1.6

Dojo 1.7

Dojo 1.8, 2.0


Dojo Toolkit: Project Goals

Uni$ed JavaScript toolkit for superior web and mobile apps

Fill the Gaps (browsers, platforms)

Awesome, Fast, Powerful, Efficient, Modular, Extensible

Business-friendly: grids, charts, forms, & data

Rich UI widgets (calendars, 3D carousel, etc)


Philosophy

Push the limits (vector graphics/WebGL, offline, HTML5, ...)

De$ne and adopt defacto standards (AMD, JSON Schema)

Developer productivity and tools

Open, free, & liberally licensed

with clear IP

JSON


HTML5 & CSS3

Native <audio> and <video>

More new elements

New <input> types

CSS animations

Mobile-speci$c CSS

Flexible layouts


Dojo Nano and AMD

"Base-less" Dojo

Only using the parts of Dojo you really need, on a much more granular level

Dojo 1.7 AMD loader <4K gzip/mini!ed

Asynchronous Module De$nition (AMD)

A grassroots standard for interoperable code modules

Client and Server

Plugin framework for additional extensibility

Default module system for Dojo 1.7+


Squeezing Performance

• Automated build with dependency resolution, AMD & has.js optimized builds.

• All from one place with full licensing and support.

Dojo Base

Dijit (View)

dojox Grid

dojo/store(Model)

Dojo Nano


Data Access: Dojo Object Store

Work on HTML5 IndexedDB recommendation

key/value approach to data access

local storage

but useful in other contextsaccessing data stores (JSON, XML, REST, etc.)

matches nicely with NoSQL

implemented in Persevere (middleware for SSJS, Node or Narwhal+Jack)

very clean approach to getting and setting data

modular layering of functionality like noti$cations


Modern Web Features

Native vector graphics: GFX

Audio and Video

DnD, multi-$le upload

Data attributes

Widgets

Web Sockets

Local storage

...


Application Controllers and Patterns

We don’t just build websites, we build web applications, so why just build mobile websites?

dojox/app is a full web and mobile application controller.

Manages scenes in mobile context

Asyncronously loads the application’s resources as they are needed.

Uses pub/sub for application-wide communication.

Provides commonly used widgets (AlertDialog, TextBox, ListSelector) for full-scale mobile apps.


Open Source Visual Tools for Dojo and HTML5

http://maqetta.org/

Maqetta


Cross-platform mobile Web apps

Dojo Mobile

Started in Dojo 1.5

Support for many HTML5 features

Open source (BSD)

Simple mobile UI paradigms, same data interactions

Native or general themes

Grids, charts, maps, gauges


Key Paradigms

Lightweight Dojo-based widgets for mobile webapps

Native access is not in the scope of Dojo Mobile

Works well with PhoneGap

Develop device-speci$c or device-neutral look & feel

CSS themes for iOS, Android, Blackberry devices

iOS, Android, and Blackberry style controls and widgets

A complete mobile widget framework

Fully integrated part of Dojo, yet lightweight

AMD compliant with minimal base dependencies

Reuse application code across devices

Server technology agnostic


http://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/intro_tweetview/http://dojotoolkit.org/features/mobile_showcase.php

TweetView and Feature Explorer


Touch and Scroll

dojox.mobile manages scrolling to allow for native paging simulation

A variety of layout container widgets are available which can respond to scrolling in different ways (Flippable View, Scrollable View)

Touch events are synchronized in mobile and desktop environments for more efficient development


Layout, Scenes, & Animations

Dojo Mobile creates layouts and animations which are consistent with the mobile OS.

You can use an unlimited number of scenes

The simple API allows you to move from scene to scene via basic moveTo attributes

Layout widgets have been constructed to be lightweight, and can be created declaratively or programmatically.

CSS Animations are primary animation source (faster) -- JavaScript is used primarily as a fallback.


Transition Effects

Dojo 1.7:

4 standard effects

16 new transition effects


Independently scrollable contentFixed Position Header

Single application can automatically adjust to side-by-side layout based on detection of screen dimensions

Side-by-side Tablet Layout vs. Phones


Vector Graphics, Charts, Gauges, Maps


Business Charts

Mobile enablement and optimizations for all existing Dojo chart types!

Themes adapted to small screen

Touch support for scrolling and panning

Interactive Legends

Smart label layouts

Chart Titles


Gauges

Mobile enablement and optimization of Dojo gauges! (Webkit mobile)

Several new high-quality gauge styles

Touch support for changing gauge values


Swipe to browse or change views

Carousel


Geo ChartingVector map component

Desktop and Mobile enabled with touch/zoom

Connect to a Dojo store for coloring map elements

Tooltips

Legend


OpenLayers Map Integration for DojoGeo-referenced positioning of GFX Shapes and Widgets

OpenLayers Maps


wire.js

Inversion of control container

Lazy-load application dependencies

Manage component lifecycle

DOM management

Pub / Sub

AOP


PhoneGap/Cordova

Build mobile apps with HTML, CSS, and JavaScript

Doesn’t compile into native code

Works with many devices

Build service for easy compiles

Easy to learn

Free


Dojo Mobile 1.8 Under Development

Accordion Grid Grid Layout Icon container and Badge

Form panel

Editable List

Menu Dialog

Video player

Audio player

Cube transition

Swap transition

Tree map


AMD


The Basics

Allows for asynchronous module loading and callback management

Allows for loading of non-AMD modules, sometimes using plugins (HTML templates, JSON/con$g $les, basic ".js" $les)

dojo/domReady!

dojo/text!

Works via script tag injection (or XHR) and onload events


The Bene$ts

Works cross-domain without issues

We’re simply injecting <script> tags!

Prevents the need for globals

Provides excellent encapsulation

Mix and match code from different projects

Load only what you need, expose only what you should!

Loads modules only once, caches them

Simple API: define and require

Create modules that are easily distributed


// We're not using the configuration object here, just an array of requirements and

// a callback. dojo/domReady! is a plug-in that we will explain in a moment.

require(["dojo/dom-construct", "dojo/domReady!"], function(domConstruct){

var newButton = domConstruct.create("button", {innerHTML: "foo"});

domConstruct.place(newButton, document.body, "last");});

// The same code in the legacy system

// dojo.require("dojo/dom"); //this module was included by default

dojo.ready(function(){

var newButton = dojo.create("button", {innerHTML: "foo"});

dojo.place(newButton, document.body, "last");})

require()


// Creating a widget with AMDdefine( ["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/TemplatedWidget.html"], function(declare, _WidgetBase, _TemplatedMixin, template){ return declare([_WidgetBase, _TemplatedMixin], { templateString: template }); });

// Note how the dependencies map into the function call!

Creating a widget with de$ne + declare


Objects Stores and IndexedDB


Why Object Store?

Separate UI from data handling

Independent evolution of UI components and data components

Object Store API redone in 1.6, follows the HTML5 IndexedDB object store API.

Positioned as successor to Dojo Data API

Also aligns with dojox/storage API


Data Backed Objects

A uniform API can provide access to data that comes from any source

In Dojo

Many widgets

DataGrid, dgrid

Charting

Django Template Language


Dojo Store Architecture

Tree dgrid ComboBox

CustomStoreJsonRestMemory

Dojo Store API


What it Provides

Uniform data access layer

Primarily an API speci$cation, but Dojo and DojoX include several implementations of various stores

Variable feature set, with feature discovery

Data is represented as JavaScript objects


Responsibility of Stores

Stores may delegate responsibilities to the server

Associate Items w/ Identifiers

Handle Queries

Sort Data

Save Data Changes

Trigger Notifications


Design Philosophy

Feature Detection LayerNo Separate Interfaces; Implement What is Needed

Simple Core APIEasy to Implement

Object Property MutationUse Plain JS Objects, Directly Access & Mutate Properties

(instead of data items)


Resource Oriented Programming

REST concepts applied to programming

Uniform interface

Layering, store wrappers can be used to add functionality

Easy to implement simple store, add wrappers for more advanced capability

Cacheable


Promise-Based, Functional

Same API for sync and async stores

async returns promises instead of values

sync stores can be used without callbacks for simplicity

dojo/when makes it easy to use stores generically (sync or async)

Highly functional query results, useful iterative functions

Noti$cations built around query results


Dojo Object Store API


Basic API

get(id, options) - Gets an object by identity

query(query, options) - Performs a query

put(object, options) - Stores/updates an object

add(object, options) - Adds an object to the store

remove(id, options) - Deletes an object

getIdentity(object) - Get the identity from an object


require(["dojo/store/JsonRest", "dojo/store/Observable"], function(JsonStore, Observable){ var foodStore = new store({ target: "/Food/" }); foodStore.get("cherry").then(function(cherry){ cherry.color = "red"; foodStore.put(cherry); }); foodStore.remove("pickle");

foodStore = Observable(foodStore);

var query = foodStore.query({color:"red"}); query.forEach(function(food){ //... }); query.observe(function(object, oldIndex, newIndex){ //... });});

Simple Example


Query Results

Query results object includes methods:

forEach

map

$lter

Based on Array methods, but always there, and may be asynchronous

total - count of all items when a range is used (can be a promise)

Provided by dojo/store/util/QueryResults


Core Stores

Concrete Stores

Memory - In memory

JsonRest - Connected to store through HTTP/REST

DataStore - Adapter for old Dojo Data stores

Store Wrappers

Observable


dojox/socket.js

Check for WebSocket

support

Connect to WebSocket

server

Make XHR request

Yes

No

Connection failure (due to proxy)

Receive response

Receive message

message event

Very lightweight socket communication

WebSocket if available

Fallback to XHR if not available


dojox.socket

Wraps the WebSocket API with an API consistent with the rest of the Dojo Toolkit

Provides fallback for servers that don’t support WebSockets: dojox.socket.LongPoll

Provides dojox.socket.Reconnect to automatically reconnect if disconnected

Provides an on method which aliases socket.connect


dojox.socket and Comet Servers

dojox.socket works with CometD, Socket.IO, Tunguska, Hookbox, Orbited, etc.

http://www.sitepen.com/blog/2010/10/31/dojo-websocket/


require(["dojox/socket"], function (Socket) { // Create socket instance var socket = new Socket("/comet");

// Create open event listener socket.on("open", function (event) { console.log("Socket opened successfully!"); });

// Create message event listener socket.on("message", function (event) { console.log("Message received!", event, event.data); // Send a message back! socket.send("Received your message!"); });

// Customized headers var socket2 = new Socket({ url: "/comet", headers: { "Accept": "application/json", "Content-Type": "application/json" } });});

dojox.socket Sample


dgrid

Created by SitePen

Available on GitHubgithub.com/sitepen/dgrid

Mobile-ready Grid widget

Several plugins and enhancements available

Native or general themes

Quick and efficient


Lightweight

<12KB mini$ed

<32KB mini$ed with all dependencies

less than Dojo Base, can go

baseless (nano)

Easy to grok

https://github.com/sitepen/dgrid


Object Store Driven

Fast, lightweight stores

Correct query observation events

Uses the new HTML5-inspired object store API directly


Modular, Composable

Pluggable design

Different grid components combined as mixins

Column components can be used per-column


Performance

Fast. Very Fast.

Loads much faster being smaller

Renders results about 6-10x faster than the DataGrid!

Optimized for modern platforms (like mobile)


DOM-based Element Creation

innerHTML no longer fastest approach

Direct DOM creation makes easy to reference, connect, modify elements at every step in rendering

Plugins are super simple

Tree is <100 lines of code!


CSS-Driven

Almost no inline styles

Easy customization via CSS

No coding necessary for styling

Further improves performance


CSS Modularity

Proper skin vs structure separation

Easing skinning with generic classes

Utilizes XStyle

Framework for shimming and extending CSS

Handles loading CSS

Parsing CSS

Uses CSS plugins to handle speci$c shims and extensions


Features!

Start with basics...

Tabular view of data

Headers with scrolling body

Virtual paging/scrolling

Sorting

Keyboard Navigation


Feature Comparison


Complex Layout: dTunes


The Dojo FoundationOpen Home for the Open Web


Community


http://vepi-2k3208aja.acs.cnet-caen.fr/df/

Community App


Foundation Structure

The Dojo Foundation is the home of great 100-point open source projects, created by extraordinary people and companies to solve important problems.

501(c)(6) non-pro$t foundationjust enough foundation without bureaucracy or excessive process

5 member board

Toolkit project lead council (1 per project)

Voting by committers (generally through mailing lists)

Committers nominated by project, reviewed by board

Projects are very autonomous

All code contributed through CLAs


Foundation Projects


Major Contributors & Users

IBM, Orange, SitePen, TIBCO800 Flowers, Abbott Labs, Accenture, Alcatel-Lucent, ADP, AOL, ASU, Bank of Montréal, Barclays, Blue Coat Systems, Bottomline Technologies, Bristol-Myers Squibb, Brocade, BMW, Calabrio, Cambridge Semantics, Carsoni$ed Treehouse, CGI, Chase, Chess.com, Chill.com, Cisco, Citi, Coventry Healthcare, Cox, Daimler, Digital Reasoning, Disney, Eclipse Orion, ESRI, Eye-Fi, Fidelity Investments, Field Aware, Fiserv, Google, ING, Intalio, KLP, Liberty Mutual, Lemonade, Lufthansa, Marriott, Mirapoint, Mozilla, Namesake, NASA, NOAA, OpenClass, Oracle, Orange, Pearson, Pershing, Premier, QBE, Reach Local, Sage, Serena Software, Shell, Thomson Reuters, TIBCO, UK, Uniface, USA, uxebu, Verizon Wireless, Vidéotron, vmware (Spring), Vodafone, Vodori Pepper, Wall Street Journal, Williams-Sonoma, Zend, and 1000s more...


Significant Tutorial Series (55 and counting!)

http://dojotoolkit.org/documentation/

Documentation


Getting Started

Hello Dojo: http://dojotoolkit.org/documentation/tutorials/1.7/hello_dojo/

Start a Dojo project: http://www.sitepen.com/blog/2011/05/04/what-is-the-best-way-to-start-a-dojo-project/

Dojo Boilerplate: https://github.com/csnover/dojo-boilerplate

dgrid: http://www.sitepen.com/blog/2011/10/26/introducing-the-next-grid-dgrid/


Result: Modular Tools

Tools to mix and match to create your app

Separate data from UI logic simple and seamlessly

Modular enough for very simple projects, !exible and consistent enough to handle the most challenging, feature-rich web apps


SitePen: We Build Extraordinary Apps.

Desktop and Mobile Web App professional services

Creators and leaders of open source web software


Thanks! Q&A

SitePen sitepen.com

Dojo Toolkit dojotoolkit.org

Twitter: @dylans @sitepen @dojo

modular, mobile, and reinventing web app development - phoenix mobile festival

Technology

dojo sitepen

rights reserved https

presentation sitepen

module sitepen

events sitepen

themes sitepen

code dojo

dojo history