Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Run Fast, Try Not to Break S**t

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 53 Anzeige

Run Fast, Try Not to Break S**t

Herunterladen, um offline zu lesen

From its humble beginning as a place where people would pay $5 to get a funny video, Fiverr has grown into the world’s largest marketplace for digital services.

Along the way, our frontend architecture has had to evolve as well - with technologies changing at a rapid pace and frontend developers in general always wanting to work with the latest, shiniest thing, not being adaptable to the environment around you can easily lead you down a road where your stack can’t support your needs & where you’re constantly playing catch-up to whatever it is everyone else is doing.

In this talk, I’ll give an overview of the FE path that Fiverr took — where we started, what we’re currently doing and where we’re (hopefully) going.

From its humble beginning as a place where people would pay $5 to get a funny video, Fiverr has grown into the world’s largest marketplace for digital services.

Along the way, our frontend architecture has had to evolve as well - with technologies changing at a rapid pace and frontend developers in general always wanting to work with the latest, shiniest thing, not being adaptable to the environment around you can easily lead you down a road where your stack can’t support your needs & where you’re constantly playing catch-up to whatever it is everyone else is doing.

In this talk, I’ll give an overview of the FE path that Fiverr took — where we started, what we’re currently doing and where we’re (hopefully) going.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Run Fast, Try Not to Break S**t (20)

Anzeige

Aktuellste (20)

Run Fast, Try Not to Break S**t

  1. 1. Run Fast, Try Not to Break S**t Michael Schmidt August 2018
  2. 2. Michael Schmidt Frontent Architect michael@fiverr.com
  3. 3. Develop the Frontend architecture, push new standards & technologies What I Do @ Fiverr
  4. 4. Lead the charge towards a more modular, scaleable, forward-facing codebase What I Do @ Fiverr
  5. 5. Work with Design to ensure UI/UX consistency across the site What I Do @ Fiverr
  6. 6. Help grow the Fiverr FE team one kick-ass developer at a time What I Do @ Fiverr
  7. 7. Who Am I? DK > US > Fiverr CHI
  8. 8. Who Am I? Wood working Comic books Swearing
  9. 9. The Early Days
  10. 10. V1 V2 2012
  11. 11. v2 jQuery Lodash ModernizrHandlebars
  12. 12. v2+ jQuery Lodash ModernizrHandlebars Angular React GulpGrunt Mocha Chai
  13. 13. The Now(ish)
  14. 14. Frontend developers love shiny things What Annoys Me
  15. 15. V1 V2 2017 V4
  16. 16. v4 Vue Angular React
  17. 17. v4 Vue Angular React
  18. 18. v4 Vue Angular React
  19. 19. React
  20. 20. 100% React 100% Angular 100% Library X What Annoys Me
  21. 21. What Annoys Me
  22. 22. F**k That Noise What Annoys Me
  23. 23. 100% the best tool for the job* What Annoys Me * caveats apply
  24. 24. React Redux Node
  25. 25. React Redux Node jQuery Lodash HandlebarsVanilla JS
  26. 26. Perseus Medusa NPM Packages
  27. 27. Perseus • express service for rendering vertical views, built in React • consumes NPM packages and/or static html • does its own webpack builds, data formatting, etc • is basically the V in a micro-services-oriented architecture
  28. 28. Browser RoR App Perseus Phoenix NPM Package NPM Package NPM Package Code Perseus response 1.staBc HTML 2.list of assets 3.iniBal data Request context 1.query params 2.A/B test data 3.authenBcaBons
  29. 29. Medusa • express service for rendering NPM packages, built in React • no webpack bundling, no data handling • serves as a migration bridge for our current RoR app
  30. 30. NPM Packages • isomorphic React components, with very limited context- awareness • uses Storybook for local testing & presentation • uses common configs & templates for ease of development
  31. 31. Package Core NPM Package Yeoman Generator Fiverr Templates • Dependencies • Configs • Copied configs • Build scripts
  32. 32. Package Core NPM Package• Dependencies • Configs • Copied configs • Build scripts
  33. 33. The Future
  34. 34. Browser RoR App Perseus Phoenix NPM Package NPM Package NPM Package Code Perseus response 1.staBc HTML 2.list of assets 3.iniBal data Request context 1.query params 2.A/B test data 3.authenBcaBons
  35. 35. Automated Testing Q: How many Fiverr QA engineers does it take to screw in a lightbulb?
  36. 36. Automated Testing A: Zero, because we don’t have any Fiverr QA engineers.
  37. 37. Automated Testing The myth about the 100% test coverage
  38. 38. Performance
  39. 39. Performance • common chunking / webpack bundles • webp image conversion • smarter webfont rendering with font-display • better performance monitoring & metrics
  40. 40. React 16 Migration Vendors.js vendors-5rr vendors-helpers vendors-lodash vendors-redux vendors-react vendors-react16 react 15 react-dom 15 react 16 react-dom 16
  41. 41. Fiverr & FE & Tech
  42. 42. Meet the FE Team
  43. 43. Get S**t Done
  44. 44. Run Fast, Try Not to Break S**t
  45. 45. We’re Hiring! fiverr.com/jobs
  46. 46. Don’t be happy with what you have but … don’t be blinded by the shininess
  47. 47. Thank You

×