🚀 Expo SDK 50, Expo Router V3, API Routes
Published 9 months ago
|
Hey notJust Developers, Expo released the Expo SDK 50, Expo Router V3, and a lot of other improvements that will enhance our experience building In this issue, I want to go over the big changes that will impact most React Native Developers. Today I am going Live on YouTube, to go more in-depth and to see the new changes in practice, in real applications. 🎥🔍
Sponsored by IMB StepzenIntimidated by GraphQL? 😱 With IBM StepZen you’ll be impressed how easy it is to build GraphQL APIs. All you have to do is run a CLI command ($ Stepzen import), and IBM StepZen does the rest. It connects with a wide range of data sources such as SQL databases, Rest APIs, and even other GraphQL APIs. I’ve personally used it in multiple projects (Spotify, StackOverflow, LinkedIn) and it saved so much time. Let IBM StepZen take care of the boring stuff so that you can focus on building impactful apps 🚀 Expo SDK 50Let’s start with the core of Expo - the SDK. Expo SDK 50 comes with the latest version of React Native 0.73. The highlights of this release are:
DebuggingI feel that the topic of the previous year was “Improving the debugging experience of React Native apps”, and we continue to get significant improvement on it. Expo Dev Tools PluginsExpo is launching the Dev Tools Plugins, which will enable library owners to create browser-based tools for debugging. For app developers, using these plugins will help us inspect specific parts of our app (ex: data, state, UI trees, etc.) and trigger some actions from a user-friendly browser window. There are already some useful plugins that you can start using today: First-class Sentry supportSentry is a crash-reporting tool. I use it in my finance tracking app - Famifi, and it helped me discover issues that I wouldn’t know about otherwise. Previously, there were some challenges synchronizing the source maps of your app with Sentry, especially when using EAS Update. Now, Expo has announced first-class support for Sentry using the With the new changes, we can upload the new source maps when creating a new OTA update with EAS Update by simply running
Read more about using Sentry at the Expo. 📚🚀 Tools & LibrariesExpo not only gives us the SDK, but a lot of crucial libraries. Two of them got a big upgrade. To support the movement towards local/offline first apps, Expo completely rewrote the Another library that received a big update is the Other notable changes in expo libraries:
Expo GoExpo Go is the Mobile App that we use to run our Expo projects in minutes. Think about Expo Go as the browser (ex: Google Chrome), that is being used when running web apps. It allows us to focus on our app’s code, and not on the native client that runs our code. 📱 For Expo Go to be able to run your app’s code, it should include a lot of packages and native libraries that most apps use. At the core of expo apps, we have Expo SDK. Historically, Expo Go included multiple versions of Expo SDK, in order for us to be able to run apps using different SDK versions with the same Expo Go app. First of all, the new version of Expo Go dropped support for SDK 47 and 48 (meaning it supports SDK 49 and 50). To run projects using an older SDK version, we should install an older version of Expo Go. What’s coming next for Expo Go?Expo said that supporting multiple SDK versions in Expo Go is time-consuming and a quite difficult task. Therefore, starting with SDK 51, Expo Go will only include 1 Expo SDK version per release. Moving towards development buildsWhile Expo Go is a very handy tool to get started easily, without having to set up XCode or Android Studio tools, and without having to build and re-build native projects, it seems that the future of Expo development will move more towards Development Builds. To follow the analogy I made about Expo Go being Google Chrome, a Development Build is like your custom browser. The benefit of creating Development Builds is that it can include ANY native code that your app depends on (either native code from libraries you use or native code that you write). My recommendation is to get familiar with Development Builds and with the CNG (Continuous Native Generation) process. Don’t be scared of them, it’s not that complicated. Expo Router V3Expo Router V3 brings a lot of stability and performance improvements, and more powerful web support, but the most exciting thing, is the API Routes. API RoutesWith API Routes, we can write functions that will run on the server side. That means we can now build Full-stack Universal Apps using only Expo. Why do we need them? Server-side routes can be used to handle sensitive data: API Keys, connect to databases, and implement server-side logic. For example, I was building an AI App using OpenAI 🤖, and in that case, you don’t want to call the OpenAI API from your client side because that would expose your private API Key. For that reason, I created an API Route that sends the requests to OpenAI, and this way, my API Key is safely stored and only used on the server. To create a server endpoint just add the suffix The server function will be executed on the server when the endpoint matches the file path, and the HTTP method matches the function name exported from your route. This setup is enough for local testing. For production, we have to build our app and deploy it to a server. Expo docs contain guides on how to deploy to popular hosting providers like Netlify, Vercel, and even a NodeJS server using Express. It’s notJust a RouterDon’t get confused by the name: Expo Router. Starting with V3, it’s not just a router. It’s a framework for building Full Stack Universal apps targeting Mobile (iOS & Android), Web, and now also Servers with API Routes. Expo’s vision is to become the Universal React EASEAS (Expo Application Services) is the cloud tool for Building, Submitting, and Updating over-the-air our React Native apps. There are a lot of updates there, but this newsletter is getting too long, so I will keep it short. 🚀👩💻 From the major changes, I am excited about the new Rollbacks and Rollouts feature of EAS Update. With Rollback, we will be able to revert back an update, if we introduce some bugs. With Rollouts, we will be able to send the OTA Update to a small subset of users, test it and make sure it works well, and then send it to the rest of the users. There is also a new hook Shape your ideal React Native course🚀Things are changing fast in the React Native ecosystem, and a lot of innovations are powered by Expo. For that reason, I started working on a new course, focused on the modern React Native development using Expo. At this moment, I need your help. Share with me some insights in this 15-minute Survey 📝 and help me design the best React Native course out there.
As a token of appreciation, we will do a $300 Giveaway💸 and will select one person. 🎉 🔴 Join me liveThis Friday we will build In-app Subscriptions & Paywalls with RevenueCat in React Native. It's going to be a tutorial packed with value, so set a reminder and don't miss it out 👇 🔁 In case you missed it
🔥 Press worthy🚀 If you have ideas for mobile startups, there is still some time to apply for notJust Incubator 💰 Integrate InApp Subscriptions and Paywalls in React Native using RevenueCat 📱 Who's using Expo OSS in 2024 Did you learn something new today?If you found this email valuable, forward it to one friend or coworker who can benefit from it as well. That would be much appreciated 🙏
|