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