Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Embrace the backend - Laracon 2018

Caleb Porzio
July 26, 2018
Technology
4
860

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.

Caleb Porzio

July 26, 2018
Tweet

More Decks by Caleb Porzio

See All by Caleb Porzio
Writing code that speaks
calebporzio
0
390

Other Decks in Technology

See All in Technology
サーバレスアプリ開発者向けアップデートをキャッチアップしてきた #AWSreInvent #regrowth_fuk
drumnistnakano
0
190
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
220
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
Amazon Kendra GenAI Index 登場でどう変わる？ 評価から学ぶ最適なRAG構成
naoki_0531
0
100
WACATE2024冬セッション資料（ユーザビリティ）
scarletplover
0
190
C++26 エラー性動作
faithandbrave
2
650
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
600
re:Invent をおうちで楽しんでみた ～CloudWatch のオブザーバビリティ機能がスゴい！/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
160
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
250
.NET 9 のパフォーマンス改善
nenonaninu
0
280

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
KATA
mclloyd
29
14k
Optimizing for Happiness
mojombo
376
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
It's Worth the Effort
3n
183
28k
Docker and Python
trallard
41
3.1k
Building Applications with DynamoDB
mza
91
6.1k
Making Projects Easy
brettharned
116
5.9k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
GraphQLとの向き合い方2022年版
quramy
44
13k
For a Future-Friendly Web
brad_frost
175
9.4k

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…

  7. None
  8. None
  9. None

  10. Then everything changed…

  11. None

  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

  21. None
  22. None

  23. Tweet Input

  24. Tweet Input Fresh Tweets

  25. Tweet Input Fresh Tweets ICYMI Tweets

  26. None
  27. None
  28. None
  29. None
  30. None

  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
  54. None
  55. None

  56. Dumb & Ugly

  57. None
  58. None
  59. None

  60. Where did this come from?

  61. The blog post that changed everything

  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None

  72. Why initialTweets?

  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None

  80. What about the tests?

  81. None
  82. None
  83. None
  84. None

  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
  94. None
  95. None
  96. None

  97. Danger!

  98. None

  99. Not a sin

  100. None

  101. Not changing

  102. None
  103. None
  104. None
  105. None

  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
  112. None

  113. Can’t mutate

  114. None
  115. None
  116. None
  117. None
  118. None
  119. None

  120. The tests though

  121. None
  122. None
  123. None
  124. None

  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
  131. None
  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  143. None
  144. None
  145. None

  146. Validation?

  147. None
  148. None
  149. None
  150. None
  151. None
  152. None
  153. None
  154. None
  155. None
  156. None

  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