We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.
  1. Home
  2. General

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

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!



77.7k

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.



145.0k

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



27.7k
in reply to Wojciech Ślawski

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.



145.0k
in reply to Derek

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.



1.8k
edited Mar '18

As mentioned above, you can render the html using vue and populate its content from phalon as a JSON string. I wrote an article on how to integrate these two frameworks in thier most advanced form.

https://blog.antsand.com/singlepost/index/5619/How-to-integrate-php-Phalcon-and-Vue.js-components-(*.vue-files)?

When you integrate these frameworks, you would want to minimize rendering html elements using volt. You rather give that task to Vue. It keeps the HTML code cleaner and much more maintainable. The core logic of your application and how data should be processed that should all be done on ther server side by phalcon.

Also wrote an article on how to get started with code examples. Once you structure your code base right, it is easier to design your application. https://blog.antsand.com/singlepost/index/5629/How-to-get-started-integrating-php-Phalcon-and-*.vue-components-with-code-examples