Hi. Currently Elm targets mostly browser for development. We’ve seen many interesting projects where community expands Elm to different platforms, such as CLI, backend, mobile, etc… In this topic I’d like to focus on mobile platforms.
I’m developing a mobile app and for sure would like to get a better support from Elm on mobile platforms. I’m using Cordova at the moment with great success and preparing the app to be published to App and Play stores. Test flight version of an app is available for iOs.
Biggest pain points so far is lack of native feelings from the app. Even though I have reimplemented native like functionality I want for my app I pretty sure we as a community can do better.
I have two ideas I’d like to share and get feedback from the community in order to understand how to get better support from Elm on mobile platforms.
1. Proper gesture library and friends.
Browser API provides touch/pointer events but proper gesture library is missing in Elm. I have a feeling that a gesture library together with a set of UI elements implemented based on gesture library can provide pretty decent native like feeling from a mobile app. A gesture is just a pattern made with finger(s). Thus it’s only math and can be implemented purely in Elm.
Gesture examples:
Tap
Pinch
Rotation
Swipe
Pan
LongPress
…
Pros:
A final solution will be native for Elm language.
Mobile platform independency
No build platforms required for development (e.g. XCode, Android Studio).
No breaks on mobile platform updates.
No need to strictly follow mobile platform APIs.
It’s possible to implement mostly identical native feeling from the app.
Cons:
Web view should be used, thus app builder requires a wrapper (e.g. Cordova or custom simple wrapper).
A lot of native UI elements and libraries should be reimplemented to be native for Elm language.
2. Transpiler to existing JS -> mobile platform solution.
There are various existing solutions available such as ReactNative, NativeScript, etc… It’s possible to write a transpiler from Elm to such technology so that it can be used natively for target technology. I’m not talking about kernel code solutions. I’m thinking about platform workers which can be brains of mobile apps. An idea is to write Mobile.application (similar to Browser.application) which will be a Platform.worker under the hood and will transpile view part into a target technology (e.g. ReactNative, NativeScript, etc…). So the output of such tool will be two parts (or files), one is Elm runtime with init, update, subscriptions part and another is transpiled view part.
Pros:
A lot of UI components and libraries available almost from the beginning.
All the tooling for target technology is available from the beginning (easy app builds, etc…).
Cons:
For such tool to exist both Elm package and e.g. npm library should exist (for binary/CLI to run)
Target technology dependency (APIs of ReactNative, NativeScript, etc… are changing very fast so need to follow).
Feedback wanted:
Personally I’ve started both projects and I’m sure it’s possible to do both. But such projects are too big for me to maintain alone Though I think it can be great community driven project and Elm on mobile can grow and shine along with Elm in the browser. What do you think/feel folks would work better for community? My personal preference is for sure native solution for Elm language.
Short term I think a wrapper of some kind (custom web view, react native, Cordova, etc) are the best approach. Long term I feel like something along the lines of Android.application, IOs.application, etc would be best. Compiling Elm to the platforms make native language would allow for simpler interop (e.g. Java <-> Elm instead of Java <-> web <-> Elm) and better optimization.
I think a library for swipes and other gestures would be awesome and helpful.
I agree with @wolfadex that short term wrapping with some WebView will be the best option
This may not be a widely shared opinion yet, but I believe long-term PWAs are going to slowly eat up mobile apps market share increasingly because of their superior cross platform abilities. Once Web Assembly lands I think that the remaining peformance differences will fade away. This scenario could still be 5-10 years away but I think this is a likely outcome of the current developments.
There used to be the Elm-Native-UI project which did something that sounds like what you describe in point 2.
Just a quick note, for a gesture library it would be good (or even necessary) to have a touch/pointer based API in elm/browser, like it exists for mouse.
Also, for ease of use, event decoders in elm-pointer-events are decoding almost all properties, and are thus very heavy for the task of gestures. Dedicated minimalist decoders would be more appropriate.
Regarding native stuff - i had successfully build elm into native app for mobile using Ejecta (https://impactjs.com/ejecta) - works great - problem it is webgl based,
Same stuff was done for desktop - using glfw-raub, image-raub, webgl-raub and pkg Example of pkg way
Pros:
All works in native view (OpenGL)
There is no visible JS code
Cons:
Requires some mock code - to wrap DOM in node
Works only with WebGL based apps
Suggestion:
We can make in the same way wrapper around “native” components, just by using Html.node.
Then just use some build DOM wrapper (like Ejecta) - that will capture all events / element creation from elm - and just do native stuff based on that. With that way you will not need to use any custom Elm -> Targed View Builder - just bare elm, with UI lib, that can target customElements in a browser, and other stuff in mobile apps
Also I have plans to create webgl-UI fo my Tile map editor , based on justgook/webgl-playground - that would allow me using already known technologies build “native” / mobile aps
Though I think it can be great community driven project and Elm on mobile can grow and shine along with Elm in the browser. What do you think/feel folks would work better for community? My personal preference is for sure native solution for Elm language.