Flash -> html5

Александр Бацуев.AnyChart.Com

AnyChart

http://anychart.com

AnyChart

EcmaScript5 SVG Canvas

Firefox 4 mobile

iOS Safari

Android

Opera Mini

Windows Phone

EcmaScript5 SVG Canvas

Firefox 4 mobile + + +iOS Safari +/- + +

Android +/- - +Opera Mini - + +

Windows Phone - - -

CanvasSVGVector Bitmap

textField.height?

Antialiasing?

Interactivity

DOM Single Element

Redraw all for changesDOM manipulations

Mouse events on any DOM element Mouse events on html element + Math

CanvasSVG

<svg></svg>

Flash

SpriteShape

Graphics

SVG

<g></g><path /><rect />

SVG

document.createElementNS();element.setAttribute();element.appendChild();

Flash. Events

obj.addEventListener();

SVG. Events

group.addEventListener('mouseover', mouseOverHandler);

Redraw?

Clear + Redraw Update DOM

<svg></svg>

JavaScript

AnyChart~800 классов~80 000 LOC

JavaScript

public class ClassName extends ClassB implements ICustom1, ICustom2 {}

Google Closure

Closure LibraryClosure LinterClosure Compiler

Closure sample project

https://github.com/batsuev/closure-sample

Problems?

TESTTTES

Google Chrome + svg

SVG + JavaScriptVS

Flash

1. No binary data API.2. Can’t get screenshot from content.3. textField.editable4. textField.htmlText5. Printing?6. Fullscreen

Simple testtest("a basic test example", function() { ok( true, "this test is fine" ); var value = "hello"; equals( "hello", value, "We expect value to be hello" );});

CI?

PhantomJS

Questions?

Александ Бацуевalex@anychart.com

twitter: alex_batsuevSkype: alex.batsuev

AnyChart.Com