Slides from TheConf 2019

1. Goodbye D3, Hello ECharts
Clement Ho

2. Clement Ho
Frontend Engineering Manager
GitLab - Monitor Health
Austin, Texas USA
@ClemMakesApps

3. Single application for the
entire DevOps lifecycle

4. What is D3?

5. D3
Data Driven Documents

6. D3.js is a JavaScript library for
manipulating documents based on data
using HTML, SVG, and CSS
https://d3js.org

7. What does that really mean?

8. D3
Data + D3
Configuration DOM

10. https://bl.ocks.org/mbostock/7322386

11. Other examples of D3

15. Companies that use D3

16. D3 is not for everyone

17. D3 is very low level.
You may not need that much control

19. Automatically monitor metrics so you know
how any change in code impacts your
production environment.
https://about.gitlab.com/stages-devops-lifecycle/monitor/

21. What we aim to replace:

23. Single Stat
Line ChartsArea Charts
Column Charts
Heatmaps

24. Visualization helps us achieve
our product vision

25. Visualization is not
our primary product

26. We cannot spend months building
our own wrappers around D3

27. ++ Product
Iteration
++ Development
Velocity

28. Adapting product
to customers
Shipping features
at a fast rate

29. We needed a library that was
1. flexible enough to run out of the box
2. allows us to customize when needed

32. ChartJS
- works great out of the box
- difficult to customize <canvas>
- difficult to add new charts

34. ChartJSData DOM
+ ChartJS
Configuration

35. Opinion:
Encapsulated config is
more maintainable

37. Britecharts
- examples that fit our needs
- performance issues

39. Better D3 abstraction,
but still not great

41. ECharts
- offered majority of the features we wanted
- performant

43. EChartsData DOM
+ ECharts
Configuration

44. ECharts landed in
GitLab v11.6 (Dec 2018)

45. ECharts - What we achieved

50. Drawbacks of ECharts

51. Documentation
could be improved

52. Difficult to contribute
effectively upstream

54. Test coverage is minimal

57. Advantages of ECharts

58. Charts are reliable

60. Core team is very friendly and
genuinely wants the project to succeed

62. Mentoring by the Apache
incubation team

64. Core team trying to grow a
greater community

66. Future goals of ECharts
at GitLab

67. Replace all charts with
ECharts

69. https://gitlab.com/gitlab-org/gitlab-ce/issues/63989

70. Help ECharts community grow

72. Would ECharts be a
good fit for you?

73. More companies are using
ECharts than you think

75. Depending on your use case,
it might help you ship faster

76. If we had to do it all over again,
we would still pick ECharts

77. Thank you