Building a Phoenix LiveView Native App: Our Experience

Recently, we took on an exciting challenge: converting an existing Phoenix LiveView web app into a native iOS app using Phoenix LiveView Native.

This experience provided valuable insights into handling new technologies, upgrading dependencies, and navigating development tools like Xcode.

Why Phoenix LiveView Native?

Phoenix LiveView is a powerful technology for building interactive user interfaces directly in Elixir. It allows developers to build rich, real-time applications without writing front-end JavaScript, making it an excellent choice for developers who want the simplicity of using a single language. LiveView Native brings these capabilities to native mobile apps, allowing us to reuse our existing Elixir codebase to build for mobile, creating a seamless integration between web and mobile versions.

The potential to develop both web and mobile applications using the same backend was a major motivation. This approach promised more efficient use of resources, consistent user experience across platforms, and significantly reduced development time.

The Setup: Upgrading Dependencies

To get started, the first step was upgrading our Phoenix project to support LiveView Native. This required an upgrade to Phoenix LiveView 0.18 and beyond, ensuring compatibility with the necessary versions of Elixir and Erlang. Since LiveView Native was still in active development, some tools and plugins were being released concurrently, adding complexity to dependency management.

We also needed to install Swift packages to connect our LiveView app to native iOS components. Swift, which is commonly used in iOS development, was crucial in integrating specific mobile functionalities that Phoenix couldn’t directly manage.

Working with Xcode

Once the codebase was ready, we moved to Xcode for compiling the application and setting up the iOS app structure. Configuring Xcode was initially challenging because of the specific settings required for LiveView Native. Importing the LiveView Native Swift Package and integrating it with our app took a few trials and errors, especially when linking the Elixir backend to the iOS front end.

Challenges and Solutions

One key challenge was handling real-time updates in the native environment. While Phoenix LiveView handles this well in a browser setting, ensuring the same performance on a mobile device required additional optimizations. We needed to manage network latency, reconnect scenarios, and efficient rendering of components to avoid draining device battery or overusing data.

Another hurdle was dealing with device permissions—such as accessing the camera or location services—that typically don’t come into play in a web application. Here, we leveraged Swift to manage native API integrations, bridging Phoenix functionality with iOS hardware.

Lessons Learned

The biggest lesson we learned was the power of community support and documentation. Since LiveView Native is still evolving, frequent updates and bug fixes meant keeping pace with the latest from the community. We also learned to be adaptable, as integrating backend and mobile tools required flexibility and innovative thinking.

The Outcome

The end result was a fully functioning iOS app that reused much of the code from the original web app while offering a native mobile experience. It retained the reactive, real-time capabilities of Phoenix LiveView and provided users with a consistent and engaging interface on both platforms.

If you’re considering building a cross-platform app using Elixir, LiveView Native is an exciting technology that can save significant time and resources. While it presents its share of challenges, the benefits of having a shared codebase and real-time UI capabilities make it worth exploring.

If your company is ready to take the next step towards cross-platform success, we at Fox Labs Developers can help.

Visit FoxLabsDevelopers.com to learn more and schedule a consultation today.

Let's bring your ideas to life!