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: TrialSupportBuy
- 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
ZoomCharts at DevClub.lv: Developing a Javascript SDK
1.
2.
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
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
34. Custom build script
● Compile
● Minify
● Extract documentation
● Embed customer data
Building
Notas del editor
Have you built a page with charts?
This will be about graphics and performance.
If you have questions – ask right away.
How many of you have worked with a charts library.
Click – features.
(click) web caught up
How many of you have worked with a charts library.
Click – features.
Around 140 files of coffeescript
GitHub just works
Chrome has most robust dev tools.
Very mathematical.
Need to bring your own coordinates.
Approx 20 functions
Only two animations
Affects all the objects
Can be smart about what objects to paint
Frame rate is only limited by number of objects visible. Changes are “free”.
We like to build our own stuff
Light usage – libs are fine
Core tech – write your own
Your use case is always special
Just upscale the canvas.
No way to detect touch zoom.
(click) No HW accel beyond 2048
Safari is – different
(click) 100 cpu – input blocked
(click) Browser lockups
(click) Wierd fixes
Approx 30% all render to update info popup on every frame
Support basic stuff like <i> <b> <u> <br>
(click) 1 day resulutuin
(click) whats #1 support question
(click) #2
Little custom testing script.
Approx 160 pages with charts.
Test runs
Working on automated visual diff.
Once you have released something, it has to stay the same.
Big releases can break things.
Record pointer events
Also record timing information for animations
Check image
Check events fired by chart
We spend much of the time figuring out what went wrong.
Inspect program execution step by step.
Set breakpoints
Can invoke manually by putting debugger in your code.
Profiler – record what happenes behind the scenes.
Flame chart – quick overview.
Nice to have idle > 50%.
Program time goes to DOM processing and rendering.
Detailed drilldown on what consumes what.
Number of calls would be nice, but not available.
See what your frame rate is.
Marks out possible issues for you.
Avoid Dom queries that force re-flow. Like .width.
Appeared a few years ago.
Can do for both Android and IOS
(click) A bit tricky to set up on Android, see link.