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.
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.
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.
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.
Viewi looks out for all the files that are located in components folder and contain class implementation that is derived from Viewi\BaseComponent.
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.
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)"..
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.