September 23, 2022

New Typescript, React and Safari Releases - Frontend News #29

Olga

Olga Vasylenko

Marketing Specialist
Bartek

Bartosz Antoszczyk

Frontend Developer
New Typescript, React and Safari Releases - Frontend News #29
Share

The September Frontend News edition is here. What’s in?

content photo

We added a transcription of the podcast for you to read. :)

Transcription

Bartosz
Hello everyone. This is Fronted News and we are really happy to see you again. 
Olga
It's nice to see you. Today we have five pieces of news for you, so let's start. The first news which we are going to talk about is TypeScript 4.8. 
Olga
The second one is react router v 6.4.
Bartosz
The next one will be Safari version 16.

Then we have News in forms and last but not least we're going to talk about MemLab.  
Olga
MemLab, nice name.
Bartosz
No, it's not about mems. 
Olga
Oh no. How was your week? How are you? 
Bartosz
You know, I can't get used to the weather because it starts to get cold and, I guess, it’s not the best weather for doing something outside. 
Olga
Yes. Or for doing anything. 
Bartosz
Not really for doing anything. You can always read books or something. 
Olga
You can spend time by watching our Frontend News. 
Bartosz
Yeah, that's exactly yeah, a lot to do. 
Olga
But I plan to whine about the cold for the next six months. That's my plan for half of the year.
Bartosz
Okay, that's nice. 
Olga
He didn't get my joke. I'm sorry. 
Bartosz
No, I got it. 
Olga
Okay, thank you. Okay, so let's start maybe.

TypeScript 4.8

Bartosz
We’re gonna start talking about the latest version of typescript which has a bunch of new features, correctness and consistency improvements. Let’s jump to the quick overview of them.

Improved Intersection Reduction, Union Compatibility, and Narrowing

Bartosz
First one is improved intersection reduction, union compatibility and narrowing. These changes affect how intersection and union types work, and are leveraged in how TypeScript narrows types.

Improved Inference for infer Types in Template String Types

Bartosz
Another thing which we’re gonna mention is Improved Inference for infer Types in Template String Types. So in typescript now there is a new way to add extends constraints to infer type variables in conditional types. This basically means that we have better conversation what a library will do at runtime and will give us more precise types.

--build, --watch, and --incremental Performance Improvements

Bartosz
The next things which typescript 4.8 introduces are --build, --watch, and --incremental commands Performance Improvements. TypeScript is now able to avoid spending time updating timestamps during no-op changes in --watch mode, which makes rebuilds much more faster. It is said that these improvements reduces time not the order of 10-25% simple common operations and round 40% time reductions in no-change operations.

Find-All-References Performance Improvements

Bartosz
When running find-all-references in your editor, TypeScript is now able to act a little smarter as it aggregates references. This reduced the amount of time TypeScript took to search a widely-used identifier in its own codebase by about 20%.

There are much more news and interesting things about type guards and Typescript 4.8 - you can check the full list of improvements and changes in our links which you will find in the description

React Router v6.4

Olga
The next thing which we’re gonna speak about is React Router version 6.4 which comes with the data API from Remix. In this release we have new conventions, APIs, and automatic behaviours for:

1. Loading data into components
2. Updating data in components
3. Automatic data revalidation after updates
4. Managing race conditions and interruptions for navigations, mutations, and revalidation
5. Managing errors and rendering something useful to the user
6. Pending UI
7. Skeleton UI with React.Suspense

And now we will point out a little bit the most interesting ones for you.

Pending UI Navigation

Olga
The first one worth mention in our opinion is Pending UI Navigation. So when you as a user navigate around the app the data for the next page is being loaded before the page is rendered. So react router provides user feedback during this time so that the app doesn’t feel like being unrespondable.

Data Loading

Olga
Another thing which we’re gonna talk about regarding latest version of react router is data loading. React Router now provides conventional data loading hooks to initiate data loading during navigating between the pages. All of the data for multiple layouts can be now loaded in parallel for specific URL. You can check the rest of the features, upgrades and improvements on the official react router website and by visiting the link we provided for you in the description.

Safari 16.0 

Bartosz
The third news for today is Safari version 16.0. This release contains quite a few new web technologies that web developers can use to make their sites and web apps better - we’re gonna now talk about the most interesting in our opinion. 

Passkeys

Bartosz
The latest version of Safari adds support for passkeys, which provide users an easy way to log in , while delivering a profound increase in security. This technology which makes passkeys possible is in open standards with W3C and FIDO Alliance, includes WebAuthn standard which is supported in the most common browsers now. Basically what is cool about passkeys is that you can offer it alongside your existing authentication options. We encourage you to read more about then in Safari docs.

Web Inspector Extensions

