Fiverr Tech
Published in

Fiverr Tech

Front End Resource Sharing in Fiverr’s Decentralized System

How Fiverr balances resource sharing and component independency in a decentralised Front End system.

There will always be conflict between an environment supporting legacy code, and the desire to innovate with new technologies.

Photo by Pierre Châtel-Innocenti on Unsplash
  1. Vendors — Large libraries and frameworks, usually well known open source projects, which have reasonably low major version release cycles.
  2. High Recurrence— Modules that have been tailored to our development needs so well they have become a second nature to developers and are expected to be available in all environments, among them our i18n solution, and statistics reporters like technical and business monitoring.
  3. Miscellaneous Utilities — These utilities may have various levels of re-use. They include helper functions, useful classes, repeatable business logic or technical functional operations, which are not decisively related to any feature or domain.

1. Vendors

vendors.json

{
"lodash": "_",
"react": "React",
"react-dom": "ReactDOM",
"react-redux": "ReactRedux",
"redux": "Redux"
}

externals.js

module.exports = Object.entries(require('./vendors.json'))
.reduce(
(collection, [route, name]) => Object.assign(
collection,
{
[route]: {
'commonjs': route,
'commonjs2': route,
'amd': route,
'root': name,
'var': name,
},
}
),
{}
);

2. High Recurrence

3. Miscellaneous Utilities

A utility

export const resolve = (string = '', context = global) =>
string
.split('.')
.reduce((prev, current) =>
typeof prev === 'object' ? prev[current] : prev, context);

Utilities root

export * from './deepAssign';
export * from './env';
export * from './inTimeRange';
export * from './multiEventListener';
export * from './pluck';
export * from './resolve';
export * from './select';
export * from './sendEvents';
import { inTimeRange, env, resolve } from '@fiverr/util';

We feel we’ve found a good balance, where large dependencies enjoy optimal caching and sharing whilst a maintainable utility library provides a rapid development environment with the ability to introduce breaking changes safely.

Bonus Gotcha — Webpack exclude / include

const MODULES_TO_INCLUDE = ['@fiverr/util'];
const exclude = new RegExp(`node_modules/(?!(${MODULES_TO_INCLUDE.join('|')})/).*`);
...
module: {
rules: [{
loader: 'babel-loader',
exclude,

--

--

The technology behind the platform that’s changing the future of work

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store