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

Embrace the backend - Laracon 2018

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

Other Decks in Technology

Transcript

  1. Embrace the backend

    View full-size slide

  2. A long long time ago…

    View full-size slide

  3. Then everything changed…

    View full-size slide

  4. RIP Blade :(

    View full-size slide

  5. And worst of all…

    View full-size slide

  6. Passing Tests

    View full-size slide

  7. The belly of the beast

    View full-size slide

  8. Tweet Input
    Fresh Tweets

    View full-size slide

  9. Tweet Input
    Fresh Tweets
    ICYMI Tweets

    View full-size slide

  10. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  11. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  12. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  13. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  14. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  15. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  16. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  17. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  18. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  19. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  20. It felt so right

    View full-size slide

  21. I was scared of my frontend

    View full-size slide

  22. How do we do better?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Where did this
    come from?

    View full-size slide

  34. The blog post that
    changed everything

    View full-size slide

  35. Why initialTweets?

    View full-size slide

  36. What about the tests?

    View full-size slide

  37. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  38. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  39. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  40. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Not changing

    View full-size slide

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

    View full-size slide

  47. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  48. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  49. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Can’t mutate

    View full-size slide

  53. The tests though

    View full-size slide

  54. Significant

    View full-size slide

  55. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  56. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  57. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  61. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

  62. props
    data
    created
    computed
    methods
    UI
    Server

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. props
    data
    created
    computed
    methods
    UI
    Server
    Before

    View full-size slide

  66. props
    data
    created
    computed
    methods
    UI
    Server
    After

    View full-size slide

  67. Resonating with you?

    View full-size slide

  68. Scared of your frontend?

    View full-size slide

  69. Embrace the backend

    View full-size slide