0
Scalable UI development at         a breakneck pace                      Phil Crosby
Phil Crosby                             Tech lead of Ooyala BacklotNinjawords.comVimium - a Vim-like browsing experience f...
Context - what we’re                         building hereA product with Lots of functionality Lots of views (pages) New s...
Goals for our development                        approachBuild lots of high quality UI with only a handfulof developers.It...
Frontend development            strategies                     5
Frontend development                           strategies1. A thin client philosophy                                    5
Frontend development                           strategies1. A thin client philosophy2. Standalone views                   ...
Frontend development                           strategies1. A thin client philosophy2. Standalone views3. Richness through...
Frontend development                           strategies1. A thin client philosophy2. Standalone views3. Richness through...
Frontend development                           strategies1. A thin client philosophy2. Standalone views3. Richness through...
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 ...
Standalone viewsGoal: work on each view independently of theothersMechanics:                                               7
Standalone viewsGoal: work on each view independently of theothersMechanics:Every view                                    ...
Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable                    ...
Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless         ...
Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless- has a u...
Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless- has a u...
Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless- has a u...
Powerful, powerful primitivesjQuery (benefits are well-known)HTML5CSS3SASSLeverage only cutting-edge browsers.            ...
CSS3 - FEEL THE POWER!                     9
CSS3 - FEEL THE POWER!Lots of malleability for programmers to refineUI.Finally the expressiveness needed to covermost styl...
SASS - Bring structure to CSSA DSL on top of CSS.Provides nesting, variables, color arithmetic.Write custom functions and ...
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,...
Our testing pipeline                   12
Our testing pipelineMost logic lives in server-side Ruby code, andso thats where we write all of our tests.               ...
Our testing pipelineMost logic lives in server-side Ruby code, andso thats where we write all of our tests.HTML output is ...
Our testing pipelineMost logic lives in server-side Ruby code, andso thats where we write all of our tests.HTML output is ...
Takeaways        13
TakeawaysWeve refined this approach through buildinglots of frontend product and tenaciouslyenhancing team productivity.  ...
TakeawaysWeve refined this approach through buildinglots of frontend product and tenaciouslyenhancing team productivity.Th...
TakeawaysWeve refined this approach through buildinglots of frontend product and tenaciouslyenhancing team productivity.Th...
THANK YOU
Upcoming SlideShare
Loading in...5
×

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

2,180

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,180
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "How to do Scalable UI-Heavy Development at a Breakneck Pace"

    1. 1. Scalable UI development at a breakneck pace Phil Crosby
    2. 2. Phil Crosby Tech lead of Ooyala BacklotNinjawords.comVimium - a Vim-like browsing experience forChromeshoulda.jslivecss 2
    3. 3. Context - what we’re building hereA product with Lots of functionality Lots of views (pages) New stuff each and every day 3
    4. 4. 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
    5. 5. Frontend development strategies 5
    6. 6. Frontend development strategies1. A thin client philosophy 5
    7. 7. Frontend development strategies1. A thin client philosophy2. Standalone views 5
    8. 8. Frontend development strategies1. A thin client philosophy2. Standalone views3. Richness through a very light layer AJAX 5
    9. 9. Frontend development strategies1. A thin client philosophy2. Standalone views3. Richness through a very light layer AJAX4. Build on powerful primitives, like CSS3. 5
    10. 10. 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
    11. 11. A thin client philosophy 6
    12. 12. A thin client philosophyChoose a thin client. 6
    13. 13. A thin client philosophyChoose a thin client.We love stupid client apps. 6
    14. 14. 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
    15. 15. Standalone viewsGoal: work on each view independently of theothersMechanics: 7
    16. 16. Standalone viewsGoal: work on each view independently of theothersMechanics:Every view 7
    17. 17. Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable 7
    18. 18. Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless 7
    19. 19. Standalone viewsGoal: work on each view independently of theothersMechanics:Every view- is addressable- stateless- has a uniform interface 7
    20. 20. 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
    21. 21. 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
    22. 22. Powerful, powerful primitivesjQuery (benefits are well-known)HTML5CSS3SASSLeverage only cutting-edge browsers. 8
    23. 23. CSS3 - FEEL THE POWER! 9
    24. 24. 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
    25. 25. 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
    26. 26. No love for IE 11
    27. 27. No love for IEChrome Frame should win the 2011Humanitarian Award. 11
    28. 28. 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
    29. 29. Our testing pipeline 12
    30. 30. Our testing pipelineMost logic lives in server-side Ruby code, andso thats where we write all of our tests. 12
    31. 31. 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
    32. 32. 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
    33. 33. Takeaways 13
    34. 34. TakeawaysWeve refined this approach through buildinglots of frontend product and tenaciouslyenhancing team productivity. 13
    35. 35. TakeawaysWeve refined this approach through buildinglots of frontend product and tenaciouslyenhancing team productivity.This frontend development approach hasworked really well for us! 13
    36. 36. 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
    37. 37. THANK YOU
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×