Zoomcharts @ DevClub.lv
Download as ODP, PDF1 like395 views
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.
Zoomcharts @ DevClub.lv
- 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
- 6. ● We write in Coffeescript ● Commit to GITHub ● Build system in Javascript ● Debug in Chrome ● Run automated tests ● Like WebStorm (and Vim) Development setup
- 8. Canvas
- 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
- 25. Profiler
- 26. Profiler
- 27. Timeline
- 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
Editor's Notes
- #3: Have you built a page with charts? This will be about graphics and performance. If you have questions – ask right away.
- #4: How many of you have worked with a charts library. Click – features.
- #5: (click) web caught up
- #6: How many of you have worked with a charts library. Click – features.
- #7: Around 140 files of coffeescript GitHub just works Chrome has most robust dev tools.
- #9: Very mathematical. Need to bring your own coordinates. Approx 20 functions
- #10: Only two animations Affects all the objects
- #11: Can be smart about what objects to paint Frame rate is only limited by number of objects visible. Changes are “free”.
- #12: We like to build our own stuff Light usage – libs are fine Core tech – write your own Your use case is always special
- #15: Just upscale the canvas. No way to detect touch zoom. (click) No HW accel beyond 2048
- #16: Safari is – different (click) 100 cpu – input blocked (click) Browser lockups (click) Wierd fixes
- #17: Approx 30% all render to update info popup on every frame Support basic stuff like &lt;i&gt; &lt;b&gt; &lt;u&gt; &lt;br&gt;
- #18: (click) 1 day resulutuin (click) whats #1 support question (click) #2
- #19: Little custom testing script. Approx 160 pages with charts. Test runs
- #20: Working on automated visual diff. Once you have released something, it has to stay the same. Big releases can break things.
- #21: Record pointer events Also record timing information for animations Check image Check events fired by chart
- #23: We spend much of the time figuring out what went wrong.
- #24: Inspect program execution step by step. Set breakpoints
- #25: Can invoke manually by putting debugger in your code.
- #26: Profiler – record what happenes behind the scenes. Flame chart – quick overview.
- #27: Nice to have idle &gt; 50%. Program time goes to DOM processing and rendering. Detailed drilldown on what consumes what. Number of calls would be nice, but not available.
- #28: See what your frame rate is. Marks out possible issues for you. Avoid Dom queries that force re-flow. Like .width.
- #29: Appeared a few years ago. Can do for both Android and IOS (click) A bit tricky to set up on Android, see link.
- #31: (click) Benefits (click) Requirements Typescript? Dart? Flow?
- #35: Customs script – better fine tuning.