Making the Right 2.0 Choice

22
making the right 2.0 choice michael james

description

The process and stages I went through to make a simple ASP.Net application "web 2.0", in other words swishy and more "AJAX". I will highlight two methods, of endless methods I may add, the pros and con's of both, the decisions I made and why. I'm hoping this will help people who are trying to enhance existing code, be it personal or at a business level, to see what methods are available and at least somethings to consider before making a decision.

Transcript of Making the Right 2.0 Choice

Page 1: Making the Right 2.0 Choice

m a king th e rig h t 2.0 c h o ic e

m ic h a e l ja me s

Page 2: Making the Right 2.0 Choice

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

Page 3: Making the Right 2.0 Choice

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

Page 4: Making the Right 2.0 Choice

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

Page 5: Making the Right 2.0 Choice

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

Page 6: Making the Right 2.0 Choice

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]

Page 7: Making the Right 2.0 Choice

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

Page 8: Making the Right 2.0 Choice

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?

Page 9: Making the Right 2.0 Choice

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

Page 10: Making the Right 2.0 Choice

.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

Page 11: Making the Right 2.0 Choice

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

Page 12: Making the Right 2.0 Choice

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

Page 13: Making the Right 2.0 Choice

de m o

flic krG a l beta[flickrgal-jquery.development.mjjames.co.uk]

Page 14: Making the Right 2.0 Choice

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

Page 15: Making the Right 2.0 Choice

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

Page 16: Making the Right 2.0 Choice

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 /]

Page 17: Making the Right 2.0 Choice

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

Page 18: Making the Right 2.0 Choice

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

Page 19: Making the Right 2.0 Choice

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?

Page 20: Making the Right 2.0 Choice

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

Page 21: Making the Right 2.0 Choice

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 ]

Page 22: Making the Right 2.0 Choice

a ny que s tions