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.

Grokking TechTalk #30: From App to Ecosystem: Lessons Learned at Scale

189 Aufrufe

Veröffentlicht am

When we were faced with the challenge of going from one to multiple apps, we had to make significant changes to the way we did frontend development. Learn about the tooling and architecture we use to manage a suite of apps, and how you can apply the same principles to your own frontend.

Speaker: Kristian Randall - Frontend Engineering Manager @ Axon

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Grokking TechTalk #30: From App to Ecosystem: Lessons Learned at Scale

  1. 1. Scaling Our Frontend Development Process Kristian Randall Engineering Manager @ Axon Vietnam kristian@axon.com
  2. 2. A Brief History of Axon + Citizen Performance RMS CAD … and more TASER 1993 Body Cameras 2008 Evidence.com 2009 Axon Platform 2017
  3. 3. How to build a scalable ecosystem of apps THE CHALLENGE
  4. 4. Goals Consistent customer experience across all products Consistent developer experience Easy to build and ship new apps and features ! ⌨ #
  5. 5. Overview Moving to a Monorepository Building a Component Library Improving Our Tooling Optimizing Build Speeds Automating Quality Control
  6. 6. Moving to a Monorepository
  7. 7. More shared code Increased developer efficiency &
  8. 8. Where We Were • Multiple apps getting bundled as separate entrypoints • Unnecessary dependencies bundled with the smaller app • Standalone component library • Low utilization because of the extra steps to contribute • No clear way to create new apps or share configuration
  9. 9. Where We Were Component library Evidence.com
  10. 10. What We Did Convert our main application repository into a monorepo Split apps into multiple packages Import our component library as another package Move our tools to the root of the monorepo 1 2 3 4
  11. 11. Where We Are Now • 8 apps and 27 total packages • Moving code to a shared library only requires a single pull request • Our apps only bundle what they need, but everything is available in the development environment • All apps using same composable webpack configuration and shared tools
  12. 12. Monorepos make sharing code easier KEY TAKEAWAY #1
  13. 13. Building a Component Library
  14. 14. Shared Components ⇒ Consistent UI
  15. 15. Discoverability ⇒ Adoption
  16. 16. Make best practice the easiest option KEY TAKEAWAY #2
  17. 17. Improving Our Tooling
  18. 18. What Lerna Does Well • Linking local packages together • Running the same command in multiple packages • Managing dependencies across all packages • Handling publishes in a CI process
  19. 19. Finding Lerna’s Limits • Running tests and coverage reporting across our entire frontend • Running a dev server with multiple entry points • Running a flow server • Specifying a subset of the code to test, lint, or build
  20. 20. Custom Tooling Custom CLI tool that wraps our other tools with extra functionality
  21. 21. Custom Tooling
  22. 22. Generating Code Using Hygen allows us to generate new apps, packages, and components
  23. 23. The more engineers you have, the more time good tools will save KEY TAKEAWAY #3
  24. 24. Optimizing Build Speeds
  25. 25. More Apps = Longer Builds=
  26. 26. Only Build What You Need
  27. 27. Conditional Build Log
  28. 28. Build Speed Improvements 50% improvement in average build times (20 min → 10 min) 80% improvement for our smaller apps (20 min → 4 min) 3500+ tests, 8 apps
  29. 29. Faster Builds = Faster Engineers KEY TAKEAWAY #4
  30. 30. Automating Quality Control
  31. 31. The Manual Way
  32. 32. Define Your Rules Early … so you don’t have to do this
  33. 33. Linting and Code Quality Catching errors early saves the author and the reviewer time Defining rules up front saves time arguing over style issues (and fixing them later) Many issues can be fixed automatically
  34. 34. Enforcing Best Practices and Reporting Issues
  35. 35. Don’t do manually what your tooling can do for you KEY TAKEAWAY #5
  36. 36. Recap Moving to a Monorepository Building a Component Library Improving Our Tooling Optimizing Build Speeds Automating Quality Control
  37. 37. Key Takeaways KEY TAKEAWAY #1 Monorepos make sharing code easier KEY TAKEAWAY #2 Make best practice the easiest option KEY TAKEAWAY #3 The more engineers you have, the more time good tools will save KEY TAKEAWAY #4 Faster builds = faster engineers KEY TAKEAWAY #5 Don’t do manually what your tooling can do for you
  38. 38. Q&A
  39. 39. kristian@axon.com or axon.com/careers INTERESTED IN JOINING US?
  40. 40. Thank you!

×