Jump to content
LeTroner

Organising the code for a Processwire+Vue.js Webapp

Recommended Posts

Hi!

I am right now building a webapp based in Processwire and using Vue.js for the front-end in some of the pages. I followed some tutorials and used a REST class that was golden to be able to output JSON and build an API. (BTW Processwire should really do like Laravel and be able to output json out of the box).

My question is regarding the structure of my files and templates. I have worked a bit with Laravel and I understand their MVC pattern, and was wondering how to do the same in Processwire or how to best organise things in a growing app. 

For the moment I have a cluster of pages handling the API requests under /api/...

Then I have a cluster of pages handling the views such as /app/users /app/calendar ...

Is there a smart way to organise this? Do you have any experience that can give some light?

Thank you and sorry for the noob question!

Share this post


Link to post
Share on other sites
2 hours ago, LeTroner said:

(BTW Processwire should really do like Laravel and be able to output json out of the box).

PW can in fact do that. It's entirely up to the developer what PW should output. JSON, XML, CSVs, HTML...

re: Vue.js
If you search here for Vue you'll find a few forum topics with tips and project insights, e.g.

https://medium.com/icf-church-developers/processwire-vue-js-a-lovestory-d4d5bca365

 

  • Like 4

Share this post


Link to post
Share on other sites
2 hours ago, LeTroner said:

(BTW Processwire should really do like Laravel and be able to output json out of the box).

What would be even more important: $input should accept JSON:

 

  • Like 1

Share this post


Link to post
Share on other sites
12 minutes ago, marcus said:

What would be even more important: $input should accept JSON:

could you please give an example of what you would like to do and what is currently possible and what is not?

Share this post


Link to post
Share on other sites

Going back to the original question, here are a couple of ways to get rid of too much pages.

  1. You could use URL segments instead of a page hierarchy to route requests to your REST class (hope I am using the right words))))
  2. You could install some 3rd party router (maybe even laravel's own) via composer, include it the root api template and use it to route requests to your REST class.
  3. You could use GraphQL instead of REST.
  • Like 2

Share this post


Link to post
Share on other sites

Thank you all for your answers! Also interesting with URL segments and GraphQL. It seems it produces slightly slower requests, so I will test it for another project. Using a router solution like the one you pointed seems a bit overkill at this stage specially for my knowledge level.

So far Vue and Processwire work very well together. I built some kind of REST api and the performance is very good both for read or to create pages. In some pages I am using regular forms to create posts, users... and in some others I am using vue. Vue of course offers much more potential to build complex, modern interfaces. Great that I can combine both methods.

I think Processwire is flexible and powerful enough to build webapps with a smaller learning curve than a full fledged framework such as Laravel. It would be just perfect if creation of APIs for consumption by the front-end would be just a bit easier out of the box. (Is not that the hot keyword of the year? Headless CMS?). 

 

  • Like 6

Share this post


Link to post
Share on other sites
On 8/31/2018 at 4:02 PM, bernhard said:

could you please give an example of what you would like to do and what is currently possible and what is not?

See the link above: https://processwire.com/talk/topic/18655-solved-no-input-post-data-when-using-ajaxaxiospost/

I was not able to POST json to ProcessWire directly, had to stringify it first.

  • Like 2

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...