Introduction

What is Viewi ?

Viewi is a powerful tool for building progressive and completely reactive user interfaces. It is designed to help PHP developers to achieve their goals with minimum efforts and avoid all the pain that comes with front-end development. For those who is familiar with top modern javascript frameworks it means to bring similar template syntax so it can be easily adopted. On one hand Viewi is a server side template render engine. On the other - it is a javascript framework that powers your favorite PHP with all reactivity magic. Viewi is meant to speed up the development and product delivery process.

It is built with all the care about the performance and doesn't require any additional packages or tools and therefore can be used on any hosting with minimum requirements.

What is reactivity ?

Reactivity is a declarative programming model that takes care of keeping the DOM (Document Object Model) up to date with the current state. In other words, reactivity is a mechanism that automatically updates related HTML parts as soon as data inside of the object changes. And the most exited part of it is that you don't need to write additional code, in most cases framework will take care of it by itself.

Base idea and concept

We all know how exhausting it is to develop dynamic web applications. So many tools and frameworks that you have to learn. And that fact that it is impossible to run SSR without Node js on your server makes things even worse.

The idea of Viewi is to save developers from those problems by providing the tool that can:

render on server side (SSR)
render on client side (CSR)
use the same source for doing both
both should produce the same content
front-end is reactive without interaction with the server
Template's syntax is comprehensive and similar to Vue js or Angular
Routing system, similar to Laravel or Symfony
API calls:
- for server side - invokes actions directly
- for client side - AJAX

Viewi application

How Viewi works

Imagine that we have our Counter component.

viewi-app/Components/Views/Counter/Counter.php

<?php

namespace Components\Views\Counter;

use Viewi\BaseComponent;

class Counter extends BaseComponent
{
    public int $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }
}

viewi-app/Components/Views/Counter/Counter.html

<button (click)="decrement()" class="mui-btn mui-btn--accent">-</button>
<span class="mui--text-dark mui--text-title">$count</span>
<button (click)="increment()" class="mui-btn mui-btn--accent">+</button>

Let's take a closer look at how Viewi processes these files.

Step 1. Gathering files information.

Viewi looks out for all the files that are located in components folder and contain class implementation that is derived from Viewi\BaseComponent.

Step 2. Collecting meta information.

For each component (end its dependencies) Viewi creates meta information such as:

Is it component or service
Path information
Dependencies
etc.

Step3. Converting into the javascript.

For example: for our Counter component it will generate the next code:

var Counter = function () {
    var $this = this;
    this.count = 0;
    
    this.increment = function () {
        $this.count++;
    };
    
    this.decrement = function () {
        $this.count--;
    };
};

Please note: not everything can be converted into the javascript. Code that clearly should not be on front-end side (such as file_get_contents, etc.) cannot be used in your components. Also you should take into account differences in expressions evaluation between PHP and Javascript (for example: converting boolean into the string, in Javascript you get 'true', 'false' but in PHP you get '1' and '', etc.). To convert built in PHP functions (such as implode, strlen, etc.) we use Locutus. If something is not working as expected or some function is missing from the library, you can open an issue or request a feature here.

Step 4. Compiling templates.

For each component Viewi generates more productive code that can be used in production without any overheads.

For example: for our Counter component it will generate the next code:

<?php

use Viewi\PageEngine;
use Viewi\BaseComponent;
            
function RenderCounter(
    Components\Views\Counter\Counter $_component,
    PageEngine $pageEngine,
    array $slots,
    ...$scope
) {
    $slotContents = [];
    $_content .= '<button class="mui-btn mui-btn--accent">-</button>
<span class="mui--text-dark mui--text-title">';
    $_content .= htmlentities($_component->count);
    $_content .= '</span>
<button class="mui-btn mui-btn--accent">+</button>';
    return $_content;
}

And for front-end side it will generate json object with template tokens:

[{"content":"button","type":"tag","expression":false,"attributes":[{"content":"(click)"..

Step 5. Building Javascript bundle.

Viewi takes all the compiled Javascript components with routes and creates bundle.js in your public directory. So every time you interact with the page it will not make requests to the server. It will act like a regular Javascript framework.

The result we get

When you open the page for the first time, the server will render html content for you using PHP render functions. That allows for your application to be SEO friendly. When the content arrives to the browser, Javascript framework takes the wheel. It runs DOM hydration procedure and makes everything on the page dynamic (attaches events, etc.). After that you will not need the server side (except for data retrieving from API). Clicks or new page openings will be handled by the Javascript framework.