The vanilla way
Front-end development in the jQuery era
Websites were almost
Front-end development in 2018
ecosystem has expanded
Websites have become
Front-end frameworks (React, Angular, Vue)
Essential to develop
complex web applications
If you need
SSR for SEO, it can be very
complex & costly
Using a framework can lead to
big code bundle
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."
A vanilla web app
UI and all it's mutations by using
directly the platform
To make lightweight apps that
Easier & cheaper
You have to
implement every DOM mutation
Cross browser compatibility There isn't a
standard way to write vanilla applications
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!
Simple, lightweight & powerful
What makes a function a "Functional component?"
It isn't a class
Takes an element as input
Manipulates only the input element and it's subtree
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
imperative approach may lead to
Reactive Programming may be a solution
Who knows what are Observables?
"A standard for JS callbacks that enables lightweight observables and iterables"
Why do we need callbag?
Observables can be very good to
transform events in data
Light (few memory allocations and small size)
Modular & easy to create
your own utilities
Time for another demo
This presentation is 100% vanilla js!
My Vanilla Way (fast recap)
Custom-Elements and functions as building blocks Place some
state into the DOM to avoid inconsistencies Use
Callbags to simplify some parts of state management
That's all folks!
Guido D'Orsi |