More native look and feel of mobile JS applications with HTML5 canvas
0 likes846 views
This document discusses the advantages of using the HTML5 canvas over DOM elements for rendering UI components. It notes that canvas allows rendering many objects with a single interface more easily than DOM, similar to event delegation. Typical use cases for canvas include components with transformed objects and DOM decoration with animations. However, canvas is not always preferable, such as for layouts with advanced content. Frameworks may be needed for sprite handling and other canvas tasks, and resizing assets for different screens can be an issue.
More native look and feel of mobile JS applications with HTML5 canvas
- 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