Ditching the Single Page Application - Madison+Ruby 2015

Transcript

1. Ditching  the  Single  Page  Applica0on                                              by  Starr  Horne                                                 And me! Evil Starr!
2. Ditching  the  Single  Page  Applica0on                                              by  Starr  Horne                                                 And me! Evil Starr!
3. StarrHorne
4. StarrHorne
5. StarrHorne
6. StarrHorne
7. StarrHorne
8. StarrHorne
9. StarrHorne Tradi0onal  app:     Every  page  is  a  new  HTTP  request  
10. StarrHorne Single  page  app:     All  data  retrieved  by  Ajax  and  rendered  client  side  
11. StarrHorne PJAX/Turbolinks:     Best  of  both  worlds? BOO!  Turbolinks   Sucks!  I  tried  it  one   morning  
12. StarrHorne
13. StarrHorne
14. StarrHorne Spin  the     boFle-­‐neck  
15. StarrHorne
16. StarrHorne
17. StarrHorne It’s 4, dummy!
18. StarrHorne
19. StarrHorne Single-­‐page  apps  can  provide   the  illusion  of  speed
20. StarrHorne Oh,  snap.   We  didn’t  really  merge   that  PR x
21. StarrHorne Some  bo@lenecks  can’t  be  avoided   by  tricks
22. StarrHorne Queries  take  0me  to  run
23. StarrHorne Data  processing  also  takes  0me   even  when  offloaded  to  the  client
24. StarrHorne ?
25. StarrHorne We  knew  all  these  things   but  we  sNll  chose  an  SPA  architecture,  originally
26. StarrHorne Over  the  years  that  followed,  our  app  became   Curiouser  and  Curiouser  
27. StarrHorne Did  we  just  build   a  browser   …inside  the  browser?  
28. StarrHorne Has  anyone  seen  the  UI?   I  think  It’s  under  all  these   modals.    
29. StarrHorne So  I’ll  just  add  a   count_since_thursday   field  to  the  API
30. StarrHorne Let’s  go  compile  some   assets,  friend  
31. StarrHorne Twi3er  is   SCIENCE!  
32. StarrHorne What  if  nobody  had  to   write  JS  on  a  daily  basis?
33. StarrHorne Array  +  Object   ==  String   …Makes  sense  
34. StarrHorne
35. StarrHorne
36. StarrHorne So  we  ditched  our  single-­‐page  app  and  rebuilt.   This  0me  with  PJAX.  
37. StarrHorne https://ntotten.com/2012/04/09/building-super-fast-web-apps-with-pjax/ PJAX  combines  server-­‐rendered  HTML   with  Javascript  magic.  
38. StarrHorne An  unassuming  web  page   …li@le  did  they  know  the  secrets  that  lurked  within  
39. StarrHorne
40. StarrHorne
41. StarrHorne
42. StarrHorne PJAX  solves  the  page  reload  boFleneck   …just  like  a  single-­‐page  app  
43. StarrHorne PJAX  lets  you  do  clever  tricks   to  create  the  percep0on  of  speed  
44. StarrHorne PJAX  puts  your  rendering  and  logic  back  in  Ruby   …just  like  old  0mes  
45. StarrHorne What a terrible commit message! PJAX  lets  you  delete  all  that  Javascript.   It  speeds  both  compila0on  &  page  load  
46. StarrHorne With  PJAX  you  ship  faster  
47. StarrHorne Well,  How  do  I  work  this?   How  do  I  get  there?  
48. StarrHorne This  library  is  pre@y  good   hFps:/ /github.com/defunkt/jquery-­‐pjax  
49. StarrHorne Front  End
50. StarrHorne Back  End
51. StarrHorne There’s  another  PJAX  library   It  kind  of  pissed  people  off  
52. StarrHorne
53. StarrHorne Wri0ng  JS  for  pages  that  never  reload   is  a  different  beast  
54. StarrHorne It’s  easy  to  set  traps  for  yourself   without  even  realizing  it  
55. StarrHorne Every  un-­‐scoped  selector     is  like  a  dependency  on  a  global  variable
56. StarrHorne
57. StarrHorne
58. StarrHorne It’s  helpful  to  think  in  terms  of  components   No  maFer  what  component  system  you  use  
59. StarrHorne This  is  one  way  to  scope  a  selector
60. StarrHorne By  commiYng  to  one  “global  variable”   you  save  three
61. StarrHorne
62. StarrHorne ] Scope  JS  to  HTML  0ghtly   This  is  the  secret  
63. StarrHorne
64. StarrHorne
65. StarrHorne Use  a  naming  conven0on  for  your  components   That  way  you  know  what  they  are  
66. StarrHorne
67. StarrHorne Ini0alize  components  when  the  container  is  detected   Don’t  iniNalize  them  manually  
68. StarrHorne
69. StarrHorne When  you  master  these  things   you  will  eliminate  conflict  from  your  Javascript  
70. StarrHorne You  had  the  power     all  along
71. StarrHorne Want  more  details  &  fewer  hand  waves?   There’s  a  blog  post  coming.  @StarrHorne