Making Embeddable Web Widgets Without Iframes (Chris Lambacher)

Transcript

1. MAKING EMBEDDABLE WEB WIDGETS WITHOUT IFRAMES Christopher Lambacher @lambacck Tindie
2. THE MARKETPLACE FOR MAKERS
3. WIDGETS Help sellers integrate product listings into their own site Simple integration / Minimal code Maintain store branding
4. SIMPLE SOLUTION: IFRAMES Poor integration with parent page: Sizing issues No ability for the parent site to alter CSS Issues with links and frame focus Multiple widgets per page? Multiple full page loads. < i f r a m e s r c = " h t t p s : / / w w w . t i n d i e . c o m / w i d g e t i f r a m e ? s o m e = c r i t e r i a " > < / i f r a m e >
5. JAVASCRIPT-BASED WIDGETS? Potential for jQuery version conflicts Need to detect widget insertion location(s) Need for client-side template language
6. SQWIDGET TO THE RESCUE! Sqwidget is a framework for creating JavaScript widgets. Multiple widgets jQuery management Insertion point detection Per-widget invocation options Simple template language
7. IT'S AS EASY AS < ! - - w h e r e y o u w a n t a w i d g e t - - > < d i v d a t a - s q w i d g e t = ' s r c : t i n d i e . j s ' d a t a - s q w i d g e t - s e t t i n g s = ' q u e r y : X X X X X X X ' > L o a d i n g T i n d i e W i d g e t . . . < / d i v > < ! - - n e a r t h e c l o s i n g b o d y t a g - - > < s c r i p t t y p e = ' t e x t / j a v a s c r i p t ' s r c = ' h t t p s : / / w w w . t i n d i e . c o m / w i d g e t s / t i n d i e . j s ' > < / s c r i p t >
8. BROWSER CACHING The script source never changes How do we get the browser to load new versions and still have good caching?
9. TINDIE.JS IS TEMPLATED u r l ( r ' ^ w i d g e t s / t i n d i e . j s $ ' , d i r e c t _ t o _ t e m p l a t e , { ' t e m p l a t e ' : ' w i d g e t s / t i n d i e . j s ' , ' m i m e t y p e ' : ' t e x t / j a v a s c r i p t ' } )
10. GENERATES SMALL BOOTSTRAP SCRIPT ( f u n c t i o n ( w , d ) { w . t i n d i e = { b a s e P a t h : " h t t p s : / / w w w . t i n d i e . c o m / " , c s s f i l e : " h t t p s : / / d 2 s s 6 o v g 4 7 m 0 r 5 . c l o u d f r o n t . n e t / C A C H E / c s s / 9 f 6 2 f a e 5 f 5 8 e . c s s " , S T A T I C _ U R L : " h t t p s : / / d 2 s s 6 o v g 4 7 m 0 r 5 . c l o u d f r o n t . n e t / " , f o n t _ v e r s i o n : " d a f e 1 d 7 4 6 c 8 1 " } v a r s = d . c r e a t e E l e m e n t ( " s c r i p t " ) ; s . t y p e = " t e x t / j a v a s c r i p t " ; s . a s y n c = t r u e s . s r c = " h t t p s : / / d 2 s s 6 o v g 4 7 m 0 r 5 . c l o u d f r o n t . n e t / C A C H E / j s / 4 1 b a b 9 6 6 5 7 e 4 . j s " ; d . d o c u m e n t E l e m e n t . c h i l d N o d e s [ 0 ] . a p p e n d C h i l d ( s ) ; } ) ( w i n d o w , d o c u m e n t ) ;
11. DJANGO-ADMIN COMMAND GENERATES COMBINED MINIFIED ASSETS We use django-compressor; abuse it to generate the following: 1 CSS file Use lesscss to pick a subset from main site 1 JavaScript file Sqwidget client-side templates widget logic
12. DATA Use Tastypie on server side jQuery & JSONP to get data and work around same-origin problems j Q u e r y . m a p and multiple calls to Sqwidget's w i d g e t . r e n d e r W i t h T e m p l a t e for looping, conditionals
13. THANKS FOR LISTENING Christopher Lambacher whatschrisdoing.com @lambacck tindie.com