View
3.040
Download
3
Category
Tags:
Preview:
DESCRIPTION
AMD: The Definitive Source http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/ Modular, Mobile, and Reinventing Web App Development - Phoenix Mobile Festival
Citation preview
© SitePen, Inc. All Rights Reserved
Modular, Mobile, and Reinventing Web App
DevelopmentPhoenix Mobile Festival
April 2012
presents
© SitePen, Inc. All Rights Reserved
Nice to Meet you
Co-Founder of Dojo Toolkit
CEO, SitePen, Inc.
President, Dojo Foundation
Dylan Schiemann
@dylans @sitepen @dojo
© SitePen, Inc. All Rights Reserved
Evolution of Web App Development
https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/
© SitePen, Inc. All Rights Reserved
Evolution of Web App Development
https://secure.flickr.com/photos/dylans/3439037456/
Web 1.0
Dumb client, smart server
Focus on HTML & CSS, "separation of markup and presentation"
© SitePen, Inc. All Rights Reserved
Evolution of Web App Development
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
© SitePen, Inc. All Rights Reserved
https://secure.flickr.com/photos/dylans/5206483166/
We Want More
© SitePen, Inc. All Rights Reserved
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
https://secure.flickr.com/photos/dylans/5916167025/
© SitePen, Inc. All Rights Reserved
Anatomy of Apps
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Mobile Heterogeneity
Native requires learning many new languages for many new devices
Web has challenges to overcome.
© SitePen, Inc. All Rights Reserved
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)
© SitePen, Inc. All Rights Reserved
Real-Time
Competing Protocols (web sockets, long-polling)
Reconnection
Integration with data stores, local storage, events
© SitePen, Inc. All Rights Reserved
Distribution
Web
Native
Hybrid
© SitePen, Inc. All Rights Reserved
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reservedhttp://dojotoolkit.org/
© SitePen, Inc. All Rights Reserved
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)
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
HTML5 & CSS3
Native <audio> and <video>
More new elements
New <input> types
CSS animations
Mobile-speci$c CSS
Flexible layouts
© SitePen, Inc. All Rights Reserved
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+
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Modern Web Features
Native vector graphics: GFX
Audio and Video
DnD, multi-$le upload
Data attributes
Widgets
Web Sockets
Local storage
...
© SitePen, Inc. All Rights Reserved
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.
© SitePen, Inc. All Rights Reserved
Open Source Visual Tools for Dojo and HTML5
http://maqetta.org/
Maqetta
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
http://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/intro_tweetview/http://dojotoolkit.org/features/mobile_showcase.php
TweetView and Feature Explorer
© SitePen, Inc. All Rights Reserved
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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.
© SitePen, Inc. All Rights Reserved
Transition Effects
Dojo 1.7:
4 standard effects
16 new transition effects
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Vector Graphics, Charts, Gauges, Maps
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Gauges
Mobile enablement and optimization of Dojo gauges! (Webkit mobile)
Several new high-quality gauge styles
Touch support for changing gauge values
© SitePen, Inc. All Rights Reserved
Swipe to browse or change views
Carousel
© SitePen, Inc. All Rights Reserved
Geo ChartingVector map component
Desktop and Mobile enabled with touch/zoom
Connect to a Dojo store for coloring map elements
Tooltips
Legend
© SitePen, Inc. All Rights Reserved
OpenLayers Map Integration for DojoGeo-referenced positioning of GFX Shapes and Widgets
OpenLayers Maps
© SitePen, Inc. All Rights Reserved
wire.js
Inversion of control container
Lazy-load application dependencies
Manage component lifecycle
DOM management
Pub / Sub
AOP
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
AMD
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
// 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()
© SitePen, Inc. All Rights Reserved
// 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
© SitePen, Inc. All Rights Reserved
Objects Stores and IndexedDB
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Dojo Store Architecture
Tree dgrid ComboBox
CustomStoreJsonRestMemory
Dojo Store API
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Responsibility of Stores
Stores may delegate responsibilities to the server
Associate Items w/ Identifiers
Handle Queries
Sort Data
Save Data Changes
Trigger Notifications
© SitePen, Inc. All Rights Reserved
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)
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Dojo Object Store API
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Core Stores
Concrete Stores
Memory - In memory
JsonRest - Connected to store through HTTP/REST
DataStore - Adapter for old Dojo Data stores
Store Wrappers
Observable
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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/
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Object Store Driven
Fast, lightweight stores
Correct query observation events
Uses the new HTML5-inspired object store API directly
© SitePen, Inc. All Rights Reserved
Modular, Composable
Pluggable design
Different grid components combined as mixins
Column components can be used per-column
© SitePen, Inc. All Rights Reserved
Performance
Fast. Very Fast.
Loads much faster being smaller
Renders results about 6-10x faster than the DataGrid!
Optimized for modern platforms (like mobile)
© SitePen, Inc. All Rights Reserved
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!
© SitePen, Inc. All Rights Reserved
CSS-Driven
Almost no inline styles
Easy customization via CSS
No coding necessary for styling
Further improves performance
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Features!
Start with basics...
Tabular view of data
Headers with scrolling body
Virtual paging/scrolling
Sorting
Keyboard Navigation
© SitePen, Inc. All Rights Reserved
Feature Comparison
© SitePen, Inc. All Rights Reserved
Complex Layout: dTunes
© SitePen, Inc. All Rights Reserved
The Dojo FoundationOpen Home for the Open Web
© SitePen, Inc. All Rights Reserved
Community
© SitePen, Inc. All Rights Reserved
http://vepi-2k3208aja.acs.cnet-caen.fr/df/
Community App
© SitePen, Inc. All Rights Reserved
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
© SitePen, Inc. All Rights Reserved
Foundation Projects
© SitePen, Inc. All Rights Reserved
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...
© SitePen, Inc. All Rights Reserved
Significant Tutorial Series (55 and counting!)
http://dojotoolkit.org/documentation/
Documentation
© SitePen, Inc. All Rights Reserved
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/
© SitePen, Inc. All Rights Reserved
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, Inc. All Rights Reserved
© SitePen, Inc. All Rights Reserved
SitePen: We Build Extraordinary Apps.
Desktop and Mobile Web App professional services
Creators and leaders of open source web software
© SitePen, Inc. All Rights Reserved
Thanks! Q&A
SitePen sitepen.com
Dojo Toolkit dojotoolkit.org
Twitter: @dylans @sitepen @dojo
Recommended