Ditching the Single Page Application (RubyNation 2015)

After 2.5 years of maintaining its single page application, Honeybadger.io switched to PJAX. Learn why we made the decision and how you can get started down the same path.

Presented at RubyNation 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 It’s 4, dummy!
17. StarrHorne
18. StarrHorne Single-­‐page  apps  can  provide   the  illusion  of  speed
19. StarrHorne Oh,  snap.   We  didn’t  really  merge   that  PR x
20. StarrHorne Some  bo@lenecks  can’t  be  avoided   by  tricks
21. StarrHorne Queries  take  0me  to  run
22. StarrHorne Data  processing  also  takes  0me   even  when  offloaded  to  the  client
23. StarrHorne ?
24. StarrHorne We  knew  all  these  things   but  we  sNll  chose  an  SPA  architecture,  originally
25. StarrHorne Over  the  years  that  followed,  our  app  became   Curiouser  and  Curiouser  
26. StarrHorne Did  we  just  build   a  browser   …inside  the  browser?  
27. StarrHorne Has  anyone  seen  the  UI?   I  think  It’s  under  all  these   modals.    
28. StarrHorne So  I’ll  just  add  a   count_since_thursday   field  to  the  API
29. StarrHorne Let’s  go  compile  some   assets,  friend  
30. StarrHorne Twi3er  is   SCIENCE!  
31. StarrHorne What  if  nobody  had  to   write  JS  on  a  daily  basis?
32. StarrHorne Array  +  Object   ==  String   …Makes  sense  
33. StarrHorne
34. StarrHorne
35. StarrHorne So  we  ditched  our  single-­‐page  app  and  rebuilt.   This  0me  with  PJAX.  
36. StarrHorne https://ntotten.com/2012/04/09/building-super-fast-web-apps-with-pjax/ PJAX  combines  server-­‐rendered  HTML   with  Javascript  magic.  
37. StarrHorne An  unassuming  web  page   …li@le  did  they  know  the  secrets  that  lurked  within  
38. StarrHorne
39. StarrHorne
40. StarrHorne
41. StarrHorne PJAX  solves  the  page  reload  boFleneck   …just  like  a  single-­‐page  app  
42. StarrHorne PJAX  lets  you  do  clever  tricks   to  create  the  percep0on  of  speed  
43. StarrHorne PJAX  puts  your  rendering  and  logic  back  in  Ruby   …just  like  old  0mes  
44. StarrHorne What a terrible commit message! PJAX  lets  you  delete  all  that  Javascript.   It  speeds  both  compila0on  &  page  load  
45. StarrHorne With  PJAX  you  ship  faster  
46. StarrHorne Well,  How  do  I  work  this?   How  do  I  get  there?  
47. StarrHorne This  library  is  pre@y  good   hFps:/ /github.com/defunkt/jquery-­‐pjax  
48. StarrHorne Front  End
49. StarrHorne Back  End
50. StarrHorne There’s  another  PJAX  library   It  kind  of  pissed  people  off  
51. StarrHorne
52. StarrHorne Wri0ng  JS  for  pages  that  never  reload   is  a  different  beast  
53. StarrHorne It’s  easy  to  set  traps  for  yourself   without  even  realizing  it  
54. StarrHorne Every  un-­‐scoped  selector     is  like  a  dependency  on  a  global  variable
55. StarrHorne
56. StarrHorne
57. StarrHorne
58. StarrHorne This  is  one  way  to  scope  a  selector
59. StarrHorne By  commiXng  to  one  “global  variable”   you  save  three
60. StarrHorne
61. StarrHorne IniNalizaNon  is  slightly  different
62. StarrHorne
63. StarrHorne
64. StarrHorne It’s  helpful  to  think  in  terms  of  components   No  maFer  what  component  system  you  use  
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 ] Scope  JS  to  HTML  0ghtly   This  is  the  secret  
70. StarrHorne
71. StarrHorne
72. StarrHorne When  you  master  these  things   you  will  eliminate  conflict  from  your  Javascript  
73. StarrHorne You  had  the  power     all  along