Recently I've been tinkering around with vanilla ES2015 on a personal project of mine, so to finally start using it in a real world scenario.
To start small, I'm rewriting my own WordPress blog theme (also using Twig/Timber, just to learn more things at once) with the commitment of only using vanilla ES2015 for its JS part (and avoid external libraries as much as I can).
The theme is still PHP based, so I'm not in need of a full fledged front end framework, but just to support CSS-based animations and whatnot. Say, the fixed header that disappear scrolling down, or the drawer sidebar handling, the modal boxes, etc.
Point is, I'm realizing how much my vanilla JS sucks, as I'm pretty much writing the customary jQuery-like spaghetti code, but with classes and querySelector.
To explain, this is how I'm approaching the various components of the page:
Code:
// modal.js
export default function (selector, container) {
// delegate listener etc.
}
// Header.js
import modal from './modal';
export default class Header {
constructor() {
this.header = document.querySelector('.header');
this.slideUp();
modal('a', this.header);
}
slideUp() {
// listen to window scroll, etc.
}
}
// index.js
import Header from './components/Header';
new Header();
(doesn't really make sense adding the modal to the header, but it's just an example)
Now, imho this is way cleaner and clearer than my pre-Angular JS code, but still it seems kind of a stupid approach and I wonder if there's a proper way/best practice to handle both kind of components, if I may use the totally wrong words, "static" as the site header, and "dynamic" as the modal.
