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.

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