Pragmatics of Declarative Ajax
-
Upload
davejohnson -
Category
Business
-
view
17 -
download
2
description
Transcript of Pragmatics of Declarative Ajax
XTech 2007, May 15-18, Paris 1
Pragmatics ofDeclarative Ajax
XTech 2007 May 15-18, ParisDave JohnsonCTO, [email protected]
XTech 2007, May 15-18, Paris 2
Agenda
• Who Am I
• Rule of Least Power
• Declarative Languages– Programming Basics– Web User Interfaces– Common Problems
• Summary
XTech 2007, May 15-18, Paris 3
Who Is this Guy?
• Enterprise Ajax book (Addison Wesley)
• Nitobi Enterprise Ajax Podcast
• http://blogs.nitobi.com/dave
XTech 2007, May 15-18, Paris 4
Anything Else?
• Nitobi CTO + Co-founder
• Located in Vancouver, Canada
• Declarative Ajax user-interface components for the enterprise
XTech 2007, May 15-18, Paris 5
XTech 2007, May 15-18, Paris 6
Nitobi Clients
XTech 2007, May 15-18, Paris 7
Agenda
• Who Is this Guy?
http://flickr.com/photos/jjd/24164311/
XTech 2007, May 15-18, Paris 8
The Rule of Least Power
• Tim Berners-Lee
• Noah Mendelsohn
• www.w3.org/2001/tag/doc/leastPower
XTech 2007, May 15-18, Paris 9
Principle
“Powerful languages inhibit information reuse.”
XTech 2007, May 15-18, Paris 10
Inhibiting Information Reuse
• Humans like complicated
• Pen and paper or memory stick?
• What does this have to do with the Web?
XTech 2007, May 15-18, Paris 11
Good Practice
“Use the least powerful language suitable for expressing information, constraints or
programs on the World Wide Web.”
XTech 2007, May 15-18, Paris 12http://www.flickr.com/photos/doglotion/154496890/
XTech 2007, May 15-18, Paris 13http://www.flickr.com/photos/dpade1337/429996161/
XTech 2007, May 15-18, Paris 14
WS-*???
XTech 2007, May 15-18, Paris 15
Benefits of Less Power?
• More robust and secure
• Easier for people to use
• Therefore, more people use them
• Be mindful of the success of HTML
XTech 2007, May 15-18, Paris 16
110,000,000
XTech 2007, May 15-18, Paris 17http://flickr.com/photos/oceanyamaha/186146223/
XTech 2007, May 15-18, Paris 18
Declarative What?
• It is about what not how
• There is no sign of an algorithm
• We are not talking functional languages
• HTML – canonical declarative language
XTech 2007, May 15-18, Paris 19
Declarative Languages
• HTML
• XForms
• SVG
• MXML
• XAML
• JSON
XTech 2007, May 15-18, Paris 20
Ham and Cheese
• “declarative” vs “imperative”
• “library” vs “roll your own”
XTech 2007, May 15-18, Paris 21
XTech 2007, May 15-18, Paris 22http://www.flickr.com/photos/refractedmoments/399890975/
XTech 2007, May 15-18, Paris 23
Computability
• But is the Jambon et Fromage Touring complete?
• You can’t change the recipe
• If there is no way to specify what you want to do then how can you do it?– Make the sandwich yourself– Bring your own mustard
• Why bother?
XTech 2007, May 15-18, Paris 24
Pareto’s Principle
• Call it what you will– 80-20 rule– Law of the vital few– Principle of factor sparsity– 90-10 rule in software engineering
• Declarative gets you most of the way!
XTech 2007, May 15-18, Paris 25
Design VS Program
• Declarative “design” gets us 80%
• Programming gets the other 20%
• One of two evils– Easy to design– Easy to program
XTech 2007, May 15-18, Paris 26
Popular Tools
• HTML – how many HTML pages?
• JSON – relatively new compared to <XML>
• Microformats – hCard
• Twitter – how many messages?– Twitter vision L:Paris
XTech 2007, May 15-18, Paris 27
Not Just About XML
• Declarative does not have to be XML
• Imperative languages can look declarative– Using imperative language to encapsulate
non-declarative ideas
• You don’t have to bake the bread for your sandwich … nor mill the grain
XTech 2007, May 15-18, Paris 28
Layering Languages
• Languages get more simple as we share more information
• Consider a factorial function in a few different languages?
XTech 2007, May 15-18, Paris 29
Machine Code
XTech 2007, May 15-18, Paris 30
Assembly
main:movl $5, %eaxmovl $1, %ebxL1: cmpl $0, %eaxje L2imull %eax, %ebxdecl %eaxjmp L1L2: ret
XTech 2007, May 15-18, Paris 31
C++
int factorial(int n) {
if(n <= 1) return 1;
return n * factorial(n - 1);
}
XTech 2007, May 15-18, Paris 32
Python
fac = lambda n:[1,0][n>0] or fac(n-1)*n
XTech 2007, May 15-18, Paris 33
Still All Clearly Imperative
• Conditional statements
• However, once you start using the factorial function it appears declarative
XTech 2007, May 15-18, Paris 34
Agenda
http://flickr.com/photos/stevecaddy/474542238/
XTech 2007, May 15-18, Paris 35
Declarative User Interface
• Who cares about calculating factorials
• Power is in design
XTech 2007, May 15-18, Paris 36
Declarative Maps?
XTech 2007, May 15-18, Paris 37
In JavaScript<script type=“text/javascript”>gmap.init = function() { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(49.290327, -123.11348), 12); var polyline = new GPolyline([ new GLatLng(49.265788, -123.069877), new GLatLng(49.276988, -123.069534), new GLatLng(49.276988, -123.099746), new GLatLng(49.278108, -123.112106), new GLatLng(49.2949043, -123.136825)], "#ff0000", 10); map.addOverlay(polyline); }window.onload = gmap.init;</script>
XTech 2007, May 15-18, Paris 38
In (X)HTML
<g:map id="map" width="370px" height="380px" smallmapcontrol="true" maptypecontrol="true">
<g:center zoom="14"> <g:point lat="49.2853" lng="-123.11348"></g:point> </g:center> <g:polyline color="#FF0000" size="10"> <g:point lat="49.265788" lng="-123.069877"></g:point> <g:point lat="49.276988" lng="-123.069534"></g:point> <g:point lat="49.276988" lng="-123.099746"></g:point> <g:point lat="49.278108" lng="-123.112106"></g:point> <g:point lat="49.294904" lng="-123.136825"></g:point> </g:polyline></g:map>
XTech 2007, May 15-18, Paris 39
Same but Different
new GLatLng(49.265788, -123.069877)
<g:point lat="49.265788" lng="-123.069877" />
new GLatLng(-123.069877, 49.265788)
<g:point lng="-123.069877" lat="49.265788" />
XTech 2007, May 15-18, Paris 40
Practical Differences
• Both could have auto-complete support• Designability and IDE support• HTML writer support on servers• Order matters … to a less degree in XML• Declarative can be less code• People don’t like JavaScript• Remember, HTML is a success for a
reason
XTech 2007, May 15-18, Paris 41
The Bugaboo
• Imperative can be nearly as good as declaration
• “JavaScript objects need more than just setting properties”
XTech 2007, May 15-18, Paris 42
var input = new Input();
input.hint = “Please enter a number”;
<input><hint>Please enter a number</hint>
</input>
XTech 2007, May 15-18, Paris 43
var input = new Input();
input.setHint(“Please enter a number”);
Input.prototype.setHint = function() {
// setup any event hooks etc…
}
XTech 2007, May 15-18, Paris 44
Benefits?
1. Designable• easy IDE tooling
2. Declarative patterns• succinct, reproducible solutions
3. Rich semantics• frameworks can easily read and interpret• server or client side interpretation
XTech 2007, May 15-18, Paris 45
Write Once, Deploy Anywhere
XTech 2007, May 15-18, Paris 46http://flickr.com/photos/elmyra/9335163/
XTech 2007, May 15-18, Paris 47
Problems
• Firefox – served as HTML– DOM traversal– Self closing tags
• Internet Explorer – can’t be served as XHTML– DOM methods– Namespace
• Namespaces– XHTML– CSS
• Validation
XTech 2007, May 15-18, Paris 48
Firefox HTML DOM Traversal<div id="div1"> <ntb:button id="button1">button</ntb:button> <ntb:button id="button2">button 2</ntb:button> <ntb:panel id="panel1"> <ntb:title id="title1"> <div id="div2">panel title 1</div> </ntb:title> <ntb:contents id="contents1"> <div id="div3">Contents div3</div> <div id="div4">Contents div4</div> </ntb:contents> </ntb:panel></div>
XTech 2007, May 15-18, Paris 49
getElementsByTagNameNSns.getElementsByTagNameNS = function(tag, np, context) { context = context || document; var qname = np + ":" + tag; if (ns.IE) qname = tag; var elems = context.getElementsByTagName(qname); if (ns.IE) { realElems = []; for (var i=0; i<elems.length; i++) { if (elems[i].scopeName == ns) realElems.push(elems[i]); } elems = realElems; } return elems;}
XTech 2007, May 15-18, Paris 50
Styling Namespaced Elements
• Internet Explorerntb\:* { display:none;}
• W3C@namespace ntb "http://www.nitobi.com";ntb|* { display:none;}
XTech 2007, May 15-18, Paris 51
Other Approaches
• Custom attribute– <div oatype="ntb:grid" ... />
• Microformats– <div class=“ntb_grid” … />
• XBL / HTC• JSON
– <div oatype=“{widget:’grid’,colums:[‘Col1’,Col2’]}” />
• Many, many more
XTech 2007, May 15-18, Paris 52
Standards Approach
• Use HTML role attribute
• Accessibility of Rich Internet Applications (ARIA) as part of Web Accessibility Initiative
XTech 2007, May 15-18, Paris 53
W3C Accessibility
• tabindex="-1"• role="wairole:checkbox"• property:checked="true“
<div tabindex=“-1” role=“wairole:checkbox” property:checked=“true”></div>
XTech 2007, May 15-18, Paris 54
What are Others Doing?
• XML-Script
• Dojo Toolkit
• XForms
XTech 2007, May 15-18, Paris 55
XML-Script<script type="text/xml-script"> <page xmlns="http://schemas.microsoft.com/xml-script/2005"> <components> <textbox id="searchText" /> <button id="searchButton"> <bindings> <binding property="enabled" dataContext="searchText"
dataPath="text.length" transform="NumberToBoolean" /> </bindings> <click> <invokeMethod target="searchMethod" method="invoke" /> </click> </button> <serviceMethod id="searchMethod"> <bindings> <binding property="parameters" propertyKey="query"
dataContext="searchText" dataPath="text" /> </bindings> </serviceMethod> </components> </page></script>
XTech 2007, May 15-18, Paris 56
Dojo Toolkit
<BUTTON widgetId="helloButton" dojoType="Button">Hello World!</BUTTON>
<?xml:namespace prefix=dojo/>
<dojo:widget></dojo:widget>
<DIV dojoType="widget">
<DIV class=dojo-widget></DIV>
</DIV>
XTech 2007, May 15-18, Paris 57
XForms<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.w3.org/2002/xforms"> <head> <title>Search</title> <f:model> <f:submission action="http://example.com/search“
method="get" id="s"/> </f:model> </head> <body> <p> <f:input ref="q"><f:label>Find</f:label></f:input> <f:submit submission="s"><f:label>Go</f:label></f:submit> </p> </body></html>
XTech 2007, May 15-18, Paris 58
Summary
• Declarative is “least power” approach
• Facilitates sharing of information
• User interface designability and skinnability are paramount