Simplified Overview of Expo 2023 Updates and Improvements

I read it so you don't have to

1. Expo Orbit Launched:

  • What? A macOS app to install and run builds from EAS or elsewhere, and run Snack projects.

  • Features: Multiple simulators simultaneously, Android emulators without audio.

  • Installation: Via homebrew with brew install expo-orbit.

2. Expo Router Enhancements:

  • Improvements: Auto typed routes, tsconfig path support, build-time static generation on web, <Head /> component, lazy bundling, CSS support in Metro bundler, direct debugging in VS Code, and universal server endpoints.

  • Beta Release: Expo Router V3 Beta.

3. EAS Build Enhancements:

  • New Features: GitHub build triggers, 40% - 60% faster build speeds, downloadable simulator builds, quicker team member integration, customizable build process, improved build logs.

  • Key Improvement: Apple Silicon default for build workers.

4. EAS Update Improvements:

  • Updates: Rollouts feature, new JS API with hooks, enhanced website support displaying channels, branches, updates, and a new deployments dashboard.

5. App.js Conf 2023:

  • Highlights: New features and updates for faster and more confident iteration by teams.

6. Other Notable Developments:

  • SDK Releases: SDKs 48, 49, and 50 (beta).

  • New Features: Expo Modules API, preview publishing with EAS Update and GitHub Action, VS Code theme, improved website capabilities, SSO support, new On Demand plan.

  • Plans for 2024: Focus on team collaboration, universal experiences (Android, iOS, web), and enhanced user experience.

7. Xcode 15.1 in EAS Build:

  • Update: Xcode 15.1 available for iOS builds in EAS Build.

8. EAS Update Dashboard UI Enhancements:

  • New Dashboard Features: Creating/removing channels, republishing/removing updates.

9. SDK 50 Beta Release:

  • Features: React Native 0.73, new Expo Dev Tools Plugin API, updates in expo-sqlite/next, expo-camera/next, @expo/fingerprint, Expo Router v3 Release Candidate, new expo-font config plugin, improvements in expo-secure-store, expo-dev-client updates, and more.

  • Testing and Reporting: Encouragement for developers to test and report issues.

10. EAS Build Speed Enhancements:

  • Improvements: Faster builds with updated infrastructure and CocoaPods cache servers.

11. Other Updates and Features:

  • Various enhancements across different areas including GitHub builds, EAS Build, dashboard navigation, security fixes, and more.

Deep Dive into Expo's 2023 Innovations

Expo Orbit: Bridging Gaps for macOS Users

Expo Orbit has emerged as a cornerstone feature for macOS users in the Expo ecosystem. It's not just about installing and running builds efficiently; it's about the seamless integration of your development environment with physical devices and simulators. The ability to open Android emulators without audio interference is a small yet significant touch, reflecting Expo's attention to the finer details that improve the developer experience.

Expo Router: Simplifying Navigation in Apps

The Expo Router has been reinvented with a slew of advanced features. Perhaps the most notable is the auto-typed routes, which bring a level of precision and ease to navigation within apps. The inclusion of tsconfig path support is another boon for developers, as it streamlines the process of handling complex project structures. Additionally, the first-class support for build-time static generation on the web indicates Expo's commitment to versatile, multi-platform development.

EAS Build: The Speed Game Changer

2023's improvements to EAS Build have been a game-changer, especially in terms of speed and efficiency. The decision to make Apple Silicon the default for build workers has resulted in a 40-60% improvement in build speeds. This is a significant leap forward, drastically reducing the time from development to deployment. The integration of GitHub build triggers automates the build process, further enhancing productivity.

EAS Update: Mastery Over OTA Updates

The new rollout feature in EAS Update is a strategic addition, allowing developers to gradually release updates, which is crucial for maintaining app stability and user satisfaction. The improved JS API, complete with hooks, offers developers detailed control and insight into the update process, ensuring that they can manage updates more effectively than ever before.

Looking Forward: The 2024 Roadmap

As we look to 2024, Expo's focus on enhancing team collaboration tools and creating comprehensive universal experiences is particularly exciting. The emphasis on understanding and improving how teams work together signals a shift towards more collaborative and efficient development practices. By including Android, iOS, and web platforms in their vision, Expo is paving the way for truly universal app development.

Conclusion

The innovations introduced by Expo in 2023 have set a new standard in the app development world. These advancements are not just technical upgrades; they represent a shift in how developers approach app creation, making the process more intuitive, efficient, and collaborative. As we move forward, it's clear that Expo will continue to be a key player in shaping the future of app development. I will deep dive into the code in the next section.


Technical Insights: Implementing Expo's New Features

Integrating Expo Orbit in Your Workflow

Expo Orbit, the new macOS tool, can be seamlessly integrated into your development workflow. Here’s a quick guide on using it for running builds:

# Install Expo Orbit via Homebrew
brew install expo-orbit

# Launch Expo Orbit
expo-orbit

Once installed, Expo Orbit allows you to manage simulators and devices directly from your macOS menu bar, enhancing your testing and development efficiency.

Utilizing Expo Router for Streamlined Navigation

The upgraded Expo Router simplifies navigation in your apps. Here’s an example of how to set up a basic navigation structure using Expo Router:

// Import the necessary components
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Define your screens
function HomeScreen() {
  /* Your Home Screen Code */
}

function DetailsScreen() {
  /* Your Details Screen Code */
}

// Create a stack navigator
const Stack = createStackNavigator();

// Set up the navigator
function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Enhancing Build Speed with EAS Build Improvements

To take advantage of the improved build speeds in EAS Build, ensure your eas.json configuration optimizes the new features. Here’s an example setup:

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

Streamlining OTA Updates with EAS Update

Leverage the new OTA update features in EAS Update to manage your app updates more effectively. Here's a basic example of how to configure your app for EAS Update:

import { useEffect } from 'react';
import * as Updates from 'expo-updates';

function App() {
  useEffect(() => {
    async function updateApp() {
      const { isAvailable } = await Updates.checkForUpdateAsync();
      if (isAvailable) {
        await Updates.fetchUpdateAsync();
        await Updates.reloadAsync(); // Reload the app with the new update
      }
    }

    updateApp();
  }, []);

  return (
    /* Your app UI */
  );
}

This code checks for updates each time the app is loaded and applies them if available.

Conclusion

The technical examples provided offer a glimpse into how you can integrate and benefit from Expo's 2023 updates in your projects. Whether it's enhancing your development workflow with Expo Orbit, streamlining navigation with Expo Router, speeding up builds with EAS Build, or managing OTA updates more effectively with EAS Update, these tools are designed to elevate your app development experience to new heights.

Did you find this article valuable?

Support TheMehranKhan by becoming a sponsor. Any amount is appreciated!