Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Native look and feel of mobile JS interfaces with HTML5 canvas

Dd3f18c87b851137000c7427d7bd5d32?s=47 fwdays
March 05, 2013

Native look and feel of mobile JS interfaces with HTML5 canvas

Dd3f18c87b851137000c7427d7bd5d32?s=128

fwdays

March 05, 2013
Tweet

More Decks by fwdays

Other Decks in Programming

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