Pragmatics of Declarative Ajax XTech 2007 May 15-18, Paris Dave Johnson CTO, Nitobi [email_address]

Agenda Who Am I Rule of Least Power Declarative Languages Programming Basics Web User Interfaces Common Problems Summary

Who Am I

Rule of Least Power

Declarative Languages

Programming Basics

Web User Interfaces

Common Problems

Summary

Who Is this Guy? Enterprise Ajax book (Addison Wesley) Nitobi Enterprise Ajax Podcast http://blogs.nitobi.com/dave

Enterprise Ajax book (Addison Wesley)

Nitobi Enterprise Ajax Podcast

http://blogs.nitobi.com/dave

Anything Else? Nitobi CTO + Co-founder Located in Vancouver, Canada Declarative Ajax user-interface components for the enterprise

Nitobi CTO + Co-founder

Located in Vancouver, Canada

Declarative Ajax user-interface components for the enterprise

Nitobi Clients

Agenda Who Is this Guy? http://flickr.com/photos/jjd/24164311/ ME THUNK HTML ROCZ!!!

Who Is this Guy?

The Rule of Least Power Tim Berners-Lee Noah Mendelsohn www.w3.org/2001/tag/doc/leastPower

Tim Berners-Lee

Noah Mendelsohn

www.w3.org/2001/tag/doc/leastPower

Principle “ Powerful languages inhibit information reuse.”

Inhibiting Information Reuse Humans like complicated Pen and paper or memory stick? What does this have to do with the Web?

Humans like complicated

Pen and paper or memory stick?

What does this have to do with the Web?

Good Practice “ Use the least powerful language suitable for expressing information, constraints or programs on the World Wide Web.”

http://www.flickr.com/photos/doglotion/154496890/

http://www.flickr.com/photos/dpade1337/429996161/

WS-*???

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

More robust and secure

Easier for people to use

Therefore, more people use them

Be mindful of the success of HTML

110,000,000

http://flickr.com/photos/oceanyamaha/186146223/ DEKLARATIVE WUT???

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

It is about what not how

There is no sign of an algorithm

We are not talking functional languages

HTML – canonical declarative language

Declarative Languages HTML XForms SVG MXML XAML JSON

HTML

XForms

SVG

MXML

XAML

JSON

Ham and Cheese “ declarative” vs “imperative” “ library” vs “roll your own”

“ declarative” vs “imperative”

“ library” vs “roll your own”

http://www.flickr.com/photos/refractedmoments/399890975/

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?

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?

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!

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!

Design VS Program Declarative “design” gets us 80% Programming gets the other 20% One of two evils Easy to design Easy to program

Declarative “design” gets us 80%

Programming gets the other 20%

One of two evils

Easy to design

Easy to program

Popular Tools HTML – how many HTML pages? JSON – relatively new compared to <XML> Microformats – hCard Twitter – how many messages? Twitter vision L:Paris

HTML – how many HTML pages?

JSON – relatively new compared to <XML>

Microformats – hCard

Twitter – how many messages?

Twitter vision L:Paris

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

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

Layering Languages Languages get more simple as we share more information Consider a factorial function in a few different languages?

Languages get more simple as we share more information

Consider a factorial function in a few different languages?

Machine Code

Assembly main: movl $5, %eax movl $1, %ebx L1: cmpl $0, %eax je L2 imull %eax, %ebx decl %eax jmp L1 L2: ret

main:

movl $5, %eax

movl $1, %ebx

L1: cmpl $0, %eax

je L2

imull %eax, %ebx

decl %eax

jmp L1

L2: ret

C++ int factorial(int n) { if(n <= 1) return 1; return n * factorial(n - 1); }

int factorial(int n) {

if(n <= 1) return 1;

return n * factorial(n - 1);

}

Python fac = lambda n:[1,0][n>0] or fac(n-1)*n

fac = lambda n:[1,0][n>0] or fac(n-1)*n

Still All Clearly Imperative Conditional statements However, once you start using the factorial function it appears declarative

Conditional statements

However, once you start using the factorial function it appears declarative

Agenda I CULD DO ZAT http://flickr.com/photos/stevecaddy/474542238/

Declarative User Interface Who cares about calculating factorials Power is in design

Who cares about calculating factorials

Power is in design

Declarative Maps?

In JavaScript <script type=“text/javascript”> gmap.init = function() { var map = new GMap2(document.getElementById(&quot;map&quot;)); 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)], &quot;#ff0000&quot;, 10); map.addOverlay(polyline); } window.onload = gmap.init; </script>

<script type=“text/javascript”>

gmap.init = function() {

var map = new GMap2(document.getElementById(&quot;map&quot;));

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)],

&quot;#ff0000&quot;, 10);

map.addOverlay(polyline);

}

window.onload = gmap.init;

</script>

