Smashing Newsletter: Issue #292

Editorial

If you are writing JavaScript every day, perhaps you’ll find a couple of useful JavaScript gems in this newsletter issue. We’ve collected some useful resources for you to keep close — whether you are new to JavaScript, or found your way through the trenches of legacy code over the decades.

Not many things are always right or wrong in the JavaScript universe. What’s the right bundler for your project? What’s the right JavaScript framework (if you need one)? Where do you start when migrating to TypeScript? Plus, nobody has ever complained about reliable JavaScript-one-liners for tedious regular tasks. So, let’s dive in!

Ah, and just before we head there, perhaps take a look at our upcoming React Performance Masterclass, along with a few other friendly online workshops on front-end & UX on everything from web performance to design systems. Or perhaps kindly forward it to your friends — we’d sincerely appreciate it.

Happy JavaScripting!
— Vitaly (@smashingmag)

What’s The Right Bundling Tool?
Picking The Right JavaScript Framework
this vs. that
Upcoming Front-End & UX Workshops
JavaScript Operator Lookup
Strategies For Migrating To TypeScript
The JavaScript Developer’s Reading List

1. What’s The Right Bundling Tool?

Most of us use one or the other bundler for our assets, but is it fast and flexible enough? Does it support features that other bundlers can do? And does it actually matter? Well, it might. Tooling.Report runs a suite of build tool tests — configuration files created to specifically handle a feature — and evaluates how well bundlers deal with these particular issues. The configuration files are tested in Browserify, Parcel, Rollup and Webpack.

But perhaps even more useful is a comparison table of all bundlers, highlighting whether some of the features that you might be looking for are actually available in the bundlers. You can dive into code-splitting features, hashing, importing modules, transformations, output module formats and how non-JavaScript resources are managed. A fantastic little reference tool that’s worth keeping nearby. And it would be fantastic to see new bundlers such as Snowpack and Vite joining the report as well. (vf)

2. Picking The Right JavaScript Framework

Just like with bundlers, there are plenty of options when choosing a new framework. But do you need one? And if so, how do you pick the right one? Sacha Greif’s 12-Points-Checklist highlights 12 things to keep in mind when evaluating any new JavaScript library. Most notably, features, performance, learning curve, compatibility and track record.

Perf-Track tracks framework performance at scale. It basically tracks the performance in terms of Core Web Vitals for Angular, React, Vue, Polymer, Preact, Ember, Svelte and AMP — on mobile and on desktop. The data set is currently still from 2020, but it gives us some insights into how well sites with these frameworks perform in the wild. For example, React with Gatsby perform better than the ones created with Create React app.

Tim Kadlec also conducted some research around that, comparing jQuery, Vue.js, Angular and React. The end result: the current crop of frameworks isn’t doing enough to prioritize less powerful devices and help to close the gap between desktop and mobile. These figures might give you at least some context to make a more informed decision. (vf)

3. `this` vs. `that`

The deep knowledge of a subject really lies in understanding subtle differences between alternate ways of solving the same problem. How is nodeName different from tagName? How are the two increment operators different, e.g. ++value and value++? this vs. that is a friendly reference site for sorting out just this kind of questions.

The growing little repository by Phuoc Nguyen explains differences between properties and functions for JavaScript and TypeScript, as well as DOM, HTML and CSS. Also, Phuoc has released Single-Line-Of-Code, a repository of JavaScript utilities for everything around arrays, date and time, DOM manipulations, functions, numbers and objects. And if you need more snippets of vanilla JavaScript, we’ve got your back, too. (vf)

4. Upcoming Front-End & UX Workshops

JavaScript is awesome, and we can get better at it by learning together! So as it happens, we have a React Performance Masterclass with Ivan Akulov as well as a Dynamic CSS Masterclass workshop with Lea Verou coming up in a few weeks.

Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — just sayin’! ;-)

5. JavaScript Operator Lookup

Let’s be honest, it can be hard to wrap one’s head around JavaScript operators, especially if you still have issues remembering which one does what exactly and need to make sense of all those ampersands, dashes, equal signs, and other glyphs that cross your way in JavaScript code. Josh W. Comeau built a little tool that helps you make sense of them all — for good.

The Operator Lookup lets you enter a JavaScript operator or pick one of the 50 provided operators to learn more about it. For every operator, Josh gives a brief explanation of what it does and shows how it is used in a code example. A friendly tool that makes operators feel a lot less daunting. (cm)

6. Strategies For Migrating To TypeScript

Have you ever played with the thought of migrating your code base from JavaScript to TypeScript? If you rely on unreliable JavaScript libraries, have a large number of contributors, or a code base that has become difficult to maintain, the switch might be well worth it. But where to begin?

Stephen Harfield has published a simple 10-mins read for migrating to TypeScript, a strategy to smoothly and efficiently migrate over to Typescript, including how to deal with styled components and how to move from JSX to TSX.

Axel Rauschmayer summarized three strategies for migrating to TypeScript. The first supports a mix of JavaScript and TypeScript files for your code base, so that you can switch more and more files to TypeScript bit by bit. Alternatively, you can continue to use plain JavaScript but you add type information via JSDoc comments until everything is fully typed.

Finally, for large projects, when migration may produce too many errors, snapshot-testing the TypeScript errors may be an option. A great overview to help find the strategy that best matches your project’s needs. (cm)

7. The JavaScript Developer’s Reading List

From books to videos to blog posts, the number of learning materials for web developers is huge, and while this variety is a great thing, it can also make it hard to decide which resources are actually worth your time. The JavaScript Developer’s Reading List makes your decision at least a bit easier.

The reading list features hand-picked books and articles for JavaScript developers, broken down by technology/stack or concept. React and GraphQL are covered, Node.js, and Vue.js, just like design patterns in JavaScript, core concepts, software architecture, data structure, algorithms, and even soft skills. If you know of a resource that you feel is missing, you are welcome to contribute it to the list. Handy! (cm)

March 16, 2021 Smashing Newsletter: Issue #292

Previous Issues