Using Phalcon with Vue.js or any modern frontend framework

Hello,

I am currently building my web app using Phalcon framework.

On the improvement side, I am exploring how we can seperate the front-end code from the back-end (phalcon). It seems like modern web apps nowadays seperated their frontend from the backend. I would like to to see your advice on how you will recommend to do so.

Phalcon - I am not using the micro apps. I am using the full MVC framework with views, controlllers app.

Front end framework - I am looking to using Vue.js https://vuejs.org/

My Attempt

In order to seperate the front end from the backend, the only solution that I think of is to rewrite the whole backend using micro app. Make backend accessible through a restful api. That requires some effort which i do not know if it is wise to do so.

The Phalcon views folder will then only have an index template which is the entry point load the javascript.

I do not know if this is the best way to do it as if i do so - i will not be using the views, routing mechanism as provided by Phalcon. Doesn't that defeats the purpose why I am using Phalcon?

I would like to seek for some advice from you guys who has successfully did this on a production site and how did you go about doing so. Best practices, recommendations etc.

Thanks!

To answer your question in any detail, we would have to know the nature of the project, but reorganizing it to an API served by micro apps sounds like a good way to go. You could still use the router service despite of that. Regarding the MVC pattern, don't sweat it, it's a good practice to follow, but when you enter the full-stack world, you have to make compromises.

As an example, we have a multilingual, real-time project. We use websockets (crossbar(server), thruway(server lib), autobahn(client lib)) for most of the communication between client and server, but we still render most templates on the server side with ajax calls, because we have two sources for translations: sql tables and po files. It's not resource efficient (i guess some devs are performing exorcism rituals now), but moving the translation mechanism to the client would be a nightmare.

I have module mvc app with angualrjs. Im steal using volt views for many things.



12.0k

Hello! will you be able to share some light on how you architect your web app? how are you integrating it with angularjs

I have module mvc app with angualrjs. Im steal using volt views for many things.



44.7k
edited Dec '16

I've recently switched my Webird project to a completely Vue front end. I currently working on a Vue debug component and when its finished I'll tag another alpha release. If you are using Vue then you will most definitely want to build your JS bundles with either Webpack or Browserify.

Here is an example of Volt and Vue integration:

As you can see the Vue part is very easy to setup in a Volt template. I think that it is best to provide a very minimal tag <div id="app"></div> in your Volt template and then to have Vue setup everything from there.

Soon enough Webird will include the lessons that I've learned over the last few months.

I also provide a basic Vuex example: https://github.com/perchlayer/webird/tree/master/app/webpack/entries/vue.vuex

By doing it this way with the render method to return a Vue component it allows for the template compiler to be excluded from the release bundle.

Phalcon just returns json, operating over database etc also rendering just main pages for clien side and admin panel, including having all the data in script tag, so there is no necessary request from angular side for main pages.

Hello! will you be able to share some light on how you architect your web app? how are you integrating it with angularjs

I have module mvc app with angualrjs. Im steal using volt views for many things.