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

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    
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