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