Viewi application architecture design

This topic is a must-read for everyone planning to work with Viewi.

What is Viewi for

When you build a front-end application, your architecture will look something like this:

Viewi replaces your front-end framework/library.

It allows you to write your SPA in PHP instead of Javascript by converting your code and templates. And since it is written in PHP, it will enable you to run it on a server-side during SSR (Server side rendering) with no overhead. And on top of that, it makes your front-end application entirely reactive.

Can I write just anything?

Since your code is being converted into Javascript, there are some limitations related to the differences between those two languages. Most of the features from PHP can not be used in Javascript, like:

• Namespaces. You must name your classes regardless as namespaces will be ignored. (There is a chance that it will be supported in the future).
• Magic methods or properties. It just will not work.
• Attributes. Those are just being cut during the converting.
• Named arguments. You will get an error.
• Arrays are not the same in both languages. It’s better to avoid associative arrays.
• Boolean to string converting: PHP gives ‘’ or ‘1’, Javascript gives ‘false’ or ‘true.’
• Reflection or any other built-in helpers won’t work.
• Server-side only logic, such as reading the file or running the query in DB.
• Browser is running in an asynchronous environment and supports events. The server-side is not.

There are a lot of built-in functions in PHP like count or in_array. But how to get their javascript versions. For that, Viewi integrates Locutus: locutus.io github.com/locutusjs/locutus. This library contains a wide variety of javascript functions that are implemented to repeat their PHP analogs.

If there is some missing functionality that you would like to have in javascript, please request it either on Viewi’s GitHub page or on Locutus’s GitHub page.

Can I use my favorite PHP libraries in Viewi application?

These libraries are explicitly written for usage on a server-side only. And they are probably full of code that will not be adequately converted and will not work in the browser. Viewi application should be isolated from the rest of the server application. It is best not to use any models, services, or other classes and functions outside your Viewi codebase.

The code for Viewi should be written with considerations:

• It should be possible to convert it to a Javascript alternative.
• Converted code should be able to run in the browser.
• PHP code should be able to run on a server-side.
• Both sides should generate the same result, except for special cases when you run some code explicitly for front-end or server-side only.

With all of these limitations, how can I create what I want?

Despite all of those limitations, you still can create SPA. They are not so critical. And Viewi offers you a lot more attractive benefits:

• Perfect SEO with SSR out of the box.
• Entirely reactive SPA, your changes will instantly be updated on the page without asking the server to render you something. No “Html over the wire.”
• Clear and comprehensive template syntax, similar to Angular or Vue js.
• You write your code once, and it will be reused on both sides.
• You get a highly-optimized JavaScript code.
• Perfect Page Load Score.

How can I get the data for my components?

In Viewi, getting the data from the server is similar to getting the data in Angular or Vue js. Viewi has built-in HttpClient, which works on both sides:

• In the browser - AJAX.
• During SSR, it simulates a request and passes it directly to the application (your back-end).

More about HttpClient here.

Defining the model for your data on Viewi side is recommended, and using it in your back-end controllers/actions when you return the response. The best practice is to convert your DB entity (Active Record, etc.) to Viewi model before sending the response. Once again, keep your Viewi codebase isolated from the rest of the codebase.

Why should I use it?

If you wish to have an entirely reactive front-end application without getting into much trouble with Javascript frameworks. If you want to have SSR, which renders the same content as your front-end app without overheads. If SEO is important for you. If you wish to speed up your development process. Then Viewi is definitely for you.

But, if you are a master with Javascript frameworks already and know how to connect your back-end and front-end, then you are most likely in good shape. But I encourage you to try Viewi anyway. It is being developed considering the best practices used in the most popular Javascript frameworks.

Viewi is not the same as LiveView/LiveWire!

Even if you see some similarities, please, don’t be confused. Viewi is using a completely different approach.

More things to come

Viewi is pretty young. There are so many features to be added. Feel welcome to discuss, ask questions, or request features here: GitHub Discussions.

And don’t forget to support Viewi. It’s important to see your interest, and it will motivate me to bring more to it.

• Contribute by sending pull requests.
• Follow Viewi on Twitter.
• Give it a star⭐GitHub.
• Feel welcome to share this project with your friends.