The React Native Show Podcast - Episode 9: React Native News

[Music] hello everybody i'm mike cyril with co-founder kohlstag and before we move to our react native show podcast i have a quick announcement to say that might be something that is interesting to you today i'm looking for the best react native developers to join my team besides working on high-end software used by millions we also contribute to open source projects such as react native paper react native testing library or repack and so you will have an opportunity to develop your skills and knowledge within these projects as well as move your own ideas into life by taking part in our r d program we are a great team full of react native crazy people about this technology and we can't wait to share our knowledge and experience with you and so if this sounds like something exciting don't wait anymore and join us it's great to be part of such a team check out the link and below and apply and i'm hoping to see you soon in our call stack office or maybe remotely depending on your location bye bye hello everyone in react native show podcast uh today we are going to try something new than usually first we have we have a new host that is me i'm lukas and i will introduce myself and my guests later but first let me introduce to introduce you to the new new style of podcast that we thought of uh can be interesting for you so usually we take some subject and we discuss that in detail for 40 minutes or so uh today we thought we will do something different we will take a look at the broad spectrum of uh state of uh react native so the way i see it we have two different realms we have uh core react native stuff which is uh which are like releases uh big companies that are involved facebook microsoft um maybe hermes uh architecture stuff stuff like that in the second part we will take a look at the community realm so so the conference that uh that we uh held a few weeks ago in rotsuav in callstack and also some updates about the libraries uh so yeah let me introduce myself i'm lukasz i'm a software developer developer uh working in call stack i joined i joined call stack few months ago and let me tell you this is another level of uh of company i'm learning every something new every day here and i encourage you to join me yannick and satya in our team go to our career page on our call stack page yeah and let's move on to introducing my guest today first is satya you may know satya from react navigation from our conference and from previous episodes of react native show satya can you say something more about yourself yeah hello i'm satya i'm a front-end developer at call stack and i've been working with react native uh like uh since react native android has been released and i have been also working on a lot of react native libraries like tech navigation react network and many other libraries like regulated top view yeah so i'm really excited to be in this podcast today and excited to excited to discuss about the new updates in react native because i think it has come a very long way since it first started thank you satya uh next up is yannick who is just like me first time on this show yannick hello i'm jan i'm a software developer at callstack i joined last year and this is the first time that i am doing podcasts so it's really exciting to be here thank you for inviting me yeah sure i'm excited to have you here because i think we can uh jump into our first topic and i think you have to say some uh you have something to say about the new react native react native 0.65 sure so react native 65 is another upgrade for react native and it was released last month and there are some exciting stuff that i will talk about first is a new version of hermes that is bundled with this version it introduces new garbage collector that is much faster than the previous one and also there is now a native support for intl so there is no need for polyfills so i think many developers in our community will be really happy because it's it it will make uh possible to to use hermes in their apps without having to do through any customizations and i heard that even with polyfills and there were some issues let me maybe just add something to this new garbage collector uh the name of the garbage collector is hades which i guess will stick in with the greek gods team here and hades is a garbage collector that is promised to bring us 30 uh 30-fold decrease in pause time in our application so post time is a time that application is stopped from running by garbage collector so the garbage collector can do its job and they figured like creators of haters figured that they can move some of the work that the garbage collector is doing to another thread to some background thread so that the pause time is uh much shorter than it was in like previous uh previous garbage collector that was used in in hermes so that's that i think this is really exciting and it's another step for hermes to become a default engine for react native in the future definitely moreover there is also one more exciting stuff to talk about about here hermes is that it now uh works on m1 max so if you are planning to buy a new mac or you already have it but you couldn't use it due to that now it's possible and i think many developers will enjoy improved performance both of uh new max and hermes hermes engine yeah yeah definitely uh i think satya said it some time ago that the new m1 max should have like similar stickers to intel inside so it should say something like uh it runs hermes basically yeah really exciting times uh coming yeah i've been i've been holding off on buying this simon macbook because there are there are so many shoes with everything uh yeah no there is one less issue so yeah i should buy it soon i think we should ask our marketing team to uh produce some stickers for us yeah good idea yeah yeah okay anything else in this react native 65 update yannick yes there are some small updates to accessibility this is just a continuation of work that facebook pledged with their gad pledge last year and this is still ongoing and i think this is such a great project that users and also developers have an easier time to implement proper accessibility support yeah definitely i i feel that this field should be looked at more carefully by developers and this uh this pledge and this work that facebook uh has been doing over the past year or so uh it's been a very important so maybe we should now talk about react native windows update because it dropped simultaneously with ios and android and it also has some nice features do you have anything about it sofia yeah definitely the there have been so many new things in the acme 2 windows recently as we know microsoft is working on reactive windows they use it in their products like office so the very recent thing is now react native windows releases simultaneously with ios and android so we don't have to wait for a reactive windows update after react native ios and android has released in addition to that the upgrade helper tool which allows us to see the difference between the previous version of react native and new version and upgrade our apps also supports the activity for windows so that is one less thing to worry about when upgrading our apps then there is uh also a code push support and read native windows so now we can update our react windows apps remotely and this feels this feels actually very natural uh to have uh code push in react native windows because code push is a microsoft uh maintained technology right yeah definitely is part of microsoft app center yeah so yeah uh in addition to those things uh there is also better documentation and there are more feature parity uh they are now adding new apis that that was missing before like for example pressable it was missing in the net windows but it was there in ios and android now they have added those apis to react to windows in addition to that they have added experimental support for binary distribution of reactive windows which means we don't have to compile it from source every time which will reduce the disk size uh reduce the compilation time and make everything faster and smaller and in addition to that we also have improved hermes support hermes can now be integrated with related windows uh like very easily without having to do anything complex uh build script uh setup and we can also debug and profile hermes uh in react native windows directly like we can do for ios and android that's pretty nice that we don't need to like do anything complex to set up harmonies now uh so in addition to all means there are uh also two more other things that react native windows team has been doing uh there is a fluent ui which is a new ui language in windows 11 and there is another library for react native uh which which allows us to implement fluent ui so we can use a fluent ui library to implement native apps for windows in addition fluent ui we also have xml ui controls which is a common common way of building ui in windows in addition to that the microsoft team has been doing a lot of contributions to community libraries and adding the ac windows support they have sent pull requests to for example reactivity video react navigation react native screens and many other libraries adding windows support so we can use those libraries libraries seamlessly when we're using the identity windows yeah and and i think that's a great thing for them to do because like probably previously we had to if we have a multi-platform project we have to use two different library uh two different navigation libraries which is not ideal but right now we can use just one for every platform that we want to run yeah definitely that's that's awesome because uh yeah earlier like we had to create separate components for dot windows dot native for windows and other things yeah yeah and another thing that i want to add to this topic is that uh there is like a separate maybe not separate but on react native uh library directory there are 70 dedicated libraries for react native windows so if you are playing around with react native windows you should definitely check them out uh collets from from microsoft that was on our conference mentioned that uh there are many many many uh libraries that are directed to react native windows uh i think that's that wraps it up so let's move to our next topic from uh core react native updates and our net topic next topic is react native block blitz uh and i named this section that because we had four different uh blog posts from facebook from react native uh team uh since the drop since since they dropped uh react native uh v65 and this is unprecedented because in this year we have nine posts and five of them were released like in uh in a month and a year ago in 2020 we had only four blog posts in a whole year so i think that shows that facebook and react native team uh is taking developer communication very seriously right now and actually this is also something that they stressed in in some of the things that they're saying in the blog posts so uh i'm not gonna read out loud the blog posts uh i think you should you can go there and read it for yourself but let's just quickly recap the titles so the titles are react native in h2 react natives many platform vision react native is hiring managers to expand beyond mobile and preparing your app for ios 15 and android 12. and i think we should start from from the end because it's gonna play nicely with our episode structure so preparing your app for ios 15 and android 12. uh do any of you have something to say about this topic yeah i think this is the first time that react native team published such an article and it's i think it's a really good idea because it allows developers to prepare for changes that they come up with new os versions and it makes their work easier and thankfully from what i read and these changes are not really big but it's good to know beforehand and don't have any surprises or and have to look uh around the internet uh what might have been broken yeah definitely like those ios 15 and android 12 versions are not even uh they don't even have a release date yet at the time we record this so this is uh a great thing from react native team that they uh they allow us to prepare our application for the upcoming os releases um yeah and i think that's it uh let's move forward to two other blog posts which are related to multi-platform nature of react native and those are react natives many platform vision and react native is hiring managers to expand beyond mobile so in those two posts uh i think we can see the push from react native team to uh unify platforms uh so basically we have we have we have had those platforms for some times now we have react native web uh we have like react native vr which was i think before it was called react native 360. um right now we have microsoft with big push with react native windows and react native mac os so this just shows that uh react native team [Music] wants to implement implement those platforms in a like unified way but at the same time still embrace like different requirements and different constraints on each of them i'm also excited about this multi-platform uh initiative and all of this uh move towards multi-platform support because i think is is going to improve the dx and also user experience a lot because right now a lot of apps are using electron to implement multi-platform apps but now there is react native so we can we can have native ui super fast and energy efficient ui and we don't need to deal with heavy electron desktops uh if if this is a success yes when i was sometimes go through twitter i found some really interesting tweets that compare performance of electron apps and react native apps and how much of an improvement it is i think we will link it uh in the description down below so if you are interested interested in it uh check it out yeah and uh one other point in the same area uh is that uh facebook is rewriting their messenger up messenger desktop apps for mac os and for windows from electron to react native windows and react native mac os and they shared that the performance increase is very significant and like memory requirements uh dropped down so yeah so i i think it's huge uh electron was a good thing for a while but right now we can finally move on to develop native application for desktop yeah i think because react native embraces platform constraints it makes it easier for users and also developers to make the experience consistent with the whole system and because there are always the differences between ios android windows mac it makes it uh so much better than the electron app that often could look out of place yeah yeah definitely uh so yeah that was uh many platforms vision and now we are moving to the biggest of them all which is react native in h2 so in the introduction to this blog post uh facebook team is um is sharing with us their like development cycle and they are working in half of a year so in the first half of this year they were preparing something uh something really cool that we will share with you in a while but in the second half of this year they want to bring all of that to the community so so basically h2 is a bunch of promises to developers i encourage you to go there and read all of them so uh so you can check in h1 of 2022 if those promises were fulfilled but one of those is uh increasing community community engagement and community communication so that's why i think we see those posts that new os's are coming be aware something is changing and there are going to release some uh some new documentation about new architecture that like it is it exists in react native uh master branch right now and it has been for over a year probably but like everyday developers like me and yannick probably we don't know how to use it yet we need some documentation we need some uh hard data to base our development work on so there are uh going to release it in h2 so i think we should move to like the new architecture because it is very much connected with the new architecture and maybe a quick recap of what is this new architecture that let me remind you this was announced like three years ago and we still don't see any documentation about it so satya can you share a few sentences about what it is and how it will improve our lives yeah uh definitely so the new architecture has like three different things called jsi fabric and turbo modules jsi is basically a javascript interface which allows us synchronous access between the javascript engine and native code so we can share objects and different kind of data directly between the javascript engine and native code before that i mean currently we have a bridge so whenever we want to share data it needs to be converted to json and pass through the bridge so now the bridge will be gone and there will be only a jsi so there will be no extra overhead everything will be much faster and will have synchronous access instead of everything being asynchronous so jsi is the base of fabric and terminal modules turbo modules are native modules which use jsi and facebook on facebook also has a library called diagnotic code gen which allows us to generate native bindings for this turbo modules using typestrip or flow definitions similarly fabric is the implemental implementation of native components using jsi so it allows us to update components synchronously and uh receive uh updates from those components synchronously this is going to improve uh the ui responsiveness a lot and overall make everything faster and smoother yeah great uh so just to add something here i think this uh gsi is already used in some libraries am i correct yeah there are a couple of libraries already one one of the biggest library readings is react natively animated in version one they had a complete dsl for writing animations but now in the animated two we can write plain javascript and that uses jsi to directly share uh data between javascript and native code so we have like very declarative and uh full control of animations which is awesome and in addition to reanimator there are also two other libraries called react native mmkv which is a storage library and which allows us to store data super fast using gsi and in addition to that there is another library called reactive vision camera it's a camera processor so you can write frame processors to process your camera frames uh and it's also using jsi so it's completely synchronous and you can write 60fps transformation using their site so you can implement filters or anything you want yeah so uh like the vision camera stuff we had on our conference so we will link all that knowledge and like the the new architecture announcements were also happening on some of our conferences from few years ago so i think we'll link that below as well uh so what went maybe not wrong maybe not what went wrong but why did we have to wait so much time uh and we don't see it yet like i i haven't seen uh a documentation about it yet uh yeah yannick can you can you please help yourself with this yeah so joshua presented a a deep dive into process that went into introducing new architecture to react native and they at first they thought that it will take only six months but then they quickly find out that it's not such an easy task so they decided to do it uh internally first in their uh facebook application and they were in their testing and uh checking if there are no regression bugs and slowdowns and any crashes for users and and because they have over 1000 surfaces it was quite a process but thanks to that they were able to catch a lot of edge cases and now they announced that this process is finally complete so yeah and i guess i guess it's a great thing that we have this two huge like one of the biggest companies in the world behind a framework uh microsoft and facebook so that we know that uh like facebook is a running master branch of react native they they aren't running the uh 0.60 something as we do they run master so every time something is merged to master they test it on all of their users basically so over the last year they were implementing [Music] gsi in there like yannick said uh over thousand surfaces and the way they did it is they had actually to maintain both approaches as this at the same time so old architecture and new architecture and they were running a b tests on users to see how much the new implementation helped if it worked or what is there what else is there to fix uh so that when they finally release it we know that it's been tested already so we are not uh we are not testing it on our user it is already tested so we know that it is uh something that will work yeah and just to add another point uh the new architecture is written in c plus plus and compared to the previous one there is only a single implementation while currently each platform has to have their own implementation which increases chance of having platform specific parts uh it also requires a lot more maintenance and it is harder to introduce new platforms in this manner so yeah i think as we talked about the main efficiency platform this will uh really accelerate the overall adoption yeah definitely i'm looking forward to it and i'm looking forward to playing around with the new architecture and i know that there are some um so information about it already in the internet but i'm looking forward to seeing uh the proper one from react native team yeah official documentations and tutorials will be really welcome and yeah uh yeah and that was the promise in in h2 from uh react native team so uh keep it up guys like i want to see it please please bring it to me uh okay i think that is that is a wrap on our first section in this episode the first section was core react native updates and now we are moving to our second section which is react native community updates so in this section uh we'll uh take a look what is happening what is happening in the community so let me start with saying that last month like in the beginning of this month uh first of september first uh second of september well we had a react native eu conference that was a fifth one uh we held it online uh unfortunately hopefully in the next year we can we can meet in person but let me show you just some stats stats of it almost 10 000 people registered so we are really happy to see this kind of participation from all of you uh and the participants were from more than 140 countries so i'm not sure how many countries there are but that seems like a lot so so thank you very much for for confidence and for uh for trusting us uh we had two days 15 hours of talks and all of them will be available on our youtube channel call stack engineers so either it is available right now or it will be in the future so uh so you can catch up on those and and let us know what you think we had 23 talks and 24 speakers uh one talk was conducted by uh two speakers at once and in the peak moment we had uh more than a thousand people watching uh at the same time so so that's great uh so yeah i wanted to ask you guys satyayanik what was your takeaway from this conference what talk did you like the most uh did something surprised you uh there were a lot of great talks but uh the talk i was watching most interested in wasn't talking about jsi because there have been so little information about jsi yeah same here same here it was really nice to see how how it's actually working how how it is implemented and seeing how the vision camera library works yeah yeah i really like the introduction and deep dive into how the new architecture was implemented and at what stage we are and when we can expect it uh and also i really like the presentation from our friend zamotani about repack which i will talk about in a minute so yeah i like i agree with you guys uh satyayanik those two talks that you mentioned and zamotan is one were like exceptional they were on really high level and i'm i will add just one more to this bunch which is uh caliph from microsoft who were talking who was talking about uh um bringing react native windows and react native mac os to a wider audience and the challenges that they have with it and how the react native is working in microsoft in office in like powerpoint what etc but and those were great i'm really satisfied that i watched it live and i saw the discussion on discord at the same time so that we can have even even deeper understanding because speakers were answering question live uh so i encourage every one of you listeners to join us on discord next time we have a conference uh join us right now we we uh we communicate on discord all of the time but one other talk that i want to mention which which was very surprising for me was uh milita uh and she was talking about coming to the react native for the first time and i was watching the conference with few of my friends in our uh call stack office and we are all power users so this wasn't new to us this was like um this was something that we know but in the discord channel when when those when this talk was conducted people were really excited and i think that we should have this understanding that our uh technology that we use react native is not uh is not that well known probably um outside our bubble so we really we we really need uh those kind of introduction talks as well uh to bring more developers in and to bring more more faces uh and heads to uh to our developer cycle uh okay i think that's that wraps our react native eu summary um if you haven't seen it go to youtube and see it again and see it for the first time or see it again let's jump to libraries and we are fortunate enough that we have satya with us sadia can you talk about your navigation library yeah sure so we recently released react navigation six and it's a incremental update over react navigation file uh the highlights of this release and a lot of polish uh simplifying a lot of apis but also new features like transparent model and group and there are also lots of small changes you can check out blog post where i go in detail about all of the changes another big change in this release was also native stark which is from software mansion who made reactive screens and we made native stack the default way to set up uh navigation and react react native app so now when you set react navigation from the scratch it is a fully native navigation which is going to give a much better performance and much better user experience and like you said in our first section the microsoft is uh is helping you with implementing this stuff for react native windows as well right yeah so the navigation already runs on the ignitive it doesn't have like complete feature parity but it already runs so it keeps improving that's great so you can learn more about react navigation from our blog post from satya satya's presence on our react native eu conference and from his react native show from from few months ago another library worth mentioning that is also created here at call stack is called repack and it's actually created by my friend from team uh zamotani and i'll ask yannick to to give us a quick overview uh what it is and yeah please yeah sure so repack is an alternative bundler for react native the default one is metro and freepak uses webpack under the hood it is a successor to all and it improves on it by allowing users to specify their own config and there is no need for library maintainers to add new features because it's transparent for them and so well one of the interesting feature is uh it allows to create app developers with multiple bundles for their app and this is something new for uh react native developers but it is something that is very well known in the web world so yeah yeah so so just a quick disclaimer i played with it for the first time just last night and i can i i can share some thoughts uh i'm not uh a webpack user by default i use it couple of times but i i don't feel like i know everything about webpack but let me tell you the setup of it was pretty simple this uh the the steps uh required are well described uh you basically have to like add webpack config and add some lines to your react native config then change two files one for android and one for ios and you're ready to go and then when you're ready to go you start your bundler and you don't see metro you you see you see webpack which is quite funny uh because i'm used to seeing webpack only in web projects uh but yeah so webpack is a bit slower uh than metro when bundling but it's much more configurable so yesterday i created two separate apps with the same code inside with a dynamic import of one component and this one component that was done dynamically imported uh i made it 20 megabytes uh i just copied some lorem ipsum in there uh several times several thousand times and it had 20 megabytes so i can assure you that the startup time of uh repack prepared react native application was uh was much shorter than startup time of uh of pure react native application bundled with metro so this is my first kind of experience i i encourage you to go there and check it out it is very simple to set up and the new features are coming but you can already use it in your projects to to have some benefits from the code splitting and from faster startup times we just told you our dear listeners about the two libraries that people from call stack are maintaining and i think this is a good time to remind you that you could collaborate with us uh we encourage you again to go to our careers perch and uh and join us here in coldstack or you can also help us maintaining all the libraries so uh satya actually you are maintaining a huge library do you want to add something to this uh call for maintainers well mean sponsor uh central requests uh and most important part is go to the issue tracker and uh reply ratios because that helps a lot when you can help other people in the community because the maintenance don't always have time to do that so that is the most important contribution in my opinion yeah and like don't get discouraged and think oh i don't know enough to to create a pr to some project just last night when i started working with repack i found a bug in a readme page and i created i created a small pr uh just fixing two links which is also which is also a contribution so i'm happy to say that i'm a contributor contributor to repack now yeah so uh our last item on the list in our second section uh react native community updates is expo 42 and satya i know that you are close with this technology so maybe you can uh share some updates with us yeah i think like it's pretty cool uh when you go to react native website the first way you start learning the ac native is using expo so there have been a lot of limitations in expo before but recently they have done a lot of things to remove those limitations for example there is something called a export dev client where you can integrate a native code custom native code which you could not do before they have added something called expo config plugins which allow it allow it to integrate things like payment systems or like any kind of native code you might imagine which which improves the like usability of expo a lot because it no longer limits you from what you can do uh the another thing is eas build which is uh still in beta as far as i know you can use is a service that you can use to build your react native apps and expo apps on exposed cloud so you don't even need a macbook or like a set up the development environment to do it which is pretty cool i think because setting up the development environment is always so much work yeah definitely definitely when you start working on some technology uh it's it's very important that it's very easy for you to get in and try it out and and see how it goes without jumping through hoops with like environment setup yeah and another cool thing i like about es is not only build you you can also submit your apps directly to app store from a com from the command line it just asks you a few things and it it does everything for you it's like really simple to use yeah okay so thank you thank you very much yannick thank you very much satya uh that was a last subject for today so let's wrap this up uh thank you uh listeners for listening to us for this long uh i hope you liked this episode uh give us a thumbs up if you did uh let us know what you liked about it and what you didn't and we'll try to uh bring more updates from core react native and from community uh to you as soon as possible uh thanks again and see you next time yeah thank you for inviting me and see you next time bye yeah bye

Channel: Callstack Engineers

Views: 818

Keywords: reactnative, reactjs, javascript, news, developer, programming, mobiledevelopment, frontenddevelopment

Id: zaIyZsCn0uQ

Length: 46min 34sec (2794 seconds)

Published: Tue Oct 12 2021

Reddit Comments

[u/Ericisbalanced]

I recently started watching these. They're really pushing react native for desktop applications. I can't imagine the desktop market being that big compared to app or webdev. Why split your resources for a market that small?