DEV Community

Cover image for Beware of Vanilla JS
Joe Eames for Thinkster

Posted on

Beware of Vanilla JS

I like to paint miniature figures for Star Wars (pics below for anyone who may be interested). It's about the geekiest of hobbies. The other day I was on a website buying custom bases for these figures. This site was out of the US, and the default currency was not US Dollars, but there was an option to switch the currency to US dollars so I did, and then I noticed this:


Look closely. What's going on here? That's not US dollars. US dollars show the currency before the number, and it uses a point not a comma to separate the integer from the decimal portion of a number. And how did this happen? Long story short, the developers decided to use a minimal amount of JavaScript and manage currency conversion and formatting themselves. And unfortunately, localization, like so many issues, has a lot of nuances that aren't obvious if you just learn a little. You have to dig deep and almost become an expert. A lot of currencies use commas and many use points, the placement of the symbol varies. Knowing these issues is just one of many things you have to worry about in building an app.

This is the value of front end frameworks. When they give you currency formatting tools, then someone has done all the research and you can reasonably trust that they'll get things right. In my free course on the Fundamentals of Angular we cover the currency pipe for formatting currencies, and it's surprising how many options there are for currencies. But that pipe means you don't have to worry about how to format currencies. Angular does it for you.

Ultimately this was a fairly minor issue, but nonetheless, it's indicative of something bigger. There's a fair amount of discussion of minimalism as our web apps initial download sizes get bigger and bigger and people push for better lighthouse scores.

So Do we need to use a framework for everything? No. And you can certainly find some library that handles currency for you. But that's only one issue. Even in a relatively simple issue, you'll have dozens of issues like that. Finding a different library for each issue is basically just piecing together a front end framework by hand.

This doesn't mean that every web application has to be built with React or another similar framework. But realize what you're giving up if you don't use a framework at all.

And in today's modern world there's a fair set of next generation minimalist frameworks you can use. Starting with Preact, which gives you 90% of React for 10% of the size, there's also Svelte, and recently AlpineJS and CrankJS.

You still need to learn JavaScript. It's the underpinnings of everything you will do on the web, which is a good time to point out our new course, JavaScript Fundamentals. If you're a pro user you can access that course now.

But just vanilla JS (hehe) by itself is a dangerous road to take.

As you make these decisions, being educated about the trade-offs can be very important. But the most important thing, as always, is to just build stuff and learn.

Happy coding!

Signup for my newsletter here.

Visit Us: | Facebook: @gothinkster | Twitter: @gothinkster


Top comments (0)