Michael Schmidt, a frontend architect at Fiverr, focuses on developing a modular and scalable codebase while ensuring UI/UX consistency. The document outlines his preferences in technology, frustrations with development trends, and introduces various components such as Perseus and Medusa for architectural transitions. It also humorously addresses automated testing and performance metrics in their development process.

1. Run Fast,
Try Not to Break S**t
Michael Schmidt August 2018

2. Michael Schmidt
Frontent Architect
michael@fiverr.com

3. Develop the Frontend architecture,
push new standards & technologies
What I Do @ Fiverr

4. Lead the charge towards a more
modular, scaleable, forward-facing codebase
What I Do @ Fiverr

5. Work with Design to ensure UI/UX
consistency across the site
What I Do @ Fiverr

6. Help grow the Fiverr FE team one kick-ass
developer at a time
What I Do @ Fiverr

7. Who Am I?
DK > US > Fiverr CHI

9. Who Am I?
Wood working Comic books Swearing

10. The Early Days

11. V1 V2
2012

13. v2
jQuery Lodash ModernizrHandlebars

14. v2+
jQuery Lodash ModernizrHandlebars
Angular React GulpGrunt
Mocha
Chai

16. The Now(ish)

17. Frontend developers
love shiny things
What Annoys Me

18. V1 V2
2017
V4

19. v4
Vue Angular React

20. v4
Vue Angular React

21. v4
Vue Angular React

22. React

23. 100% React
100% Angular
100% Library X
What Annoys Me

24. What Annoys Me

25. F**k That Noise
What Annoys Me

26. 100% the best tool
for the job*
What Annoys Me
* caveats apply

27. React Redux Node

28. React Redux Node
jQuery Lodash HandlebarsVanilla JS

29. Perseus Medusa NPM Packages

30. 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

31. 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

32. 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

34. NPM Packages
• isomorphic React components, with very limited context-
awareness
• uses Storybook for local testing & presentation
• uses common configs & templates for ease of development

35. Package
Core
NPM
Package
Yeoman
Generator
Fiverr Templates
• Dependencies
• Configs
• Copied configs
• Build scripts

36. Package
Core
NPM
Package• Dependencies
• Configs
• Copied configs
• Build scripts

37. The Future

38. 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

39. Automated Testing
Q: How many Fiverr QA engineers does
it take to screw in a lightbulb?

40. Automated Testing
A: Zero, because we don’t have any
Fiverr QA engineers.

41. Automated Testing
The myth about the
100% test coverage

42. Performance

43. Performance
• common chunking / webpack bundles
• webp image conversion
• smarter webfont rendering with font-display
• better performance monitoring & metrics

44. 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

45. Fiverr & FE & Tech

46. Meet the FE Team

47. Get S**t Done

48. Run Fast,
Try Not to Break S**t

50. We’re Hiring!
fiverr.com/jobs

52. Don’t be happy with
what you have
but … don’t be blinded by
the shininess

53. Thank You