LiveView Native and Elixir: The Key to Fast, Affordable, and Efficient Mobile App Development

An analog clock sitting on top of a pile of coins
Cynthia  Gandarilla

Content Marketing Strategist

Cynthia Gandarilla

Whether you’re part of a startup or a large-scale enterprise development team, you need to save time, money, and resources. Elixir and LiveView Native do that for you. Learn all the ways Elixir can help you launch a better digital product faster and more efficiently by reading our free Ebook, “The Business Value of Elixir”.

You’ve just written the last few LOCs on a brilliant new web app in Elixir, and you get a surprise ping on Jira: Your technical product manager is asking you how many story points you’ll need to develop a native mobile app that connects to the backend you just deployed to production. They also very helpfully suggest you build this mobile app with React Native, because they watched a YouTube video about building a TODO app with the framework and thought it looked neat.

You put your frustrations aside and respond with your own question: How much are we willing to spend on a native mobile app built on React or any other framework?

The question you want to ask your PM peer, but keep to yourself, is: Why on earth would we want to do the same work twice when LiveView Native is an option? How much are we willing to give up if we ignore it?

The Elixir-Wide Need for LiveView Native

Back in 2019, the folks behind the Phoenix framework released Phoenix LiveView, a server-centric model for building real-time web applications. LiveView initially renders the page statically with regular HTTP requests, then transitions into a persistent WebSockets connection between the client and server that synchronizes data and state in real time when any changes occur on the server.

Developers of all stripes, both those already within the Elixir ecosystem and beyond, have since turned to LiveView for how effectively it unifies a development environment that used to require multiple tools and frameworks. On the user side, LiveView also creates a snappier, more seamless experience because it only sends the delta of changed data—not an entire webpage—to limit payloads and latency.

The DockYard team followed up Phoenix Liveview with LiveView Native in 2022, which allows a single Phoenix LiveView to interact with any number of clients—including those written in SwiftUI and Jetpack for iOS and Android devices, respectively—without having to write the same business logic multiple times, in fragmented frameworks, while trying to coordinate multiple teams.

If LiveView widened the pool of those who could benefit from developing with Elixir, then LiveView Native made it undeniably relevant for the future of native mobile apps.

The Cost of Mix-and-Match Development with Elixir and Native Apps

Before LiveView and LiveView Native, you would’ve needed to pick a second framework and language—an entirely new software development lifecycle (SDLC)—to connect to your existing Elixir backend. With a new SDLC, you add W time spent on developing new features + X time spent on engineering and operations + Y time on testing + Z time fixing new and discrete bugs.

You’d also need an entirely separate team to manage all this work—the hiring alone would demolish even the most generous of budgets for building a mobile app.

To illustrate the cost of using other frameworks for native app development, we sought quotes from three reputable software development agencies to build a native mobile application. The scope of work included both the user-facing mobile application and the backend required to create a real-time chat experience and persist data.

The product requirements document (PRD) requires that users login via a unique six-digit code, from iOS or web clients and multiple devices simultaneously. Once authenticated, users should be able to view available chat rooms by conference schedule, chat, view persistent chat history, and, as a stretch goal, share links or media.

Agency #1

This agency offered two options: one using React for the front end and Elixir as the back end, and another with Swift and Elixir.

For React+Elixir, they estimated 680 hours for a lead developer at 640 hours for the back-end engineer, taking no less than 17 weeks to complete. Developing in Swift lengthened the project to 22 weeks, with 880 hours for the lead developer and 640 hours for their back-end peer.

Agency #2

The second agency offered a different approach—React for the front end and Node.js for the back end—with three senior iOS/back-end/React developers, each requiring 480 hours and 12 weeks to meet the PRD’s requirements.

Agency #3

Using the same React+Node.js framework, the third agency requested 10 weeks for three software engineers at 400 hours and a QA tester at 150 hours.

LiveView Native

The estimate for developing the same application using LiveView Native, which uses a single Elixir codebase for web front end, mobile front end, and back end, is only 8 weeks, with 320 hours for a lead developer and 80 hours for a QA tester.

Tallying Up the Costs

The fastest time to market of the agency estimates is 17 weeks and more than 1,300 hours, which will inevitably come at a considerable cost to your organization. These only account for building the application according to the PRD, and don’t include bug fixes or ongoing operational support.

LiveView Native saves at least 40% of the development time—and thus cost—of using other native app frameworks.

The cost savings of LiveView Native aren’t just in a shortened timeline and fewer billable hours, either. Instead of branching off into multiple languages and frameworks, which create siloed SDLCs you must manage separately, you’re building native app capabilities from an already strong Elixir foundation using a single code base and team.

Beyond Cost: The Benefits of Elixir for Mobile Apps

Say you have a blank check to get this mobile app out the door and your technical product manager, for the first time, isn’t asking for a concrete timeframe for deploying to production. You could, in this scenario, “afford” one of the agency proposals to outsource the work entirely.

Even in this case, Elixir pays far bigger dividends during development and well after you go live for the first time.

  • Your LiveView Native application will be faster and lighter. Thanks to the immutability of Elixir, LiveView Native sends the least data possible upon any server-side change, using a low-latency WebSockets connection, for the responsive, satisfying experience users want—especially on real-time experiences.

  • You deliver a more consistent user experience. Because LiveView Native apps transform platform-agnostic Elixir code into native user interfaces, your production-grade web and mobile apps feel like they’re one in the same.

  • Your release cycle gets shorter. The simplicity and unity of your Elixir codebase means you push bug fixes and security improvements faster and with bigger end-user impact, letting you focus on building MVPs or whittling away at tech debt.

  • You can add more real-time features to your app. No need to add message queues or external databases to handle distributed workloads and events—the server-centric model of Elixir and LiveView Native allow you to push events to users ASAP, no matter where they happen in the system.

  • You build with confidence. With Elixir and the Erlang VM at your back, any errors or crashes you inadvertently introduce into your application are compartmentalized to prevent them from bringing down your backend and hurting the end-user experience.

  • You build more resilient and scalable systems. Elixir’s built-in concurrency, error-reporting, testing, and performance profiling capabilities help you optimize for either vertical or horizontal scale.

With the Elixir ecosystem, you can spend more time being strategic. More time to design a lasting impact on your organization’s tech may just be the biggest unblocker of them all.

Conclusion

To keep up with the latest on LiveView Native, you can join the #liveview-native channel on the Elixir Lang Slack or join the ongoing development on GitHub.

If our experiment hasn’t fully convinced you of cost savings and efficiency gains possible with Elixir, continue reading with our Ebook—The Business Value of Elixir—for more real-world data on how happier developers and Elixir’s concurrency and real-time interactivity are paying big dividends at multimillion-dollar operations.

Newsletter

Stay in the Know

Get the latest news and insights on Elixir, Phoenix, machine learning, product strategy, and more—delivered straight to your inbox.

Narwin holding a press release sheet while opening the DockYard brand kit box