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
© 2010 IBM Corporation
Dojo – from web page to web application
Yoav Rubin, IBM Research – Haifa, [email protected]
© 2010 IBM Corporation2
What is a web application
© 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
© 2010 IBM Corporation4
How does Dojo relates to it
© 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
© 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
© 2010 IBM Corporation7
The general architecture
© 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
© 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
© 2010 IBM Corporation10
But there are other kinds of possible data sources / applications
© 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
© 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)
© 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
© 2010 IBM Corporation14
dojox.grid.DataGrid
© 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
© 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
© 2010 IBM Corporation17
What do we know about our users – nothing
What can we assume about our users – even less then that
© 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
© 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
© 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
© 2010 IBM Corporation21
© 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.
© 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
© 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
© 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
© 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
© 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>
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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