Introduction

Traditional web development is a pain. It's slow, tedious, and repetitive. As a result, modern web development has been moving towards a more component-based approach with tools like React, Vue, and Angular.

This however, comes with its own set of problems. You have to learn a new language, a new framework, and a new way of thinking. It's a lot to take in.

What is Leaf UI?

Leaf UI is a PHP library that allows you to build modern web apps and scaffold dynamic and interactive UIs using the same PHP you already know and love. It's fast, easy, and fun. It's the best of both worlds.

Getting Started

The official guide assumes BASIC level knowledge of PHP.

Down to the basics

😵‍💫 Don't know PHP?

If you are not familiar with PHP, we recommend that you check out the W3Schools PHP Tutorial before continuing or use the video below. This is because you will basically be writing PHP code when using Leaf (or any other framework).

Introduction to PHP

You can follow along with the video by FreeCodeCamp to learn the basics of PHP.

Introduction to PHP

Installation

Leaf UI v0.2.0 is currently in beta. You can install it using the Leaf CLI:

leaf install ui

Or with composer:

composer require leafs/ui

After installing Leaf UI, you can start composing your awesome UIs. We've added a simple example below to get you started.

Counter example

For this example, we won't be using any PHP frameworks. We'll just be using Leaf UI and PHP. Let's start by creating a new file called index.php and add the following code:

<?php

require __DIR__ . '/vendor/autoload.php';

This is the composer autoloader. It loads all the Leaf UI classes and functions for us. We can now start using Leaf UI.

Every page of your Leaf UI app is a component. Let's create a simple component that outputs a count.

class Counter extends Leaf\UI\Component
{
  // Every component should have a unique key
  public $key = 'Counter';
  public $count = 0;

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

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

  public function render()
  {
    return '
      <body>
        <button @click="increment">-</button>
        <span>' . $this->count . '</span>
        <button @click="decrement">+</button>
      </body>
    ';
  }
}

As shown above, a component is a class that extends the Leaf\UI\Component class. It has a render method that returns the markup for the component. You can also add methods to your component. These methods can be called from the view using the @ or ui-on: modifiers. For example, @click="increment" calls the increment method when the element is clicked on.

We're using this to create a simple counter component. It has a count and two buttons to increment and decrement the count. We're then returning some markup which is the HTML that will be shown in the component. The problem with this approach is that it's not very flexible. All of our markup is in a single string, our methods are not reusable and it's overall not very maintainable.

For this reason, Leaf UI provides a simple engine that allows you to separate your markup from your PHP code. Let's create a new file called view.html and add the following markup.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button @click="decrement">-</button>
  <span>{{ $count }}</span>
  <button @click="increment">+</button>
</body>
</html>

Note that we're using the curly-brace syntax to output the count instead of $this->count. This is because Leaf UI uses provides a simple templating engine that allows you to output data from your components. We'll look at this in more detail later.

Now that we have our view, we simply need to update our component's render method.

public function render()
{
  return UI::view('view.html');
}

From here, we can mount our component to the DOM. We do this using the UI::render method. Let's add this to our index.php file since that's where we want our component to be displayed.

UI::render(new Counter());

Let's put it all together.

<?php

use Leaf\UI;
use Leaf\UI\Component;

require __DIR__ . '/vendor/autoload.php';

class Counter extends Component
{
  public $count = 0;
  public $key = 'Counter';

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

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

  public function render()
  {
    return UI::view('view.html');
  }
}

UI::render(new Counter());

That's it! We've just built our first Leaf UI component. You can run this example by running leaf serve or php -S localhost:[port] in your terminal.

How does it work?

Leaf UI uses PHP to create HTML elements and render them to the DOM, attaches Leaf UI specific stuff to keep track of components, states and all that stuff. It also parses templates, handles things like loops, conditionals and other intensive stuff. This initial render is done on the server-side. This makes Leaf UI very fast and SEO friendly.
When an interaction happens on the client-side, Leaf UI sends an action to the server over an AJAX request, the server then replies with new markup and the refreshed state (if available).
When there's a change in your component's state, Leaf UI re-renders the component on the server-side and returns fresh markup. This markup is then diffed with the existing markup and only the parts that have changed are updated in the DOM.
Leaf UI has a smart diffing algorithm that only updates the parts of the DOM that have changed. This makes DOM updates very fast. It's also very lightweight because it doesn't use any virtual DOM or any other fancy stuff. It's just plain old DOM manipulation.

Edit this page on GitHub

Introduction #

What is Leaf UI? #

Getting Started #

Installation #