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
   

   View Slide

2. I’m Caleb
   

   View Slide

3. I’m Caleb
   

   View Slide

4. I’m Caleb
   

   View Slide

5. I’m Caleb
   

   View Slide

6. A long long time ago…
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. Then everything changed…
    

    View Slide

11. View Slide

12. RIP Blade :(
    

    View Slide

13. Before .vue
    

    View Slide

14. After .vue
    

    View Slide

15. After .vue
    

    View Slide

16. After .vue
    

    View Slide

17. After .vue
    

    View Slide

18. And worst of all…
    

    View Slide

19. Passing Tests
    

    View Slide

20. The belly of the beast
    

    View Slide

21. View Slide

22. View Slide

23. Tweet Input
    

    View Slide

24. Tweet Input
    Fresh Tweets
    

    View Slide

25. Tweet Input
    Fresh Tweets
    ICYMI Tweets
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

32. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

33. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

34. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

35. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

36. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

37. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

38. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

39. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

40. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

41. It felt so right
    

    View Slide

42. I was scared of my frontend
    

    View Slide

43. How do we do better?
    

    View Slide

44. How do we do better?
    •Javascript be.er
    

    View Slide

45. How do we do better?
    •Javascript be.er
    Form objects
    

    View Slide

46. How do we do better?
    •Javascript be.er
    Axios Interceptors
    Form objects
    

    View Slide

47. How do we do better?
    •Javascript be.er
    Vuex
    Axios Interceptors
    Form objects
    

    View Slide

48. How do we do better?
    •Javascript be.er
    Jest
    Vuex
    Axios Interceptors
    Form objects
    

    View Slide

49. How do we do better?
    •Javascript be.er
    Vue
    Router Jest
    Vuex
    Axios Interceptors
    Form objects
    

    View Slide

50. How do we do better?
    •Javascript be.er
    Vue
    Router Jest
    Vuex
    Axios Interceptors
    Form objects
    

    View Slide

51. How do we do better?
    •Javascript be.er
    •Laravel be.er
    Vue
    Router Jest
    Vuex
    Axios Interceptors
    Form objects
    

    View Slide

52. Roadmap
    • Use props
    • Don’t be scared of window.loca:on.reload()
    • Move logic from JS to PHP
    • Use forms
    

    View Slide

53. Roadmap
    • Use props
    • Don’t be scared of window.loca:on.reload()
    • Move logic from JS to PHP
    • Use forms
    

    View Slide

54. View Slide

55. View Slide

56. Dumb & Ugly
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. Where did this
    come from?
    

    View Slide

61. The blog post that
    changed everything
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. Why initialTweets?
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. What about the tests?
    

    View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. Same tests
    

    View Slide

86. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

87. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

88. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

89. props
    data
    created
    computed
    methods
    UI
    Server
    

    View Slide

90. props
    data
    created
    computed
    methods
    UI
    Server
    this.initialTweets
    

    View Slide

91. props
    data
    created
    computed
    methods
    UI
    Server
    this.initialTweets
    

    View Slide

92. Roadmap
    • Use props
    • Don’t be scared of window.loca:on.reload()
    • Move logic from JS to PHP
    • Use forms
    

    View Slide

93. Roadmap
    • Use props
    • Don’t be scared of window.loca:on.reload()
    • Move logic from JS to PHP
    • Use forms
    

    View Slide

94. View Slide

95. View Slide

96. View Slide

97. Danger!
    

    View Slide

98. View Slide

99. Not a sin
    

    View Slide

100. View Slide

101. Not changing
     

     View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. props
     data
     created
     computed
     methods
     UI
     Server
     this.tweets.push()
     

     View Slide

107. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

108. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

109. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

110. Roadmap
     • Use props
     • Don’t be scared of window.loca:on.reload()
     • Move logic from JS to PHP
     • Use forms
     

     View Slide

111. Roadmap
     • Use props
     • Don’t be scared of window.loca:on.reload()
     • Move logic from JS to PHP
     • Use forms
     

     View Slide

112. View Slide

113. Can’t mutate
     

     View Slide

114. View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

119. View Slide

120. The tests though
     

     View Slide

121. View Slide

122. View Slide

123. View Slide

124. View Slide

125. Significant
     

     View Slide

126. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

127. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

128. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

129. Roadmap
     • Use props
     • Don’t be scared of window.loca:on.reload()
     • Move logic from JS to PHP
     • Use forms
     

     View Slide

130. Roadmap
     • Use props
     • Don’t be scared of window.loca:on.reload()
     • Move logic from JS to PHP
     • Use forms
     

     View Slide

131. View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. View Slide

137. View Slide

138. View Slide

139. View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. Validation?
     

     View Slide

147. View Slide

148. View Slide

149. View Slide

150. View Slide

151. View Slide

152. View Slide

153. View Slide

154. View Slide

155. View Slide

156. View Slide

157. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

158. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

159. props
     data
     created
     computed
     methods
     UI
     Server
     

     View Slide

160. Roadmap
     • Use props
     • Don’t be scared of window.loca:on.reload()
     • Move logic from JS to PHP
     • Use forms
     

     View Slide

161. Roadmap
     • Use props
     • Don’t be scared of window.loca:on.reload()
     • Move logic from JS to PHP
     • Use forms
     

     View Slide

162. Before
     

     View Slide

163. After
     

     View Slide

164. props
     data
     created
     computed
     methods
     UI
     Server
     Before
     

     View Slide

165. props
     data
     created
     computed
     methods
     UI
     Server
     After
     

     View Slide

166. Resonating with you?
     

     View Slide

167. Scared of your frontend?
     

     View Slide

168. Embrace the backend
     

     View Slide