Building Real-World Dojo Web Applications

Andrew Ferrier IBM Software Services for WebSphere

Agenda

ow has building web applications changed!

Web "#$ to Web %#$ A&A' ( R)S* ( &S+,

What is Dojo! Wh- is IBM interested and how does it fit in to WebSphere! A flavor of Dojo ow do we design applications for Dojo! So.e Dojo Best /ractices

Web "#$ Model

Static *M0 content1 little-to-no-d-na.icitMost fol2s 2now this alreadServer-side-driven content

4"5 6ser actions trigger **/ re7uest to a web server

/age per state /erhaps with a s.all a.ount of &avaScript for effects or for. validation *raditionall- written with a variet- of technologies 3 Servlets1 &S/s1 etc#

4%5 Server does

so.e processing and returns an *M0 page to client

But this has disadvantages###

Interaction is aw2ward Slow response ti.e 3 ever- action re7uires a entire page refresh

W89 states that " second is highest acceptable response ti.e for interactive action

+ften ugl-1 flic2er-1 content

Web %#$ Model

Browser using A&A' to co..unicate with server 0ightweight R)S*ful Service 9alls Service :atewa- or other technolog- to pro;- all service invocations

4"5 6ser actions trigger &avaScript call to Aja; engine 4%5 Aja; engine Invo2es as-nch re7uest 485 Server does processing and returns 'M0 to the Aja; engine 4<5 Aja; engine Displa-s the 'M0 in the browser

What is A&A'!

As-nchronous &avaScript and 'M0

Doesn=t have to be about 'M01 and often isn=t

6ses 'M0 **/Re7uest feature of browser to .a2e an **/ invocation without refreshing page

6sed to retrieve data >$? of the ti.e this is for.atted in &S+, 4&avaScript +bject ,otation5

&S+,
@
Acusto.er,a.eBC AAndrew FerrierB Acusto.er eightIn9.BC "$$ Acusto.erAddressesBC D
@ Aaddress*-peBC Aho.eB1 Aaddress0ine"BC A"%8 An-townB1 Aaddress/ostcodeBC AAB"% 89DB E

What is R)S*!

6se resource-driven 6R0sC

e#g# (rest(custo.er("%8<

0everages

**/ Gerbs **/ Response 9odes

:)*1 /6*1 /+S*1 D)0)*) %$$1 <$"1 <$81 etc# &S+,1 plain te;t

0everages

*-picall- uses lightweight data for.at

/articularl- well-suited to 9R6D

Web %#$ Browser Model

*hic2-ish client &avaScript code runs in browser )vents on page are used to drive code 4on0oad1 on9lic21 etc###5 );tra data and code are re7uested fro. server using ' Rs1 with as-nc callbac2s in code

Web "#$ /age

Static

*M0 with .i;ed la-out and contentC

0ittle to no &avaScript

Web %#$ /age

8 pri.ar- co.ponentsC

*M0 4D+M Model5

*ree-li2e structure of *M0 tags *hese da-s we use HdivI a lot1 we avoid =st-led= tags li2e HbI#

&avaScript 4including Dojo5 9SS for St-ling

Browser 3 Separation of 9oncerns

Model 4D+M5 ( Giew 49SS5 ( 9ontroller 4&avaScript5 allows forC

Decoupling of st-ling and la-out 49SS5 fro. content 4 *M05 Decoupling of code 4&avaScript5 fro. page .odel 4D+M5 )vent-driven progra..ing .odel

Separation of St-ling

0et=s not forget the Service :atewa-###

Facades R)S*ful services to 6I1 pri.aril- to resolve cross-do.ain securit- restrictions 9an be i.ple.ented in a variet- of technologiesC

&A'-RS Servlets WebSphere )SB and /rocess Server J virtuall- an-thing else that can host **/

What=s wrong with &avaScript!

*raditional &avaScript wea2 atC