In (X)HTML <g:map id=&quot;map&quot; width=&quot;370px&quot; height=&quot;380px&quot; smallmapcontrol=&quot;true&quot; maptypecontrol=&quot;true&quot;> <g:center zoom=&quot;14&quot;> <g:point lat=&quot;49.2853&quot; lng=&quot;-123.11348&quot;></g:point> </g:center> <g:polyline color=&quot;#FF0000&quot; size=&quot;10&quot;> <g:point lat=&quot;49.265788&quot; lng=&quot;-123.069877&quot;></g:point> <g:point lat=&quot;49.276988&quot; lng=&quot;-123.069534&quot;></g:point> <g:point lat=&quot;49.276988&quot; lng=&quot;-123.099746&quot;></g:point> <g:point lat=&quot;49.278108&quot; lng=&quot;-123.112106&quot;></g:point> <g:point lat=&quot;49.294904&quot; lng=&quot;-123.136825&quot;></g:point> </g:polyline> </g:map>

<g:map id=&quot;map&quot; width=&quot;370px&quot; height=&quot;380px&quot; smallmapcontrol=&quot;true&quot; maptypecontrol=&quot;true&quot;>

<g:center zoom=&quot;14&quot;>

<g:point lat=&quot;49.2853&quot; lng=&quot;-123.11348&quot;></g:point>

</g:center>

<g:polyline color=&quot;#FF0000&quot; size=&quot;10&quot;>

<g:point lat=&quot;49.265788&quot; lng=&quot;-123.069877&quot;></g:point>

<g:point lat=&quot;49.276988&quot; lng=&quot;-123.069534&quot;></g:point>

<g:point lat=&quot;49.276988&quot; lng=&quot;-123.099746&quot;></g:point>

<g:point lat=&quot;49.278108&quot; lng=&quot;-123.112106&quot;></g:point>

<g:point lat=&quot;49.294904&quot; lng=&quot;-123.136825&quot;></g:point>

</g:polyline>

</g:map>

Same but Different new GLatLng(49.265788, -123.069877) <g:point lat=&quot;49.265788&quot; lng=&quot;-123.069877&quot; /> new GLatLng( -123.069877 , 49.265788 ) <g:point lng=&quot; -123.069877 &quot; lat=&quot; 49.265788 &quot; />

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

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

The Bugaboo Imperative can be nearly as good as declaration “ JavaScript objects need more than just setting properties”

Imperative can be nearly as good as declaration

“ JavaScript objects need more than just setting properties”

var input = new Input(); input.hint = “Please enter a number”; <input> <hint>Please enter a number</hint> </input>

var input = new Input();

input.hint = “Please enter a number”;

<input>

<hint>Please enter a number</hint>

</input>

