Vercel News, React Canaries & React Native MacOS 0.71

youtube-cover
Subtitles
Show
[Music] hello everyone welcome to the next episode of coffee talk by callstack when we talk greatest and latest in real and react native news uh we have some important news from versel announced just last week so in order to help me do that I will invite my co-host here to the stage Cuba Urban how are you hi hi it's great to be here I'm doing great I'm doing great it's a great weather outside some great update updates coming up so I should I should say let's get started yeah let's do that so like I said uh big updates from versel and apart from that we have some two smaller news from Brother react and react native communities um I know that you know because we prepared this episode and we have two notes last week uh the versaille the company behind next.
js framework
announced some new things so let's start from next.
js next.
js is at its
13.
4 version and it has some amazing new
capabilities there first of all app router is stable now it came out of beta and it is considered stable and if you are creating the nexjs project right now it is recommended that you use Ria Crowder uh sorry the app router from next.
js exactly what a relief for all
developers to see that it's stable there's no better word for developer than stable yeah and uh the app router was um next.
js way of creating a ring mix
layouts I guess it's quite similar and this is not the last um mention of remix that I'm gonna do this in this episode because they stole something else from remix as well and those are server actions so previously if you want to mutate your data on server you'd have to create an API route and call that API directly in order to do something there right now what you can do with this uh server actions Edition is that you can
in your server component create a function an async function that calls some server action directly it has to be a synchronous action but it's still pretty magical what you can do with this so you can mutate your data directly and maybe if you have have some for example database you can operate on that as well yeah so that's pretty cool pretty cool it actually simplifies the workflow quite a lot I I would say yeah yeah I'm I'm really I'm really glad that versel is actually looking into developers experience as a serious thing and they're actually like updating their stuff regarding what people like not just you know behaving like a big company and doing stuff that only they think are are useful they're actually listening to the community which is great yeah yeah yeah and I guess uh I've read somewhere I don't know if it's true because I'm not a PHP developer but that that is directly influenced by the style that you used to write in PHP and like Ruby on Rails and stuff like that yeah yeah I mean if we have any PHP or Robbie on Rails developers watching this you can drop a comment say if this is actually true or not um I would rather not check that I'm staying away from PHP as far as I can but you know if there are some people who actually like this stuff so go ahead and do this yeah summarizing in your server components right now uh you can have a function that calls your uh server actions directly awesome uh going forward the third thing that is announced in next.
js 13.
4 is another
promotion so we had a promotion for app router from beta to stable and the Turbo pack is uh better now from alpha I guess uh we had um Coffee Talk episode with Zach Jackson who is a maintainer of webpack and we were talking about turbo pack there
extensively so I will make sure to put that discussion in the show notes so that you can uh learn more what the turbo pack is all about yeah go ahead and check it out yeah I think that wraps up our next JS 13.
4 uh Mark of the announcements from
versel but there's more yeah there's way more there's there's stuff that versel did that nobody nobody expected in the world no I'm just kidding maybe people expected that but uh it's it's pretty I think groundbreaking for for versaille as a cloud provider and uh yeah I think we should talk about it a little more um so why why don't we just start with um databases virtual databases uh so basically versel introduced uh blob file storage which is known for example from places like Amazon storage buckets like S3 for example and uh right now this file storage is in private beta but you can still go ahead and check this out and try it for yourself as a developer and play around and see if you like it uh obviously if if you are an experienced developer you know what blob file storage is but for those of you who don't know that basically it allows you to store files like you know images PDFs um CSS and other unstructured data so you can you can go ahead and play around with it it's really easy to use it you basically stream your files to to the storage you attach some key value to it so that you can later on pull it out from the storage and that's it simple as that the the SDK that versal provides for react is very very simple yeah and no longer you have to like set up your buckets yourself and then maintain the connection stuff like that uh you just import this um blob file storage from from next.
js
and you just use it awesome yeah simple as that
so yeah go ahead and give it a try uh all of a sudden you have more options than just Amazon storage so it's great it's great this way um yeah uh well guys would you like to to introduce another type of of uh database that virtual interest I think we we need to like uh lean into the topic some more so you were talking about the oh yeah blob um file storage but the main announcement there is they actually announced three different uh ways to store your data uh on that so virtual databases I I think like the the whole section is called so first one is blob that we already discussed and we have two additional ones the second one is the key value uh database which uses redis under the hood and this is no SQL database basically you provide a key and a value to save data and you need a key to retrieve that data uh what I've heard about this is that this is blazingly fast like this database is really really fast that's the main advantage of it and so that's one and the second one is the postgres SQL database that you can also like import and use directly from your uh client sorry from from your code base right from your react code base yeah exactly and it appears really nicely with server actions apparently uh again this is this is that concept that you were talking about previously that was stolen from from remix uh that basically you can you can see in this implementation from versl and also yeah this is a SQL database so basically verse I'll introduced three types right file storage nosql database and SQL database so everything you need is just given to you on a plate you just have to grab it from the from their SDK put it in your code and start working with it and what I really like is that they provided us three options at the same time there is
no like okay so right now you have the SQL database and everyone would like start using it migrate maybe some stuff to to use it and then two months later they would announce okay so now you can use the key value databases as well no they provided three options up front and you can pick and choose whatever suits you best for the your specific use case right yeah exactly many many companies like this would would just say why would we introduce all three of them I mean this is a this is a little bit risky from the point of view of the provider right because you introduced three services that can either be great or or just fail fail at the same time but I suppose they had tested it well enough that they are you know they are courage to to just show it to us and give it for us to play with and it's all in in a better version right now they are still giving you access so that you can test it and maybe give your feedback back to them um but still it's it's right there out there to play with it so yeah I think this is a round of applause for yourself yeah why not yeah yeah for the for the sureness of the solution I guess what can give you some some confidence there is that they partner with like really established companies in the database field so the postgres SQL they partnered with neon for the key value uh redis SQL they partner with app stash and for the blob they have partnered with someone but I don't have that in my nose that is true that is true but yeah I still believe that their Partnerships are are just well established and they trust their providers so uh we should go ahead with this and just trust them in that too yeah okay moving on from databases so we discussed actually yes 13.
4 we discussed
that day three databases that they provide that they are providing us with
from now on uh let's move on to code spaces and this is something that I don't understand completely yet and from the looks of it it's looks like some other similar propositions from like GitHub or vs code or I don't know stack Blitz I think uh so I think that's in that neighborhood of functionality but what I really liked uh about the Keynotes that talk about this was two things so first of all I saw so amazing amazing demo of the direct edit it did directly editing your CMS data from your website UI oh yeah that looks like magic it looks like notion and apparently it works so that's an amazing idea to allow marketers and like content creators to just edit things on the fly all of the sudden you don't have to maybe make new mock-ups for your developers maybe you can just see uh for yourself how is your new input looks for like mobile or web or or anything like that right you can directly um mutate your data awesome yeah exactly and this is this is quite crazy I mean if you look at this from the perspective of a company that might be using this you you all of a sudden you don't have this kind of a marketing team and developers team conflict and constant exchange of what do we need what can we provide because we don't have time for this because we got clients to work with and all of a sudden marketing team can just take things into their own hands just edit stuff by their own and then also what I think was also uh announcing within this feature is that you can you can put this editable CMS Parts within the developer code so they can live together on the same page yet the CMS part is editable by people from the outside like marketing people and developers can still work on their own parts of code that is more complex like let's say some features that are not
editable by a marketing team right so this is crazy I can imagine smaller companies that don't have this many employees around that this is going to be just game changer for them you know saving so much time so much money well yeah like the whole code spaces idea is to allow collaboration right yeah and actually like the the next point I want to make is something that stood out to me in in that is when you are collaborating on huge project you want to make sure that your changes are validated and verified and like code reviewed by someone who knows their stuff who knows that business area who knows that piece of code uh so they've introduced the code owners basically so it works like when you change some file then you need an approval from owner of that piece of functionality like I in like bitbucket in GitHub you can assign someone to check your code I guess that happens automatically in the code spaces now yeah from from what I understand you can basically write some rules saying that okay this piece of code that this that has let's say let's give an example so let's imagine we have a piece of code that is handling payments right we are using uh some some payments Library there and we are implementing some new way of paying Right This is highly risky action so we would like somebody from security team to have a look at this whether we are not introducing any vulnerabilities and this way you get you basically get an automatic notification for the whole Security Group people that hey guys I need your review here because I I did some changes regarding payments and this needs to be approved by you so you know you can avoid uh let's say junior Developers for getting who to mark on their pull requests that yeah so yeah and this way this way it's just way safer way more uh again collaborative because you don't need to think about
this automated right it is automated so like you don't have to know your whole organization and you don't have to know uh who to reach for the code review it happens automatically exactly exactly it's a it's a great way to just save some time save some uh brain resources you don't need to think about this this is great okay uh for some other like code spaces related updates just refer to the show notes we're gonna direct you to to the blog post from versel uh talking about this and I think the last update that they had is something that even less that code spaces I understand and this is security they've introduced a bunch of security measures that improve just the security of your like connection or of your firewall stuff like that yeah I mean there are basically two biggest things regarding this which is called one is virtual secure compute which is what you just said the private connections within your um API and clients or API and database connections this is all private Network now so you can just you don't have to expose it to the to the outer world and the second one is versal firewall uh that is implementing DDOS mitigation and API blocking sorry not API IP blocking um which is something that mostly Enterprise projects will be interested in but if you are a security freak you can just go ahead and have a look play around with it yeah um I think that concludes our versal next.
js update and like I said that the
biggest update that we have for you this week but we have two more things to talk about and let's maybe start from reacting and reacting is react Canary channel so yeah previously react had some experimental features that they were working on uh within meta right and we didn't matter
uh they might have gave access to some of those experimental features to some internal teams that teams were using maybe that feature maybe they were Consulting on it giving some comments stuff like that uh but what the react team wants to do is to maybe democratize the process just a little bit and maybe to give some stability for some of the experimental features that they feel are ready enough to show to the world and to use in the world but they are not ready yet to give it to us in a stable release like I think the stable releases of react they come out like every maybe a year and a half something like that I don't know but like that's a hot day but not not often not often enough so for example if you are versel or you are a remix and you want to use server components guess what those are not included in the stable release yet but somehow the next I asked uh 40 13.
4 actually
uses them like under the hood how is that possible yeah we know now they probably used to use the experimental release Channel and right now they are using the canary release channel so the promise there is that thinks that have already stableish API that don't uh anticipate any breaking changes and those will land in that Canary Channel and you can pin your react version to that Canary channel to that Canary Channel version and just be sure that you can use server components in your like framework or in your code base uh stuff like that so I think that's great yeah it is really cool I mean especially when you are building a framework like versel does right so if if your project is a framework you want to have an access to some features that are not yet in a stable version of react but you want to introduce them in your framework
already right so this is a great way to get some just a little bit more uh more how do you say that a little bit more sureness that react will support this if if you will find any bugs they will react the react will react to this yeah and they will act like this is a stable version I mean act like it is a stable version so they will take your feedback they will try to act on this as soon as possible not like with experimental where you have to take into account that well this is experimental it might break and we don't have time to work on this yet right yeah so actually that's the promise that's the promise with Canary that uh for experimental features you are left on your own basically and for the canary features you might expect those feature to be a stable and B getting the fixes yep and also um meta or react team is is giving us a promise that any breaking change that will go into the canary version will be also described under corresponding blog post right so you can you can read about it as soon as it's as it's released you don't have to follow uh change lock pull requests just to get to know that they're released you can you can just follow their blog and and get to know everything you need and um also I have one information for those of you who might be already panicking like oh my God what is going to happen to like versioning and stuff like that uh well you don't have to be worried because as always react is uh continuing to follow sember for every stable release it's not changing this is just an extra release channel it's like below that so don't worry yeah okay that wraps up the react Canary Channel and for the last um for the last update in this episode we have react native Mac OS 071 uh I admit
this is a few weeks old now uh but it's quite interesting and I wanted to discuss this so hold on what happened what happened to zero sixty nine and zero yeah like where are they good catch so is it like is it like what what happened to iPhone 10 and I iPhone 9 like where is the iPhone 9 why there's iPhone 10 right they skipped the version and they're doing the same thing like apple is setting Trends out there yeah and Microsoft is following because uh Microsoft is actually maintaining the react native Mac OS so that's one and Microsoft this time around on this version of uh react native Mac OS they collaborated with meta a lot because messenger from Facebook from meta on Mac OS is react native it's react native Mac OS it's not uh like react native embedded in some webview and how do you call it in in electron up yeah this is react native Macos yeah it's the same experience right they provided a lot of help to Microsoft team and Microsoft team uh the react native Mac OS was always like uh two three versions behind the main react native release and I'm really glad that they decided to change that they decided to spend some time they decided to get some help and get behind the 071 react native release so that's great they had to ski like you say they had to skip two versions to get there but yeah um and also this is they're using the the new architecture uh it's experimental for Mac OS and I guess we also have an episode uh with with Lorenzo who is describing to us how this is done in Microsoft and and um and I think we can also link that episode so everybody interested yeah like I had an interview with Lorenzo about a year ago maybe nine months ago and on in that episode he was describing how Microsoft is doing react native so
Timestamps
Show
Listen on Spotify
Watch on YouTube
Listen on SoundCloud
Listen on Apple Podcasts
Guests
Jakub Urban
Software Engineer
@
Callstack

