Oh no JavaScript: From jQuery to Hyperapp and Blazor?!
Vedran Mandić: MCSD, MCT, @vekzdran
ATD14, 2018-12-05
1993., NCSA Mosaic, HTML processor, browsing documents
So web dev is (was?) boring to you?
Mocha/JavaScript - Sept 1995, released on 3rd of Dec 1995
1996., Netscape Navigator 3, HTML, CSS, JavaScript!
Netscape implemented CSS internally by translating CSS rules into snippets of JavaScript 🔥, which were then run along with other scripts 🔥🔥.
Ah, hello dar... ling my old friend!
MS Internet Explorer, HTML, CSS, JavaScript, genius quirks etc
Remember me? 🙈⚡
$ === "Advanced JS"; // jQuery
$(".gumb").on("click", function() {
$(".loader").show();
$.ajax({
url: "/api/dajVrijeme",
data: {
zipcode: 10020
},
success: function(result) {
$("#vrijeme-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, 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
State of the JS State Management
TL;DR: Redux wins the state
BTW where is Hyperapp?
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
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"));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