Mobile app alternative (PWA) via ELM?

Learn
1

Hi I’m new to ELM. I’m not new to software engineering (I’m teaching software engineering to bachelor students and I intend to use Elm / Elixir for 1st time, I also work as a consultant) .
I seek to build a mobile application but not as a native app. I consider building a PWA.

I was thinking of combining elm/elixir/phoenix. I discovered Elixir LifeView as a terrific way to easily add dynamism to the front end. It’s still getting more mature but it looks very promising (although it doesn’t cover offline situations).

I’m surprised to find no discussions whatsoever on combining elm+LiveView. Is the latter seen as competition for elm? Is it too different?

What would be my best approach to building a close-to-mobile solution including offline storage? Using Elm?

Thanks for any help
Greatly appreciated.
Marc

1 Like
2

Hey Marc! I’d check out Google’s guide to building PWAs, which can be found here!

I dunno how much of the PWA-stuff you already know about, but you can get really far by setting up:

  1. a simple development-server, maybe using live-server.
  2. an Elm app, and the HTML-document to embed it in.
  3. some icons.
  4. a manifest.json file to specify the app-stuff. It’s described on the google-site.
  5. a service-worker to handle interception of network-requests, enabling offline storage. Also described on google-site.
  • If you want to test how well your app works, you can connect to it from your phone over the local network, using the localhost portnumber + your computers local address. This is great during development, and works nicely with live-server
  • Use Lighthouse for auditing. It’s built into Chrome’s developer-tools, which ships with all browsers based on Chromium. It has great feedback on how well your app works, also in terms of the PWA stuff. You can run it directly in the browser.

Be wary of the offline-features during development, as asset-caching can interfere with the file-changes you’re making. These can be toggled on/off in Chrome(ium)-devtools.

Let me know if you have any specific questions, or something more in-depth you want to discuss on, for example, Slack :sunny:

1 Like
3

Check out create-elm-app

npm -g install create-elm-app 
create-elm-app appname
cd appname
elm-app start

And your elm pwa is ready :slight_smile:
It even has hot reloading so you can see changes on your device immediatly.
And production ready builds (elm-app build)

With indexdb you can easily store many gb of data offline with great browser support, also on mobile.

3 Likes
4

Hi,

(Is your first name Asger?)

Thanks a lot for this input. I know the theory about PWA but never built one myself. My experience is mainly with websites and even there the heavy lifting was done by other people.

My real developer expertise is more with good old client/server fat clients. However I do have some asp.net and Ruby on Rails web building experience.

This time I want to build it completely in my own. I’m a bit afraid of wasting valuable time over stupid details (I’ve often seen it in web projects). My only mobile experience is with web using bootstrap. I also have some experience with offline storage and that was quite alarming as to how much work it took to keep offline and online in sync.

Thanks for the pointers!

Any warnings or advice are welcomed.

Best regards

Marc

5

Hi,

(Not sure what your first name is ;-))

Thanks a lot!!!

Have a very nice day.

Best regards

Marc

6

As far as I know, LiveView controls the DOM updates from the backend whereas Elm works from the browser, so I struggle to see how they could be combined. Do you have an example in mind?

7

Dear dmy,

I know ELM and LiveView both impact the browser content in a different way.

In fact at first I was wondering if LiveView could be seen as a replacement for ELM (in order to simplify my development stack/toolset).

However, since LiveView doesn’t cover the pure client-side use cases (offline !), I reconsidered ELM.

But then I thought: maybe combining them would offer some advantages?

What I had in mind as a use case:

  • ELM could cover the basic page setup + the offline cases whereas LiveView could be used in all other cases (as long as it is fast enough).
  • Indeed, many (most?) cases don’t require a (browser managed) client-side approach.
    and LiveView is particularly fast because of the super lightweight payload in communicating between server and client.
  • Also LiveView benefits of the OTP (BEAM) via Elixir with all its advantages.

So the big deal could be a central management (+ maintenance) and less client-specific issues.

What we might also need to take into account:

  • LiveView seems to have been meant as an alternative to Javascript. In particular js-frameworks like Angular, ReactJs and Vue.
  • The problem is I don’t have the required experience with ELM to judge if in the case of ELM Javascript is an issue at all and thus LiveView would have no improvements to offer?

I hoped to find discussions between experienced people from which I could deduce what to choose as a development stack/toolset.
I’d like to avoid weeks and weeks of wasted time to discover myself the hard way what works and what doesn’t.

I read quite some opposite opinions on ELM. Some are very strong in favour of ELM and even those who moved to another stack, still admit they miss many of the facilities that come with ELM.
The latter convinces me to start and try ELM anyway.

Summary of criticisms about ELM:

  • the fact that ELM is lead in a rather “dictatorial” way (although I believe a good dictator can do much better than a bad democracy ;-))
  • fear: some ELM features on which one counts, may suddenly disappear without any warning?
  • fear: what long-term guarantee do we have that the great leader will not suddenly find another passion and leave the ELM-ship without command in the wild ocean?
  • the fact that important issues would not be dealt with, that stability of ELM would be in danger?
  • an criticism also refers to difficulty of integrating ELM with external libraries (even more so in 0.19)

Thanks a lot for your thoughts on this. Do not hesitate to challenge my ideas, I’m open to it :-).
Best regards

Marc

8

They are designed for different scenarios.

LiveView is about server side rendering and a smart JS library that synchronizes the DOM with data from the server based on events.

Elm is about client side rendering.

Combining the two is tricky because LiveView wants to modify the DOM and Elm wants the DOM to never be modified from outside itself.

You can combine the two by keeping them separate. For example, you can have one section of the page be implemented in Elm while some other sections could be implemented with LiveView. It depends on the use-case scenario.

I doubt that there will be an easy way to combine them if Elm controls the entire page or if it is used to handle routing.

In terms of PWA, to my understanding, it is advisable to have a SPA that is capable to handle losing the connection to the server. I think Elm is better suited for this particular usecase. You can still have the REST server implemented in phoenix but the frontend should be delegated to Elm. LiveView needs a websocket connection to the server so, it might not be a good fit for PWA.

1 Like
9

Yes, my first name is Asger :wink:

Getting a PWA up and running requires very little code. here’s a small example I just put together.

I’ve added a report from Lighthouse so you can see how well it scores, and what features works for this example :sunny:

Happy coding!

4 Likes
10

Hi Peter (now I identified your first name ;-),

Thanks. I think I’ll stick to ELM for starters and just see where it goes from there.

Sometimes I try to think too much ahead I’m afraid. :slight_smile:

Thanks a lot!

Best Regards

11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.