NOT another HTML5 charts library● Interactive● Fast ● Touch● Big Data

What is ZoomCharts

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

Graphics

Challenges

Quality assurance

Overview

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

Development setup

Canvas

(fast)SVG

(slow)

Graphics

WebGL(<50%)

Canvas

Interactive animations

Graceful degradation

● Raphael● Hammer.js● Leaflet● Moment.js

Third party libraries

● Responsive design● Big screen resolutions● Safari● HTML on canvas

Challenges

Nice layout Not so nice

Responsive design

Big Screen Resolution

Use devicePixelRatio for sharp rendering

No hardware acceleration beyond 2048x2048

● 100% cpu → input events blocked● Weird browser lockups● Dumb code fixes stuff:

width = r1 - r0if r0 + r1 == -2 r0 = 0 r1 = 0context.beginPath()

Safari

HTML on canvas

● DOM is SLOW● Parse basic HTML markup and render manually● Text caching helps

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

Support

Automated tests on every GIT push

Testing

Automatically:● Compare images● Record performance● Errors in console

Testing

● Next step –

record and playback

Interactive testing

● Interactive

mode● Automated

– Selenium API

BrowserStack

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

Debugging

Debugger

Debugger

if (bad_stuff){ debugger;}

Profiler

Profiler

Timeline

Remote debugging

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

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

Future

We are looking for a statically typed language:● Error checking● Performance● Superior minification

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

Future

Feedback

Sponsors of XXVI DevClub.lv

Custom build script● Compile● Minify● Extract documentation● Embed customer data

Building