What is LiveView Native

LiveView Native is a new framework by Dockyard.

Do more with less, with LiveView Native

As their tag line suggests, it allows Elixir developers to create mobile applications using LiveView, enabling teams to seamlessly build both web and mobile applications with Elixir. Similar to how React Native works for JavaScript, LiveView Native enhances team efficiency by eliminating the need for multiple frameworks or programming languages.

According to DockYard CEO Brian Cardarella, "With Phoenix handling your web views, your mobile native views, and serving as your server-side framework, it creates a more unified and single-stack team."

LiveView Native empowers even small engineering teams to develop custom web and mobile applications, leveraging Elixir and LiveView’s speed, reliability, and concurrency benefits. It helps meet product deadlines faster by reducing obstacles and potential delays since one team can handle both web and native development.

The benefits extend beyond development, as a single team can manage both web and mobile applications, removing barriers related to multiple frameworks and languages, thus achieving more with fewer resources.

Additionally, LiveView Native doesn’t force developers to use a single UI across all platforms. Whether building for iOS or Android, it provides tools to create applications that look and function like true native products, using templates that utilize the native component UI for each platform.

Setup

Prerequisite: You have already installed elixir, phoenix framework along with Xcode and Android studio on you'r machine.

Since android version of LiveView Native is not stable yet, we will be setting up only iOS app in this blog.

With this enough information, let's start with building live view native with Phoenix application.

Let's start with creating phoenix app first with following command

mix phx.new native_demo

Our actual live view integration starts from here.

Open project folder in any of your favourite code editor, I am using VS Code in this case.

Make sure that your project is using elixir version 1.15 and above.

Now start making changes in the code as shown below.

mix.exs

{:live_view_native, github: "liveview-native/live_view_native", branch: "main", override: true},
{:live_view_native_stylesheet, github: "liveview-native/live_view_native_stylesheet", branch: "main"},
{:live_view_native_swiftui, github: "liveview-native/liveview-client-swiftui", branch: "main"},
{:live_view_native_live_form, github: "liveview-native/liveview-native-live-form"},
{:live_view_native_jetpack, github: "liveview-native/liveview-client-jetpack", branch: "main"}

And add following line to config.exs (I somehow missed this step, Thanks to @maratk )

config :live_view_native, plugins: [
  LiveViewNative.SwiftUI
]

Post this, install dependencies manually using following command.

mix deps.get

Live view native will some mix tasks to your project to help you out with setup of live view native.

Let's setup live view native in our app using following command in the terminal

mix lvn.setup

This command will create some necessary files in our project.

You can learn more about lvn task from below command.

mix help lvn.swiftui.gen

After that run the following command in the terminal

mix lvn.swiftui.gen

This command will create new swiftui project under the native directory which got created automatically in the root directory of the project. Also it will create some core components for swiftui.

Incase you lost those changes from terminal, no need to worry. You can use following command to see it again.

mix lvn.gen --no-copy

This command will show the list of changes that we are supposed to add manually into our application. Please make sure that your make all the changes that are mentioned under the header LVN - Required
This is the most crucial step in the live view native integration.

Now, head over to the components directory of the app and create new directory with the name layouts_swiftui and add 2 new files with the name app.swiftui.neex and root.swiftui.neex with following content.

root.swiftui.neex

<.csrf_token />
<Style url={~p"/assets/app.swiftui.styles"} />
<NavigationStack>
  <%= @inner_content %>
</NavigationStack>

app.swiftui.neex

<%= @inner_content %>

Then create a new directory with the name styles with the same level as that of components directory and add 2 new files with the name app.jetpack.ex and app.swiftui.ex with following content.

app.jetpack.ex

defmodule NativeDemoWeb.Styles.App.Jetpack do
  use LiveViewNative.Stylesheet, :jetpack

  ~SHEET"""
  """  
end

app.swiftui.ex

defmodule NativeDemoWeb.Styles.App.SwiftUI do
  use LiveViewNative.Stylesheet, :swiftui

  ~SHEET"""
  """  
end

Now, create a new directory with the name live with the same level as that of components directory and add 2 new files with the name home_live.ex and home_live.swiftui.ex with following content.

home_live.ex

defmodule NativeDemoWeb.HomeLive do
  use NativeDemoWeb, :live_view

  use LiveViewNative.LiveView,
    formats: [:swiftui],
    layouts: [
      swiftui: {NativeDemoWeb.Layouts.SwiftUI, :app}
    ]

  def render(assigns) do
    ~H"""
    <div>
      Hello from Web
    </div>
    """
  end
end

home_live.swiftui.ex

defmodule NativeDemoWeb.HomeLive.SwiftUI do
  use NativeDemoNative, [:render_component, format: :swiftui]

  def render(assigns, _interface) do
    ~LVN"""
    <VStack id="hello-ios">
      <HStack>
        <Text>Hello iOS!</Text>
      </HStack>
    </VStack>
    """
  end
end

Then, open the router.ex and add following code.

After making those changes, folder structure of project's lib directory will look something like this.

After this, head out to native/swiftui directory and open the file with the extension .xcodeproj and then when you try to run the app on simulator, xcode will show popup like shown below.

All that you have to do is click on Trust & Enable All.

Then try to re-run the application from xcode, you can see some error as shown below.

Then you have to select any error, you will see following popup.

We need to click on Trust & Enable button. We have to perform this steps for all the errors.

Once you done with enabling all the macros, try to build and run the app.

If everything done properly, you should be able to see following screen on iOS simulator

and if you hit http://localhost:4000/home from your browser, should be able to see following.

If you are able to see this on your simulator and browser, congratulations. You have successfully integrated live view native into phoenix aplication.

You can find sample code on Github

In case if you face any issue, try deleting _build directory and compile code again using mix compile command.

If you have any suggestions/doubts or stuck somewhere in this process, feel free to reach to me via one of the following method.

LinkedIn : https://www.linkedin.com/in/rushikesh-pandit-646834100/
GitHub : https://github.com/rushikeshpandit
Portfolio : https://www.rushikeshpandit.in

In my next blog, I will be covering the about how to handle the states in web and mobile app when using live view native.

Stay tuned!!!

#myelixirstatus , #liveviewnative , #dockyard , #elixir , #phoenixframework