от flash к html5. александр бацуев. зал 4
DESCRIPTION
TRANSCRIPT
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