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

Vue & REST API Patterns

Vue & REST API Patterns

In this presentation I want to share my exploration on handling REST API calls in Vuejs and share insights from other people. Also you can view my blog post about the topic here https://medium.com/@imanhodjaev/handling-api-calls-in-vue-cf39747656ba

A2b33f29025481170d9441eb8e3aaeb0?s=128

Sultan Imanhodjaev

July 10, 2018
Tweet

Transcript

  1. Vue & REST Patterns Sultan Iman @imanhodjaev https://t.me/FullTimeVue

  2. How people do it?

  3. Naive approach

  4. Route guards

  5. Fetch components https://jsfiddle.net/adamwathan/xov6ksvd/ fetch-data updates its slots once request completed

  6. https://jsfiddle.net/adamwathan/xov6ksvd/

  7. Using Vuex It might become a mess over time

  8. Organize Use Repository pattern https://martinfowler.com/eaaCatalog/repository.html

  9. How it usually looks in Java

  10. The goal Vuex actions must only know what to call

    and what arguments to pass and how to maintain the state
  11. Makes it easier to unit test (mock, spy etc.)

  12. Demo

  13. Improving May be use of error boundaries will help to

    improve user experience
  14. Hmmm how do checkResponse and post work? https://gist.github.com/imanhodjaev/88c24066e7bfd283f64145eef7b19e7f https://gist.github.com/imanhodjaev/86042197648902cd9514f9b2ef6b8307

  15. Links https://medium.com/@imanhodjaev/handling-api-calls-in-vue-cf39747656ba https://medium.com/@lachlanmiller_52885/a-pattern-to-handle-ajax-requests-in-vuex-2d69bc2f8984 https://medium.com/js-dojo/4-ajax-patterns-for-vue-js-apps-add915fc9168 https://itnext.io/anyway-heres-how-to-do-ajax-api-calls-with-vue-js-e71e57d5cf12 https://medium.com/@krzychukosobudzki/repository-design-pattern-bc490b256006 https://martinfowler.com/eaaCatalog/repository.html

  16. Thanks! ❤