Mobile app development with LiveView Native and Elixir

What is LiveView Native

Introducing LiveView Native, the cutting-edge framework from Dockyard

Do more with less, with LiveView Native

On August 2nd, 2024, Dockyard released a new version of LiveView Native with the tag v0.3.0-rc.3. I have updated the code in this tutorial to support the latest release.

LiveView Native enables Elixir developers to build mobile applications with LiveView, streamlining web and mobile app development. Similar to React Native, it boosts team efficiency by removing the need for multiple frameworks and languages.

DockYard CEO Brian Cardarella says, "With Phoenix handling web views, mobile native views, and serving as the server-side framework, it creates a more unified team."

LiveView Native empowers small engineering teams to build custom web and mobile applications using Elixir and LiveView's speed, reliability, and concurrency benefits. It helps meet product deadlines faster by simplifying web and native development.

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

Additionally, LiveView Native allows developers to create native-looking applications for iOS and Android without forcing the use of a single UI across all platforms.

Setup

Prerequisite: You’ve installed Elixir, Phoenix framework, Xcode, and Android Studio. We’ll only set up the iOS app in this blog since the Android version of LiveView Native is unstable.

Let’s start building the live view native with the Phoenix application by creating the Phoenix app with the following command.

mix phx.new native_demo

Our LiveView Native integration starts here.

Open the project folder in your preferred code editor, such as VS Code.

Make sure your project is using Elixir version 1.15 or higher.

Please begin implementing the changes in the code according to the instructions provided below.

mix.exs

{:live_view_native, "~> 0.3.0"},
{:live_view_native_stylesheet, "~> 0.3.0"},
{:live_view_native_swiftui, "~> 0.3.0"},
{:live_view_native_live_form, "~> 0.3.0"}

Upon completing the aforementioned change, the next step is to install dependencies by entering the following command.

mix deps.get

After installing all the dependencies, we need to execute one additional command.

mix lvn.setup

This command will efficiently compile your code and promptly display the result as follows.

To set up your application with LiveView Native run:

> mix lvn.setup.config
> mix lvn.setup.gen

So, if we execute the command mix lvn.setup.config we will be prompted as follows:

Write to config/config.exs
(y)es (n)o (d)iff

Here, enter y. To check the difference, enter d for the output.

...|
64 64   |# Import environment specific config. This must remain at the bottom
65 65   |# of this file so it overrides the configuration defined above.
   66 + |config :live_view_native, plugins: [
   67 + |  LiveViewNative.SwiftUI
   68 + |]
   69 + |
   70 + |config :mime, :types, %{
   71 + |  "text/styles" => ["styles"],
   72 + |  "text/swiftui" => ["swiftui"]
   73 + |}
   74 + |
   75 + |config :phoenix_template, :format_encoders, [
   76 + |  swiftui: Phoenix.HTML.Engine
   77 + |]
   78 + |
   79 + |config :phoenix, :template_engines, [
   80 + |  neex: LiveViewNative.Engine
   81 + |]
   82 + |
   83 + |config :live_view_native_stylesheet,
   84 + |  content: [
   85 + |    swiftui: [
   86 + |      "lib/**/swiftui/*",
   87 + |      "lib/**/*swiftui*"
   88 + |    ]
   89 + |  ],
   90 + |  output: "priv/static/assets"
   91 + |
66 92   |import_config "#{config_env()}.exs"
67 93   |

So, you will get these prompts for the following files.

• config/config.exs
• config/dev.exs
• lib/lvtest_web/endpoint.ex
• lib/lvtest_web/router.ex

After finalising the changes for the files mentioned above, it is crucial to execute the following command to produce the Xcode project.

mix lvn.setup.gen

Create a new directory named live at the same level as the components directory. Add 2 new files: home_live.ex and home_live.swiftui.ex with the specified 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 the following code.

Upon implementing these modifications, the lib directory of the project will exhibit the following folder structure.

After this, go to the native/swiftui directory and open the .xcodeproj file. When you run the app on the simulator, Xcode will display a popup as shown below.

Click Trust & Enable All, then rerun the application from Xcode to check for errors.

After selecting an error, a popup will appear.

Click Trust & Enable for all errors. After enabling macros, build and run the app. The iOS simulator should display the expected screen if done correctly.

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

If you can see this on your simulator and browser, congratulations! You've successfully integrated live view native into the Phoenix application.

Sample code can be found on Github. If you encounter issues, try deleting the _build directory and recompile the code using the mix compile command.

Feel free to reach out to me if you have any questions or need assistance.
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 how to handle the states in web and mobile apps when using live view native.

Stay tuned!!!

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