The vanilla way
Who am i?
Front-end engineer @ Immobiliare.it
Functional programming enthusiast
jsDay 2018 speaker & attendee
Front-end development in the jQuery era
- Cross-browser support was a big problem
- Javascript had a poor ecosystem
- Websites were almost static
Front-end development in 2018
- The browsers API have improved a lot
- Javascript has evolved and its ecosystem has expanded
- Websites have become Web Applications
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." Jake Archibald.
A vanilla web app
Define UI and all it's mutations by using directly the platform
Why?
- To make lightweight apps that load instantly
- Easier & cheaper SSR
- Browsers API never break
Trade-offs
- 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
<Custom-Elements>
The native way to define your own elements in HTML
<Custom-Elements>
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?"
- It isn't a class
- Takes an element as input
- Manipulates only the input element and it's subtree
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!
Callbag
"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
Lives:
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
Useful links
- Web components loader https://github.com/webcomponents/webcomponentsjs
- My custom elements loader gist https://gist.github.com/gdorsi/d48cebcbba31406a58764f844bbe0e35
- Callbags repo https://github.com/callbag/callbag
- This presentation https://github.com/gdorsi/vanilla-way
That's all folks!
Any questions?
gdorsi |
@sockhatso