Skip to main content

2 posts tagged with "javascript"

View All Tags

· 4 min read

Dan Ott, Nick Taylor, Ben Holmes and I got together recently on a Twitter space to talk about JavaScript frameworks. It was a well-rounded conversation summarizing how to choose a framework, and the pros and cons of some of the more popular options. Below is a summary of what we shared.

My Summary of Our Conversation

What are some considerations to keep in mind when you’re choosing a JS framework?

It depends!

It’s important to keep in mind the end goal, apart from technology. If you have a client with a deadline, you’re going to need to use the solution at hand instead of spending lots of time exploring new solutions.

You have to provide reasons for the business value of your choices. If you’re working on a personal side project, however, you have more time to learn things for the sake of learning.

The other thing to keep in mind is what kind of website you’re building.

Content-heavy sites work best with a static site generator, whereas something like Spotify with a lot of client-side code might require a different type of framework.

It’s also important to keep in mind the goals of the project over time. Some people just pick the frameworks with the biggest applications to stay ‘safe’, while it might be smarter to start with the smallest functionality and build from there, to keep your website more performant.

This might look like, say, choosing Astro over a monolithic solution. It can also look like using an SSG like 11ty or Astro if you’re considering where you’re running JS as part of your considerations – they run on the client side. Or, you can start with Remix, which generates at runtime but is set up to do caching incredibly well.

Note: it’s not a community expectation that a frontend engineer knows the ins and outs of every single framework out there– for example, in an interview, it should be ‘good enough’ just to articulate the advantages and disadvantages of a few.

Note 2: The number of frameworks can become overwhelming if you’re new. Stick to learning one at a time, have patience, and eventually you’ll get a feel for where things have landed at your moment in time.

Why are we seeing JS frameworks encroach on more and more of the stack?

First of all, JS bundles are large and static and not easy to handle at scale.

Secondly, developers are beginning to request building routes partly statically, and partly dynamically, rather than building all routes statically. By moving JS to the server, you can stop shipping it and pass it to the client from the server instead.

For example, if you worked at a newspaper, perhaps you don’t want to statically deploy every single article from the last several decades every time you deploy routes. Caching the pages makes sense.

What is island architecture?

Island architecture allows the developer to ship less JS by volume. It’s as if static content were like oceans and content that requires shipping JS were islands.

For example, say you had a page with a banner and a carousel. You can load the banner statically, and ‘turn on’ animation and shipping JS for that carousel component only.

In Astro, nothing is turned on by default. That way, you only pay the cost of shipping the components that really need to ship JS.

One thing to note: since the advent of new technologies besides webpack (which is still powerful in its own right), it’s become a lot easier to create these new frameworks, which contributes to the recent burgeoning of them.

On hype: it’s fun, but also, some of the above questions about the purpose of your project are more important than just using the latest framework.

Another trend: edge computing

In edge computing, JS is shipping closer (literally, on a closer server) to the user, so that it becomes faster and more performant. With Netlify, it’s cheaper monetarily to use edge computing than not!

Framework vs libraries vs metaframeworks

Classically, a framework is fairly opinionated, while a library is a less opinionated set of features. A metaframework would be a framework built in some way off a framework. With respect to Vue, Astro is a metaframework, while with respect to React, Astro is a framework.

Resources:

Netlify Page Props in Next.js Resource

Anthony Campolo on Partial Hydration

Jason Format Application Holotypes Resource

Jason Format Islands Architecture Resource

Patterns Islands Architecture Resource

Island boy song

Astro.js

· One min read

As far as I can tell, there's a paucity of resources outside of academia for helping people understand compilers. It gets worse when you consider the resources available that are aimed at JavaScript/TypeScript developers specifically. That's why I'd like to write a course called "Compilers For JS Developers".

Here's a tentative outline:

Section 1: What is a Compiler?

Explain what compilers are on a high level. Include lexical analysis, syntax analysis, and code generation.

Section 2: Let's Play With the AST Explorer

Create exercises in JS, HTML, and CSS for developers to complete.

Section 3: Compilers In The Wild

Break down what happens when you run a TS compiling command -- doesn't need to be compiled to be executable since browsers have a JS parser. TypeScript, however, as a superset of JS, needs to be compiled to JS!

Resources: