Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Vue-Model – Models with HTTP Actions for Vue.js

github.com

Post reply on HN
Print view View original

11–20 of 46 posts

Re: Show HN: Vue-Model – Models with HTTP Actions for Vue.js

#11

Post by davidscolgan »

rlander wrote: post #10
davidscolgan wrote: post #8

I'm usually a Django backend developer doing the whole server-rendered static html type sites, but I've attempted to venture into the world of single page apps a few times. The thing that always tripped me up was figuring out the frontend model layer. Nothing I've used, whether Redux or Vuex or Mobx or whatever else seemed as elegant and simple as say the Django ORM is on the backend. There were always missing pieces…

Might be the first time I've seen the words "elegant", "simple" and "Django's ORM" in the same sentence. You could say it's easy to get started with, or do simple queries, but it's definitely not simple nor elegant.

Haha, to each their own. There is such a thing as the object-relational impedance mismatch for a reason. I'm currently learning Elixir and Phoenix and it's ORM Ecto has some really interesting ideas. Functional programming seems to map to relational databases better than object oriented does.

Re: Show HN: Vue-Model – Models with HTTP Actions for Vue.js

#12

Post by IgorPartola »

aarondf wrote: post #5
IgorPartola wrote: post #4

Earlier quoted context omitted.

But how do I know when to fetch? With my approach global state is not modified until the user explicitly does it. Modifying customer.name and not saving it will persist until the next fetch() and in the meantime the user will see it as if the name was actually saved.

Not sure I'm following your exact setup... But you could of course just make a model for your form and _not_ your customer. Without seeing your full setup, it's hard for me to say for sure!

In my apps customer will be a global via VueX. If I go to the Edit Customer view, change customer.name, but don’t save, the change will be visible throughout the rest of the app: the customer list, all the other views where the customer’s name is displayed. It would be a bug to show unsaved data anywhere but in the edit view. And if I go to the edit view, make changes, then exit without saving, then go back, the view should be reset. Making two copies of a global model instance seems like the wrong solution.

Edit: what this is missing is essentially an implementation of forms. That doesn’t necessarily need to be a part of this project, but it should be used together with this. Otherwise you end up at least temporarily persisting changes that were never saved. See the relationship between Django models and forms.

Also, one feature I have implemented in at least one of my apps has been using WebSockets to deliver new, updated, and deleted models from the server. That could be a super powerful addition here.

Re: Show HN: Vue-Model – Models with HTTP Actions for Vue.js

#13

Post by aarondf »

aarondf wrote: post #5
IgorPartola wrote: post #4

Earlier quoted context omitted.

But how do I know when to fetch? With my approach global state is not modified until the user explicitly does it. Modifying customer.name and not saving it will persist until the next fetch() and in the meantime the user will see it as if the name was actually saved.

Not sure I'm following your exact setup... But you could of course just make a model for your form and _not_ your customer. Without seeing your full setup, it's hard for me to say for sure!

@IgorPartola, it sounds like this may not be the right fit for your setup

Re: Show HN: Vue-Model – Models with HTTP Actions for Vue.js

#14

Post by Zenbit_UX »

Hey, this seems cool but I don't really know why...

New to vue.js and maybe I'm doing things... Wrong? But I don't think I need this.

My approach is very angularJs-esque but I have a root component 'main.vue' which basically acts as my index.html. When I want to send a REST call I've got a method setup which handles GET calls and another for POST calls... I use them how you would call an angular service, and it works... Well (at least I thought so until seeing your post).

Can you explain why I'm stupid and everything I've done is wrong?

Re: Show HN: Vue-Model – Models with HTTP Actions for Vue.js

#15

Post by aarondf »

Zenbit_UX wrote: post #14

Hey, this seems cool but I don't really know why... New to vue.js and maybe I'm doing things... Wrong? But I don't think I need this. My approach is very angularJs-esque but I have a root component 'main.vue' which basically acts as my index.html. When I want to send a REST call I've got a method setup which handles GET calls and another for POST calls... I use them how you would call an angular service, and it works…

> Can you explain why I'm stupid and everything I've done is wrong?

Haha I cannot, because you probably aren't stupid and haven't done everything wrong.

The thing I like about this approach is that it removes the need for manually: 1) writing `saveCustomer` or `getCustomer` methods on my vue instance 2) tracking validation errors for each model. So if there's a collection of models on the page, I can super easily show errors for each 3) keeping track of loading indicators 4) applying the server's response to the model.

In your setup, what happens if the HTTP call fails? You have to do something with that error right? What happens if you want to show a spinning indicator that the call is working. If the server returns a response (on say a fetch or an index), what do you do with that response?

I think this (https://github.com/aarondfrancis/vue-model#update-a-model) is a good example to try to work out with the centralized service approach, and see which you like better.

Try it for one model, and then think about if you had to do two or three similar resources.

Hope that makes sense!

Re: Show HN: Vue-Model – Models with HTTP Actions for Vue.js

#16

Post by Rifu »

davidscolgan wrote: post #8

I'm usually a Django backend developer doing the whole server-rendered static html type sites, but I've attempted to venture into the world of single page apps a few times. The thing that always tripped me up was figuring out the frontend model layer. Nothing I've used, whether Redux or Vuex or Mobx or whatever else seemed as elegant and simple as say the Django ORM is on the backend. There were always missing pieces…

If you’re looking for something more Django flavored for your spa, there’s always Ember[0]

[0] https://emberjs.com/

Re: Show HN: Vue-Model – Models with HTTP Actions for Vue.js

#17

Post by drspacemonkey »

davidscolgan wrote: post #8

I'm usually a Django backend developer doing the whole server-rendered static html type sites, but I've attempted to venture into the world of single page apps a few times. The thing that always tripped me up was figuring out the frontend model layer. Nothing I've used, whether Redux or Vuex or Mobx or whatever else seemed as elegant and simple as say the Django ORM is on the backend. There were always missing pieces…

You might wanna look into EmberCLI. It's not as trendy or popular as Vue or React (rendering speed is a big reason), but it might be what you're looking for.
Post reply on HN