Your SlideShare is downloading. ×
Pragmatics of Declarative Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Pragmatics of Declarative Ajax

2,114
views

Published on

Declarative Ajax

Declarative Ajax

Published in: Business, Travel

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,114
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
72
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

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