The vanilla way

Who am i?

Front-end engineer @

Functional programming enthusiast

jsDay 2018 speaker & attendee

Front-end development in the jQuery era

Front-end development in 2018

Front-end frameworks (React, Angular, Vue)

" Frameworks are an abstraction. They make a subset of tasks easier to achieve, in a way that's familiar to other users of the framework. The cost is performance - the overhead of the framework. The key is making the cost worth it." Jake Archibald.

A vanilla web app

Define UI and all it's mutations by using directly the platform



How can a vanilla web application be designed?

Let's start from building blocks


The native way to define your own elements in HTML


Very reusable (even across frameworks)

Good for generic components (like autocompletes, galleries, maps, moles, ...)

What about support?

The polyfill can be conditionally loaded!

Functional components

Simple, lightweight & powerful

What makes a function a "Functional component?"

Lives: 3 Score: 0

State management

Putting state in closures may duplicate the source of truth

Let's try to use the DOM as state holder

What about performance?

Measure, then optimize

It's better to optimize a small number of cases than everything

State transitions

An imperative approach may lead to unpredicatble code

Functional Reactive Programming may be a solution

Let's try Callbag!

Who knows what are Observables?


"A standard for JS callbacks that enables lightweight observables and iterables"

Why do we need callbag?

Lives: 0 Score: 0

Time for another demo

This presentation is 100% vanilla js!

My Vanilla Way (fast recap)

Useful links

That's all folks!

Any questions?

Guido D'Orsi | gdorsi | @sockhatso