Structured code 3 no classes1 .odules 9ross-browser support 3 inco.patibilities1 especiall- with the dreaded I)K 4httpC((www#ieKcountdown#co.(5 ,o support for co.ple; or rich for. controls ard to handle &avaScript conte;t and other aw2wardnesses

So what is Dojo!

Dojo is a set of co..on &avaScript libraries used for creating Aja; and D *M0 web applications httpC((dojotool2it#org

+pen Source 0arge widget collection 4AdijitsB5 /owerful I(+ 4' R5 Data abstraction la-er )vent .anage.ent 0ogging and debugging );tensible .odular architecture Declarative and progra..atic

Wh- is this e;citing and i.portant!

Rich1 powerful user e;perience1 bridging interactivit- gap 0ow barrier to entr- in .an- environ.ents

Main re7uire.ent is a .odern web browser

Firefo; 8#LM1 9hro.e1 Safari I) NM also +O-ish

With so.e 2ind of service gatewa- technolog-1 can connect to .ost t-pes of bac2end

Wh- Is IBM Interested!

/art of an overall business solution IBM does .ore than .iddleware Web 2.0 Feature Pack for WAS contains Dojo Building Modern Rich Applications

Wh- use Dojo over the alternatives!

Numerous competing JavaScript toolkits
&Puer-1 /rotot-pe1 Q6I1 Mootools1 :W*

Dojo is IBM's strategic choice for a number of reasons

More than just D+M access1 9SS effects and A&A' )nterprise-grade tool2it and feature set 4internationaliRation1 accessibilit-1 etc#5 Activel- supported and used b- IBM

);tensions Widgets 9ore dSjS

A Flavor of Dojo

Dojo Base

Dojo ABaseB libraries are Dojo functions that are alwa-s available inside the base dojo#js bootstrap
T)vents 4si.ple connect5 T9olor functions TBrowser detection T6R0 functions TDoc 0oad(6nload oo2s TAni.ation U )ffects

T T T T T T T T

Module 0oader 0ang 6tils U Arra- );tras 9oo2ie functions Puer-1 ,ode U St-le 6tils I(+ 4Aja;5 &S+, serialiRation Fast 9SS St-le .anipulation Deferreds

Fade1 slide 9SS colors

Dojo 9o.ponents
T Base );tre.el-

co..on functions that are alwa-s available no .atter what else is included /rovided within the dojo#js 4H60kb1 H24kb Ripped5

T 9ore 9o..on functions 0oaded e;ternall );tended ani.ation effects Date parsers Additional I+ above xhr and .ore

);tensions Widgets 9ore dSjS

+ther Functions
T Dijit InternationaliRed1 accessible for.1 la-out and specialiRed widgets built upon a powerful set of widget functions T Dojo; )ver-thing not -et included in dojo ( dijit Pualit- varies widel Read author notesV T 6tils *ools to create custo. builds );tensions Reduce load ti.e and siRe
Widgets 9ore dSjS

0oading Dojo

I.port an- st-lesheets and the.es -ou wish to use in -our application 0in2 to core dojo.js

Adding St-ling1 Modif-ing D+M1 Adding an )vent

9reditsC );cerpt fro. Dojo Funda.entals Aja; );perience presentation b- Ale; Russell

A&A' with ' R

6sing Dijits
Declarative

/rogra..atic

So.e Dijits

6nifor. Input visuals on all browsers dojo#for.#For. provides eas- access to all for. values as a single &S+, object
TDate*e;tBo;

Text In uts

T *e;tBo; T Galidation*e;tBo; T *e;tArea

T Date*e;tBo; T *i.e*e;tBo; T Si.ple*e;tArea

T ,u.ber*e;tBo; T ,u.berSpinner T 9urrenc-*e;tBo;

Se!ectors

T 9o.boBo; T MultiSelect T FilteringSelect

"thers

#uttons
T Button T DropdownButton T 9o.boButton
T*i.e*e;tBo;