Bartosz
Another new thing is Web Inspector Extensions enabling you to enhance Safari built in developer tools editor support. You can basically check them all and download by searching Web Inspector Extensions in the App Store there are plenty of tools from third party developer services, test suites and frameworks.

Container Queries

Bartosz
Next thing which we would like to point out is Container queries, which in similar to media queries allow you to adjust the layout or styling of an item on your web page based on the size of its container rather than size of viewport. Safari 16 now supports size queries and container query units. Container query units are basically similar to viewport units  but the difference is that they specify a length relative to the dimensions of the query container - not the viewport.

There are plenty of other new things and improvements in Safari such as Subgrid, Apple Pay Support for Merchant Tokens, Accessibility and Animation Improvements and much more - you can check the full list in the official Safari docs or in the link we provided in the description.

News in forms 

Olga
The next thing which we’re gonna speak about is new things in forms which have been added due to constantly upgrading browsers. Basically they adds plenty of new HTML, Javascript and CSS features and some of these useful additions we’re gonna speak about now. 

requestSubmit()

Olga
The first one is support for requestSubmit method in Safari version 16.  requestSubmit is an alternative way to submit a form via Javascript but comparing to submit method form validation will prevent form from being submitted and when all of the data passes validation, submit event will be fired. It seems to be more elegant solution in that case. 

showPicker() for input elements

Olga
Another one is showPicker method for input elements, which has been support from Chrome 99, Firefox 101 and Safari 16. It provides displaying the selection UI for input elements whose type attribute is Date, Month, Week, Time color or file.  

Inert Attribute

Olga
Inert is a new HTML attribute. It isn’t only for forms, but forms are certainly a key use-case. Unlike the disabled attribute, inert can be applied to a form element itself. Everything within the form will be non-focusable and non-clickable. 
Bartosz
There are plenty more things regarding forms new specifics in browser, you can check full list of them in the link attached in the description.

MemLab 

Olga
Yeah, exactly. Now, my favorite MemLab. 
Bartosz
It’s not about making memes, I told you. Last but not least we are gonna talk about Memlab - An open source framework for finding JavaScript memory leaks. We’re gonna make a highlight for a few most interesting features of javascript runs which this framework provides for developers.

Memory leak detection

Bartosz
For in-browser memory leak detection, the only input MemLab requires from developers is a test scenario file that defines how to interact with the webpage by overriding three callbacks with the Puppeteer API and CSS selectors. MemLab automatically diffs the JavaScript heap, refines memory leaks, and aggregates results.

Graph-view API of JavaScript heap

Bartosz
MemLab supports a self-defined leak detector as a filter callback that is applied to each leak candidate object allocated by the target interaction but never released afterwards. The leak filter callback can traverse the heap and decide which objects are memory leaks. As an example, our built-in leak detector follows the return chain of a React Fiber node and checks if the Fiber node is detached from the React Fiber tree.

Memory assertions

Bartosz
A Node.js program or Jest test can also use the graph-view API to get a heap graph view of its own state, to do self-memory checking, and write all kinds of memory assertions.

Memory toolbox

Bartosz
In addition to memory leak detection, MemLab includes a set of built-in CLI commands and APIs for finding memory optimisation opportunities.
Olga
That's all we prepared for today. 
Bartosz
Thank you very much for watching us. 
Olga
And see you next time. Bye. 

What do you think? Share your impressions!

Become a part of the team that fits you, create really cool videos with us!

Interesting projects from all over the globe, opportunities to grow and nice people attached. Check out our openings.

Join us
Microphone
Ask Us any question.

(preffered about front end, in other case we can answer longer and not on topic)

Free consultation usually takes 15 minutes, where we can answer any front end related questions. We are always trying to agree term which suits both sides. Our Experts take care about quality of all answers.

Contact us
Photo of Cezary
Photo of Kinga
Photo of Krzysztof

How the consultation looks like?

  1. Ask question

  2. - Which technology choose to build quickly MVP?

    - How to solve problem of required technologies in the project?

    - How to extend my team with experts of UX/UI?

    - Is possible to ...

  3. Who will contact You?

  4. Immediately after ordering a free consultation, our office will contact you, ask about the topic and arrange a convenient date for an interview with an expert.

    Each interview is conducted by our internal consultant based on his full experience and knowledge. Even if he or she does not know the answer (which is rare), he will consult the topic with the full team and come back with the answer.

question mark icon
Arrow icon
Brain cog icon
Arrow icon
Video call icon

Meet our hosts

Olga

Olga Vasylenko

Marketing Specialist

Bartek

Bartosz Antoszczyk

Frontend Developer

Subscribe for tech insights

We will keep you up-to-date with fresh front end podcasts, news and articles

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.