How to do Scalable UI-Heavy Development at a Breakneck Pace
•Download as KEY, PDF•
2 likes•958 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 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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to How to do Scalable UI-Heavy Development at a Breakneck Pace
Similar to How to do Scalable UI-Heavy Development at a Breakneck Pace (20)
Recently uploaded
Recently uploaded (20)
How to do Scalable UI-Heavy Development at a Breakneck Pace
- 1. Scalable UI development at a breakneck pace Phil Crosby
- 2. Phil Crosby Tech lead of Ooyala Backlot Ninjawords.com Vimium - a Vim-like browsing experience for Chrome shoulda.js livecss 2
- 3. Context - what we’re building here A product with Lots of functionality Lots of views (pages) New stuff each and every day 3
- 4. Goals for our development approach Build lots of high quality UI with only a handful of developers. Iterate very quickly, build a malleable product. No bugs! 4
- 5. Frontend development strategies 5
- 6. Frontend development strategies 1. A thin client philosophy 5
- 7. Frontend development strategies 1. A thin client philosophy 2. Standalone views 5
- 8. Frontend development strategies 1. A thin client philosophy 2. Standalone views 3. Richness through a very light layer AJAX 5
- 9. Frontend development strategies 1. A thin client philosophy 2. Standalone views 3. Richness through a very light layer AJAX 4. Build on powerful primitives, like CSS3. 5
- 10. Frontend development strategies 1. A thin client philosophy 2. Standalone views 3. Richness through a very light layer AJAX 4. Build on powerful primitives, like CSS3. 5. Robust server and client side testing pipeline 5
- 11. A thin client philosophy 6
- 12. A thin client philosophy Choose a thin client. 6
- 13. A thin client philosophy Choose a thin client. We love stupid client apps. 6
- 14. A thin client philosophy Choose a thin client. We love stupid client apps. No behavior, no smarts => fewer places for bugs to hide in the client. 6
- 15. Standalone views Goal: work on each view independently of the others Mechanics: 7
- 16. Standalone views Goal: work on each view independently of the others Mechanics: Every view 7
- 17. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable 7
- 18. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable - stateless 7
- 19. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable - stateless - has a uniform interface 7
- 20. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable - stateless - has a uniform interface Every view can serialize itself into query string params 7
- 21. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable - stateless - has a uniform interface Every view can serialize itself into query string params Views are connected with a light layer of ajax 7
- 22. Powerful, powerful primitives jQuery (benefits are well-known) HTML5 CSS3 SASS Leverage only cutting-edge browsers. 8
- 23. CSS3 - FEEL THE POWER! 9
- 24. CSS3 - FEEL THE POWER! Lots of malleability for programmers to refine UI. Finally the expressiveness needed to cover most styling techniques. Box layouts, rounded corners, shadows, gradients, and bears! 9
- 25. SASS - Bring structure to CSS A DSL on top of CSS. Provides nesting, variables, color arithmetic. Write custom functions and macros to group and reuse CSS code. 10
- 26. No love for IE 11
- 27. No love for IE Chrome Frame should win the 2011 Humanitarian Award. 11
- 28. No love for IE Chrome Frame should win the 2011 Humanitarian Award. According to StatCounter’s worldwide stats for this month, IE6 usage is down to 6% and IE7 is down to 10%. 11
- 29. Our testing pipeline 12
- 30. Our testing pipeline Most logic lives in server-side Ruby code, and so that's where we write all of our tests. 12
- 31. Our testing pipeline Most logic lives in server-side Ruby code, and so that's where we write all of our tests. HTML output is easy to assert against. 12
- 32. Our testing pipeline Most logic lives in server-side Ruby code, and so that's where we write all of our tests. HTML output is easy to assert against. Our client side testing tools: - v8: Chrome's command line JavaScript engine - env.js (also check out JSDom) - Shoulda.js (github.com/philc/shoulda.js) 12
- 33. Takeaways 13
- 34. Takeaways We've refined this approach through building lots of frontend product and tenaciously enhancing team productivity. 13
- 35. Takeaways We've refined this approach through building lots of frontend product and tenaciously enhancing team productivity. This frontend development approach has worked really well for us! 13
- 36. Takeaways We've refined this approach through building lots of frontend product and tenaciously enhancing team productivity. This frontend development approach has worked really well for us! Here are a few tools which may come in handy: livecss shouda.js require.js 13
- 37. THANK YOU
Editor's Notes
- \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