Have you already watched the Summer 22 edition of Frontend News? The summer edition sounds like it’s going to be recorded under the palmas near the sea, and the hosts will be drinking cocktails with exotic fruits but… We are glad to meet you in our studio :D What’s new in the world of frontend?
Have a nice watch! :) Prefer reading? Read the transcription. ->
Color JS
So the first news which we’re gonna get a quick overview is the release of the new Color JS library. What is it exactly about?
Basically, it provides us with the color API and we can do plenty of operations with colors using javascript! And now we gonna highlight the most important things about it:
The first cool thing about color JS is completely color space agnostic, which means that each Color object just has a reference to a color space, a list of coordinates, and optionally an alpha. It also supports a large variety of color spaces including all color spaces from CSS Color 4, and unofficial CSS Color HDR draft and supports interpolation defined in CSS Color 4 as well.
Another great thing in Color JS is that it doesn’t skimp on color science it means that when converting between color spaces with different white points it does actual gamut mapping instead of naïve clipping, and actual chromatic adaptation. What is more, the Color JS provides multiple DeltaE methods for calculating color difference (2000, CMC, 76, JZ, OK etc) and is written to be very modular and ESM-first (with CJS and IIFE bundles) It also provides a tree-shakeable API as well.
If you want to get more info about Color JS - please visit the official Color JS website to read more about it!
Svelte 3.49.0
The next exciting news which we’re gonna speak about is Svelte 3.49.0! It has a lot of new things to cover for example faster SSR support for Vitest and Storybook in SvelteKit and much more - so let’s dive in for a quick overview.
So jumping to the first thing we have now new website - learn.svelte.dev for learning Svelte and SvelteKit from the ground up that is currently in development - we highly recommend visiting it and checking out what’s inside.
As mentioned before with the new version of Svelte we have faster SSR - resulting in up to three times faster rendering in some benchmarking tests. We have also things like Find File References and Find Component References in the latest version of the Svelte extension - which shows where Svelte files and components have been imported and used. What is also important is that the svelte extension now supports CSS path completion.
With the new release of Svelte, the team introduced @sveltejs/kit/experimental/vite which allows SvelteKit to interoperate with other tools in the Vite ecosystem like Vitest and Storybook. What is more, in SvelteKit we have now support for streaming in endpoints and static assets can now be symlinked in development environments.
Of course, there are plenty of new things regarding a new version of Svelte - you can check out the full list of the new things on the official Svelte website.
Prisma 4.0.0
The third news from our list that we’re gonna highlight is Prisma 4.0.0 release with a variety of improvements across Prisma Migrate, Prisma Scheme and Prisma client, which will impact most Prisma users. Especially those who used some of the preview features around advanced index management, raw SQL queries and filtering rows by properties of JSON. Besides that, there are lots of breaking bug fixes and other enhancements and we’re gonna now make a quick overview few of them:
New Prisma Client APIs: findUniqueOrThrow and findFirstOrThrow
In this release, Prisma team introduced two new APIs to Prisma Client:
- findUniqueOrThrow – retrieves a single record as findUnique but throws a RecordNotFound exception when no record is not found
- findFirstOrThrow – retrieves the first record in a list as findFirst but throws a RecordNotFound exception when no record is found
Improved default support for embedded documents in MongoDB
With Prisma version 4.0.0 we have also improved default support for embedded documents in MongoDB which basically means that we can now set default values on embedded documents using the @default attribute. Prisma will provide the specified default value on reads if a field is not defined in the database.
Another thing regarding the new release of Prisma is extendedIndexes which are now generally available to use. With extendedIndexes feature you can configure indexes in your Prisma schema with the @@index attribute to define the king of index that should be created in your database/ so basically in Prisma schema you can configure:
- Sort order and length
- Hash indexes for PostgreSQL
- SQL Server index clustering
Last thing which we would like to mention is improvedQueryRaw which, the same as extendedIndexes are now generally available. It basically introduces two major improvements when working with raw queries in Prisma:
- Scalar values are de-serialized as their correct Javascript types
- PostgreSQL type-casts
For the complete list of Prisma 4.0.0 updates and changes - you can reach the official Prisma website.
Vue 2.7 Naruto
Another news we’ll make a quick overview for you is Vue 2.7 „Naruto” Release. It includes some of the most important features backported from Vue 3 for all of those users who have to stay on Vue 2, due to dependency compatibility, browser support requirements, or simply not enough bandwidth to upgrade. So what’s in?
The main backported features are Composition API, SFC script setup and SFC CSS v-bind. In addition, we have now support for the following APIs:
- defineComponent() with improved type inference
- useSlot(), useAttrs(). useCssModules()
- set(), del(), nextTick() provided also as names exports in ESM builds
Vue 2.7 supports using ESNext syntax in template expressions. Moreover, we have also support for Vite which is provided via a new plugin @vitejs/plugin-vue2 and dev tools support, for inspecting the Composition API state. Of course, there are a lot more new upgrades and fixes to inspect - you can check it out on the official Vue website.
Bun v0.1.0
Last but not least - we’re gonna speak about Bun - a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in. Bun is a modern JavaScript runtime like Node or Deno but it is a completely new challenger in that field. It was built from scratch to focus on the main things like:
- Start fast (it has the edge in mind).
- New levels of performance (extending JavaScriptCore, the engine).
- Being a great and complete tool (bundler, transpiler, package manager included).
- Supports a lot of Node and Web APIs already.
- You can use npm packages with it.
- Works on macOS (x86 and Arm), Linux, or WSL.
Bun is aimed at 'outside of browser' use cases and is built around WebKit's JavaScriptCore, rather than V8. More info about innovative and traditional frameworks and languages, style, color objects. The goal of Bun is to run most of the world's JavaScript outside of browsers, bringing performance and complexity enhancements to your future infrastructure, as well as developer productivity through better, simpler tooling. You can read more about this new challenger on the official Bun website.
