Click here to load reader

Web$ . with.chameRIAbed-con.org/images/files/bed2011/bed2011-chameria.pdf · PDF file About.me.! [email protected],. Berlin – Member’of’the’Innovaon’Competence’Center’!

  • View
    1

  • Download
    0

Embed Size (px)

Text of Web$ . with.chameRIAbed-con.org/images/files/bed2011/bed2011-chameria.pdf · PDF file...

  • Web-­‐Technologies  for  the  desktop   with  chameRIA     Daniel  Bremer-­‐Tonn   akquinet  AG  

  • About  me  

    ¡  Senior  So=ware  Engineer  at  akquinet  [email protected],   Berlin   –  Member  of  the  Innova;on  Competence  Center  

    ¡  Points  of  interests  :     –  JEE  based  Enterprise-­‐Applica;ons   –  Advanced  Build  process  with  Maven   –  Web  technologies  such  as  HTML5/JS  

    2  

  • About  me  

    ¡  Senior  So=ware  Engineer  at  akquinet  [email protected],   Berlin   –  Member  of  the  Innova;on  Competence  Center  

    ¡  Points  of  interests  :     –  JEE  based  Enterprise-­‐Applica;ons   –  Advanced  Build  process  with  Maven   –  Web  technologies  such  as  HTML5/JS  

    3  

  • Java  /  JEE  

    ConsulIng  

    Development  

    IntegraIon  

    JBoss  

    OSGi  UI  Design  

    Web  Portals  Modular  Systems  

    Trainings  

    Mobile  Systems  

    Android  

    Open  Source  

    User  Experience  

    Who  are  we?  

  • Java  /  JEE  

    ConsulIng  

    Development  

    IntegraIon  

    JBoss  

    OSGi  UI  Design  

    Web  Portals  Modular  Systems  

    Trainings  

    Mobile  Systems  

    Android  

    Open  Source  

    User  Experience  

    Who  are  we?  

     hRp://blog.akquinet.de    

  • Roadmap  for  today  ...  

    6  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    §  From  Desktop  to  Web  

    §  All  the  hype  about  HTML(5)  

    §  From  Web  to  Desktop  back  again  

       ...  with  chameRIA    

  • From  Desktop  to  Web  

    7  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    NaIve  applicaIons  on  the  desktop  ...    

    Every  applica;on  on  the  same  OS  “Looks  &  Feels“  the  same      

                           ...  at  least  they  should  

  • From  Desktop  to  Web  

    8  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    NaIve  applicaIons  on  the  desktop  ...     §  are  wriZen  in  naIve  code,  depending  on  the  underlying  OS    

    §  are  hard  to  migrate  to  a  different  OS   §  have  different  Look  &  Feel  on  different  OS  pla]orms  

  • From  Desktop  to  Web  

    9  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    Cross  pla\orm  applicaIons  ...     §  Java  (AWT,  Swing,  SWT)   §  QT   §  GTK+  

  • From  Desktop  to  Web  

    10  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    NaIve  or  cross  pla\orm  …     §  The  App  has  to  be  installed  on  every  desktop  computer  

    §  Hard  to  deploy  to  a  large  cluster   §  Hard  to  maintain  and  update    

  • From  Desktop  to  Web  

    11  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    Web  ApplicaIons  …     §  Only  one  App  to  be  installed  …  The  Browser   §  Rollout,  Maintenance  and  Upda;ng  is  centralized   §  Server  based  architecture  

    …  Real  pla\orm  independency,  only  a  Browser  is  required    

  • From  Desktop  to  Web  

    12  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    Web  ApplicaIons  …     §  At  the  beginning  HTML  was  quite  limited   §  Web  2.0  introduced  “desktop  like  feeling”  (Javascript,  Ajax  …)  

    §  HTML5  introduced  new  hype  about  the  web  

  • All  the  hype  about  HTML5  

    13  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    CSS3 JS HTML5

  • HTML  -­‐  Features  

    14  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    MulImedia   3D,  Graphics  &  Effects  

    Offline  &  Storage  

    Connec;vity  

    Performance  &  Integra;on  

    CSS3  

    Seman;cs  

    Device  Access  

  • HTML  -­‐  MulImedia  

    15  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    ... ...

  • HTML  -­‐  Canvas  

    16  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    ... var cvs = document.getElementById('myCanvas'); Var context = b_canvas.getContext("2d"); context.fillRect(50, 25, 150, 100);

    h,p://benfirshman.com/projects/jsnes/   h,p://www.zynaps.com/jslab.xml?id=envmap    

  • HTML  -­‐  WebGL  

    17  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    §  Based  on  OpenGL  ES  2     §  Low  Level  3D  Graphics  API   §  Accessible  via    and    

    Javascript      

    ... var cvs = document.getElementById('myCanvas'); Var gl = b_canvas.getContext(“webgl");

    h,p://bodybrowser.googlelabs.com  

  • HTML  –  Offline  &  Storage  

    18  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    §  Applica;on  Cache   §  Online  /  Offline  Events   §  Local  Storage   §  Web  SQL  und  Indexed  Database   §  File  API  

  • HTML  –  ConnecIvity  &  RealIme  

    19  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    Half-­‐Duplex  CommunikaIon  (HTTP)   §  Request/Response  PaZern  

    Full-­‐Duplex  CommunicaIon  (Workarounds)   §  Polling  /  Push  Technologies    

    Real  Bi-­‐direc;onal  communica;on  with  WebSockets     §  Socket-­‐Connec;on  between  Browser  and  Server   §  Low  Latency  (Mul;player  Games,  Chats,  Ticker,  Social  Networks  ...)  

    But  requires  :   §  Client-­‐Implementa;on  (Browser)   §  Server-­‐Implemen;erung  (JeZy,  Socket.IO  -­‐  Java  Servlet  Implemen;ons,  ...)  

  • Javascript  –  Performance  &  IntegraIon  

    20  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    Background  tasks     §  Javascript  in  the  browser  is  single  threaded   §  Geqng  asynchronous  

    §  setTimeout(), setInterval(), XMLHttpRequest (Ajax)  

                     

    Real  concurrency  with  Web  Workers  

  • CSS  –  CSS3  Styling  

    21  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    §  TransiIons  und  Transforms   /** Transitions */ #content { -webkit-transition: margin-left 1s ease-in-out; -moz-transition: margin-left 1s ease-in-out; -o-transition: margin-left 1s ease-in-out; } /** Transforms */ .rotate-45 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); }

  • CSS  –  CSS3  Styling  

    22  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    §  AnimaIons   @-webkit-keyframes pulse { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; } } div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; }

  • HTML  –  Device  Access  

    23  08.04.11  Copyright  ©  2011  –  akquinet  AG  

    Direct  access  to  different  hardware-­‐features     §  Geoloca;on   §  Hardware  sensors  

    // GeoLocation var handler = functio

Search related