Skip to content

Getting Back From Your Hot Girl Summer? Here's What You Might Have Missed in JavaScript!

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Hot girl summer is over and it’s time to dive back into JavaScript! Here’s what happened while you were out in React, Angular, and Vue:

React Updates

React 18 dropped in March 2022, and a lot has changed. A few things to note before you migrate your apps to React 18 and if you should, yet? Let’s touch on React 18 features in case you may have missed them.

New Render APIs

React 18 breaks a bunch of stuff but fortunately, the fire is contained. To take advantage of React 18 features, you'll need to use the new rendering APIs. These changes only affect your root component.

  • For client-side apps, you now use createRoot instead of ReactDOM.render.
  • For server side apps, hydrateRoot replaces ReactDOM.hydrate.

Check out the Official React Blog to learn about the new rendering APIs.

React Hooks.

Aside from the transition hooks we talked about earlier, React added even more new Hooks:

  • useId: for generating unique IDs on both the client and server.
  • useDeferredValue: lets you defer re-rendering a non-urgent part of the tree
  • useSyncExternalStore: allows external stores to support concurrent reads by forcing updates to the store to be synchronous.
  • useInsertionEffect: a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render.

Vue Updates

Moving on to Vue.js. Vue recently marked Vue 3 as the default version, but Vue 2 (now in Vue 2.7 beta) is still getting improvements in the meantime.

Vue 2.7

Vue 2.7 is still being maintained and receiving the same attention as Vue 3, the improvements, updates, and fixes are in parallel and towards giving the same developer experience on both versions.

More importantly, most features on Vue 3 are being backported for Vue 2.7 so that Vue 2 users can benefit from them as well, these features include:

Composition API support

The composition API is now enabled in Vue 2.7 with the officially maintained @vue/composition-api package. Vue 2 users can take advantage of the Composition API.

Angular Updates

Coming to Angular! Angular 14 released is still fresh news with lots of exciting features including Standalone Pipes, Directives, and Components (Standalone PDC), Configurable Document Page Titles, and more. Read about that here

More features are being added with improvements and fixes to the existing ones, before migrating your components to Standalone PDC let’s walk through these.

Initializing an Angular App

This is the equivalent of having create-react-app for angular.

As of Angular 14.2.0, you don’t need to install a CLI to create your app. Simply run npm init @angular or yarn create @angular to create a new Angular workspace and an initial starter app.

New Router Guards

There are plenty of use cases for Angular router guards: rerouting or restricting a user based on rights and permissions can be somewhat tricky to implement with the famous CanLoad and CanActivate guards.

Screenshot 2022-09-20 3.46.23 PM

To learn more about improvements, fixes, and new features including what is coming in Angular 14.2.0 read the ChangeLogs

Conclusion

What updates are you most excited about lately?

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Prefer email? hi@thisdot.co