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.
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
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
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
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
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*
37.
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