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

jQuery UK 2014 - jQuery UI & jQuery Mobile, Current State and Direction of the Projects

jQuery UK 2014 - jQuery UI & jQuery Mobile, Current State and Direction of the Projects

jQuery UK 2014 - jQuery UI & jQuery Mobile, Current State and Direction of the Projects

Anne-Gaelle Colom

May 16, 2014
Tweet

More Decks by Anne-Gaelle Colom

Other Decks in Technology

Transcript

  1. jQuery  UI  &  jQuery  Mobile,  Current   State  and  Direc9on

     of  the  Projects     jQuery  Oxford  -­‐  May  2014   Anne-­‐Gaelle  Colom  
  2. Anne-­‐Gaëlle  Colom   Senior  Lecturer  at  the   University  of

     Westminster,   London,  UK   Documenta9on  Lead  for   jQuery  Mobile    
  3. Outline   •  The  Teams   •  History  of  the

     projects,  framed  against  the  9meline  of   important  dates  related  to  touch  events   •  Aspira9ons   •  New  Challenges   •  The  Merger  between  jQuery  UI  and  jQuery  Mobile     •  What  that  means  for  you  
  4. Pointer  Events   •  Current  state  with  latest  browsers:  

      – IE11  has  pointer  support   – Safari,  Chrome,  Firefox  and  Opera  have  touch   support  
  5. Code  That  Works  Everywhere   •  Large  and  small  devices

      •  Fast  and  slow  connec9ons   •  Assis9ve  technologies   •  Known  and  unknown  environments  
  6. CSS  Framework   •  Page  layout   •  Responsive  design

      •  New  icons   •  Useful  with  and  without  JavaScript  
  7. CSS  Framework   •  Simpler/cleaner  markup  and  CSS   • 

    Fewer  DOM  manipula9ons   •  Be^er  performance  
  8. Responsive  Design   •  Responsive  grid  added  in  jQuery  Mobile

     1.3   •  Working  on  more  responsive  layouts   •  Working  on  responsive  widgets  
  9. June  2013  -­‐  Time  to  reflect  on  the  past  

    •  Both  projects  were  mature  enough  and  it  was   9me  to  make  them  more  consistent   – Widgets   – CSS  Framework   – Download  Builder    
  10. New  Icons  Challenges   •  No  scalable  image  format  that

     works   everywhere   •  Different  performance  on  desktop  and   mobile   •  Can’t  op9mize  CSS  with  a  client-­‐only   solu9on  
  11. New  Icons  Solu9ons   •  SVG  data-­‐URIs  with  PNG  fallbacks

      •  PNG  as  external  images  and  data-­‐URIs   •  Defaults  to  SVG  +  external  PNG   – unop9mized  CSS,  no  config,  works  everywhere   •  Opt-­‐in  for  be^er  performance   – op9mized  based  on  capabili9es,  requires  config   – Grun9con   •  Looking  into  font  icons    
  12. New  CSS  Framework   •  Useful  with  and  without  JavaScript

      •  Useful  for  prototyping  like  Bootstrap   •  Shared  between  both  projects   •  Preferably  shared  with  other  JS  libraries  
  13. Widgets  That  Work  Everywhere   •  Widget  Factory   – Common

     API  &  Extensibility   •  Pointer  Events   •  CSS  Framework   – Responsive  Design  
  14. Widget  Factory   •  Provides  a  common  API  for  all

     widgets   •  Manages  widget  lifecycle  and  state   •  Manages  event  binding  and  unbinding   •  Provides  extension  points  
  15. Mobile  base  Widget     •  No  more  $.mobile.widget  

    – Just  enhances  the  base  widget   •  Automa9c  ini9aliza9on  for  all  widgets   •  Automa9c  data-­‐a^ribute  parsing  
  16. Mobile  Widgets  Outside  of  Pages   •  Prior  to  jQuery

     Mobile  1.4,  widgets  were   9ghtly  coupled  with  the  page  system   •  Now  all  work  standalone   •  One  step  closer  to  UI/Mobile  merge  
  17. Form  Controls   •  Enhancements  for  all  na9ve  controls  

    •  Consistent  styling  for  all  forms   •  More  styling  for  exis9ng  widgets   •  Shared  widgets  between  UI  and  Mobile  
  18. Upcoming  changes  in  jQuery  Mobile   •  In  1.5:  

    – Depreca9ng  style-­‐related  boolean  op9ons.     – Classes  will  become  an  op9on  in  the  widget   factory  to  set  these  themes  and  classes.   – Widget  reviews  /  code  improvements   •  Page  transi9ons  &  Panel  anima9on   •  Working  towards  widget  merge  with  UI  
  19. Upcoming  changes  in  jQuery  UI     •  1.11:  

    – Dropped  IE7  support   – New  widget:  Selectmenu   – Support  for  AMD  and  Bower   •   Working  towards  widget  merge  with  Mobile  
  20. New  Widget:   Selectmenu   •  Replaces  <select>  elements  

    •  Single  select  only   •  Supports  op9on  groups   •  Demo:  h^p://jsbin.com/firap/11/edit    
  21. Dependency  Management   •  AMD  for  all  jQuery  projects  

    •  Bower  for  all  jQuery  projects   •  Please  only  load  what  you  need   – Note:  jQuery  Mobile  is  adop9ng  jQuery  UI   download  builder  (1.5  release)  
  22. What  does  the  merger  mean  for  you?   •  For

     now:     – Can  use  any  widgets  inside  Mobile   – You  can  develop  one  widget  to  be  used  with  both   jQuery  UI  and  jQuery  Mobile     •  Once  completed  (v  2.0):   – Common  widgets   – Common  CSS  framework   – Common  ThemeRoller  
  23. What  does  the  merger  mean  for  you?   •  Between

     now  and  then?   – Pointer  Events  in  jQuery  UI  and  jQuery  Mobile  via   Pointer  Event  Polyfill  (need  to  bind  to  pointer   events  instead  of  mouse  events  /  vmouse  events)   – Widget  merge  in  both  UI  and  Mobile    
  24. Web  Components   •  Inves9ga9ng  how  to   transi9on  

    •  Making  sure  the   spec  solves  real   problems   •  Not  quite  there  yet  
  25. Thank  you!     •  Anne-­‐Gaelle  Colom  (Anne)   • 

    @agcolom  on  Twi^er   •  I'm  agcolom  on  IRC  and  GitHub