Unboxing Expo SDK 43

we set out to design something extreme and this led us to rethink everything about our process everything about what's essential [Music] now that's a game changer [Music] hello react native developers i hope you are well long time no see william here recording from beautiful switzerland and in this video i would like to cover five novelties part of sdk version 43 thank you to expo for sponsoring this video i've always been a fan of expo bringing web development like agility to react native projects and the theme of the past few sdk releases was to bring this level of agility the benefits of the expo development experience without any compromises with things like custom development clients where the friction between custom native development and javascript development life cycles has been completely removed it choose to be when starting a react native project that you had to take the decision of using or not using expo up front and there were some trade-offs to that decision and now these trade-offs are being removed and expo sdk version 43 is following along this theme of bringing a great expo experience without any compromises and we start with hermes support on ios [Music] with sdk 43 hermes is now finally available on both android and ios it is not enabled in the expo go client so we are going to need to build our own custom development client to enable it last week facebook released a blog post about hermes becoming the default javascript engine for react native they mentioned a couple of performance improvements that they are able to achieve thanks to hermes and how hermes is now tightly integrated part of the new reg native architecture to achieve great performance i have a react native project that is using reanimated chew and i want to enable hermes on ios so that i can use the debugger in development mode i have my react native project and i'm going to run export grade to upgrade to sdk 43. now in the app.json file i can add the gs engine directive so here i have a nice autocompletion and i can build my export dev client plugin by adding expo dev client package another option is to build the client via expo application services from there i can run expo run ios of course you can use flipper as a client for the hermes debugger i think some people have success with google chrome as well but then i'm going to show you a way to do it with vs code directly but here i can run some reanimated2 animation and i have in sources the files and i can go into animation maybe set a breakpoint here to see the value of the play variable so you see i just broke to line 28. i can check the value see if everything is in order and i can resume the change of state so here it is another way to do it which is more convenient is to do it directly into vs code thanks to the react native extension from microsoft i will link to it in the video description so i can go into run and debug create a launch json file and here i can click on add configuration and i'm gonna select react native i have this react native option thanks to the react native extension and we want to attach to a running react native application using the direct mod and the hermes engine localhost 8081 should be correct so this configuration should be fine we can start it here and it seems to have connected nicely in loaded script so let's see if i can set a breakpoint it's not working now it's working and i can pause and you see it's breaking here i should be able to evaluate expressions so here i have the local variables and here maybe i can i think evaluate expressions right so yeah so really directly into vs code the fun developer experience i guess i can resume so here i'm paused play again resume really fun development experience in react native expo has great documentation on enabling hermes in your custom development clients i recommend you check it out so vawa's hermes support on ios in expo next stop the new expo module infrastructure expo modules now rely on a new library named expo the deprecated library being expo unimodules this dramatically simplifies the installation steps of expo modules into react native projects and is also enabling some simplifications in the implementation of some of the modules i have a react native project here last time i had to add an expo module to a reactive project i followed the following manual steps so not really fun at all and now we can do it automatically i just have to run this command now i can directly run expo install expo file system and this should work right out of the box and here to test if the file system module is loaded properly i copy-pasted this example from expo and it seems to be working nicely so now adding expo modules to a react native project is as easy as adding expo modules to a expo go client react native project it's completely automatic no manual steps in the blog post enhancement as i mentioned that the library name expo makes things consistent with react native you have the react native camera library that depends on react native well the expo camera module depends on the expo library in the same way alongside with the sdk 43 announcement expo is giving us a sneak peek of a new module api to write native modules in swift and in kotlin with a new dsl that is dramatically reducing the boiler plate to write native modules in react native i'm pretty excited about this because kotlin and swift are really easy language to learn coming from javascript and typescript so it might enable a lot of javascript developers to get into native development especially if the dsl is providing a lot of the boilerplate to write native modules so we can really focus on the fun part of writing native code so this i think is pretty exciting [Music] the first thing you'll notice in sdk version 43 is that it is not using a react native fork anymore but just the react native public release again along the theme of making things more consistent across all kinds of react native projects and this version is using react 17 and and one of the big features of react 17 i know a lot of people are excited about this is the automatic import of react when using gsx so let's play with this new feature so i need to go into bubble config and i'm going to enable if i go here into the list of options gsx runtime to automatic now if i open the gsx file i can remove the react import and i think here i just need to disable these rules because they're not valid anymore and i think they mentioned which rule to disables these would be the rules so i can just edit my eslint rules to turn off the warnings and now i have automatic react import into gsx files [Music] fast javascript project building is an extremely hot topic this year with new projects such as years build or sucrase and in this new sdk release you can enable the so-called exotic bundler via the expo use exotic variable on a hello world app using the exotic bundler evan beckon is giving us the figure of the initial bundling being twice as fast and the bundle size being 18 smaller the way this new exotic bundler works is pretty interesting especially if you are a module developer the files of your app are still being processed with bubble and the non-modules are being processed with sucrase this is interesting because as a module developer myself i would never ship part of the npm package transformed version of the files i thought it was convenient that i could just ship the files directly and actually even if i were to ship a transformed version of the files the bubble would reprocess them anywhere and it sounds like now there might be tremendous benefit for us as module hoter to ship version of the javascript code that doesn't need to be processed in order to enable great performance with things like the exotic bundler last stop part of this sdk release are the novelties in expo application services [Music] the sdk announcement is mentioning a lot of improvements part of expo application services most notably the new auto submit flag that you can use when creating a build to automatically submit the app binaries to the apple store or the google play store this is kind of really cool that you can do this step without even owning a mac for instance there is also a new runtime version field available to describe the version of your native code extremely useful if you have custom native code in your app and you want to attach updates to your javascript code to particular versions of the native code and finally in export.dev the portal for expo application services the activity feed has been nicely improved and there is a new onboarding page when getting started that's it for me thank you expo for sponsoring this video i hope that you guys are excited about this new sdk release like for the past 2 sdk releases the theme is really to make things consistent across the different kinds of react native projects and to bring the expo development experience without any compromises for instance with custom development clients but also in this release with the new module infrastructure we're adding a new expo module to a reactive project is as easy as doing it in a project manager with xpogo for instance so i really like how where things are going where whether you have a reactive project that is not using expo a react native project that is using expo with custom native code or a reactive project which has no custom native code using expogo the development experience is more or less the same across the board so i find it to be pretty exciting as for myself i am looking forward to talk to you soon and i will be talking to you soon and until next time happy hacking [Music] [Music] is

Channel: William Candillon

Views: 10,391

Keywords: React, React Native, Can it be done in React Native?, JavaScript, TypeScript, gestures, animations, reanimated, Native Apps, Apps, Mobile development

Id: bvadT01z_SU

Length: 14min 22sec (862 seconds)

Published: Wed Nov 03 2021