Risu | Elm stuff

Dev time: 3 days
Project: https://github.com/datyayu/risu.moe
Latest commit: b615132

So as I say on yesterday’s post, today I worked on translating the html components into Elm components.

Here’s the current how the current HEAD looks.


There’s nothing too fancy. As I said, just plain view components using mock data.

There’s three minor differences compared to the original design.

  • The Settings button was replaced by a Change nickname one. This is because first version isn’t intended to include settings other than picking a nickname, so just wanted to make that more clear.
  • The username on the chat messages was changed from just user to user#id. This will allow duplicated names to be properly identified by using the id.
  • The SKIP VOTE announcement in the player bar was removed for now, as I don’t feel like it’s necessary as we’ll be getting a message on the chat when someone votes as well.

Other than that, the design is the same, except for the spectrum visualizer, which I’m not adding yet as it involves a lot of logic that uses the Web Audio API.

Something I think it’s important to talk about is the architecture.

I started working on the elm side following a component-oriented architecture. After creating the Chat and Playlist components I came across Richard Feldman’s project and decided to try out his approach.

So after some changes and additions we went from this


To this


This actually helped a lot to improve the code. In example, the Playlist’s module Song type has a user which type is User.

type alias Song =
 { user : User 

User, however, is a type declared on the Chat module. So requiring the Playlist module to know about the Chat module was kinda weird to me. Which this approach, however, where all components are encapsulated and the Data types are separated, there’s no need to require the components to know about each other, which is pretty good from a maintainability point of view.

So that’s all for today. Next up I want to focus only on the chat. So my next goal is to get the chat up and working, probably using firebase, and then I’ll write another post once I’m done with that.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s