JSFoo Pune 2019

A look at the time we at Frappe needed modern charts and looked at Github analytics for design inspiration, and after scouring the field for alternatives like C3 and Chart.js, decided to make Frappe Charts, a zero dependency Vanilla JS/SVG charting library that made it to the 4th place for a day on HN, gathered over 11k stars on Github, and ultimately got featured in the Github Octoverse this year. This talk reflects on some of the key implementation choices we made to reach out to more users.

Outline

A look at the time we at Frappe needed modern charts and looked at Github analytics for design inspiration, and after scouring the field for alternatives like C3 and Chart.js, decided to make Frappe Charts, a zero dependency Vanilla JS/SVG charting library that made it to the 4th place for a day on HN, gathered over 11k stars on Github, and ultimately got featured in the Github Octoverse this year. This talk reflects on some of the key implementation choices we made to reach out to more users.

Design

For Charts, the core principle we decided to focus on was better design. So naturally, looking at products like GitHub pays off really well (Their tooltips alone are to die for).

Mapping Use Cases to Configuration

Inspired by Apple settings, it is possible to get creative with the configuration properties, and still support no more than the essentials. Line charts may be great to show trends, but so is reducing the space ratio between bars in a bar chart. More data should allow for reduced details. And Percentage charts are a more space efficient alternative to Pies.

Obviating DOM/SVG manipulation dependencies

The choice to not drag jQuery along and remove it from our initial implementation felt obvious to keep an inherently tiny library lightweight in the Node ecosystem.

Animation

CSS3 Transitions work impeccably to animate most style properties. But to morph SVG shapes like paths, native SMIL is the most widely supported choice. As they also only morph the same number of points, one has to be creative to prepare optimal pre-transition states.

Website, Launch and Interactive Docs

Our project website — pretty much first impression that made the project popular — uses demos to showcase all the reasons why Frappe charts are different. Inspired by the demo components over at VueJS, we later included plenty of these in the documentation.

Speaker bio

I am Prateeksha Singh, an engineer for the past two years at Frappe Tech, the team behind the fully open source ERP product ERPNext. I wrote the Charts project during my first year here for our reporting module, following from our culture of not shying away from making a dent in the web universe. I am currently a maintainer of the full-stack web framework Frappe.

Links

• https://github.com/frappe/charts
• https://github.com/pratu16x7
• https://medium.com/frappé-thoughts/so-we-decided-to-create-our-own-charts-a95cb5032c97
• https://medium.com/frappé-thoughts/writing-the-docs-dabccd97c464

Slides

https://drive.google.com/file/d/1fN4yZkPV4S4YUo9YPOG2-mJDVUILKWqk/view?usp=sharing