Oh no JavaScript: From jQuery to Hyperapp and Blazor?!

Vedran Mandić: MCSD, MCT, @vekzdran

RIT Zagreb, 2019-04-26

Hi, I am Vedran. 👋

  • I freelance, talk and lecture C# / .NET and JavaScript
  • currently building a greenfield manufacturing ind. ERP 
  • on medium.com and dev.to by @vekzdran
  • on github by @vmandic
  • programming for the last 8 years
  • bad at basics, suck at CSS, moderate in C#... jk 🙈

1993., NCSA Mosaic, HTML processor, browsing documents

Source: https://www.welt.de/wirtschaft/webwelt

So web dev is (was?) boring to you?

Source: https://en.wikipedia.org/wiki/Brendan_Eich

Mocha/JavaScript - Sept 1995, released on 3rd of Dec 1995

1996., Netscape Navigator 3, HTML, CSS, JavaScript!

Source: http://mentalfloss.com/article/84994/happy-20th-birthday-netscape-navigator-30

Netscape implemented CSS internally by translating CSS rules into snippets of JavaScript 🔥, which were then run along with other scripts 🔥🔥.

 

- W3.org

https://www.w3.org/Style/CSS20/history.html

Ah, hello dar... ling my old friend!

MS Internet Explorer, HTML, CSS, JavaScript, genius quirks etc

Remember me? 🙈⚡ 

$ === "Advanced JS"; // jQuery

$(".btn").on("click", function() {
    $(".loader").show();

    $.ajax({
      url: "/api/getWeather",

      data: {
        zipcode: 10020
      },

      success: function(result) {
        $("#weather-temp")
            .html("<strong>" + result + "</strong> C*";

        $(".loader").hide();
      }
    });
});

...the internet grows content/dev heavy

total bs if you ask me, devs just got "smart" new ideas

jk, the struggle is real, hint: see next slide :-)

Facebook  2018, init load: 263 requests, 9.1 MB transferred

Problem much?

  • Web sites are turning into Web apps, SPAs
  • Code complexity grows as the site gets bigger
  • Assembly gets more interdependent
  • Devs want discrete JS files / modules
  • Deployment optimized code? Fewer HTTP calls?

Enter modular front-end

define(function (require) {

    var $ = require('jquery'),
        lib = require('./lib'),
        controller = require('./controller/c2'),
        model = require('./model/m2');

    //A fabricated API to show interaction of
    //common and specific pieces.
    controller.setModel(model);

    $(function () {
        controller.render(lib.getBody());
    });
});

...and then "it" starts, around 2009:
​Knockout, Node, npm, Backbone, AngularJS, ECMAScript, Babel, React, Webpack, TypeScript, Angular, Hyperapp, Elm, ReasonML, Fabel, WebAssembly, Svelte, Blazor...

Well... I think this sums it up a bit? :)

Agenda (not just Hyperapp)

  • Some history ⚔️ on all of this pain...
  • State of JS (2018)
  • How it's done today? 👨‍💻
  • A look 👀 into HyperappJS
  • Demo ⚙️
  • Q&A

40 min talk with interactive demos

"State" of JS Oct 2018, n = 19k devs

TL;DR: React wins the internet

Source: https://2018.stateofjs.com/front-end-frameworks/overview/

State of the JS State Management

TL;DR: Redux wins the state

Source: https://2018.stateofjs.com/data-layer/overview/

BTW where is Hyperapp?

Source: https://2018.stateofjs.com/front-end-frameworks/other-libraries/

So, how to dev FE today?

Sorry, no magic bullet... 🤠

It is really a mix, you know it, and differs from team to team.

Better learn how it all interconnects! ⚡

{ } // hello I am your legitimate global state object ;)

Is it "easy"? How to cope?

Where is the value 💰 in it?

Should we go React + Redux or Vue + Vuex?

Does the client / boss even care? 🤡

Meet HyperappJS

A model-view-update Elm inspired FE/UI dev 1 kB lib

https://github.com/jorgebucaran/hyperapp

const view = function(state, actions) { ... };

The big idea? 💡

Model-View-Update step by step: http://meiosis.js.org/

The mother of examples... "Hello World" app

import { app, h } from "hyperapp";

// your data "model"
const state = {
    message: "Hello World!"
};

// your JSX HTML markup UI
const view = (state) => { 
    return (
        <div>{state.message}</div>
    );
};

// run the app!
app(state, null, view, document.getElementById("root"));

https://hyperstart.io/projects/dGih5H1CONpU

The never dying interview example... a counter app! 😜

What is life without some

side-effects? 🤔

Why Hyperapp? 🚀

  • learn and understand model-view-update design
  • small 1 kB, easy setup with Webpack, Parcel or Rollup
  • has its own vDOM - h
  • async actions do not cause rerendering
  • super quick to learn and use
  • supports lifecycle events which are vDOM events
  • transfer to React with more ease
  • Redux won't scare you next time... :-)
  • cherish the unidirectional binding flow

Demo ⚙️ setup with Parcel ✨ module boundler 

Morals of the story 👾

  • think about maintainabilty and team first
  • do not hesitate to try new patterns and technology
  • JSX is here to stay, so is vDOM technology, embrace it
  • unidirectional flow is predictable and less prone to error
  • React and Webpack are a safe-play
  • do not be afraid of the learning curve, invest!
  • nourish a software craftsmanship culture
  • SPAs are not magic-bullets!!!

The end! 📸 Questions?

VEDRAN MANDIĆ

mandic.vedran@gmail.com

@vekzdran @vmandic

https://slides.com/vmandic/not-react-not-angular-but-hyperapp-9

bit.ly/atd14-hyperapp-source

RIT Zagreb: Oh no JavaScript: From jQuery to Hyperapp and Blazor?!

By Vedran Mandić

RIT Zagreb: Oh no JavaScript: From jQuery to Hyperapp and Blazor?!

A short presentation about a Front-End JS development history and a dev library HyperappJS for everyone with doubts in all the other development libraries and frameworks.

  • 1,360

More from Vedran Mandić