How to do Scalable UI-Heavy Development at a Breakneck Pace

Scalable UI development at a breakneck pace Phil Crosby

Phil Crosby Tech lead of Ooyala BacklotNinjawords.comVimium - a Vim-like browsing experience forChromeshoulda.jslivecss 2

Context - what we’re building hereA product with Lots of functionality Lots of views (pages) New stuff each and every day 3

Goals for our development approachBuild lots of high quality UI with only a handfulof developers.Iterate very quickly, build a malleable product.No bugs! 4

Frontend development strategies 5

Frontend development strategies1. A thin client philosophy 5

Frontend development strategies1. A thin client philosophy2. Standalone views 5

Frontend development strategies1. A thin client philosophy2. Standalone views3. Richness through a very light layer AJAX 5

Frontend development strategies1. A thin client philosophy2. Standalone views3. Richness through a very light layer AJAX4. Build on powerful primitives, like CSS3. 5

Frontend development strategies1. A thin client philosophy2. Standalone views3. Richness through a very light layer AJAX4. Build on powerful primitives, like CSS3.5. Robust server and client side testing pipeline 5

A thin client philosophy 6

A thin client philosophyChoose a thin client. 6

A thin client philosophyChoose a thin client.We love stupid client apps. 6

A thin client philosophyChoose a thin client.We love stupid client apps.No behavior, no smarts => fewer places forbugs to hide in the client. 6

Standalone viewsGoal: work on each view independently of theothersMechanics: 7

Standalone viewsGoal: work on each view independently of theothersMechanics:Every view 7

Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable 7

Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless 7

Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless- has a uniform interface 7

Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless- has a uniform interfaceEvery view can serialize itself into query stringparams 7

Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless- has a uniform interfaceEvery view can serialize itself into query stringparamsViews are connected with a light layer of ajax 7

Powerful, powerful primitivesjQuery (benefits are well-known)HTML5CSS3SASSLeverage only cutting-edge browsers. 8

CSS3 - FEEL THE POWER! 9

CSS3 - FEEL THE POWER!Lots of malleability for programmers to refineUI.Finally the expressiveness needed to covermost styling techniques.Box layouts, rounded corners, shadows,gradients, and bears! 9

SASS - Bring structure to CSSA DSL on top of CSS.Provides nesting, variables, color arithmetic.Write custom functions and macros to groupand reuse CSS code. 10

No love for IE 11

No love for IEChrome Frame should win the 2011Humanitarian Award. 11

No love for IEChrome Frame should win the 2011Humanitarian Award.According to StatCounter’s worldwide stats forthis month, IE6 usage is down to 6% and IE7 isdown to 10%. 11

Our testing pipeline 12

Our testing pipelineMost logic lives in server-side Ruby code, andso thats where we write all of our tests. 12

Our testing pipelineMost logic lives in server-side Ruby code, andso thats where we write all of our tests.HTML output is easy to assert against. 12

Our testing pipelineMost logic lives in server-side Ruby code, andso thats where we write all of our tests.HTML output is easy to assert against.Our client side testing tools:- v8: Chromes command line JavaScript engine- env.js (also check out JSDom)- Shoulda.js (github.com/philc/shoulda.js) 12

Takeaways 13

TakeawaysWeve refined this approach through buildinglots of frontend product and tenaciouslyenhancing team productivity. 13

TakeawaysWeve refined this approach through buildinglots of frontend product and tenaciouslyenhancing team productivity.This frontend development approach hasworked really well for us! 13

TakeawaysWeve refined this approach through buildinglots of frontend product and tenaciouslyenhancing team productivity.This frontend development approach hasworked really well for us!Here are a few tools which may come in handy:livecssshouda.jsrequire.js 13

THANK YOU

http://elcallejonmusic.blogspot.com	43
http://churchco.de	15
http://churchm.ag	9
http://www.linkedin.com	5
http://perfectmarket.tumblr.com	3

How to do Scalable UI-Heavy Development at a Breakneck Pace

by SV Ruby on Rails Meetup on Mar 04, 2011

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 75

Statistics

How to do Scalable UI-Heavy Development at a Breakneck Pace Presentation Transcript