re-frame

https://github.com/Day8/re-frame/blob/master/docs/README.md https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md
tobias 2020-06-25T00:00:00.035200Z

So grateful for re-frame and all the resources around it. I'm writing my first SPA and having a blast.

2💪
ggiraldez 2020-06-25T01:05:36.035400Z

Yes, exactly! And also yes, re-frame is amazing 🙂

2020-06-25T02:04:06.035600Z

👍 it is kind if you both to say, thanks

rberger 2020-06-25T06:16:00.039600Z

Any examples of the re-frame way to have a datatable like view of potentially large (more than you would want to cache locally) data coming from a server. The view would have options that would allow for sorting and searching which would happen on the server causing the page data in the browser to be refreshed. More interested in how to handle the fetching/paging into the re-frame app-db and how to orchestrate it all rather than the views themselves, though that would be good too. Thanks for any tips or pointers to examples!

2020-06-25T11:36:03.040400Z

I’ve implemented a pretty full-featured data table in my app. Unfortunately I can’t share the code but I can describe the basic principles.

2020-06-25T11:36:24.040600Z

I’ve broken it down into three pieces of data.

2020-06-25T11:38:31.040800Z

First I have what I call the “model”. It contains the URL of the endpoint that can fetch me a page of data and data about how to render each column. Next is the “view state”, which contains things the user can change: sort column and order, page size, current page index, etc. Finally, there’s the “content” that comes back from the endpoint, which contains the row data for the current page and a count of the total number of rows.

2020-06-25T11:40:14.041Z

I put the model in a CLJC file and the other two in app DB. I made the decision to only have one data table per page so that my data is always at a known path, which simplifies all my event handlers.

2020-06-25T11:42:46.041400Z

For each data table in my app I create an endpoint that accepts the view state and returns a new content structure. I just POST the view state, but you could just as well serialize the state into a query parameter and do a GET.

2020-06-25T11:43:50.041600Z

I pass the model to the view component. It subscribes to the view state and content and renders accordingly.

2020-06-25T11:44:36.041800Z

When I first display a page containing a data table, I dispatch the event that posts to my endpoint and populates the content slot on successful return.

2020-06-25T11:45:50.042Z

When the user interacts with the data table, e.g. clicking a header to change the sort order or clicking to view the next page, I dispatch an event to update the view state, then re-do the call to the endpoint to refresh the content.

2020-06-25T11:47:13.042200Z

That’s the essence of it. You can add stuff around that, e.g. showing a spinner while data is being loaded, adding filters to your view state, etc., but it’s all just expanding on those ideas.

2020-06-25T11:47:35.042400Z

Hope this helps.

1🙏
rberger 2020-06-25T20:57:48.043800Z

@jkrasnay Thanks for the info. Will chew on that. We’re using graphql/aws appsync for the backend, but it sounds like the style you are describing should work similarly.

rberger 2020-06-25T20:58:56.044100Z

Would still love to see code on how others have approached this in re-frame

p-himik 2020-06-25T08:11:07.040300Z

For some reason, GitHub says that the latest release is v0.10.7.

2020-06-25T11:36:03.040400Z

I’ve implemented a pretty full-featured data table in my app. Unfortunately I can’t share the code but I can describe the basic principles.

2020-06-25T11:36:24.040600Z

I’ve broken it down into three pieces of data.

2020-06-25T11:38:31.040800Z

First I have what I call the “model”. It contains the URL of the endpoint that can fetch me a page of data and data about how to render each column. Next is the “view state”, which contains things the user can change: sort column and order, page size, current page index, etc. Finally, there’s the “content” that comes back from the endpoint, which contains the row data for the current page and a count of the total number of rows.

2020-06-25T11:40:14.041Z

I put the model in a CLJC file and the other two in app DB. I made the decision to only have one data table per page so that my data is always at a known path, which simplifies all my event handlers.

2020-06-25T11:42:46.041400Z

For each data table in my app I create an endpoint that accepts the view state and returns a new content structure. I just POST the view state, but you could just as well serialize the state into a query parameter and do a GET.

2020-06-25T11:43:50.041600Z

I pass the model to the view component. It subscribes to the view state and content and renders accordingly.

2020-06-25T11:44:36.041800Z

When I first display a page containing a data table, I dispatch the event that posts to my endpoint and populates the content slot on successful return.

2020-06-25T11:45:50.042Z

When the user interacts with the data table, e.g. clicking a header to change the sort order or clicking to view the next page, I dispatch an event to update the view state, then re-do the call to the endpoint to refresh the content.

2020-06-25T11:47:13.042200Z

That’s the essence of it. You can add stuff around that, e.g. showing a spinner while data is being loaded, adding filters to your view state, etc., but it’s all just expanding on those ideas.

2020-06-25T11:47:35.042400Z

Hope this helps.

1🙏
rberger 2020-06-25T20:57:48.043800Z

@jkrasnay Thanks for the info. Will chew on that. We’re using graphql/aws appsync for the backend, but it sounds like the style you are describing should work similarly.

rberger 2020-06-25T20:58:56.044100Z

Would still love to see code on how others have approached this in re-frame

2020-06-25T23:13:47.045100Z

@p-himik where in GitHub are you seeing this version? Perhaps in the README, via a clojars badge?

2020-06-26T12:20:43.047500Z

Thanks, i created an issue. We'll fix it.