Embrace the backend - Laracon 2018

This talk is for Laravel/Vue hybrid Vue developers. By jumping into single file Vue components, we completely stopped using Blade. When we did this, we introduced a whole new, potentially unnecessary, level of complexity into our applications. The goal of this talk is to salvage some of the power we had before with Blade, but still leverage Vue.js on the front-end.

Transcript

1. Embrace the backend
2. I’m Caleb
3. I’m Caleb
4. I’m Caleb
5. I’m Caleb
6. A long long time ago…
10. Then everything changed…
12. RIP Blade :(
13. Before .vue
14. After .vue
15. After .vue
16. After .vue
17. After .vue
18. And worst of all…
19. Passing Tests
20. The belly of the beast
23. Tweet Input
24. Tweet Input Fresh Tweets
25. Tweet Input Fresh Tweets ICYMI Tweets
31. props data created computed methods UI Server
32. props data created computed methods UI Server
33. props data created computed methods UI Server
34. props data created computed methods UI Server
35. props data created computed methods UI Server
36. props data created computed methods UI Server
37. props data created computed methods UI Server
38. props data created computed methods UI Server
39. props data created computed methods UI Server
40. props data created computed methods UI Server
41. It felt so right
42. I was scared of my frontend
43. How do we do better?
44. How do we do better? •Javascript be.er
45. How do we do better? •Javascript be.er Form objects
46. How do we do better? •Javascript be.er Axios Interceptors Form objects
47. How do we do better? •Javascript be.er Vuex Axios Interceptors Form objects
48. How do we do better? •Javascript be.er Jest Vuex Axios Interceptors Form objects
49. How do we do better? •Javascript be.er Vue Router Jest Vuex Axios Interceptors Form objects
50. How do we do better? •Javascript be.er Vue Router Jest Vuex Axios Interceptors Form objects
51. How do we do better? •Javascript be.er •Laravel be.er Vue Router Jest Vuex Axios Interceptors Form objects
52. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
53. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
56. Dumb & Ugly
60. Where did this come from?
61. The blog post that changed everything
72. Why initialTweets?
80. What about the tests?
85. Same tests
86. props data created computed methods UI Server
87. props data created computed methods UI Server
88. props data created computed methods UI Server
89. props data created computed methods UI Server
90. props data created computed methods UI Server this.initialTweets
91. props data created computed methods UI Server this.initialTweets
92. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
93. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
97. Danger!
99. Not a sin
101. Not changing
106. props data created computed methods UI Server this.tweets.push()
107. props data created computed methods UI Server
108. props data created computed methods UI Server
109. props data created computed methods UI Server
110. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
111. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
113. Can’t mutate
120. The tests though
125. Significant
126. props data created computed methods UI Server
127. props data created computed methods UI Server
128. props data created computed methods UI Server
129. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
130. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
146. Validation?
157. props data created computed methods UI Server
158. props data created computed methods UI Server
159. props data created computed methods UI Server
160. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
161. Roadmap • Use props • Don’t be scared of window.loca:on.reload() • Move logic from JS to PHP • Use forms
162. Before
163. After
164. props data created computed methods UI Server Before
165. props data created computed methods UI Server After
166. Resonating with you?
167. Scared of your frontend?
168. Embrace the backend