We'll look at a simple chat application written in Elixir/Phoenix and replace the existing JavaScript-Code with Elm.
The Phoenix application was written with the help of this tutorial.
Install Elixir.
To start the Phoenix app:
- Install dependencies with
mix deps.get - Install Node.js dependencies with
npm install - Start Phoenix endpoint with
mix phoenix.server
Now you can visit localhost:4000 from your browser. You should see a simple chat application. Open different browser tabs and type some messages to see how it works. If everything runs as expected...
Have a look at the folder web/static/js. It contains three js-files (note that Phoenix has built-in ES6-support). Have a look at web/templates/chat/lobby.html.eex and web/templates/layout/app.html.eex.
You don't need to write Elixir or change anything else than these files.
- Replace (or extend) the files with an equivalent Elm-version. Use the package elm-phoenix-socket. (Hint 1: Take a look at this example. Hint 2: You actually don't need to replace the files to communicate with the Phoenix server. If it's easier for you don't care about the Phoenix-stuff.)
- Make sure that messages as well as the usernames are submitted to the server and displayed to all users.
- Make it look nice (e. g. with elm-mdl).
- (Optional) If you know Elixir/Phoenix: Add some new features or build TNBT.
- (Optional) Invite people to join your chat (e. g. in the local network).
Have fun!