Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ZoomCharts at DevClub.lv: Developing a Javascript SDK

532 views

Published on

On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.

Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.

What is ZoomCharts?

What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:

- Interactive
- Fast
- Touch enabled
- Supports big data

A long time ago

DOS 6.2 allowed for:

- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance

Today, the Web has finally caught up in the graphics department. Now, we have access to:

- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device

Development setup:

- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)

Graphics:

Canvas (fast)
SVG (slow)
WebGL (>50%)

Interactive animations:

Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.

Graceful degradation:

High FPS (frames per second) lets you scale graphics with low image degradation.

Third party libraries:

- Raphael
- Hammer.js
- Leaflet
- Moment.js

Challenges:

- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps

Support:

- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…

Testing:

- Automated tests on every GIT push

Automatically:

- Compare images
- Record performance
- View errors in console

Interactive testing:

- Next step: record and playback

BrowserStack:

- Interactive mode
- Automated: Selenium API

Debugging:

Chrome Developer tools (F12)

- Debugging
- Profiling
- Timeline

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

Future:

- More charts
- Extension API
- Memory allocation tracking
- WebGL

We are looking for statically-typed language:

- Error checking
- Performance
- Superior minification

- Easy to write and read
- Easy to call from JS

Building

Custom build script:

- Compile
- Minify
- Extract documentatio

Published in: Software
  • Be the first to comment

  • Be the first to like this

ZoomCharts at DevClub.lv: Developing a Javascript SDK

  1. 1. NOT another HTML5 charts library ● Interactive ● Fast ● Touch ● Big Data What is ZoomCharts
  2. 2. 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
  3. 3. Graphics Challenges Quality assurance Overview
  4. 4. ● We write in Coffeescript ● Commit to GITHub ● Build system in Javascript ● Debug in Chrome ● Run automated tests ● Like WebStorm (and Vim) Development setup
  5. 5. Canvas (fast) SVG (slow) Graphics WebGL (<50%)
  6. 6. Canvas
  7. 7. Interactive animations
  8. 8. Graceful degradation
  9. 9. ● Raphael ● Hammer.js ● Leaflet ● Moment.js Third party libraries
  10. 10. ● Responsive design ● Big screen resolutions ● Safari ● HTML on canvas Challenges
  11. 11. Nice layout Not so nice Responsive design
  12. 12. Big Screen Resolution Use devicePixelRatio for sharp rendering No hardware acceleration beyond 2048x2048
  13. 13. ● 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
  14. 14. HTML on canvas ● DOM is SLOW ● Parse basic HTML markup and render manually ● Text caching helps
  15. 15. ● Trial → support → buy ● 1 day issue resolution ● #1Tell me what I did wrong ● #2 Can you do ... Support
  16. 16. Automated tests on every GIT push Testing
  17. 17. Automatically: ● Compare images ● Record performance ● Errors in console Testing
  18. 18. ● Next step – record and playback Interactive testing
  19. 19. ● Interactive mode ● Automated – Selenium API BrowserStack
  20. 20. Chrome Dev tools (F12) ● Debugging ● Profiling ● Timeline Debugging
  21. 21. Debugger
  22. 22. Debugger if (bad_stuff){ debugger; }
  23. 23. Profiler
  24. 24. Profiler
  25. 25. Timeline
  26. 26. Remote debugging https://developer.chrome.com/devtools/docs/remote-debugging
  27. 27. ● More charts ● Extension API ● Memory allocation tracking ● WebGL Future
  28. 28. We are looking for a statically typed language: ● Error checking ● Performance ● Superior minification ● Easy to write and read ● Easy to call from JS Future
  29. 29.   Feedback
  30. 30. Sponsors of XXVI DevClub.lv
  31. 31. Custom build script ● Compile ● Minify ● Extract documentation ● Embed customer data Building

×