Native look and feel of mobile JS interfaces with HTML5 canvas

Transcript

1. More native look and feel with HTML5 canvas Cases, advantages, issues and solutions
2. How to compare DOM and CANVAS? We will use FlashJS engine. It have CANVAS and DOM renderers, so we can launch same code in both ways. flashjs.com
3. Why?
4. Why not HTML? HTML Node - is heavy to render object. • Designed for advanced layouts, sometimes it is useless and harmful • CSS • Legacy properties, logic
5. Why canvas? One DOM interface - unlimited number of objects, so much more easier to render.
6. Why canvas? Using canvas for UI components rendering is very close to event delegation - you delegate not only events but rendering as well.
7. Cases
8. Typical cases Responsible components with transformation of many objects. DOM example CANVAS example
9. Typical cases DOM interface decoration with animated objects. DOM example CANVAS example
10. Typical cases For example - you`ll need to draw timelines like this with DOM. How many DIVs will you need?
11. Your case ?
12. Anti-cases
13. Anticases Small amount of objects without transforms or transitions / animations are enought.
14. Anticases Your objects have to include content with advanced layout.
15. And much more... CANVAS is not a silver bullet for HTML perfomance...
16. Big canvas - bad canvas?
17. Frameworks Probably you`ll need easy to use interfaces for sprites, animations, scales, nested objects and much more, but HTML5 canvas API is too low level thing - you`d better to use frameworks.
18. Canvas UI development issues Because of previous issue - you`ll need batch assets resizing for different screen sizes.
19. Canvas UI development issues Using large universal engines seems to be wrong way sometimes. There is space for your own wheel.
20. Questions ?
21. Thanks =) Denis Radin PixelsCommander.com Special thanks to FlashJS engine - www.flashjs.com