lundi 8 juillet 2019

Using a "facade" vs. a "prop" vue application

This is more of a general question of what the recommended structure or pattern might be with a FE framework. Currently building an app where the goal is to use as many shared components as possible. I have a searchTerms component which gets "terms" from an api. The problem we had was that the api actually has different routes in different places where we use the component. My initial thought was to give the component a prop of :section where is would be aware of the section and then apply the correct api route. Another option I was told of was to create an apiFacade (apparently this is a pattern used in C#) which I did in which case I was able to instantiate the facade without having the component know about where it is being used, like this:

//parent component
      <searchterms :type="type" :apiFacade="apiFacade" :mode="mode" @loading="loaderDisplay"></searchterms>
data(){
  return {
    apiFacade: new SearchTermsApiFacade(this.$api),
    ...
//child component

 export default {
    name: "searchterms",
    props: {
      type: String,
      apiFacade: Object,
    },
    ...
    try {
            await this.apiFacade.createSearchTerm(payload);

I am curious as to what is the considered the "best" practice. Personally I thought that passing props is simpler and having some conditional logic in a shared component is fine but maybe I am missing something?

Aucun commentaire:

Enregistrer un commentaire