Skip to content

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

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 Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.

You might also like

Javascript

Getting Started with RxJS

Javascript

Testing Web Components with Cypress and TypeScript

Javascript

Web Components Integration using LitElement and TypeScript

Javascript

Navigation Lifecycle using Vaadin Router, LitElement and TypeScript