Dojo – from web page to web application Yoav Rubin, IBM Research – Haifa, yoav@il.ibm.com
What is a web application
What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browse...
How does Dojo relates to it
What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browse...
Dojo.data <ul><li>A data access layer </li></ul><ul><li>Hides underlying data structures and formats </li></ul><ul><li> se...
The general architecture
Dojo.data translated to en-db SQL Select request JDBC or ODBC Dojo.data.api WHERE cause Query Primary key Identity Foreign...
Dojo.data – available stores  <ul><li>ItemFileReadStore and ItemFileWriteStore </li></ul><ul><ul><li>Would map to your DB ...
But there are other kinds of possible data sources / applications
Getting the data from other web applications <ul><li>Found in dojox.data </li></ul><ul><li>Wikipedia </li></ul><ul><ul><li...
Getting data of your client side  <ul><li>HtmlTableStore </li></ul><ul><ul><li>Data found in a table in your application <...
Presenting the data in a grid – dojox.grid.DataGrid <ul><li>Dynamic and editable data views </li></ul><ul><li>Sortable and...
dojox.grid.DataGrid
Presenting the data in a tree – dijit.Tree <ul><li>DataStore driven, model backed </li></ul><ul><li>Drag and Drop branches...
What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browse...
What do we know about our users – nothing What can we assume about our users – even less then that
Users diversity <ul><li>They use different browsers, with different versions </li></ul><ul><li>They have different mother ...
What does dojo supports <ul><li>Browsers </li></ul><ul><li>User’s locale can be determined by the application’s user, and ...
What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browse...
 
The skill set of client side development is very different from the skill set of server side development  <ul><li>Technolo...
Templating <ul><li>Templating is automatic generation of code </li></ul><ul><li>The generator accepts </li></ul><ul><ul><l...
Dojox.dtl – client side template engine <ul><li>A client side template engine </li></ul><ul><ul><li>Client side code gener...
Dojox.dtl – client side template engine <ul><li>The generation engine uses:  </li></ul><ul><ul><li>The input data is the w...
Dojox.dtl – What can you write there <ul><li>Loops </li></ul><ul><li>Conditional execution (if-else) </li></ul><ul><li>Var...
<ul> {%   for  item  in  itemsData  %} <li class=&quot;collection-row- {{ forloop.counter|divisibleby:&quot;2&quot;   }} &...
Dojox.dtl – when to use <ul><li>A widget that suppose to present model backed information that is determined on runtime </...
What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browse...
Web application communication scheme (for Ajax application) Client (Browser) Server Cacheable, heavy weighted, Once Non-ca...
How to handle the heavy weight stuff <ul><li>Make it less heavy (shrink it) </li></ul><ul><ul><li>Thus have a faster loadi...
Dojo build system <ul><li>Minification of files using Shirnksafe </li></ul><ul><ul><li>Reduces whitespaces </li></ul></ul>...
How to handle the light weighted stuff <ul><li>Make it even lighter </li></ul><ul><li>Reduce the processing done in the br...
Dojo to the rescue – dojox.json.schema <ul><li>A schema based on a definition found in json-schema.org </li></ul><ul><ul><...
References <ul><li>http://www.dojotoolkit.org </li></ul><ul><li>http://dojocampus.org </li></ul><ul><li>http://www.slidesh...
Upcoming SlideShare
Loading in...5
×

Dojo - from web page to web apps

2,661

Published on

