0
I Can’t
Believe It’s
Not Flash!


@thomasfuchs
<omg  code="on  slides"/>
Animating CSS properties
    Timer




JavaScript   Reflow   Rendering   Paint
 sets CSS
Animating CSS properties
    Timer




JavaScript   Reflow   Rendering   Paint
 sets CSS
Performance hit
Performance hit




JavaScript      Reflow   Rendering   Paint
Performance hit




JavaScript      Reflow   Rendering   Paint
Performance hit




JavaScript      Reflow   Rendering   Paint
Performance hit




JavaScript      Reflow   Rendering   Paint
Performance hit




JavaScript      Reflow   Rendering   Paint
Browser CSS animation/
        transitions

  Timer




Browser   Reflow   Rendering   Paint
updates
  CSS
Timer




JavaScript   Reflow   Rendering   Paint
 sets CSS

   Timer




Browser      Reflow   Rendering   Paint
updates
  ...
Timer




JavaScript   Reflow   Rendering   Paint
 sets CSS

   Timer




Browser      Reflow   Rendering   Paint
updates
  ...
-webkit-transform




                Paint

JavaScript
or Browser
 sets CSS
<!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐trans...
       #d2  {
            left:  100px;  top:  30px;  width:  150px;  height:  100px;
            -­‐webkit-­‐transform:tr...
Safari on Snow Leopard,
or on Windows: Nokia’s Starlight
        browser (alpha)
  http://www.starlight-webkit.org/
http://pepsicozeitgeist.com/
Fullscreen HD Video CPU%

         HTML5: 10%

        FLASH: 100+%
         (and dropped frames)



http://jilion.com/sub...
Canvas
    Timer




JavaScript            Paint
   uses
 Canvas
   APIs
Physics engine
           with Canvas
         Timer




  1) clear canvas                    Paint
2) physics iteration
 ...
function  createBall(world,  x,  y)  {
    var  ballSd  =  new  b2CircleDef();
    ballSd.density  =  0.3;
    ballSd.radi...
                   world.Step(ms,1);
3) draw shapes



 box2d
objects/
positions



                  canvas
http://pepsicozeitgeist.com/
Vector graphics
               SVG + VML




JavaScript    Reflow   Rendering   Paint
  creates
  vector
 graphics
  nodes
http://raphaeljs.com/
<path  fill="none"  stroke="#5cbfff"  
d="M52.2,40.5L47.23,55.5L38.53,70.5L33.88,85.5L36.63,100.5L50.1
,115.5L70.7,130.5L9...
http://pepsicozeitgeist.com/
WebGL


shaders


    Timer




