Frontend
Both Leaf and Leaf MVC offer first-class support for frontend tooling and libraries. This includes support for different templating engines, CSS preprocessors, and JavaScript libraries.
Templating Engines
Leaf is modular and allows you to use any templating engine you want, however, it comes with 2 first-class templating engines:
- Leaf's BareUI engine
- Laravel's Blade engine
While both of these engines are great, they both have their own strengths and weaknesses. Leaf's BareUI engine is a simple, lightweight, and fast engine but it's not as feature-rich as Blade. Blade, on the other hand, is a feature-rich engine with a lot of features but it's not as fast as BareUI since it has to compile and cache views.
BareUI relies on PHP's innate templating capabilities so it's syntax is PHP's syntax. Blade, on the other hand, has its own syntax using @ directives. They are both great engines and the choice of which to use is up to you.
| Engine | Speed | Cool Magic | Lightweight | Editor Support |
|---|---|---|---|---|
| bareui | ⚡️ | ❌ | ⚡️ | ⚡️ |
| blade | ❌ | ⚡️ | ❌ | ⚡️ |
Asset Bundling
Leaf provides first-class support for asset bundling using Vite. Vite is a modern build tool for frontend applications which aims to provide a faster and leaner development experience for modern web projects. Vite and Leaf make the perfect pair for building modern web applications since they are both fast and lightweight.
Bundling assets allows you to write your frontend code in a modular way and then bundle it into a single file for production. This makes your frontend code more maintainable and easier to work with. Vite also allows you to use modern JavaScript features like ES6 modules, JSX, and even TypeScript.
The Vite + Leaf stack unlocks a lot of possibilities for building modern web applications with Leaf and your favorite frontend tooling. You can find the full documentation on the Vite module page
Frontend Frameworks
Modern web apps are built on the backs of powerful UI libraries like React, Vue, and Svelte. Leaf provides an easy way to integrate these libraries into your Leaf applications using Inertia.js.
Inertia acts as a bridge between your Leaf backend and your frontend UI library that allows them to communicate seamlessly. This allows you to build modern web applications with Leaf and your favorite frontend library without much of the complexity that comes with modern SPAs.
You can find the full documentation on the Inertia module page