How does Dojo helps to create better professional web applications

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Dojo - from web page to web apps

  1. 1. Dojo – from web page to web application Yoav Rubin, IBM Research – Haifa, yoav@il.ibm.com
  2. 2. What is a web application
  3. 3. What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browser over a network” </li></ul></ul><ul><ul><li>Application  has data, algorithms, APIs </li></ul></ul><ul><ul><li>Accessed  the application itself can be accessed by anyone </li></ul></ul><ul><ul><li>Web browser  Ajax technologies in the client side (HTML, DOM, JavaScript, CSS) </li></ul></ul><ul><ul><li>Over a network  there is a need to minimize what’s being communicated </li></ul></ul>
  4. 4. How does Dojo relates to it
  5. 5. What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browser over a network” </li></ul></ul><ul><ul><li>Application  has data, algorithms, APIs </li></ul></ul><ul><ul><li>Accessed  the application itself can be accessed by anyone </li></ul></ul><ul><ul><li>Web browser  Ajax technologies in the client side (HTML, DOM, JavaScript, CSS) </li></ul></ul><ul><ul><li>Over a network  there is a need to minimize what’s being communicated </li></ul></ul>
  6. 6. Dojo.data <ul><li>A data access layer </li></ul><ul><li>Hides underlying data structures and formats </li></ul><ul><li> set of APIs/interfaces for writing data stores </li></ul><ul><li>Unique way to handle data with widgets </li></ul>
  7. 7. The general architecture
  8. 8. Dojo.data translated to en-db SQL Select request JDBC or ODBC Dojo.data.api WHERE cause Query Primary key Identity Foreign key Reference -- Value Column Attribute Row Item Database Data source Cursor Datastore Database Term Dojo.data
  9. 9. Dojo.data – available stores <ul><li>ItemFileReadStore and ItemFileWriteStore </li></ul><ul><ul><li>Would map to your DB on your server </li></ul></ul><ul><li>Several general purpose stores (found in dojox.data): </li></ul><ul><ul><li>CsvStore </li></ul></ul><ul><ul><li>ServiceStore </li></ul></ul><ul><ul><li>XmlStore </li></ul></ul><ul><ul><li>OpmlStore </li></ul></ul><ul><ul><li>JsonRestStore </li></ul></ul><ul><ul><li>JsonQueryStore </li></ul></ul>
  10. 10. But there are other kinds of possible data sources / applications
  11. 11. Getting the data from other web applications <ul><li>Found in dojox.data </li></ul><ul><li>Wikipedia </li></ul><ul><ul><li>WikipediaStore </li></ul></ul><ul><li>Google search </li></ul><ul><ul><li>GoogleSearchStore </li></ul></ul><ul><li>Google feed </li></ul><ul><ul><li>GoogleFeedStore </li></ul></ul><ul><li>Picasa </li></ul><ul><ul><li>PicasaStore </li></ul></ul><ul><li>Flickr </li></ul><ul><ul><li>FlickrRestStore </li></ul></ul><ul><li>S3 </li></ul><ul><ul><li>S3Store </li></ul></ul>
  12. 12. Getting data of your client side <ul><li>HtmlTableStore </li></ul><ul><ul><li>Data found in a table in your application </li></ul></ul><ul><li>CssClassStore </li></ul><ul><ul><li>Data about the css classes used within your application (read only) </li></ul></ul><ul><li>CssRuleStore </li></ul><ul><ul><li>Data about the css rules (read only) </li></ul></ul>
  13. 13. Presenting the data in a grid – dojox.grid.DataGrid <ul><li>Dynamic and editable data views </li></ul><ul><li>Sortable and resizeable columns </li></ul><ul><li>Data driven backing store </li></ul><ul><li>Filtering </li></ul><ul><li>Dynamic loading </li></ul><ul><li>In-place editing </li></ul><ul><li>Sub-grids </li></ul><ul><li>Sub-views (Column locking) ‏ </li></ul><ul><li>Fast virtual vertical scrolling </li></ul><ul><li>Cell formatters to isolate content from layout </li></ul>
  14. 14. dojox.grid.DataGrid
  15. 15. Presenting the data in a tree – dijit.Tree <ul><li>DataStore driven, model backed </li></ul><ul><li>Drag and Drop branches </li></ul><ul><li>Forest support (hidden root) </li></ul><ul><li>Custom icons for branches and leafs </li></ul>
  16. 16. What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browser over a network” </li></ul></ul><ul><ul><li>Application  has data, algorithms, APIs </li></ul></ul><ul><ul><li>Accessed  the application itself can be accessed by anyone </li></ul></ul><ul><ul><li>Web browser  Ajax technologies in the client side (HTML, DOM, JavaScript, CSS) </li></ul></ul><ul><ul><li>Over a network  there is a need to minimize what’s being communicated </li></ul></ul>
  17. 17. What do we know about our users – nothing What can we assume about our users – even less then that
  18. 18. Users diversity <ul><li>They use different browsers, with different versions </li></ul><ul><li>They have different mother tongue language </li></ul><ul><li>They may have disabilities </li></ul><ul><ul><li>How does a colorblind person sees my application </li></ul></ul><ul><ul><li>Will my application cause a seizure to an epileptic person </li></ul></ul><ul><li>There are even user that prefer to use the keyboard over the mouse </li></ul><ul><ul><li>Remember all these vi / emacs users </li></ul></ul>
  19. 19. What does dojo supports <ul><li>Browsers </li></ul><ul><li>User’s locale can be determined by the application’s user, and defaults to the locale defined upon browser installation </li></ul><ul><li>Localization </li></ul><ul><ul><li>Based on the user’s locale </li></ul></ul><ul><ul><ul><li>Parsing </li></ul></ul></ul><ul><ul><ul><li>Presentation </li></ul></ul></ul><ul><ul><li>Number, currency, date, time </li></ul></ul><ul><li>Internationalization </li></ul><ul><ul><li>Dojo fetches the right string and messages (a.k.a resource bundle) based on the user’s locale </li></ul></ul><ul><li>Accessibility </li></ul><ul><ul><li>Keyboard navigation </li></ul></ul><ul><ul><li>High contrast mode </li></ul></ul><ul><ul><li>WAI roles and states </li></ul></ul>
  20. 20. What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browser over a network” </li></ul></ul><ul><ul><li>Application  has data, algorithms, APIs </li></ul></ul><ul><ul><li>Accessed  the application itself can be accessed by anyone </li></ul></ul><ul><ul><li>Web browser  Ajax technologies in the client side (HTML, DOM, JavaScript, CSS) </li></ul></ul><ul><ul><li>Over a network  there is a need to minimize what’s being communicated </li></ul></ul>
  21. 22. The skill set of client side development is very different from the skill set of server side development <ul><li>Technologies </li></ul><ul><ul><li>Html, css, JavaScript, dom, flash/flex </li></ul></ul><ul><li>Platforms </li></ul><ul><ul><li>Browsers, devices </li></ul></ul><ul><li>Soft skills </li></ul><ul><ul><li>Usability, visual design </li></ul></ul><ul><li>Performance </li></ul><ul><ul><li>Network, runtime </li></ul></ul><ul><li>Other considerations </li></ul><ul><ul><li>Internationalization, accessibility </li></ul></ul><ul><li>Technologies </li></ul><ul><ul><li>Java/ C# , PHP </li></ul></ul><ul><li>Platforms </li></ul><ul><ul><li>Servers, OS </li></ul></ul><ul><li>Soft skills </li></ul><ul><ul><li>Multi threading, deployment configuration </li></ul></ul><ul><li>Performance </li></ul><ul><ul><li>Connections, compilation optimizations </li></ul></ul><ul><li>Other considerations </li></ul><ul><ul><li>Security, portability </li></ul></ul>Each of these skills carries a baggage: tools, methodologies, protocols, testing etc.
  22. 23. Templating <ul><li>Templating is automatic generation of code </li></ul><ul><li>The generator accepts </li></ul><ul><ul><li>Data </li></ul></ul><ul><ul><li>Generation template – a description how to transform data to code </li></ul></ul><ul><li>Need to have a good understanding of the generated code in order to create a good template </li></ul><ul><li>Client side code generation is usually done on the server side, mixed with server side code </li></ul><ul><ul><li>Think of servlets / JSP / ASP / PHP </li></ul></ul>
  23. 24. Dojox.dtl – client side template engine <ul><li>A client side template engine </li></ul><ul><ul><li>Client side code generation as part of client side code </li></ul></ul><ul><li>What do we get by moving the engine to the client side </li></ul><ul><ul><li>Server side developer develop server side code </li></ul></ul><ul><ul><li>Client side developer develop client side code </li></ul></ul><ul><ul><li>Only the data is sent over the network </li></ul></ul><ul><li>Based on the Django Templating Language </li></ul>
  24. 25. Dojox.dtl – client side template engine <ul><li>The generation engine uses: </li></ul><ul><ul><li>The input data is the widget’s object </li></ul></ul><ul><ul><li>Generation template is the widget’s template </li></ul></ul><ul><li>The generation engine creates an html code </li></ul><ul><ul><li>Transformed to DOM object </li></ul></ul><ul><ul><ul><li>DOM optimizations handled by the engine creators </li></ul></ul></ul><ul><li>Results eventually in the way that the widget is presented by the browser </li></ul>
  25. 26. Dojox.dtl – What can you write there <ul><li>Loops </li></ul><ul><li>Conditional execution (if-else) </li></ul><ul><li>Variables </li></ul><ul><ul><li>Predefined (e.g., a loop’s counter) </li></ul></ul><ul><ul><li>User defined </li></ul></ul><ul><li>Knows how to work with dojo’s constructs </li></ul><ul><ul><li>AttachPoints, AttachEvents, Nested widgets </li></ul></ul>
  26. 27. <ul> {% for item in itemsData %} <li class=&quot;collection-row- {{ forloop.counter|divisibleby:&quot;2&quot; }} &quot; dojoAttachEvent=&quot;onmouseover:onMouseOver,onmouseout:onMouseOut&quot; itemIndex=&quot; {{ forloop.counter }} &quot;> <span> <a href=&quot;javascript:void(0)&quot;> {{ item.name }} </a> </span> <span><img src=&quot;/images/ {{ item.state }} -icon.gif&quot;></span> </li> {% endfor %} </ul>
  27. 28. Dojox.dtl – when to use <ul><li>A widget that suppose to present model backed information that is determined on runtime </li></ul><ul><ul><li>Especially when the data is structured and repeating </li></ul></ul><ul><li>Combine with data stores to get great result with very little code </li></ul>
  28. 29. What is a web application <ul><li>From wikipedia: </li></ul><ul><ul><li>“ An application that is accessed via a web browser over a network” </li></ul></ul><ul><ul><li>Application  has data, algorithms, APIs </li></ul></ul><ul><ul><li>Accessed  the application itself can be accessed by anyone </li></ul></ul><ul><ul><li>Web browser  Ajax technologies in the client side (HTML, DOM, JavaScript, CSS) </li></ul></ul><ul><ul><li>Over a network  there is a need to minimize what’s being communicated </li></ul></ul>
  29. 30. Web application communication scheme (for Ajax application) Client (Browser) Server Cacheable, heavy weighted, Once Non-cacheable, light weighted, Many times Bring me the application Application (.html, .js, .css, icons) Bring me some data Data (xml / json) Take some data Ack
  30. 31. How to handle the heavy weight stuff <ul><li>Make it less heavy (shrink it) </li></ul><ul><ul><li>Thus have a faster loading time </li></ul></ul><ul><li>Decrease the number of resources that travel over the network </li></ul><ul><ul><li>Each request comes along with a performance hit payload </li></ul></ul><ul><ul><li>Less required resources  less requests  less time </li></ul></ul><ul><ul><li>Cache as much as possible  only the first access to the application is slow </li></ul></ul>
  31. 32. Dojo build system <ul><li>Minification of files using Shirnksafe </li></ul><ul><ul><li>Reduces whitespaces </li></ul></ul><ul><ul><li>Removes comments </li></ul></ul><ul><ul><li>Shortens variable names </li></ul></ul><ul><li>Merging of files to make a layer, which is a merge of several files needed to provide a closed functionality </li></ul><ul><ul><li>Based on the dojo.require call, build a dependency list and merge all of the files in that list </li></ul></ul><ul><ul><li>Inline template of widgets into the .js file </li></ul></ul>
  32. 33. How to handle the light weighted stuff <ul><li>Make it even lighter </li></ul><ul><li>Reduce the processing done in the browser for each such interaction </li></ul><ul><li>Use Json </li></ul><ul><ul><li>Pros: very efficient and smaller in size (when compared to XML) </li></ul></ul><ul><ul><li>Cons: Can’t be protocolized (as oppose to XML schema) </li></ul></ul><ul><ul><ul><li>Agreed upon structure </li></ul></ul></ul><ul><ul><ul><li>Verifiable contents </li></ul></ul></ul>
  33. 34. Dojo to the rescue – dojox.json.schema <ul><li>A schema based on a definition found in json-schema.org </li></ul><ul><ul><li>Which was already implemented in JavaScript, Java, PHP, Python, Prel, Ruby, .Net etc. </li></ul></ul><ul><ul><li>Defines a way to protocolize Json objects </li></ul></ul><ul><li>Dojox.json.schema.Validate </li></ul><ul><ul><li>Accepts a schema as an argument </li></ul></ul><ul><ul><li>Accepts a Json object as an argument </li></ul></ul><ul><ul><li>Performs validation </li></ul></ul>
  34. 35. References <ul><li>http://www.dojotoolkit.org </li></ul><ul><li>http://dojocampus.org </li></ul><ul><li>http://www.slideshare.net/klipstein/dojodata-stores-and-widgets </li></ul><ul><li>http://groups.google.com/group/json-schema/web/json-schema-implementations?pli =1 </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×