JSFoo is the annual JavaScript conference hosted by HasGeek. The Pune edition is the second edition (JSFoo in Pune in 2012, and ReactFoo in January 2018).
HasGeek launched JSFoo in 2011 as India’s first JavaScript conference. The JS community in India has grown phenomenally since then. JavaScript now prevades every aspect of web development - browsers, apps, front-end, back-end, mobile and IoT, and there’s always scope to understand new ideas and solutions. The conference explores new ideas, implementing innovative solutions, and learning from experiences, especially negative ones.
Want to see the talks from last year’s conference? Watch the JSFoo 2018 videos or the related ReactFoo 2018 videos.
PS
Prateeksha Singh
@pratu16x7
Charting in 2018
Submitted Dec 5, 2018
Section:
Crisp talk
Technical level:
Beginner
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
{{ gettext('Login to leave a comment') }}
{{ gettext('Post a comment…') }}{{ errorMsg }}
{{ gettext('No comments posted yet') }}