Realworld Hasura + Elm

andrewMacmurray · October 23, 2020, 7:55am

Hi everyone

For the lols I put together an alternative implementation of the Realworld example app - with a graphql backend and frontend with Elm UI.

The frontend is a grab bag of various patterns and techniques I’ve been playing with recently
The backend uses Hasura (a graphql api over postgres) and a Kotlin http api (using http4k)
The infrastructure (most of it) is deployed using terraform

Experience report

Obvs I found Elm a pleasant and relaxing experience (no surprises there!). Elm graphql + Elm UI are a dream stack to work with
It was remarkable how little time I spent on the backend (and how little code there is for it). If you haven’t tried it I would thoroughly recommend trying Hasura out. It felt like a really nice balance between very powerful out of the box features and the ability to extend and customise using other applications and services
Kotlin is nice (have been using it at work) - the server functions as an extension to Hasura (handles authentication and some more detailed logic). I’d quite like to try and rewrite this in purescript however to see if I can have a mostly serverless stack (I tried deploying the kotlin api on AWS lambda and it was horribly slow)

The repo is here: https://github.com/andrewMacmurray/realworld-hasura
And the app here: https://realworld-hasura.surge.sh

rupert · October 23, 2020, 9:45am

If you would like to do a serverless stack in a functional programming language, I made a start at doing one in Elm:

Its called ‘fullstack’ because the plan was to write a back-end in Elm and then deploy that together with the existing Elm front end to yield a 100% Elm realworld implementation. So far, I mocked up the API end points using elm-serverless. Then I started thinking about what to do for a database, and got distracted generating AWS service stubs for Elm with a view to being able to use DynamoDB more easily from within Elm.

If you’ve already got the database and a graphql API, that would remove the need for DynamoDB, so I think it could be easily achievable in Elm.

andrewMacmurray · October 23, 2020, 9:50am

Ah interesting! will check it out

opvasger · October 23, 2020, 1:03pm

I’m using

Elm
Hasura graphql-engine
dillionkearns/elm-graphql

for anything I can justify using it for!

I would recommend this combination of software to anyone doing a web-stack!! it’s simply amazing

razze · October 26, 2020, 12:08pm

Awesome work, but it might be confusing to name this realworld? As my understanding was, that there is a specification for both frontend and backend, and that spec is REST. Or did you trim your graphql queries to conform to this?

(this is all from memory, didn’t re-check this)

andrewMacmurray · October 27, 2020, 5:02pm

Thanks! Yea I was thinking about this, there is a specification REST + the frontend css, they’ve also added a section for fullstack implementations that don’t necessarily follow the original spec but “adhere to the same functionality & UX specs.”

Do you have any thoughts on a name that might be clearer?

razze · October 27, 2020, 7:07pm

I’m actually don’t have a suggestion, I just wanted to make this clear. It might just be a medium clone then?

choonkeat · October 28, 2020, 12:59pm

I was pleasantly surprised to learn that they now have a Fullstack section:

Since these implementations are responsible for the entire stack, they obviously cannot be mixed and matched but they still adhere to the same functionality & UX specs.

dirkbj · October 30, 2020, 12:47am

Nice Andrew.

I wrote an elm-graphql and FaunaDB serverless application tutorial where FaunaDB acts as the graphQL server. It would be interesting to compare.

andrewMacmurray · November 1, 2020, 10:44am

Thanks! That sounds interesting, how did you find the identity management / access control part of FaunaDB?

dillonkearns · November 1, 2020, 4:57pm

Hey Andrew, nice idea to do the realworld project with elm-graphql! That’s an awesome resource to have, thanks for taking the time to put that together.

I hope you don’t mind if I make a couple of small suggestions. In particular, Scalar codecs is one of one of my favorite features of elm-graphql, because with Elm types you can really leverage GraphQL Custom Scalars in a way that you can’t in many other languages. So there are a couple of places where you could consider using that feature.

For example, the timestamps could use scalar codecs:

github.com

andrewMacmurray/realworld-hasura/blob/5809b309dfac6a75ecb902f3f25dba9e164e08c3/frontend/src/elm/Api/Articles.elm#L191



articleSelection : SelectionSet Article Hasura.Object.Articles
articleSelection =
    SelectionSet.map Article.build
        (SelectionSet.succeed Article.Details
            |> with Articles.id
            |> with Articles.title
            |> with Articles.about
            |> with Articles.content
            |> with (Articles.author authorSelection)
            |> with (Date.fromScalar Articles.created_at)
            |> with (Articles.tags identity tagSelection)
            |> with (Articles.likes_aggregate identity likesCountSelection)
            |> with (Articles.likes identity likedBySelection)
            |> with (Articles.comments newestCommentsFirst commentSelection)
        )


newestCommentsFirst : CommentsOptionalArguments -> CommentsOptionalArguments
newestCommentsFirst =
    Argument.combine2

For anyone who isn’t familiar with the Custom Scalar Codecs feature, I have a short intro to them here: https://incrementalelm.com/scalar-codecs-tutorial.

I really like encapsulating things with custom scalars as much as possible. Another example of a place to use a Custom Scalar is for a profile image. You could consider defining an Avatar custom scalar type in the GraphQL schema. Then you could expose a codec in that module and make the Avatar type opaque, so the only way to build or use that type is defined within that function. That way, you can’t accidentally pass another type of String to be displayed as an avatar, and you also have a clear responsibility of displaying avatars that’s narrowed down to that one module.

github.com

andrewMacmurray/realworld-hasura/blob/7be61d0f703971fa124677dd33e9af795b2164c4/frontend/src/elm/Element/Avatar.elm

module Element.Avatar exposing
    ( large
    , medium
    , small
    )

import Element exposing (..)
import Html.Attributes exposing (class)


small : Maybe String -> Element msg
small =
    image_ 25


medium : Maybe String -> Element msg
medium =
    image_ 35

This file has been truncated. show original

Here’s an example where I use that technique: https://github.com/IncrementalElm/elm-graphql-shopping-cart/blob/2bcba464c9b92d4a6769ac91c0a51ae90029ebce/client/src/Dollars.elm#L16-L20.

Hope those suggestions are okay! Very nice to see a large example, thanks again for putting that together. I’d be happy to discuss more if you’re interested, feel free to ping me on Slack!

andrewMacmurray · November 2, 2020, 6:40pm

Hi Dillon, that’s awesome! Thanks for the feedback. I shall definitely refactor to that

dirkbj · November 10, 2020, 3:56pm

The access control in FaundDB is straight forward but not featureful. They have Auth0 support in Beta right now, which should improve the story.

system · November 20, 2020, 3:56pm

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

Topic		Replies	Views
Realworld Example App with elm-spa Show and Tell	4	1830	August 13, 2020
Announcing dwayne/elm-conduit: A replacement for rtfeldman/elm-spa-example Show and Tell	13	1342	May 3, 2024
Elm-postgrest: A Remote Data Request API in Elm Show and Tell	8	2288	February 3, 2018
Choosing a GraphQL framework for your elm app - expert panel with demos! Show and Tell	3	1619	May 4, 2019
Elm and smart contracts (blockchains) Learn	6	1405	September 2, 2020

Realworld Hasura + Elm

Experience report

Related Topics