Introduction

#What is EDGE?

EDGE (Element Definition and Generation Engine) is NativePHP for Mobile's component system that transforms Blade template syntax into platform-native UI elements that look beautiful whichever device your users are using.

Instead of rendering in the web view, EDGE components are compiled into truly native elements and live apart from the web view's lifecycle. This means they are persistent and offer truly native performance.

There's no custom rendering engine and complex ahead-of-time compilation process, just a lightweight transformation step that happens at runtime. You end up with pure, fast and flexible native components — all configured by PHP!

#Available Components

Our first set of components are focused on navigation, framing your application with beautiful, platform-dependent UI components. These familiar navigational elements will help your users feel immediately at home in your app and elevate your app to feeling built for their chosen platform, just like a true native app.

And all that without compromising your ability to build using tools and techniques you're already the most comfortable with.

For now, we have 3 main native components that you can configure:

• Bottom Navigation - The always-accessible bottom navigation bar
• Top Bar - A title bar with action buttons
• Side Navigation - A slide-out navigation drawer

#How It Works

<native:bottom-nav>
    <native:bottom-nav-item id="home" icon="home" label="Home" url="/home" />
</native:bottom-nav>

You simply define your components in Blade and EDGE processes these during each request, passing instructions to the native side. The native UI rendering pipeline takes over to generate your defined components and builds the interface just the way your users would expect, enabling your app to use the latest and greatest parts of each platform, such as Liquid Glass on iOS.

Under the hood, the Blade components are compiled down to a simple JSON configuration which we pass to the native side. The native code already contains the generic components compiled-in. These are then rendered as needed based on the JSON configuration.

#Why Blade?

Blade is an expressive and straightforward templating language that is very familiar to most Laravel users, and also super accessible to anyone who's used to writing HTML. All of our components are Blade components, which allows us to use Blade's battle-tested processing engine to rapidly compile the necessary transformation just in time.

#Where to define your native components

They can be defined in any Blade file, but for them to be processed, that Blade file will need to be rendered. We recommend putting your components in a Blade component that is likely to be rendered on every request, such as your main layout, e.g. layouts/app.blade.php or one of its child views/components.

#Using Inertia?

Each link in an EDGE component will do a full post back to PHP, which may not be what you want if you are using Inertia. To transform these requests into Inertia <Link>, add router to your window object:

import { router } from '@inertiajs/vue3';
 
declare global {
    interface Window {
        router: typeof router;
    }
}
 
window.router = router;