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

B2bef16d251e5dfe3be5e31182a822b6?s=128

Anne-Gaelle Colom

May 16, 2014
Tweet

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. The  jQuery  Mobile  and  jQuery  UI  Teams    

  5. None
  6. None
  7. The  jQuery  Mobile  Team   Past  and  Present   Past

      Today  
  8. The  jQuery  Mobile  Team   Today  

  9. The  jQuery  UI  Team  

  10. The  jQuery  UI  Team   Today  

  11.  ??  jQuery  UI  ≠  jQuery  Mobile  ??    ??  Touch

     Events  ??  
  12. History  

  13. TIMELINE       goo.gl/Nj2lRw  

  14. Pointer  Events   •  Current  state  with  latest  browsers:  

      – IE11  has  pointer  support   – Safari,  Chrome,  Firefox  and  Opera  have  touch   support  
  15. Code  That  Works  Everywhere  

  16. Code  That  Works  Everywhere   •  Large  and  small  devices

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

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

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

     1.3   •  Working  on  more  responsive  layouts   •  Working  on  responsive  widgets  
  20. Responsive  Widgets  

  21. Responsive  Widgets  

  22. Responsive  Widgets  

  23. Responsive  Widgets  

  24. 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    
  25. 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  
  26. 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    
  27. New  CSS  Framework   •  Useful  with  and  without  JavaScript

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

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

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

    – Just  enhances  the  base  widget   •  Automa9c  ini9aliza9on  for  all  widgets   •  Automa9c  data-­‐a^ribute  parsing  
  31. 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  
  32. Form  Controls   •  Enhancements  for  all  na9ve  controls  

    •  Consistent  styling  for  all  forms   •  More  styling  for  exis9ng  widgets   •  Shared  widgets  between  UI  and  Mobile  
  33. 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  
  34. Upcoming  changes  in  jQuery  UI     •  1.11:  

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

    •  Single  select  only   •  Supports  op9on  groups   •  Demo:  h^p://jsbin.com/firap/11/edit    
  36. 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)  
  37. 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  
  38. 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    
  39. Web  Components   •  Inves9ga9ng  how  to   transi9on  

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

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