T 9hec2bo; T Radio T Slider

Writing Dijits

9an write own dijits 8 basic co.ponentsC

*e.plate *M0 4use dojoAttach/oints5 &avaScript with certain call-in functions1 such as constructor()1 buildRendering()1 postCreate()1 etc# 9SS File

So how do we design!

Wirefra.ing to .oc2 up 6I Brea2 6I into Bijits1 specif- each Service 9atalog for :atewa+ther definitions for bac2end services

Web Services 0egac- Services Database DD0s etc###

Wirefra.e page

I did this using iplotR#co.1 .ore .ature tools available

Designing pages

Brea2 page into re-usable bijits )ach is effectivel- a dijit with a business function

as well-defined properties1 events1 etc#

,othing special about bijits 3 -ou don=t need e;plicit support *ie then together using a page controller 4e#g# page controller concept fro. IBM=s Ouba5

&ust a class that does wiring

Bijits

);a.ple Bijit 3 9usto.er

Service 9atalog

Find a wa- to describe &S+,-based services Decouples i.ple.entation of 6I fro. services Allows i.ple.entation b- separate tea.s ,o for.al te.plates or definitions ,o widel--accepted &S+, sche.a description

&S+, is so si.ple1 doesn=t need one

Service 9atalog Best /ractices

Oeep services fine-grained

9oarse-grained is a warning sign

If -ou .ust do coarse-grained1 alwa-s describe &S+, envelope in detail Services should alwa-s be short-running

Best /ractices

Develop in 9hro.e or Firefo; with Firebug Don=t Forget Internet );plorer 4esp# I)K5# *o debugC

6se I) W in bac2wards-co.pat .ode with debugging console 6se &S0int###

T T T T

B- Doug 9roc2ford www#jslint#co. &avascript developer=s AhonestB friend );a.ine the entire outputV
3 Do all those globals loo2 right!

T /la- with options T Wor2s with *M0 and &S+, data too T Install &S0int )clipse plugin fro. Roc2 Star Apps

Best /ractices

Do 6nit *esting - Dojo D+ fra.ewor2C httpC((www#sitepen#co.(blog(%$$W($<("L(unittesting-custo.-code-with-the-dojo-objectiveharness( 9ontinuous Integration

6se a continuous integration server such as udson1 Ba.boo1 etc###

,eed 9SS e;perience on project 3 an often over-loo2ed s2ill 0earn how to use caching **/ headers to leverage

Best /ractices

Do 0ogging

dojo.provide(my.mod.Foo); dojo.provide(my.mod.Foo); dojo.declare(my.mod.Foo, null, { dojo.declare(my.mod.Foo, null, { constructor: function my_mod_Foo_constructor(args) { constructor: function my_mod_Foo_constructor(args) { !o any initiali"ation #ere !o any initiali"ation #ere var F $ t#is.declared%lass & contructor(): ; var F $ t#is.declared%lass & contructor(): ; console.log(F,'tarting: , args); console.log(F,'tarting: , args); ( ( (); ();

Ma2e sure developers understand &avaScript 4conte;t and as-nc behavior in particular5 :enerate =production= code using an auto.ated buildC httpC((www#ib.#co.(developerwor2s(web(librar(wa-aj-custo.(inde;#ht.l

6se an up-to-date browser

*a2en fro. *as2Speed bench.ar2s - httpC((dante#dojotool2it#org(tas2speed(report(charts#ht.l

Further 0earning

httpC((dojotipsntric2s#co.( +=Reill- Boo2s httpC((dojoca.pus#org( httpC((dojotool2it#org(

Su..ar

Modern1 interactive1 Web %#$ applications are the future Dojo helps -ou build these 7uic2l-1 efficient1 and to a high 7ualit*o designC

Wirefra.e pages Brea2 the. into bijits Write a service catalog

andrew#ferrierXu2#ib.#co.