от Flash к html5. александр бацуев. зал 4

1,119 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,119
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

от Flash к html5. александр бацуев. зал 4

  1. 1. Flash -> html5 Александр Бацуев . AnyChart.Com
  2. 2. AnyChart http://anychart.com
  3. 3. AnyChart
  4. 4. EcmaScript5 SVG Canvas Firefox 4 mobile iOS Safari Android Opera Mini Windows Phone
  5. 5. EcmaScript5 SVG Canvas Firefox 4 mobile + + + iOS Safari +/- + + Android +/- - + Opera Mini - + + Windows Phone - - -
  6. 6. Canvas SVG Vector Bitmap
  7. 7. textField.height? Antialiasing?
  8. 8. Interactivity DOM Single Element Redraw all for changes DOM manipulations Mouse events on any DOM element Mouse events on html element + Math Canvas SVG
  9. 9. <svg></svg>
  10. 10. Flash Sprite Shape Graphics
  11. 11. SVG <g></g> <path /> <rect />
  12. 12. SVG document.createElementNS(); element.setAttribute(); element.appendChild();
  13. 13. Flash. Events obj.addEventListener();
  14. 14. SVG. Events group.addEventListener('mouseover', mouseOverHandler);
  15. 15. Redraw? Clear + Redraw Update DOM <svg></svg>
  16. 16. JavaScript AnyChart ~800 классов ~ 80 000 LOC
  17. 17. JavaScript public class ClassName extends ClassB implements ICustom1, ICustom2 { }
  18. 18. Google Closure Closure Library Closure Linter Closure Compiler
  19. 19. Closure sample project https://github.com/batsuev/closure-sample
  20. 20. Problems?
  21. 21. Google Chrome + svg TEST T TES
  22. 22. SVG + JavaScript VS Flash
  23. 23. <ul><li>No binary data API. </li></ul><ul><li>Can’t get screenshot from content. </li></ul><ul><li>textField.editable </li></ul><ul><li>textField.htmlText </li></ul><ul><li>Printing? </li></ul><ul><li>Fullscreen </li></ul>
  24. 24. Simple test test(&quot;a basic test example&quot;, function() { ok( true, &quot;this test is fine&quot; ); var value = &quot;hello&quot;; equals( &quot;hello&quot;, value, &quot;We expect value to be hello&quot; ); });
  25. 25. CI? PhantomJS
  26. 26. Questions? Александ Бацуев [email_address] twitter: alex_batsuev Skype: alex.batsuev AnyChart.Com

×