I have been messing around with Elm the past week or so. Especially because of the potential to get a brainf*ck when getting started with Frontend development these days. Elm offers something really attractive. Simpler eco-system. Maybe I am drunk. But this is too attractive to not consider, especially for someone like me who is predominantly a backend developer.
After digging around, I wanted to do an experiment and try to see how I can get a small Elm component to render on one of my existing apps. This was surprisingly easy.
I started by:
- Creating an Elm file for the test component using the counter example
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model = Int
init : Model
init =
0
-- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ div [] [text "My fancy counter"]
, button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
Once I have this, I added another file to create the element and mount it.
import { Elm } from "./Counter.elm";
Elm.Main.init({
node: document.querySelector("counter"),
});
Lastly, I added the newly created element <counter></counter>
to my view.
@extends('layouts.app')
@section('content')
<counter></counter>
@endsection
Since I was using parcelJS, I didn't have to anything just had to make sure the js file was an entry point to the build command.
parcel build resources/assets/js/*.js --out-dir public/dist --public-url ./
So this is the final outcome, this is no way production-ready. But it helps me experiment with Elm for some parts of the application.
Top comments (0)