The outputs of all these engines can now be understood by the browser.

The goal when integrating php and javascript is to make sure the html generated by php, javascript generated by vue work in synergy. Javascript’s main goal is to manipulate DOM objects, and HTML’s content is nothing but DOM objects. The code generated by php must have elements or DOM objects that javascript (generated by vue) can control. This is fundamental to making these frameworks work.

We can tell php to generate particular HTML tags for it to be further controlled by javascript. For e.g. we can echo in HTML " let-vue-fill-this-tag". In the *vue component file, we ask Vue to search for this tag, and if it finds it, manipulate it accordingly.

*.Vue -> javascript -> look for “let-vue-fill-this-tag” in the html file. If found, we can now manipulate this tag. If not found, do nothing.

Understanding how php and javascript work under the hood is part of the equation. The next question to answer is, how should you structure your code?

To explain this, we need to understand how the server and php work together.

The server is a software program running on a computer trying to listen and server specific requests. When you type antsand.com on the webbrowser, the browser communicates with a DNS server, translates Antsand.com to an ip/ipv6 address, obtains the ip/ipv6-address, packages a set of information into packets and sends that information to a computer with that specific address over a bunch of routers. The computer with that ip/ipv6-address is where the code for Antsand.com resides. When this computer receives this information, it looks at the packet and checks for programs in the computer that can handle this request. Since the packet that was created by the web-browser is a tcp packet on port 80 or 443, a webserver is listening for any request on those ports. Port 80 and 443 are standards ports for websites. Once, the webserver deciphers the packets, it then looks for what information the browser is requesting. If the page that the browser is requesting needs to be serviced by a 3rd party server, the web-server will send that information to such a server. In this case the 3rd party server is the php engine.

Webbrowser -> router -> Computer(Antsand.com) -> webserver (nginx) -> search for *.php files -> if found send to -> php server (php-fpm)





Webbrowsers -> scans html -> request more information defined in html -> CSS/images/javascript





The above steps are repeated till all the information defined in HTML is properly loaded in the webbrowser.













What this implies is that the html generated by php might need additional interactivity through javascript. This is what you have in control. What parts of the html you want php to generate and what parts of the html you want javascript to take control.





What is important in the above explanation is that the web-server communicates with php-fpm to generate html from *.php files in real time , wheras the server treats javascript as a file and does not communicate with any 3rd party server to generate javascript files in real time. The javascript files must already exist as a file. With the introduction of node.js and modern servers, this may not be the complete case, but for the sake of this argument and for most production use cases, javascript is not produced in real time. Therefore *. Vue component files must already be converted to .js files when php’s html references the javascript file.





When designing a webpage, you need to know what parts of the html should be generated by php and what parts of the webpage you want javascript to load through AJAX. Once this is defined the rest is just planning and execution.





There are various ways to do so, but this is how we at ANTSAND approach this problem. The main logic of your application is written in server-side code. Your server-side code has all the information on how each page of your website must load, what content to display, how your website is to be navigated and how each webpage of your website flows with respect to the other. It contains the core logic of how your website should be navigated. As a result, javascript must sit on top of each rendered page.





Php Phalcon being an MVC, this is how the code structure at ANTSAND looks like:

Module -> (Model, View, Controller, Vue)









Each module in Antsand code structure has a Vue folder. This is where all the *.vue files are located. We want to keep all the vue components related to this php module under one directory. The output of the vue component is then generated to the public folder structure where the web-server can find the file. The javascript file is generated based on the *Vue components. We don’t need to touch the generated file. All we need to make sure is where the file will be generated and if the web-server can find it.





A deep dive into how php-phalcon works or for that matter any MVC.

A MVC is a Model View Controller . Generally, the Models folder contains files that interact with the database and contains core server logic. The Controller folder contains files that help is designing how you want users to navigate through your application and what content you want different users to see. The View folder contains files that tell php how you want HTML to be literally generated. In Phalcon, if integrating the volt engine, your view folder would then have volt files, that are converted to php by the volt engine which is then used to generate HTML files.





Why is this important?

Understanding how MVC works will give a much clear understanding of how you want your code to be structured and how you can make both these frameworks work together. When HTML code is populated through the javascript framework, in this case vue, you want to know how vue is going to populate the content. Vue would be using AJAX calls, which would be calling phalcons-php code and asking it for specific information which it can then render under a specific html tag. Let me give an example.





This below picture is the antsand blogging dashboard

We have 3 different components to it.These three tags are defined in php and echoed as HTML tags. After the browser loads this HTML page with these empty tags, we want those tags to be populated by javascript. Therefore we have divided our vue application into components.

a. Profile information

b. The blog navigation panel

c. The editor space









The visual display for each of these components is written in *.vue files.

The data that needs to populate this content has to come from a database. Javascript written using *.vue components makes AJAX calls which calls php-phalcon, phalcon does all the processing, assembles the data as a JSON object and sends the information. Javascript receives this information and displays the content of the JSON file in a visually elegant way.





Just as how we want our front end to be divided into different components, we need to have different controller actions in phalcon that explicitly help in providing the relevant data to each of these vue components. This way, we know that each controller action in phalcon has a specific purpose and is tightly coupled with interacting with vue components for the data requested.





When designing your application, you need to think,





*.vue component -> makes a (ajax request) -> request data from a particular link -> phalcon reads the link, forwards the information to the necessary controller and action -> fetches data from the database -> echo's the result in a JSON string/object. Vue read this string and display the content accordingly. This is the lifecyle between a vue component and php-phalcon.





The below image represents a visual workflow.









Next, How does vue.js work? What are vue.js components and how do they work in vue.js?





Now comes the big question. How does it work. Vue.js is not another jquery like framework. You can technically use both jquery and vue together as they both serve different purpose in writing javascript code. Just as how php-phalcon is a MVC framework to write modular php code, Vue.js is a framework to write modular javascript code. It's main purpose is to separate different elements of a webpage into components. Each component can then render elements of a page accordingly. This help maintain your codebase. It also helps in scaling your javascript application. *Vue files are vue component files that have information on how to render that particular component. It has the logic of where in the HTML file this component needs to fit. Accordingly you can write a template and add logic to that template using javascript. The vue engine will then take all the vue files and compile them into one big javascript file. You can control how you want the javascript file to be rendered. You can even have each component have its own javascript file. Depending on your application, you need to make the judgement.





Now that all the concepts are explained, in the next article I will give a live example . We will create a simple application where we can render a simple "hello World" page, integrating phalcon and *vue components.





I hope you found the information in this article worthwhile. If you have any questions, or feel some of the information might be incorrect, please comment below. I will be glad to hear your comments. The most valuable comment that I receive, I will send my personal folder structure with all the files and necessary information on implementing these two frameworks. Do COMMENT BELOW.









Webbrowser (html)