Building fast, maintainable and scalable user interfaces on the web

1. Building UIs

2. Building fast, maintainable and scalable
user interfaces on the web

3. HTML
HTML gives content structure and meaning (headings,
paragraphs, images, etc.)

4. CSS
CSS defines the presentation (typography, colors,
layout, etc.)

5. <h1 class=“title”>I’m a title</h1>
<div class=“box”>I’m a box</div>
<img src=“image.jpg”>

6. .title {
font-size: 32px;
color: black;
}
.box {
border-radius: 5px;
}
img {
border: 1px solid red;
}

7. www.affirm.com

8. Building fast, maintainable and scalable
user interfaces on the web

9. 1. Modules
Break down the user interface into isolated, reusable
modules (buttons, tooltips, etc.)

10. base
fonts
layout
modules
utilities
badge.scss
buttons.scss
card.scss
control.scss
date-picker.scss
fab.scss
forms.scss
icons.scss
modal.scss
popover.scss
progress.scss
tooltip.scss
images
scripts
styles

11. 2. Naming
Specific, functional and consistent class names are a
must for scalable UIs

12. Pick explicit and clear class names, but
don’t be overly specific
<header class=“site-header”></header>
<div class=“table-view”></div>
<div class=“bank-card”></div>
Specific

13. Choose class names that describe an element’s
functionality, not its presentation
Functional

14. <button class=“btn-green”>…</button>
Don’t do this

15. <button class=“btn-primary”>…</button>
.btn-primary {
background-color: green;
}
Do this instead

16. Adopt a single naming convention and stick to it
Consistent

17. <header class=“site-header”></header>
<main class=“siteContent”></main>
<footer class=“site_footer”></footer>
Don’t do this

18. <header class=“site-header”></header>
<main class=“site-content”></main>
<footer class=“site-footer”></footer>
Do this instead

19. MAKE PAYMENT
Upcoming Payment Due on May 10, 2015
$238.71/mo
Touch of Modern

20. header
content
footer

21. <div class=“card”>
<header class=“header”></header>
<main class=“content”></main>
<footer class=“footer”></footer>
</div>
Don’t do this

22. <div class=“card”>
<header class=“card__header”></header>
<main class=“card__content”></main>
<footer class=“card__footer”></footer>
</div>
Do this instead

23. <div class=“card card--loan”>
<header class=“card__header”>
<img class=“card__avatar” src=“avatar.jpg”>
<h3 class=“card__title”>Touch of Modern</h3>
<div class=“card__actions”>
<span class=“icon”>…</span>
</div>
</header>
<main class=“card__content”>
<div class=“progress-bar”>
<div class=“progress-bar__fill”></div>
</div>
</main>
<footer class=“card__footer”>
<a href=“#” class=“card__footer__link”>Link</a>
</footer>
</div>

24. 3. Performance
Perceived performance is more important than actual
performance

25. SVG
Vector graphics that scale infinitely, without losing
clarity

26. 1.5kb 0.8kb

27. FastClick
Eliminating the 300ms delay between a physical tap
and the firing of a click event on mobile browsers

28. Normal behavior w/ FastClick

29. Why invest resources into this?

30. Speed
Developing new features and products will be much
faster

31. Consistency
Ensure that future products remain consistent (design,
naming conventions, patterns, etc.)

32. Scalability
Establish a solid foundation for designing and
developing new products

33. Questions?