How to do Scalable UI-Heavy Development at a Breakneck Pace
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,298 views

The problem for startups has always been producing more software faster. We've gained a ton of wisdom about this problem while cranking out our largest frontend product -- Backlot. We will share much ...

The problem for startups has always been producing more software faster. We've gained a ton of wisdom about this problem while cranking out our largest frontend product -- Backlot. We will share much of what we've learned about building beautiful UIs and the APIs that power them at an alarming rate. Learn about things like standalone views, our take on cross-browser woes, the best of CSS3, SASS, thin client best practices, and client side unit testing. We'd love to show you a couple of fun tools we've open-sourced along the way: shoulda.js and livecss.

Statistics

Views

Total Views
2,298
Views on SlideShare
2,211
Embed Views
87

Actions

Likes
2
Downloads
53
Comments
0

6 Embeds 87

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

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

  • 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