var input = new Input(); input. setHint (“Please enter a number”); Input.prototype.setHint = function() { // setup any event hooks etc… }

var input = new Input();

input. setHint (“Please enter a number”);

Input.prototype.setHint = function() {

// setup any event hooks etc…

}

Benefits? Designable easy IDE tooling Declarative patterns succinct, reproducible solutions Rich semantics frameworks can easily read and interpret server or client side interpretation

Designable

easy IDE tooling

Declarative patterns

succinct, reproducible solutions

Rich semantics

frameworks can easily read and interpret

server or client side interpretation

Write Once, Deploy Anywhere

http://flickr.com/photos/elmyra/9335163/ WUT IZ ISNIDE?

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

Firefox – served as HTML

DOM traversal

Self closing tags

Internet Explorer – can’t be served as XHTML

DOM methods

Namespace

Namespaces

XHTML

CSS

Validation

Firefox HTML DOM Traversal <div id=&quot;div1&quot;> <ntb:button id=&quot;button1&quot;>button</ntb:button> <ntb:button id=&quot;button2&quot;>button 2</ntb:button> <ntb:panel id=&quot;panel1&quot;> <ntb:title id=&quot;title1&quot;> <div id=&quot;div2&quot;>panel title 1</div> </ntb:title> <ntb:contents id=&quot;contents1&quot;> <div id=&quot;div3&quot;>Contents div3</div> <div id=&quot;div4&quot;>Contents div4</div> </ntb:contents> </ntb:panel> </div>

<div id=&quot;div1&quot;>

<ntb:button id=&quot;button1&quot;>button</ntb:button>

<ntb:button id=&quot;button2&quot;>button 2</ntb:button>

<ntb:panel id=&quot;panel1&quot;>

<ntb:title id=&quot;title1&quot;>

<div id=&quot;div2&quot;>panel title 1</div>

</ntb:title>

<ntb:contents id=&quot;contents1&quot;>

<div id=&quot;div3&quot;>Contents div3</div>

<div id=&quot;div4&quot;>Contents div4</div>

</ntb:contents>

</ntb:panel>

</div>

getElementsByTagNameNS ns.getElementsByTagNameNS = function(tag, np, context) { context = context || document; var qname = np + &quot;:&quot; + 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; }

ns.getElementsByTagNameNS = function(tag, np, context) {

context = context || document;

var qname = np + &quot;:&quot; + 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;

}

Styling Namespaced Elements Internet Explorer ntb:* { display:none; } W3C @namespace ntb &quot;http://www.nitobi.com&quot;; ntb|* { display:none; }

Internet Explorer

ntb:* {

display:none;

}

W3C

@namespace ntb &quot;http://www.nitobi.com&quot;;

ntb|* {

display:none;

}

Other Approaches Custom attribute <div oatype=&quot;ntb:grid&quot; ... /> Microformats <div class=“ntb_grid” … /> XBL / HTC JSON <div oatype=“{widget:’grid’,colums:[‘Col1’,Col2’]}” /> Many, many more

Custom attribute

<div oatype=&quot;ntb:grid&quot; ... />

Microformats

<div class=“ntb_grid” … />

XBL / HTC

JSON

<div oatype=“{widget:’grid’,colums:[‘Col1’,Col2’]}” />

Many, many more

Standards Approach Use HTML role attribute Accessibility of Rich Internet Applications (ARIA) as part of Web Accessibility Initiative

Use HTML role attribute

Accessibility of Rich Internet Applications (ARIA) as part of Web Accessibility Initiative

W3C Accessibility tabindex=&quot;-1&quot; role=&quot;wairole:checkbox&quot; property:checked=&quot;true“ <div tabindex=“-1” role=“wairole:checkbox” property:checked=“true”> </div>

tabindex=&quot;-1&quot;

role=&quot;wairole:checkbox&quot;

property:checked=&quot;true“

<div tabindex=“-1”

role=“wairole:checkbox”

property:checked=“true”>

</div>

What are Others Doing? XML-Script Dojo Toolkit XForms

XML-Script

Dojo Toolkit

XForms

XML-Script <script type=&quot;text/xml-script&quot;> <page xmlns=&quot;http://schemas.microsoft.com/xml-script/2005&quot;> <components> <textbox id=&quot;searchText&quot; /> <button id=&quot;searchButton&quot;> <bindings> <binding property=&quot;enabled&quot; dataContext=&quot;searchText&quot; dataPath=&quot;text.length&quot; transform=&quot;NumberToBoolean&quot; /> </bindings> <click> <invokeMethod target=&quot;searchMethod&quot; method=&quot;invoke&quot; /> </click> </button> <serviceMethod id=&quot;searchMethod&quot;> <bindings> <binding property=&quot;parameters&quot; propertyKey=&quot;query&quot; dataContext=&quot;searchText&quot; dataPath=&quot;text&quot; /> </bindings> </serviceMethod> </components> </page> </script>

<script type=&quot;text/xml-script&quot;>

<page xmlns=&quot;http://schemas.microsoft.com/xml-script/2005&quot;>

<components>

<textbox id=&quot;searchText&quot; />

<button id=&quot;searchButton&quot;>

<bindings>

<binding property=&quot;enabled&quot; dataContext=&quot;searchText&quot; dataPath=&quot;text.length&quot; transform=&quot;NumberToBoolean&quot; />

</bindings>

<click>

<invokeMethod target=&quot;searchMethod&quot; method=&quot;invoke&quot; />

</click>

</button>

<serviceMethod id=&quot;searchMethod&quot;>

<bindings>

<binding property=&quot;parameters&quot; propertyKey=&quot;query&quot; dataContext=&quot;searchText&quot; dataPath=&quot;text&quot; />

</bindings>

</serviceMethod>

</components>

</page>

</script>

Dojo Toolkit <BUTTON widgetId=&quot;helloButton&quot; dojoType=&quot;Button&quot;>Hello World!</BUTTON> <?xml:namespace prefix=dojo/> <dojo:widget></dojo:widget> <DIV dojoType=&quot;widget&quot;> <DIV class=dojo-widget></DIV> </DIV>

<BUTTON widgetId=&quot;helloButton&quot; dojoType=&quot;Button&quot;>Hello World!</BUTTON>

<?xml:namespace prefix=dojo/>

<dojo:widget></dojo:widget>

<DIV dojoType=&quot;widget&quot;>

<DIV class=dojo-widget></DIV>

</DIV>

XForms <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:f=&quot;http://www.w3.org/2002/xforms&quot;> <head> <title>Search</title> <f:model> <f:submission action=&quot;http://example.com/search“ method=&quot;get&quot; id=&quot;s&quot;/> </f:model> </head> <body> <p> <f:input ref=&quot;q&quot;><f:label>Find</f:label></f:input> <f:submit submission=&quot;s&quot;><f:label>Go</f:label></f:submit> </p> </body> </html>

<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;

xmlns:f=&quot;http://www.w3.org/2002/xforms&quot;>

<head>

<title>Search</title>

<f:model>

<f:submission action=&quot;http://example.com/search“ method=&quot;get&quot; id=&quot;s&quot;/>

</f:model>

</head>

<body>

<p>

<f:input ref=&quot;q&quot;><f:label>Find</f:label></f:input>

<f:submit submission=&quot;s&quot;><f:label>Go</f:label></f:submit>

</p>

</body>

</html>

Summary Declarative is “least power” approach Facilitates sharing of information User interface designability and skinnability are paramount

Declarative is “least power” approach

Facilitates sharing of information

User interface designability and skinnability are paramount

Q&A? Dave Johnson [email_address] http://blogs.nitobi.com/dave