Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Building & Scaling a Front End Practice & Team

1.294 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Building & Scaling a Front End Practice & Team

  1. 1. BUILDING A FRON T END PRACTICE & TEA M Scaling FED
  2. 2. • Definitions of FED • Building a Craft • Building a Culture Today
  3. 3. 1 - Defining FED Hey Fronteers, what do you do?
  4. 4. WTFED? • HTML • CSS • JavaScript
  5. 5. 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
  6. 6. CHAOS?
  7. 7. Design App Dev*
  8. 8. HTML CSS JS Design App Dev*
  9. 9. User InterfacesDesign App Dev*
  10. 10. •inconsistent or even buggy UI • spaghetti code • hard to maintain & iterate • not accessible/performant/responsive
  11. 11. HTML CSS JS Design App Dev* 😍 💖
  12. 12. Owners on a spectrum FEDDesign App Dev*
  13. 13. Owners on a spectrum FEDDesign App Dev* 💃🏃
  14. 14. Building a Craft 1. Language Styleguides 2. Code Reviews 3. Pattern Libraries
  15. 15. 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
  16. 16. Form an opinion
  17. 17. 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
  18. 18. 💬 💬 🎉 🍕 🍕
  19. 19. 2. Code Reviews …or use a linter - eshint, scss-lint
  20. 20. • 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
  21. 21. • burning existing code isn’t usually an option
  22. 22. • 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
  23. 23. Growing Into Reusable Systems Pattern Libraries
  24. 24. Pattern Libraries • a way to pool our efforts • make it possible to share code automatically • a starting point for new projects
  25. 25. 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
  26. 26. Accessibility • colour contrast audits in a single place
  27. 27. Accessibility • JS helpers for common a11y fixes • eg keycodes & focus handlers
  28. 28. Full UI components • common UI for re-use
  29. 29. UI library • core application patterns, built in a reusable way • solve for our use cases • opinionated • provide constraints • custom to our stack
  30. 30. Hi! I’m an icon that comes along with some text⚡ ⚡Me Too! something special ⚡Me Too!
  31. 31. Hi! I’m an icon that comes along with some text⚡ ⚡Me Too! something special ⚡Me Too!
  32. 32. is this a pattern? how should it be built? FEDDesign App Dev*
  33. 33. Why bother? • we solve problems once* • more people can contribute • more time on most impactful features
  34. 34. Why bother? • we solve problems once* • more people can contribute • more time on most impactful features
  35. 35. Design FED Iteration Build Review Teach
  36. 36. Building a Culture
  37. 37. How does your team make decisions?
  38. 38. Expectations & Hiring
  39. 39. Have more conversations
  40. 40. #FED Talks • talk about standards • talk about common problems • share work from in and out of day-to-day
  41. 41. FED Design App Dev*
  42. 42. Continuing to Scale
  43. 43. prototyper CSS developer performance specialist accessibility expert web animator JS data engineer interaction engineer future framework X engineer Design App Dev*
  44. 44. HTML CSS JS Design App Dev*
  45. 45. Find and follow opportunities for impact
  46. 46. what do you want to grow?
  47. 47. Thanks! @MON SI KA medium. com/shopify-ux

×