As a discipline, front end development (FED) has recently seen enormous growth with new focus areas like performance, design patterns, build tools, and frameworks emerge and mature. There’s a lot of new excitement for all things client-side, but how do these new technologies fit alongside a traditional Engineering team and an existing code base? At Shopify, we’ve been exploring the dynamic more closely as our FED team continues to grow company-wide. In this talk, I will share my perspective on how FED can work alongside other disciplines to form robust, creative product teams at scale. Shared tools like coding standards, processes, and style guides, can make it possible for all developers to confidently build UI, while specialist FED build those systems and solve unique use cases. By investing in in tools and process, we’ve been able to find common focus for our team and a stronger understanding of our role across disciplines.

1. BUILDING A FRON T END
PRACTICE & TEA M
Scaling FED

4. • Definitions of FED
• Building a Craft
• Building a Culture
Today

5. 1 - Defining FED
Hey Fronteers, what do you do?

6. WTFED?
• HTML
• CSS
• JavaScript

7. WTFED?
• HTML
• CSS
• JavaScript
• Node/WebPack/Sass/Gulp/PostCSS/jQuery/CoffeeScript/
a11y/Bourbon/SVG/Bower/npm/React/Animations/
AMP/PWA/Responsive/Angular/Data Viz/BEM/
Performance/TypeScript/Ember/Browserify/OOCSS

8. CHAOS?

9. Design App Dev*

10. HTML
CSS
JS
Design App Dev*

11. User
InterfacesDesign App Dev*

12. •inconsistent or even buggy UI
• spaghetti code
• hard to maintain & iterate
• not accessible/performant/responsive

13. HTML
CSS
JS
Design App Dev*
😍
💖

14. Owners on a spectrum
FEDDesign App Dev*

15. Owners on a spectrum
FEDDesign App Dev*
💃🏃

16. Building a Craft
1. Language Styleguides
2. Code Reviews
3. Pattern Libraries

17. 1. Language Styleguides
• shared coding standards
• consistency is key
• helps team members read each other’s code
• helps you read your own code 6 months from now

18. Form an opinion

19. http://cssguidelin.es/
http://sass-guidelin.es/
https://github.com/Shopify/javascript
https://github.com/rwaldron/idiomatic.js/
https://google.github.io/styleguide/javascriptguide.xml
Borrow one to start

20. 💬
💬
🎉
🍕 🍕

21. 2. Code Reviews
…or use a linter - eshint, scss-lint

22. • support & grow your guide
• standards to make things easier
• if hard to enforce, it might not be useful
• shared definition of quality
2. Code Reviews

23. • burning existing code isn’t usually an option

24. • support & grow your guide
• standards to make things easier
• if hard to enforce, it might not be useful
• shared definition of quality
• builds a culture of feedback and knowledge sharing
2. Code Reviews

25. Growing Into Reusable Systems
Pattern Libraries

26. Pattern Libraries
• a way to pool our efforts
• make it possible to share code automatically
• a starting point for new projects

27. What might you include?
• A common stack(s)
• responsive guidelines - easy defaults for breakpoints,
flexible grids, starting points for styling and behavior,
testing standards
• performance standards & language tooling
• accessibility best practices

28. Accessibility
• colour contrast audits in a single place

29. Accessibility
• JS helpers for common a11y fixes
• eg keycodes & focus handlers

31. Full UI components
• common UI for re-use

33. UI library
• core application patterns, built in a reusable way
• solve for our use cases
• opinionated
• provide constraints
• custom to our stack

34. Hi! I’m an icon
that comes along
with some text⚡ ⚡Me Too!
something special
⚡Me Too!

35. Hi! I’m an icon
that comes along
with some text⚡ ⚡Me Too!
something special
⚡Me Too!

36. is this a pattern?
how should it be built?
FEDDesign App Dev*

38. Why bother?
• we solve problems once*
• more people can contribute
• more time on most impactful features

39. Why bother?
• we solve problems once*
• more people can contribute
• more time on most impactful features

40. Design FED
Iteration
Build
Review
Teach

41. Building a Culture

42. How does your team make decisions?

43. Expectations & Hiring

44. Have more conversations

45. #FED Talks
• talk about standards
• talk about common problems
• share work from in and out of day-to-day

46. FED
Design App Dev*

47. Continuing to Scale

48. prototyper
CSS developer
performance specialist
accessibility expert
web animator
JS data engineer
interaction engineer
future framework X
engineer
Design App Dev*

49. HTML
CSS
JS
Design App Dev*

50. Find and follow opportunities
for impact

51. what do you want to grow?

52. Thanks!
@MON SI KA
medium. com/shopify-ux