ZoomCharts is an interactive and fast HTML5 charts library for big data visualization. It was created to address graphics challenges on the web like supporting multiple browsers, resolutions, and varying performance across devices. The developers use CoffeeScript, commit to GitHub, and have an automated testing setup to ensure quality. Key features of ZoomCharts include support for Canvas, SVG, and WebGL rendering as well as responsive design for big screens. Future plans include more chart types, an extension API, and memory tracking.

3. NOT another HTML5 charts library
● Interactive
● Fast
● Touch
● Big Data
What is ZoomCharts

4. DOS 6.2
● 320x240x8bpp
● Direct access to pixels on screen
● Assembler for Performance
Web has finally caught up in the graphics department
● Multiple browsers & rendering technologies
● Multiple resolutions
● Performance varies by browser & device
A long time ago

5. Graphics
Challenges
Quality assurance
Overview

6. ● We write in Coffeescript
● Commit to GITHub
● Build system in Javascript
● Debug in Chrome
● Run automated tests
● Like WebStorm (and Vim)
Development setup

7. Canvas
(fast)
SVG
(slow)
Graphics
WebGL
(<50%)

8. Canvas

9. Interactive animations

10. Graceful degradation

11. ● Raphael
● Hammer.js
● Leaflet
● Moment.js
Third party libraries

12. ● Responsive design
● Big screen resolutions
● Safari
● HTML on canvas
Challenges

13. Nice layout Not so nice
Responsive design

14. Big Screen Resolution
Use devicePixelRatio for sharp rendering
No hardware acceleration beyond 2048x2048

15. ● 100% cpu → input events blocked
● Weird browser lockups
● Dumb code fixes stuff:
width = r1 - r0
if r0 + r1 == -2
r0 = 0
r1 = 0
context.beginPath()
Safari

16. HTML on canvas
● DOM is SLOW
● Parse basic HTML markup and render manually
● Text caching helps

17. ● Trial → support → buy
● 1 day issue resolution
● #1Tell me what I did wrong
● #2 Can you do ...
Support

18. Automated tests on every GIT push
Testing

19. Automatically:
● Compare images
● Record performance
● Errors in console
Testing

20. ● Next step –
record and playback
Interactive testing

21. ● Interactive
mode
● Automated
– Selenium API
BrowserStack

22. Chrome Dev tools (F12)
● Debugging
● Profiling
● Timeline
Debugging

23. Debugger

24. Debugger
if (bad_stuff){
debugger;
}

25. Profiler

26. Profiler

27. Timeline

28. Remote debugging
https://developer.chrome.com/devtools/docs/remote-debugging

29. ● More charts
● Extension API
● Memory allocation tracking
● WebGL
Future

30. We are looking for a statically typed language:
● Error checking
● Performance
● Superior minification
● Easy to write and read
● Easy to call from JS
Future

32.  
Feedback

33. Sponsors of XXVI DevClub.lv

34. Custom build script
● Compile
● Minify
● Extract documentation
● Embed customer data
Building