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

8.
Who Am I?
Wood working Comic books Swearing

9.
The Early Days

10.
V1 V2
2012

11.
v2
jQuery Lodash ModernizrHandlebars

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

13.
The Now(ish)

14.
Frontend developers
love shiny things
What Annoys Me

15.
V1 V2
2017
V4

16.
v4
Vue Angular React

17.
v4
Vue Angular React

18.
v4
Vue Angular React

19.
React

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

21.
What Annoys Me

22.
F**k That Noise
What Annoys Me

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

24.
React Redux Node

25.
React Redux Node
jQuery Lodash HandlebarsVanilla JS

26.
Perseus Medusa NPM Packages

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.
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.
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.
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.
Package
Core
NPM
Package
Yeoman
Generator
Fiverr Templates
• Dependencies
• Configs
• Copied configs
• Build scripts

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

33.
The Future

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.
Automated Testing
Q: How many Fiverr QA engineers does
it take to screw in a lightbulb?

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

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

38.
Performance

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

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.
Fiverr & FE & Tech

42.
Meet the FE Team

43.
Get S**t Done

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

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

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

47.
Thank You