JavaScript           Paint
WebGL
<script  id="vshader"  type="x-­‐shader/x-­‐vertex">
    uniform  mat4  u_modelViewMatrix;
    uniform  mat4  u_mode...
   var  exampleScene  =  scene(
        {},

        /*  A  renderer  node  binds  subnodes  to  a  WebGL  canvas  element...
http://github.com/OneGeek/WebGLU
http://learningwebgl.com/
http://ftp.mozilla.org/pub/mozilla.org/
      firefox/nightly/latest-trunk/
JavaScript & CSS
CSS Transforms & Animations
   2D bitmapped graphics
      Physics engines
      Vector graphics
        ...
THANKS!



@thomasfuchs
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Upcoming SlideShare
Loading in...5
×

I Can't Believe It's Not Flash

74,056

Published on

My talk at Webstock 2010 about up and coming open web technologies.

Published in: Technology, Art & Photos
18 Comments
91 Likes
Statistics
Notes
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
    ONLY THREE DAYS TO VOTE IN THE CONTEST!.. VOTING ENDS NOV.29/10..
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·. .
    Hello My Friend ♥
    ☀ We would very much appreciate if you would kindly take the time to view & vote for Doina’s two shows http://www.slideshare.net/doina/end-of-life-presentation-horror-story-contest-slideshare-2010 http://www.slideshare.net/doina/andante-slideshare-2010
    The shows are now on videos so you don’t have to download .. Thank you very much and enjoy a wonderful day ..
    Spiderwebb99 on Slideshare .. Vanessa ♥
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

  •    Reply 
    Are you sure you want to  Yes  No
    Your message goes here

  •    Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • HTML5 vs Flash, it is really a funny war. From mashable votes, more people like HTML5 more than Flash. Flash is No.1 animation technology in the market for a long time. Now it is time to choose another big boss!
    G

    http://www.tophotdeal.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
74,056
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
682
Comments
18
Likes
91
Embeds 0
No embeds

No notes for slide

Transcript of "I Can't Believe It's Not Flash"

  1. 1. I Can’t Believe It’s Not Flash! @thomasfuchs
  2. 2. <omg  code="on  slides"/>
  3. 3. Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
  4. 4. Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
  5. 5. Performance hit
  6. 6. Performance hit JavaScript Reflow Rendering Paint
  7. 7. Performance hit JavaScript Reflow Rendering Paint
  8. 8. Performance hit JavaScript Reflow Rendering Paint
  9. 9. Performance hit JavaScript Reflow Rendering Paint
  10. 10. Performance hit JavaScript Reflow Rendering Paint
  11. 11. Browser CSS animation/ transitions Timer Browser Reflow Rendering Paint updates CSS
  12. 12. Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
  13. 13. Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
  14. 14. -webkit-transform Paint JavaScript or Browser sets CSS
  15. 15. <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en"  lang="en"> <head>    <meta  http-­‐equiv="Content-­‐Type"  content="text/html;  charset=utf-­‐8"/>    <title>index</title>    <style  type="text/css"  media="screen">        div  {            position:  absolute;            border:  3px  solid  red;        }        #d1  {            left:  20px;  top:  20px;  width:  400px;  height:  400px;            -­‐webkit-­‐transform:translateZ(0px);        }        #d2  {            left:  100px;  top:  30px;  width:  150px;  height:  100px;            -­‐webkit-­‐transform:translateZ(-­‐100px);        }        #d3  {            left:  300px;  top:  40px;  width:  100px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐200px);        }        #d4  {            left:  320px;  top:  80px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐300px);        }        #d5  {            left:  280px;  top:  90px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐400px);        }        body  {            -­‐webkit-­‐transform-­‐style:  preserve-­‐3d;
  16. 16.        #d2  {            left:  100px;  top:  30px;  width:  150px;  height:  100px;            -­‐webkit-­‐transform:translateZ(-­‐100px);        }        #d3  {            left:  300px;  top:  40px;  width:  100px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐200px);        }        #d4  {            left:  320px;  top:  80px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐300px);        }        #d5  {            left:  280px;  top:  90px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐400px);        }        body  {            -­‐webkit-­‐transform-­‐style:  preserve-­‐3d;            -­‐webkit-­‐transform:rotateX(0deg)  rotateY(0deg)  rotateZ(0deg)  perspective(0);        }        body.stage2  {            -­‐webkit-­‐transition:  -­‐webkit-­‐transform  10s;            -­‐webkit-­‐transform:rotateX(30deg)  rotateY(-­‐50deg)  rotateZ(10deg)  perspective(0);        }    </style> </head> <body>    <div  id="d1"></div>    <div  id="d2"></div>    <div  id="d3"></div>    <div  id="d4"></div>    <div  id="d5"></div> </body> </html>
  17. 17. Safari on Snow Leopard, or on Windows: Nokia’s Starlight browser (alpha) http://www.starlight-webkit.org/
  18. 18. http://pepsicozeitgeist.com/
  19. 19. Fullscreen HD Video CPU% HTML5: 10% FLASH: 100+% (and dropped frames) http://jilion.com/sublime/video
  20. 20. Canvas Timer JavaScript Paint uses Canvas APIs
  21. 21. Physics engine with Canvas Timer 1) clear canvas Paint 2) physics iteration 3) draw shapes Box2D physics engine
  22. 22. function  createBall(world,  x,  y)  {    var  ballSd  =  new  b2CircleDef();    ballSd.density  =  0.3;    ballSd.radius  =  20+Math.random()*20;    ballSd.restitution  =  0.1;    ballSd.friction  =  0.2;    var  ballBd  =  new  b2BodyDef();    ballBd.rotation  =  0.3;    ballBd.AddShape(ballSd);    ballBd.position.Set(x,y);    return  world.CreateBody(ballBd); }
  23. 23.                    world.Step(ms,1);
  24. 24. 3) draw shapes box2d objects/ positions canvas
  25. 25. http://pepsicozeitgeist.com/
  26. 26. Vector graphics SVG + VML JavaScript Reflow Rendering Paint creates vector graphics nodes
  27. 27. http://raphaeljs.com/
  28. 28. <path  fill="none"  stroke="#5cbfff"   d="M52.2,40.5L47.23,55.5L38.53,70.5L33.88,85.5L36.63,100.5L50.1 ,115.5L70.7,130.5L97.85,145.5L123.65,160.5L139.3,175.5L126.2,19 0.5L132.95,205.5L157.58,220.5L143.85,235.5L155.25,250.5L151.43, 265.5L149.05,280.5L104.5,295.5L103.6,310.5L97.85,325.5L94.58,34 0.5L86.7,355.5L78.95,370.5L69.35,385.5M56.4,440.5L42.3,455.5L32 .93,470.5L26.38,485.5L28.23,500.5L28.95,515.5L40.45,530.5L57.55 ,545.5L80.18,560.5L123.55,575.5L144.95,590.5L137.33,605.5L134.9 8,620.5L149.7,635.5L162.73,650.5L142.83,665.5L164.2,680.5L106.2 5,695.5L97.28,710.5L88.75,725.5L90.83,740.5L87.15,755.5L85.15,7 70.5L62.55,785.5M52.78,840.5L41.5,855.5L33.1,870.5L22.38,885.5L 25.63,900.5L24.05,915.5L33.05,930.5L48.3,945.5L65.35,960.5L115. 2,975.5L137.7,990.5L136.43,1005.5L102.28,1020.5L132.28,1035.5L1 37.5,1050.5L132.05,1065.5L155.83,1080.5L107.3,1095.5L95.98,1110 .5L94.73,1125.5L94.65,1140.5L86.25,1155.5L83.4,1170.5L70.48,118 5.5M58.6,1240.5L43.38,1255.5L33.35,1270.5L28.43,1285.5L29.05,13 00.5L38.43,1315.5L51.35,1330.5L82.38,1345.5L105.73,1360.5L159.7 8,1375.5L176.05,1390.5L164.13,1405.5L139.48,1420.5L131.53,1435. 5L164.83,1450.5L161.15,1465.5L157.2,1480.5L112.68,1495.5L105.68 ,1510.5L103.83,1525.5L104.25,1540.5L92.5,1555.5L91.35,1570.5L70 .48,1585.5M54.05,1640.5L48.6,1655.5L35.02,1670.5L32.8,1685.5L36 .98,1700.5L41.75,1715.5L63.78,1730.5L90.6,1745.5L112.28,1760.5L 161.35,1775.5L171.2,1790.5L180.43,1805.5L171.88,1820.5L168.65,1 835.5L153.88,1850.5L148.35,1865.5L140.28,1880.5L110.2,1895.5L10 4.68,1910.5L101.2,1925.5L96.7,1940.5L96.5,1955.5L80.08,1970.5L6 8.4,1985.5M54.8,2040.5L41.23,2055.5L35.85,2070.5L30.15,2085.5L3
  29. 29. http://pepsicozeitgeist.com/
  30. 30. WebGL shaders Timer JavaScript Paint
  31. 31. WebGL <script  id="vshader"  type="x-­‐shader/x-­‐vertex">    uniform  mat4  u_modelViewMatrix;    uniform  mat4  u_modelViewProjMatrix;    uniform  mat4  u_normalMatrix;    uniform  vec3  lightDir;    attribute  vec3  vNormal;    attribute  vec4  vTexCoord;    attribute  vec4  vPosition;                    varying  float  v_Dot;    varying  vec2  v_texCoord;                    void  main()    {        gl_Position  =  u_modelViewProjMatrix  *  vPosition;        v_texCoord  =  vTexCoord.st;        vec4  transNormal  =  u_normalMatrix  *  vec4(vNormal,1);        v_Dot  =  max(dot(transNormal.xyz,  lightDir),  0.0);    } </script>
  32. 32.    var  exampleScene  =  scene(        {},        /*  A  renderer  node  binds  subnodes  to  a  WebGL  canvas  element              defined  in  the  HTML  tab  then  clears  the  depth  and  colour  buffers          */        renderer({                                canvasId:  'theCanvas',                                clear  :  {  depth  :  true,  color  :  true}                        },                /*  A  simple  phong  GLSL  shader  to  render  sub-­‐nodes,  with                      a  single  light  source.  This  shader  type  only  supports                      a  one  light  source.                  */                shader(                    {  type:  'simple-­‐shader'  },                    lights( scenejs.org                        {                            lights:  [                                {                                    pos:  {  x:  -­‐30.0,  y:  30.0,  z:  -­‐30.0  }                                }                            ]},                        /*  Perspective  transformation                          */
  33. 33. http://github.com/OneGeek/WebGLU
  34. 34. http://learningwebgl.com/
  35. 35. http://ftp.mozilla.org/pub/mozilla.org/ firefox/nightly/latest-trunk/
  36. 36. JavaScript & CSS CSS Transforms & Animations 2D bitmapped graphics Physics engines Vector graphics HTML5 video WebGL
  37. 37. THANKS! @thomasfuchs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×