Share
The September Frontend News edition is here. What’s in?
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.
