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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pragmatics of Declarative Ajax

2,129

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,129
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

    ×