With so much going on in the community, it might be difficult to keep up with the new releases and announcements. Łukasz and Kuba come to the rescue with their roundup of React and React Native news.

React and React Native news roundup

We begin by discussing a bunch of recent news from Vercel:

  • A foundational release of Next.js 13.4 that comes with stable App Router, Turbopack in beta (which you can listen more about in our Coffee Talk episode with Zack Jackson), and Server Actions in alpha. You can read more about the changes in the blog post discussing the release.
  • Three choices for databases in beta versions: Blob File Storage, Vercel KV with Redis under the hood, and Vercel Postgres.
  • CodeSpaces, enabling CMS edits directly from your UI and making managing your frontend projects easier at scale. It’s bound to foster collaboration and speed up development involving cross-functional teams. Learn more about this feature from Vercel themselves.
  • New security measures, including Vercel Secure Compute to Vercel Firewall.

Next, Łukasz and Kuba discuss the introduction of Canary release channel for React, which is to give the community the chance to incorporate specific new features into their systems before they are officially released in a stable version, as long as their design is nearly finalized.

The last piece of news in this episode is the release of React Native macOS: 0.71 in cooperation with Meta and Messenger Desktop engineers. If you want to learn more about the release, head over to the Microsoft blog post, and our Coffee Talk episode with Lorenzo Sciandra talking about React Native at Microsoft.

Need help with React or React Native?

We support teams building scalable apps with React and React Native.

Let’s chat
Link copied to clipboard!
//
Insights

Learn more about

Community

Here's everything we published recently on this topic.

Sort
//
Community

We can help you move
it forward!

At Callstack, we work with companies big and small, pushing React Native everyday.

No items found.