-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SPIKE: Elm PWA
- Basic Offline Support
#254
Comments
Add new Elm project to Phoenix
We should now have a Compile Elm to js using WebpackPhoenix is already using Webpack to create one javascript containing all the code imported in
There is a specific webpack loader for Elm: https://github.com/elm-community/elm-webpack-loader that we can use in our Phoenix project to compile and bundle the Elm application
Create the Elm applicationTo test that Elm is working well with Phoenix and webpack we can create a simple application:
module Main exposing (main)
import Html exposing (text)
main = text "This is Elm text!"
// import Elm application
import { Elm } from "../src/Main.elm";
var app = Elm.Main.init({
node: document.getElementById('elm-app')
})
<div id="elm-app"></div>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script
|
Now that we have mange to embed and Elm application with Phoenix the next step is to make the application more "usable".
|
So mixing "normal" Phoenix template and a SPA Elm is a bit more tedious to implement. However if we are going to use Elm for most of the feature I think we could use it for all the front end including authentication. Phoenix will only now be used to create the API. I think this might be the way to go and try to avoid rendering Phoenix templates |
At the end It seems possible to create multiple outputs file with Webpack: https://webpack.js.org/concepts/output/#multiple-entry-points using the |
Hi @SimonLab, are you following a particular blog post or tutorial for getting Phoenix and Elm to work together? e.g: https://blog.ispirata.com/get-started-with-elm-0-19-and-phoenix-1-4-291beebb350b Our objective with this spike is just to test the creation of an Elm PWA that sends data to a Phoenix backend. That requires one API endpoint in the Phoenix App e.g: dwyl/mvp#53 As for the eventual architecture of the App we are building.
The trickiest part of all this is getting the Phoenix Session from the Backend into the Elm App. If you have implementation questions that require clarification, please ask them before diving in to avoid wasting time. Please ensure you have read the Books mentioned above both Jeremy and Richard cover most of the ground necessary for this SPIKE and the ELM PWA thread dwyl/learn-elm#54 (comment) has much relevant detail too. If you had read the Elm PWA thread on Please ask more questions and share more links as you are going. 👍 |
So yes I've been looking at https://blog.ispirata.com/get-started-with-elm-0-19-and-phoenix-1-4-291beebb350b and also checked How I've added Elm to Club Soda. Since CS Phoenix is now using Webpack to bundle javascript code together. The blog post doesn't explain how webpack works with Elm so I've explained on the comment above the main concepts and how Elm is compiled and bundle to the main app.js file.
My goal by creating the Elm with
I've also add a look at how to use sessions with Elm and I think https://github.com/rtfeldman/elm-spa-example is doing authentication. I'll create another issue to investigate/learn how to do this 👍 I've spent some time yesterday thinking on how to use Navigation. As we are going to use mostly Elm on frontend I think we will need to use Browser.application "Create an application that manages Url changes." |
A basic Elm application is now on https://github.com/dwyl/elm-pwa-example/tree/gh-pages and hosted with Github pages: https://dwyl.github.io/elm-pwa-example/ The Elm app allow a user to create a new capture. The data is saved with the API defined and hosted on https://dwylapp.herokuapp.com/ The service worker on the application allow us at the moment to have the capture page available offline. This can be tested on Chrome with the |
@SimonLab it would be really good to get this PR dwyl/mvp#52 finished so that we can close the Milestone: https://github.com/dwyl/app/milestone/4 💭 |
Working on this issue at the moment and I want to come back to a few points I've blocked on:
As mention on the comment above I've manage to create an Elm application which is also a PWA. The goal of this issue is to see if we can embed the elm application in Phoenix. |
Concerning the first point, the This function creates the Elm web application however it will replace all the existing Phoenix endpoints and can't coexist with the other Phoenix views. This means that if we have a welcome page or a login page rendered with Phoenix these pages will be replaced by the Elm application which is not ideal. Concerning creating a PWA with Phoenix, I have managed to register a service worker however the configuration of the However I have manage previously to create an Elm PWA application, see https://github.com/dwyl/elm-pwa-example without using Phoenix. To resume, I don't think using Elm to create a full application combine with a few Phoenix pages is the right way to go. If we want later on to add PWA to the application my choice would be to only use Phoenix to create the API, then using Elm on its own to create the UI/UX and PWA features. The API can be used later on by other tools to create the UI, for example Flutter. |
Flutter PWA
- Basic Offline Support
Flutter PWA
- Basic Offline SupportElm PWA
- Basic Offline Support
How much use is a "keep track of all the things" App that doesn't work offline?
We hypothesize that an App meant to help people capture everything on their mind and get stuff done must work offline.
With this in mind, we need to do a Spike1 to explore using Elm for a Progressive Web App (PWA).
Objectives
we only need the "capture" functionality from Sprint Zero with the most basic
textarea
textarea
should:Model
(fairly obvious)Model.items
tolocalStorage
so that the page can be refreshed without losing the content see: https://elmprogramming.com/saving-app-state.htmlif
the device isonline
save theitem
to the backend.signal_wifi_off
in UI to inform the user they're offline.item
when offline.new item
while offlineTodo
Practical Elm Book: https://korban.net/elm/bookThe PWA does not have to use Elm UI, but it would be a good "bonus level" to attempt to use it.
See: dwyl/learn-elm#145
We have collected a few useful links on Elm PWAs dwyl/learn-elm#54
including a complete application: https://github.com/rl-king/elm-hnpwa
We should be able to get started quite quickly by combining the work done in our dwyl/app-mvp-phoenix
with this https://github.com/opvasger/elm-pwa by following this guide: dwyl/learn-elm#54 (comment)
Constraints
i.e. we aren't interested in just the "end result" we want to know exactly how it was done.
If you're in any doubt what step-by-step instructions look like, see: /todo-list-javascript-tutorial
The point of a Spike1 is to share the knowledge acquired with the team
(and in our case the wider @dwyl community)
1https://en.wikipedia.org/wiki/Spike_(software_development)
The text was updated successfully, but these errors were encountered: