⬡ Lacelium
⌘K
Version 2.x ▾

Frontend & Asset Pipeline

Introduction

Lacelium pairs the productivity of server-side PHP rendering with modern, responsive frontend capabilities. Rather than forcing you into a single monolithic JavaScript framework, Lacelium provides a flexible pipeline supporting native Twig 3.x templates, vanilla modern CSS/JS, Single Page Application (SPA) DOM swapping, and real-time Nexify event streaming.

Twig Templating Engine

Lacelium uses Twig as its default template engine. Twig provides a fast, secure, and readable syntax for rendering HTML layouts, looping through data, and applying formatting filters.

Template Inheritance

All documentation and application pages inherit from a shared base layout using the {% extends %} tag:

{% extends "shared/layouts/top.twig" %}

{% block title %}My Dashboard{% endblock %}

{% block docs_content %}
    
Welcome, {{ user.name }}!

{% endblock %}

Custom Filters & Functions

Lacelium registers convenient global functions and filters directly into the Twig environment:

  • app_config('key'): Read application configuration.
  • app_locale(): Output the active language locale.
  • csrf_field(): Render a hidden CSRF token input.
  • uuidV4(): Generate unique identifiers on the fly.

JavaScript & CSS Assets

Public assets are located in the public/assets/ directory. You can organize your stylesheets and scripts cleanly without requiring complex build steps for lightweight projects.

Vanilla CSS Design System

Lacelium ships with a modern, zero-dependency design system in public/assets/docs.css, featuring:

  • CSS Custom Properties (tokens) for responsive light and dark themes.
  • High-performance glassmorphism and blur backdrops.
  • Keyboard-accessible modal dialogs and dropdown menus.
  • Syntax-highlighted code blocks with built-in clipboard copy buttons.

Bundling with Modern Tools

If your project requires TypeScript, React, Vue, or SASS, you can easily integrate Vite. Simply initialize Vite in your project root and configure the output directory to public/build:

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        outDir: 'public/build',
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },
});

Real-time Nexify & Lacelive

For applications that require live notifications, real-time chats, or collaborative dashboards, Lacelium includes the built-in Nexify real-time engine. Nexify shares the exact same host and port as your Lacelium application, eliminating firewall conflicts and port fragmentation.

You can connect from the browser using standard WebSocket APIs or Lacelium's native event bus:

// Connect dynamically to the same host & port as Lacelium
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const socket = new WebSocket(`${protocol}//${window.location.host}`);

socket.onopen = function () {
    console.log('Connected to Lacelium Nexify engine on port ' + window.location.port);
};

socket.onmessage = function (event) {
    const data = JSON.parse(event.data);
    console.log('Received real-time event:', data);
};

Next Steps