Alexander Gusman goooseman

A practical guide to choose a frontend dependency

“Every choice comes with a consequence. Once you make a choice, you must accept responsibility. You cannot escape the consequences of your choices, whether you like them or not.” – Roy T. Bennet.

I need to choose the best "gold-and-diamond-encrusted harmonica” in this store - by 12 Oz Mouse Wiki (https://12ozmouse.fandom.com/wiki/Gold_and_Diamond_Encrusted_Harmonica_Store)

Another great day working as a front-end developer. Everything is calm and quiet: colleagues are discussing new JSX transforms, QA team members are arguing about this endless Cypress vs Webdriver holy war topic, I’m investigating the Webpack v5 migration path to upgrade the project. Everything is quiet. Right until the moment our PM rushes in. We have a new page to deliver to

Library	GZip + Minified
`echarts`	273.2kB
`chart.js`	123.8kB
`frappe-charts`	17.6kB
`highcharts`	89.4kB
`chartist`	11.49kB
`fusioncharts`	395kB (1.4MB minified (!))
`d3`	86.34kB
`uplot`	11.1kB

Library	SP	Comments
`d3`	5	d3 is a low-level visualization library. Therefore we can use it to visualize nearly anything, but it is time-consuming.
`chartist`	3	The chart is built from a declarative configuration object, which is used to configure the main aspects of the chart. It does not have options to create a chart like I need, but it has a powerful API (events-based) to customize nearly any aspect of the chart. Knowledge of SVG is a must.
`frappe-charts`	8	There are no configuration objects to build up a chart I need. The only way to use this library to deliver this functionality is to create a fork and develop: horizontal bars, numbers inside bars, and X-axis labels by yourself.
`highcharts`	2	The chart is built from a declarative configuration object, but the object is extremely customizable: horizontal stack bars with numbers inside are already implemented and X-axis cust

Library	Includes tests?	Tests are up-to-date?	Tests are used to resolve issues?
`d3`	Integration tests in separate packages (e.g.)	Yep	Yep (e.g.)
`chartist`	Integration (e.g.)	No	Yep (e.g.)
`frappe-charts`	Nope	Nope	Nope
`highcharts`	E2E (using puppeteer) (e.g.)	Yep	Yep ([e.g.](https://github.com/highcharts/highcharts/commit/545f5fb5edabd3a649f89c981a976b11bb21268b#diff-5efb77b26199919ced65df1d048

Library	GZip + Minified	Maintenance score	Integration complexity	Tests score
`d3`	86.34kB	11	5	Good
`chartist`	11.49kB	6	3	Fair
`frappe-charts`	17.6kB	5	8	Absent
`highcharts`	89.4kB	7	2	Perfect (E2E gives a lot of confidence)
`uplot`	11.49kB	4	5	Absent

	import libraryB, { Axis } from ‘library-b’;
	const chart = new libraryB.Bar(document.body);
	chart.on(‘axisDrawn’, (axis: Axis) => {
	if (!axis.value % 10 !== 0) {
	return;
	}
	axis.element.attr({
	y1: data.y2,
	y2: data.y2 + Y_LABEL_MARGIN - 5,
	});

	import { getUnicodeAwareStringLength } from './strings';

	describe('strings -> getUnicodeAwareStringLength', () => {
	it('should work for a regular string', () => {
	expect(getUnicodeAwareStringLength('foo')).toBe(3);
	});

	it('should work for an emoji string', () => {
	expect(getUnicodeAwareStringLength('🚗🚗')).toBe(2);
	});

	import Bar from 'components/Bar';

	const Foo = ({ inputs }) => inputs.map((input, index /* do NOT use index as a key */) => (
	<Bar key={`${input.type}-${input.name}`}>{/* id is the best, if non avail try to generate any unique string, which will be the same for the same item */}
	</Bar>
	)));

	/*
	if `inputs` prop was `[{type: 'file', name: 'file'}, { type: 'number', name: 'price' }]`
	and then has been changed to `[{type: 'file', name: 'file'}, { type: 'text', name: 'title' }]`

	#!/usr/bin/env python

	import sys
	import pandas as pd

	def convert_csv(input_csv):
	# Read the original CSV file
	df = pd.read_csv(input_csv)

	# Rename columns

	libraryA from ‘library-a’;

	const bar = new libraryB.Bar(document.body, { withTicks: true });