V5.md

Examples sites

v4 http://zinagur.com v4 http://guupa.com/elm-style-elements-examples/html/Examples.html v5 https://elm-spa-boilerplate.guupa.com/examples

Other Style Frameworks

http://elm-bootstrap.info/

https://debois.github.io/elm-mdl/#buttons http://package.elm-lang.org/packages/debois/elm-mdl/latest

https://bulma.io/documentation/elements/button/ https://getbootstrap.com/docs/4.0/components/buttons/

From JS to Style Elements

font-size: 12px -> Element.Font.size 12

font-weight: 800 -> Element.Font.weight 800

text-align: center -> Element.center

text-shadow 1px 0px 1px black -> Element.Font.shadow { offset = ( 1, 0 ), blur = 1, color = Parts.Color.black }

<a href = ""> -> link

<h1> -> el [ Area.heading 1 ] (text "Super important stuff")

<input type="text" value="test"> ->

Is the future of Front-end development without HTML, CSS and Javascript?

Before Artificial Intelligence is taking over our Front-end jobs let's think some way to make our life less miserables.

HTML, CSS and Javascript are old and they are carrying many bad things from the past.

Javascript has dedicated books about the good and the bad and awful parts.

How can I prove this to you in an irrefutable way? Heasy, with the most reliable source of true, Internet memes.

https://i.imgur.com/Q3cUg29.gif https://memeexplorer.com/cache/846.jpg https://media.makeameme.org/created/javascript-css-and.jpg http://s2.quickmeme.com/img/b7/b7333766f5ee3da9097ecf9dd99e46b21198488a8bafe17c97f1e652f874b79a.jpg https://cdn-images-1.medium.com/max/1600/1*kE61MPPrgy4u3GnDEcW6CA.jpeg https://pbs.twimg.com/media/C3l50D5WcAA--Id.jpg

Now that we settle this, let's see what we can do about it.

Around 1990 we started with HTML. In 1995 we invented Javascript (in 10 days) and in 1996 we created CSS to separate presentation and content.

Then we decided that to keep them separated. HTML in a file, CSS in another and Javascript in a third file. So we separated content, presentation and behavior.

The world was still too complicated so we added some syntactic sugar created stuff that (trans)compiles into them, like Sass, Jade, CoffeeScript and other several dozens and build jQuery to glue all browser together.

Then we decided to bring them all together inside Javascript so instead of having three bad things all over the places we could just have these three bad thing all together and the epic Frameworks affair started.

Let's take a break and see an example in React:

Let's build an input field that would modify a text in, something like (in Pug)

https://codepen.io/lucamug/pen/baXdpv

<div style="background-color: lightgray; padding: 10px;">
  <input value="test" oninput="document.getElementById('typed').innerHTML = this.value"/>
  <p>You typed: <span id="typed">test</span></p>
</div>

Cool! We just build an useless app.

https://codepen.io/lucamug/pen/dJxyEw?editors=0010

var Test = React.createClass({
    getInitialState: function() {
        return { typed: "test" };
    },
    render: function() {
        return (
            <div style={ { backgroundColor: "lightgray", padding: "10px" } } >
            <input
                value={this.state.typed}
                onChange={function(event) {this.setState({ typed: event.target.value });}.bind(this)}
            />
            <p>You typed: {this.state.typed}</p>
            </div>
        );
    }
});
React.render(<Test />, document.body);

Without the JSX syntactic sugar, this is what we get:

var Test = React.createClass({
    displayName: "Test",
    getInitialState: function getInitialState() {
        return { typed: "test" };
    },
    render: function render() {
        return React.createElement(
            "div",
            { style: { backgroundColor: "lightgray", padding: "10px" } },
            React.createElement("input", {
                value: this.state.typed,
                onChange: function (event) {
                    this.setState({ typed: event.target.value });
                }.bind(this)
            }),
            React.createElement(
                "p",
                null,
                "You typed: ",
                this.state.typed
            )
        );
    }
});
React.render(React.createElement(Test, null), document.body);

Is this all we got since 1990? Can we hope for a better future?

http://johnculviner.com/wp-content/uploads/2014/01/45173320.jpg

I think this is the best we can get if we want to stay in Javascript. Let's try to push further moving instead out of it completely.

The analogue in Elm

https://ellie-app.com/8hxmWCYHza1/1

module Main exposing (..)

import Color exposing (..)
import Element exposing (..)
import Element.Background as Background
import Element.Input as Input
import Html exposing (beginnerProgram)

main : Program Never String Msg
main =
    beginnerProgram
        { model = "test"
        , view =
            \model ->
                layout [] <|
                    column [ Background.color lightGray ]
                        [ Input.text []
                            { onChange = Just NewContent
                            , text = model
                            , placeholder = Nothing
                            , label = Input.labelLeft [] <| text "Label"
                            , notice = Nothing
                            }
                        , el [] <| text model
                        ]
        , update =
            \msg model ->
                case msg of
                    NewContent typed ->
                        typed
        }

type Msg
    = NewContent String

It seems that we took some distance from HTML, CSS and Javascript) now. Was this the main purpose?

Yes, but only if we cold get something better in exchange.

With Elm you get also things like No-runtime-exceptions-in-practice™, If-it-compiles-it-works™, etc.

You also get opinionated tools. For example the author of the new version of style-elements used in the example above is considering removing the element due to its lack of usability it doesn't help to make good Interfaces. Is this the right trend?