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

Before artificial intelligence is taking over our Front-end jobs (here and here) let’s think some way to make our life less miserables.

HTML, CSS and Javascript are old and they show it.

Javascript has dedicated books about the good, the bad and the awful parts buy how can I prove to you that all of them are irrefutably bad? With the most reliable source of true: Internet memes.

Classic

This is !important

Convinced? Good. 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.

Then we decided that separating them was a good thing. HTML in a file, CSS in another and Javascript in a third file. We separated content, presentation and behaviour.

Everything was still too complicated so we added syntactic sugar and created (trans)compilers such as Sass, Jade, CoffeeScript and other several dozens. We then built jQuery so we could support all browsers without losing our sanity.

Then we decided to bring them all together inside Javascript.

Now instead of having three bad things separated we have three bad thing all together and the epic frameworks affair started.

Examples :-)

An input field that update the DOM written in HTML, CSS and Javascript:

<div style=”background-color: lightgray; padding: 10px;”>
  <label>
    Type something
    <input value=”test” 
      oninput=”document.getElementById(‘typed’).innerHTML = 
      this.value”/>
  </label>
  <p>You typed: <span id=”typed”>test</span></p>
</div>

Cool! We just built an useless app.

Now let’s see the analogue in React:

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);

This is still not solving many of the existing problems.

I think we pushed the envelop as much as we could but Javascript is keeping as from flying. Let’s try to move ahead without Javascript.

The analogue in Elm:

module Main exposing (..)
import Color exposing (..)
import Element exposing (..)
import Element.Background as Background
import Element.Font as Font
import Element.Input as Input
import Html exposing (beginnerProgram)
main : Program Never Model Msg
main =
    beginnerProgram
        { model = "test"
        , view = view
        , update = update
        }
type alias Model =
    String
type Msg
    = NewContent String
update : Msg -> Model -> Model
update msg model =
    case msg of
        NewContent typed ->
            typed
view : String -> Html.Html Msg
view model =
    let
        commonAttr =
            [ padding 8 ]
    in
    layout
        [ Font.size 16 ]
        <|
        column
            (height shrink
                :: alignTop
                :: Background.color lightGray
                :: commonAttr
            )
            [ Input.text commonAttr
                { onChange = Just NewContent
                , text = model
                , placeholder = Nothing
                , label =
                    Input.labelLeft commonAttr <|
                        text "Type something"
                , notice = Nothing
                }
            , el (alignLeft :: commonAttr) <|
                text <|
                    "You typed: "
                        ++ model
            ]

It seems that we took some distance from HTML, CSS and Javascript now.

(If you want to see a more structured example of Elm+Style-Elements app, check http://guupa.com/elm-pages-editor/withEditorAndDebugger.html)

Was this the main purpose of this rant?

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

There are several things we get using Elm, for example: No-runtime-exceptions-in-practice™, If-it-compiles-it-works™, etc.

Together with these benefits we also get an opinionated set of tools. For example the new version of style-elements (used in the example above) is considering removing the <select> element due to its lack of usability and this may not please everybody.

So, will we be living in a future world of Front-end development without HTML, CSS and Javascript?

Thank you for reading.

Edited: Have a look at this excellent video if you want to go deeper into this matter