I just read this article about modern javascript and that was an excellent opportunity to review what can be used these days without resorting to compiling javascript.
I've always been reluctant to compile javascript. I'd like to be able to tweak things and test it right away without needing some kind of watcher process to compile things before it works. This is why I'm not using Typescript for example. For a long time, I have been using jQuery but now that Bootstrap 5 is out, it's time to go modern .
Basically, I decided to drop support for all browsers that do not support javascript modules (through the script tag and dynamic imports). But what feature set does that leave me? Basically, instead of having to make sure I polyfill stuff or use feature check, I'd rather go with one simple approach: if it supports js modules, it can run my code.
Targeted browsers
Thanks to caniuse.com, it's fairly easy to figure out more or less what can be used and when. Here is to give you an overview for the following browsers: Chrome 67 (2018), Firefox 67 (2019), Opera 64 (2019), Samsung Internet 8.2 (2019), Safari 11.1 (2018), Safari IOS 10.3 (2017).
As you can see, any fairly modern device should be able to run our code. But which features can you expect exactly?
Array functions
Array.includes is a nice syntax improvement over regular indexOf !== -1. I haven't been using yet the find method but maybe some day.
Strings
Again, the includes function is nice to have and is consistent with the one available for arrays. Padding is also very useful as a built-in feature.
The locale compare is really handy for multilingual websites.
Objects
Object.entries and Object.values are really great alternatives over "for...in" loops because they only returns given object's own enumerable properties.
Object.assign provides a vanilla alternative to $.extend function.
NodeList foreach is very convenient with iterating over results of a document.querySelectorAll call.
As for for...of , I'm always confused with how it compares with for...in, but basically, for...of is like a better version of for...in because it works on any iterable object. You can read this article to learn more.
Modules
So this is the root of my article. Now I'm using more and more js modules. Any browser that don't support them will get a nice warning thanks to this little library I created.
Enjoy all the benefits of nicely deferred loaded js with local scope. No more document ready thing, domContentLoaded stuff... and it works with inline scripts too!
Modern syntax
Too much to cover here but you can read all here already.
Classes work just great with js imports (one file, one class) and template literals are really handy.
Async/ajax
Again great stuff here, the fetch api is really nice to work with and we can all forget the days of $.ajax.
Custom elements
Custom elements are great! They allow a framework agnostic approach, and since I don't like things like React, Vue ... they really fit nicely in my workflow. Recently I created Last Icon and I can hardly imagine using regular svg icons ever again.
The only caveat here is that if you plan to support safari, which is kind of unavoidable, you have to limit yourself to autonomous custom elements (ie: you cannot customize built-in elements). Too bad because I had a lot of ideas for custom forms, but I guess we can all live with regular javascript to customize our forms.
Other features
No more $.parseJson! I'm not using the proxy object yet, but it sounds really handy. In php I've been using anonymous classes more and more so it's really similar in way.
The strict mode is obviously always welcome. Note that js modules are always in strict mode so no need to declare "use strict" everywhere :-D
Conclusion
For a long time I ignored most of these features because I was using jQuery or some older syntax to avoid compiling my code. But now that these features are available in most browsers, it's about time to learn and use them :-)
