Slideshow Transcript

1. Slide 1: Pragmatics of Declarative Ajax XTech 2007 May 15-18, Paris Dave Johnson CTO, Nitobi dave@nitobi.com 1 XTech 2007, May 15-18, Paris
2. Slide 2: Agenda • Who Am I • Rule of Least Power • Declarative Languages – Programming Basics – Web User Interfaces – Common Problems • Summary 2 XTech 2007, May 15-18, Paris
3. Slide 3: Who Is this Guy? • Enterprise Ajax book (Addison Wesley) • Nitobi Enterprise Ajax Podcast • http://blogs.nitobi.com/dave 3 XTech 2007, May 15-18, Paris
4. Slide 4: Anything Else? • Nitobi CTO + Co-founder • Located in Vancouver, Canada • Declarative Ajax user-interface components for the enterprise 4 XTech 2007, May 15-18, Paris
5. Slide 5: 5 XTech 2007, May 15-18, Paris
6. Slide 6: Nitobi Clients 6 XTech 2007, May 15-18, Paris
7. Slide 7: Agenda • Who Is this Guy? http://flickr.com/photos/jjd/24164311/ 7 XTech 2007, May 15-18, Paris
8. Slide 8: The Rule of Least Power • Tim Berners-Lee • Noah Mendelsohn • www.w3.org/2001/tag/doc/leastPower 8 XTech 2007, May 15-18, Paris
9. Slide 9: Principle “Powerful languages inhibit information reuse.” 9 XTech 2007, May 15-18, Paris
10. Slide 10: Inhibiting Information Reuse • Humans like complicated • Pen and paper or memory stick? • What does this have to do with the Web? 10 XTech 2007, May 15-18, Paris
11. Slide 11: Good Practice “Use the least powerful language suitable for expressing information, constraints or programs on the World Wide Web.” 11 XTech 2007, May 15-18, Paris
12. Slide 12: http://www.flickr.com/photos/doglotion/154496890/ May 15-18, Paris 12 XTech 2007,
13. Slide 13: http://www.flickr.com/photos/dpade1337/429996161/May 15-18, Paris 13 XTech 2007,
14. Slide 14: WS-*??? 14 XTech 2007, May 15-18, Paris
15. Slide 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 15 XTech 2007, May 15-18, Paris
16. Slide 16: 110,000,000 16 XTech 2007, May 15-18, Paris
17. Slide 17: http://flickr.com/photos/oceanyamaha/186146223/ May 15-18, Paris 17 XTech 2007,
18. Slide 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 18 XTech 2007, May 15-18, Paris
19. Slide 19: Declarative Languages • HTML • XForms • SVG • MXML • XAML • JSON 19 XTech 2007, May 15-18, Paris
20. Slide 20: Ham and Cheese • “declarative” vs “imperative” • “library” vs “roll your own” 20 XTech 2007, May 15-18, Paris
21. Slide 21: 21 XTech 2007, May 15-18, Paris
22. Slide 22: http://www.flickr.com/photos/refractedmoments/399890975/ 22 XTech 2007, May 15-18, Paris
23. Slide 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? 23 XTech 2007, May 15-18, Paris
24. Slide 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! 24 XTech 2007, May 15-18, Paris
25. Slide 25: Design VS Program • Declarative “design” gets us 80% • Programming gets the other 20% • One of two evils – Easy to design – Easy to program 25 XTech 2007, May 15-18, Paris
26. Slide 26: Popular Tools • HTML – how many HTML pages? • JSON – relatively new compared to <XML> • Microformats – hCard • Twitter – how many messages? – Twitter vision L:Paris 26 XTech 2007, May 15-18, Paris
27. Slide 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 27 XTech 2007, May 15-18, Paris
28. Slide 28: Layering Languages • Languages get more simple as we share more information • Consider a factorial function in a few different languages? 28 XTech 2007, May 15-18, Paris
29. Slide 29: Machine Code 29 XTech 2007, May 15-18, Paris
30. Slide 30: Assembly main: movl $5, %eax movl $1, %ebx L1: cmpl $0, %eax je L2 imull %eax, %ebx decl %eax jmp L1 L2: ret 30 XTech 2007, May 15-18, Paris
31. Slide 31: C++ int factorial(int n) { if(n <= 1) return 1; return n * factorial(n - 1); } 31 XTech 2007, May 15-18, Paris
32. Slide 32: Python fac = lambda n:[1,0][n>0] or fac(n-1)*n 32 XTech 2007, May 15-18, Paris
33. Slide 33: Still All Clearly Imperative • Conditional statements • However, once you start using the factorial function it appears declarative 33 XTech 2007, May 15-18, Paris
34. Slide 34: Agenda http://flickr.com/photos/stevecaddy/474542238/ 2007, May 15-18, Paris 34 XTech
35. Slide 35: Declarative User Interface • Who cares about calculating factorials • Power is in design 35 XTech 2007, May 15-18, Paris
36. Slide 36: Declarative Maps? 36 XTech 2007, May 15-18, Paris
37. Slide 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> 37 XTech 2007, May 15-18, Paris
38. Slide 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> 38 XTech 2007, May 15-18, Paris
39. Slide 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\" /> 39 XTech 2007, May 15-18, Paris
40. Slide 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 40 XTech 2007, May 15-18, Paris
41. Slide 41: The Bugaboo • Imperative can be nearly as good as declaration • “JavaScript objects need more than just setting properties” 41 XTech 2007, May 15-18, Paris
42. Slide 42: var input = new Input(); input.hint = “Please enter a number”; <input> <hint>Please enter a number</hint> </input> 42 XTech 2007, May 15-18, Paris
43. Slide 43: var input = new Input(); input.setHint(“Please enter a number”); Input.prototype.setHint = function() { // setup any event hooks etc… } 43 XTech 2007, May 15-18, Paris
44. Slide 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 44 XTech 2007, May 15-18, Paris
45. Slide 45: Write Once, Deploy Anywhere 45 XTech 2007, May 15-18, Paris
46. Slide 46: http://flickr.com/photos/elmyra/9335163/ 46 XTech 2007, May 15-18, Paris
47. Slide 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 47 XTech 2007, May 15-18, Paris
48. Slide 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> 48 XTech 2007, May 15-18, Paris
49. Slide 49: getElementsByTagNameNS ns.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; } 49 XTech 2007, May 15-18, Paris
50. Slide 50: Styling Namespaced Elements • Internet Explorer ntb\\:* { display:none; } • W3C @namespace ntb \"http://www.nitobi.com\"; ntb|* { display:none; } 50 XTech 2007, May 15-18, Paris
51. Slide 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 51 XTech 2007, May 15-18, Paris
52. Slide 52: Standards Approach • Use HTML role attribute • Accessibility of Rich Internet Applications (ARIA) as part of Web Accessibility Initiative 52 XTech 2007, May 15-18, Paris
53. Slide 53: W3C Accessibility • tabindex=\"-1\" • role=\"wairole:checkbox\" • property:checked=\"true“ <div tabindex=“-1” role=“wairole:checkbox” property:checked=“true”> </div> 53 XTech 2007, May 15-18, Paris
54. Slide 54: What are Others Doing? • XML-Script • Dojo Toolkit • XForms 54 XTech 2007, May 15-18, Paris
55. Slide 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> 55 XTech 2007, May 15-18, Paris
56. Slide 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> 56 XTech 2007, May 15-18, Paris
57. Slide 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> 57 XTech 2007, May 15-18, Paris
58. Slide 58: Summary • Declarative is “least power” approach • Facilitates sharing of information • User interface designability and skinnability are paramount 58 XTech 2007, May 15-18, Paris
59. Slide 59: Q&A? Dave Johnson dave@nitobi.com http://blogs.nitobi.com/dave 59 XTech 2007, May 15-18, Paris