m a king th e rig h t 2.0 c h o ic e
m ic h a e l ja me s
wh a t is th is a ll a bout
• we b 2.0 & a ja x – its e ve rywh e re
• how do you upg ra de • s te ps i took• de c is ions ma de• why
m y g a lle ry
• e ve ryone h a s one• .Ne t 2 we b c ontro l• us e s flic kr• flic kr .ne t a p i• on ly doe s pos tba c k• ne e ds upda ting
wh a t it doe s
• ta ke s a us e rs s e ts• lis ts th e m• s h ows a pre vie w
be nc h m a rk
• prog re s s ive e nh a nc e me nt• s h ould a t le a s t fa ll b a c k
g oing 2.0
• be fore c od ing• wh a t s h ou ld be “e nh a nc e d”• de fine a g oa l• e xp lore wa ys o f a c h ie ving th is
– jQue ry [h ttp://jQue ry.c om ]
– YUI [h ttp://de ve lope r.ya h oo.c om /yui/]
– Mic ros oft AS P .Ne t AJ AX [h ttp://a ja x.a s p.ne t]
ph otog a lle ry 2.0
• s ta rt s im ple• ope n ing / c los ing o f s e ts• c h oos ing a n im a g e
c h oos ing a m e th od
• th e y a re a ll g re a t • rig h t one ?
– wh a t do you / your de ve lope rs know– wh a t do you ne e d to do– lots o f s e rve r s ide m a nipula tion?
m y e xa m ple
• trie d two me th ods– .Ne t Aja x
• its a .Ne t control • c a n re us e e xis ting s e rve r s ide code
– jQue ry• a ll c lie nt s ide
– no ne e d to c h a ng e s e rve r s ide c ode
• filckr ha s a n a cce s s ib le R E S T a pi
.Ne t s o lution
• us e r c ontro ls– upda te pa ne ls
• a llow pa rtia l pa g e upda te s
– s c riptm a na g e r– da ta b ind ing
• vs 2005 / 2008– dra g a nd drop
• pote ntia lly ve ry qu ic k– re us e e xis ting pos tba c ks
jQue ry s o lution
• 2 J S file s– jQue ry– flic krG a lle ry c ode
• ~ 80 line s
• que rie s F lic kr – not our s e rve r– re s t protoc ol– J S ON
jQue ry s o lution [2 ]
• prog re s s ive e nh a nc e me nt [h ttp://e n.wikipe dia .org /wiki/P rog re s s ive _e nh a nce m e nt]
• 2 c h a ng e s to s e rve r s ide – jQue ry
• mjja me s jQue ry Us e rControl [h ttp://blog .m jja m e s .c o.uk/2008/02/m ore -we b-contro ls -jque ry.h tm l]
– flic krG a l.js
de m o
flic krG a l beta[flickrgal-jquery.development.mjjames.co.uk]
wh a t’s g o ing on
• c lic k h a nd le rs– s e t’s
• c los e curre nt s e t, ope n ne w one– loa d th umb na ils
– th umbna ils• loa d la rg e photo
wh a t’s g o ing on
• a ja x – loa dth um bna ils
• us e s e tid , re que s t thumbna il urls– J S ON re s pons e
• s pin th roug h re s pons e– output a th um b na il– a tta c h m ore c lic k h a ndle rs
– loa d la rg e im a g e• us e photoid, re que s t photoinfo
– J S ON re s pons e• s witch pre vie w s rc for la rg e photo url
c ros s s ite xm lh ttpre que s ts ? !?
• xm lh ttpre que s t– doe s n’t a llow c ros s s ite re que s ts– s o d idn’t us e it d ire c tly
• <s c rip t type =“te xt/ja va s c rip t” s rc =“…– nope– a lth oug h a g ood tric k
• jQue ry 1.2 – a llows you to do th is– more in fo [h ttp://doc s .jque ry.c om /]
ok a g re a t de m o but..
• th is is n ’t a bout m y de mo• it’s a bout th e m inds e t• .Ne t Aja x• jQue ry• YUI
wh ic h m e th od is be s t
• de pe nds– a re you / your te a m
• s e rve r s ide or c lie nt s ide
– jQue ry• ve ry fa s t• lig h twe ig h t• fe w s e rve r s ide cha ng e s … (in my e xa mple )• ca n’t do s e rve r s ide proce s s ing
– unle s s you h a ve a we b s e rvic e e tc
wh ic h m e th od is be s t [2 ]
• .Ne t Aja x– involve d s e rve r s ide c h a ng e s
• ne w controls• e ve nt ha ndle rs
– didn’t fe e l s o s wis h– Allows you to do m ore proc e s s ing
• s a ve to db• ma nipula tion• a dd to ba s ke t?
wh ic h m e th od is be s t [3 ]
• me th od is irre le va nt• proc e s s s h ould be s im ila r
– wh a t it ne e ds to do– wh a t e ve nts do I ne e d– wh a t upda te s in th e pa g e– us e r e xpe rie nc e
• loa d me s s a g e s• mous e icons
• prog re s s ive e nh a nc e me nt
we b 2.0
• it’s not g o ing a wa y• lib ra rie s ma ke th ing s e a s y• it’s a c tua lly qu ite fun…• don’t g o ove rboa rd
– [s ug g e s tions ]
a ny que s tions