LiveView Native at first glance

Recently I had a small chat with bcardarella on X about LiveView and decided to put it into separate article. In my everyday work I use Elixir/Phoenix and Flutter. I even created cross platform music player fully powered by flutter, so LVN was really interesting for me to try.

Before moving into details I wanted to explain what is server driven UI for mobile apps and why you might need it.

Generally server driven UI is a paradigm when your UI being created on server and sent to mobile. This is common approach for web apps with SSR but not so common for mobile apps. Its not common for mobile apps because in most cases you want your app to be able to run app with slow connection or even without it — so your UI renders and then/meanwhile it loads data from your server. However there are apps which fully powered by server. As a good example — Home Assistant companion app when the app itself is just a shelf which later renders UI. Usually it powered by rendering webview and then webview renders the UI. This is working approach but it totally misses native feel of UI. All of us worked with native apps and you immediately see when its just a webview.

Such paradigm often used for apps when you need to change UI per each user or just deploy changes very often, so it would make little sense to wait for app reviews on appstore/google play.

LiveView Native is a new kid on the block. The difference between LVN and other webview powered apps — is that LVN allows you to render native UI elements from server. Currently while LVN is in alpha they might miss some of UI elements but from what I checked in docs it has all UI components I needed for my small tests.

That means you have 1:1 mapping between LVN and for example SwiftUI, so here’s how code example looks from LVN side

For anyone familiar with SwiftUI you immediately see how close LVN layout to SwiftUI. I didnt try android but from docs it looks to be same approach.

My impressions

First thing I noticed — ease of setup. It took literally just few minutes to add LVN to Phoenix app and get it running inside iOS simulator. All code generated for you with generators, including Xcode project, so the only thing you have to do — create new LiveView Native module and plug it to routes.

Next thing I liked is that you can reuse your existing business logic and build your UI on top of it, sharing it with your Phoenix Web app

Since LVN is server driven UI — that means you don’t have offline mode at all. You can’t even launch app without connection. For most cases thats totally ok, but if you want your app to support offline mode or at least show cached values — you’ll have to either wait for offline support, which was promised by core team or just use another technology to build app.

Similarity to native platform — its a good and bad thing. If you familar with SwiftUI or android development — you’ll have very easy time learning this lib and can start delivering features almost immediately. I don’t have much SwiftUI experience but example above I was able to put together in just few minutes from memory

Due to app rendering UI using platform views and components — you have full control over UI debugging right in XCode. At first it didn’t work for me, so I had to go back and forth a bit, but since this is relatively new lib that is totally normal and after about 15 minutes I got it working.

Another good thing — is that you can ship apps for whole ecosystem. SwiftUI supports AppleTV for example that means you can ship the app using LVN. It also supports watchOS, so you also can ship apple watch apps and so on.

There are few minor issues I noticed with components, such as <Toggle> isOn didn’t really work outside of <LiveForm> but there’s github issue already where this promised to be fixed.

But you’re free to create your own styles and modifiers in similar manner as you’d do it with SwiftUI, this already supported and provides many ways to customize your UI but stay fully native.

Plugins

Its too early to speak about plugins now since LVN is in early stages, but if team comes up with solution to have similar experience as with Flutter — that will be a big win and will grant support from community and more new plugins and integrations

State management

State management is always hard. There are few approaches how you build apps and how data flows but with server driven UI — your state also maintained by server which completely removes a need to manage it locally.

Conclusion

At this stage its too early to say if its good or bad. LVN definitely will have its customers, and existing Elixir devs can get into mobile development relatively easily. Server driven UI might scare some people off, but I hope team can deliver offline mode by running elixir server on device which in turn can be a really nice features, since you can possibly have both — remote driven and local driven UIs which works when remove isn’t available.

One of coolest things is that you can build it for anything that supports SwiftUI(or android counterpart). With flutter you can’t really build watchOS or appleTV apps(although there are 3rd party attempts to bring it to flutter)

As mobile/web engineer I’m happy there are more tools being created and I’ll keep an eye on LVN and hope it will become production ready eventually!