What do Air Bud and Angular have in common?

Issue #103.June 6, 2022.2 Minute read.
Bytes

This week, we’ve got an Air Bud crossover for the ages, a new team-building drinking game, and a master plan for infiltrating the Vue Mafia.

Welcome to #103.

Airbud movie cover with an Angular crossover

Was this a real movie, or did we all just share the same fever dream?

Air Bud + Angular — the crossover we didn’t know we needed

What do Air Bud and Angular have in common? The real question is, what don’t they have in common?

With 14 films in the franchise, Air Bud has quietly made over $200 million. Angular just released its 14th version last week, and just like Air Bud, it’s also been quietly racking up the W’s (even if it isn’t a once-in-a-generation basketball talent).

While the rest of the JavaScript world has been busy arguing on Twitter, the Angular team just keeps pushing out consistent, incremental improvements. They’ve clearly spent a lot of time revamping their documentation, adding helpful examples, and improving the developer experience overall.

Honestly, the only thing we don’t love about nG these days is them going all in on decorators 🤮. But we’ll let that slide for now, because they really brought the heat with Angular 14. Let’s get into the highlights.

  • Standalone Components: these help to address the thing every developer loves to complain about most — boilerplate (you get a lot less of it now).

  • Faster builds + smaller bundles: In v14, builds take 90% less resources and bundles are 30% smaller out the box.

  • FORMS BABY: We all love forms (said no developer ever), but with this release Angular’s Typed Forms help you reduce errors and build safer forms.

  • Automated Version Migrations: Angular learned the hard way that backwards compat is hard, but now they give you a playbook and automation scripts to help you migrate versions (enterprise managers stop drooling pls).

Bottom Line Sometimes we forget that a team is only as good as the people (or dogs) on it, and Google has obviously put together an S-tier squad. The results speak for themselves. #AngBudForever.

Patrick Star meme

That’s a powerful back (end as a service) [sponsored].

Appwrite wants to write your backend for you

Congrats! Your team’s app made it to the top of Hacker News, and now you’ve got traffic coming out your eyeballs 🎉. There’s only one problem…

You went with a “usage-based” pricing plan for your hosting — and all that traffic just ate up the rest of the cash in your company bank account (RIP in peace).

Should’ve used Appwrite.

Appwrite is a self-hosted BAAS (backend as a service) platform that gives you a collection of easy-to-use REST APIs that abstract away all the complex and repetitive parts of building a secure backend.

And since it’s packaged as a set of (open-source) Docker microservices, you can host it however you want and not have to worry about getting burned by usage-based pricing.

It handles all of hairy stuff for you, so you can easily integrate your app with multiple user auth methods, set up a DB for storing and querying user data, and a lot more.

I guess that’s why they called it Appwrite. Finally makes sense now.

Check it out.

Pineapple meme

I have some state… I have pineapple.

If you like Pinia Coladas

And getting caught in the… weird corners of the internet where strangers passionately debate niche state management solutions. Then today is your lucky day, my friend.

Because we’re talking about Pinia — the Vue Store that was recently blessed by the Vue Core Team as the Officially Recommended™️ state management library for Vue apps.

Besides the fact that Pinia has the cutest OSS logo in the game, there are a few practical reasons why the Vue Team decided to go all in on Pinia and shank demote Vuex to maintenance mode.

  • More Modular — Pinia is built to have multiple stores, instead of just one global store with sub-modules (like Vuex). Each Pinia module can be its own store and can be directly imported into specific components. This makes for a better dev experience and also allows for better Type inferences and automatic code splitting.

  • More intuitive — Pinia is based on Vue 3’s Composition API, which is a lot simpler and requires a lot less boilerplate. This, combined with the modularity mentioned above, makes it a lot more intuitive to write well-organized stores that aren’t janky af.

  • More features — Pinia comes with built-in support for SSR and Hot Module Replacement, and it hooks into all the Vue devtools. And it’s extensible, so it comes with a bunch of helpful plugins too.

