Overview
LiveView Native is a framework for building native applications using Elixir and Phoenix LiveView. It allows a single application to serve a multitude of clients by transforming platform-specific template code into native user interfaces. Here's a basic example that serves web, iOS, iPadOS and macOS clients natively:
Source
# lib/my_app_web/live/hello_live.ex
defmodule MyAppWeb.HelloLive do
use Phoenix.LiveView
use LiveViewNative.LiveView
@impl true
def render(%{platform_id: :swiftui} = assigns) do
# This UI renders on the iPhone / iPad app
~SWIFTUI"""
<VStack>
<Text>
Hello native!
</Text>
</VStack>
"""
end
@impl true
def render(%{} = assigns) do
# This UI renders on the web
~H"""
<div class="flex w-full h-screen items-center">
<span class="w-full text-center">
Hello web!
</span>
</div>
"""
end
end
iOS
iPadOS
macOS
Web
By using LiveView Native in an existing Phoenix project, developers are able to deliver rich, real-time UIs for a multitude of web and non-web clients generated entirely by the server. Live sessions, state, event callbacks and glue code can be shared across all target platforms, with each platform having its own custom-tailored template or function component.
LiveView Native officially supports using LiveView for the following native clients:
- iOS 16+
- macOS 13+
- watchOS 9+
- Android
LiveView Native requires some foundational knowledge to use. You should already be familiar with Elixir, the Phoenix Framework and Phoenix LiveView. If you're looking to learn more about any of these subjects, there are a lot of great resources available. Some recommended materials include the Elixir guides, Elixir learning resources page, Phoenix guides, Phoenix community page and the Phoenix LiveView HexDocs.
With those prerequisites out of the way, let's get LiveView Native installed!