Bottom Line: Similar to the Vue 2 → Vue 3 upgrade, this transition from Vuex to Pinia seems to be focused on making Vue a more attractive choice for large-scale applications and teams.

That’s why Pinia also comes with an Officially Recommended™ drinking game team-building exercise: every time you get a state error on a Friday, you add one more shot of rum to your blender and mix it up while singing the officially recommended Vue theme song.

Jobs

Senior or Staff Front-end Engineer - React (100% Remote)

Close.com is looking for 3 experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close is a 100% globally distributed team of ~55 high-performing, happy people that are dedicated to building a product our customers love.

🥋 JS (React) Kata — Sponsored by Courier Automations

Courier just launched a brand new Automations API that makes it super easy to configure notification logic for just about any use case. See how it works.

React’s useRef hook allows you to persist values between renders, without triggering a re-render of the component. The kata is to see if you can, using only React.useState, re-create the functionality of React.useRef.

Cool Bits

  1. UnoCSS is an instant, on-demand atomic CSS engine that just released some cool, interactive docs. It was created by Anthony Fu, who’s a member of the Vue, Nuxt, and Vite Core Teams (aka Vue Mafia). The project’s name is obviously based on his intense Uno games with Evan You and the rest of the V.M. — better be careful who you use that Draw-4 wild card on.

  2. Want to get a high-level summary of what’s going on in Java-land? New Relic’s got you covered with their 2022 State of the Java Ecosystem Report. [sponsored]

  3. Cosima Mielke wrote a great article about Magical SVG Techniques. Now we just need her to write an article about how we can magically catch and imprison all the people who create non-transparent PNG’s.

  4. Matti Bar-Zeev wrote about Converting a React Component to SolidJS. He starts out the article by saying, “Not to diss anyone…” which means you know he’s about to diss someone 🍿.

  5. Nate Moore (the co-creator of Astro and Bytes reader (👋 Nate)) spoke about WebAssembly in the JavaScript Ecosystem. His talk is a lot like most Christopher Nolan films: you might not understand most of what’s going on, but it’s still worth your time.

  6. Robin Wieruch wrote an in-depth article on Monorepos in JavaScript that’s so long it might technically qualify as its own monorepo.

  7. Svelvet is a new Svelte component library for building interactive node-based flow diagrams. Now I can finally map out what the series of events that needs to take place in order for me to finally infiltrate the Vue Mafia and finally beat Evan and Anthony in Uno.

  8. Blueprint is a React-based UI toolkit for building complex, data-dense web interfaces. And it was created by Palantir — so you can rest easy knowing that the US Government is watching over all of your app’s data at all times to protect your freedom 🥴.

🥋 JS (React) Kata — Sponsored by Courier Automations

The marketing pitch for React.useState is that it allows you to add state to function components. This is true, but we can break it down even further. Fundamentally, the useState Hook gives you two things - a value that will persist across renders and an API to update that value and trigger a re-render.

const [value, setValueAndReRender] = React.useState(
  'initial value'
)

When building UI, both are necessary. Without the ability to persist the value across renders, you’d lose the ability to have dynamic data in your app. Without the ability to update the value and trigger a re-render, the UI would never update.

Now, what if you had a use case where you weren’t dealing with any UI, so you didn’t care about re-rendering, but you did need to persist a value across renders? In this scenario, it’s like you need the half of useState that lets you persist a value across renders but not the other half that triggers a re-render — Something like this.

function usePersistentValue (initialValue) {
  return React.useState({
    current: initialValue
  })[0]
}

Spoiler alert, the functionality of our custom usePersistentValue Hook is very similar to the built-in React.useRef Hook.

If you want to add state to your component that persists across renders and can trigger a re-render when it’s updated, go with useState (or useReducer). If you want to add state to your component that persists across renders but doesn’t trigger a re-render when it’s updated, go with useRef.

For more info on useRef (and a deeper explanation of how useState is similar to useRef), visit Understanding React’s useRef Hook