Using ExponentJS with VSCode

Posted by Parashuram on October 10, 2016

When former Facebooker and Quora founder, Charlie Cheever, showed up at Y Combinator Demo Day this August to share what his team is building at Exponent, it turned more than a few eyes. I, personally, got emails from my boss and boss’s boss asking what we’re doing to partner with these guys. The good news is that we already had something cooking.

If you’re not already familiar with Exponent, they build UI components, access to device APIs and service contracts on top of React Native. In fact, the Exponent SDK is a constantly updated fork of React Native. Their goal is to make it possible for JavaScript developers to develop iOS and Android apps using JavaScript alone – without any need to open Xcode or Android Studio; without any need to write Objective-C, Swift, Java or Go. Their development team is one of the few outside of Facebook to make regular contribution back into the React Native codebase.

The Exponent Player

One crucial building block of the Exponent platform is their player app. Essentially, the player app allows you to deploy in-development apps to Android or iOS without building native code. So, for example, if you’re coding in a Windows development environment, you don’t need a Mac or Xcode. Or, if you’re in a MacOS dev environment, you don’t need the Android SDK. Instead, you download the Exponent player app from the store and install it on your phone or tablet. Then, you “push” your app to Exponent’s servers. Your app loads in the Exponent player app and continues to update via hot reload while you code.

This is possible only because both React Native and Exponent apps are almost entirely written in JavaScript. Since iOS and Android allow JavaScript to load dynamcically, there’s frequently no need to compile with the native SDKs. You simply inject the new JS bundle, and the UI updates! In many ways, it’s the same principal that enables services like Microsoft’s CodePush.

It’s also a conveninent way to share your in-development app with clients and co-workers. Simply ask them to install the Exponent app, then share a link. The Exponent player app will download and install a fully functional, native mobile application directly from your source code.

VS Code and Exponent

As of today, I’m happy to announce that the React Native extension for VS Code supports deploying and debugging on the Exponent player. You don’t need to build your app using the Exponent SDK – a vanilla install of React Native will do – but why not give Exponent a try? Whether you choose to use React Native or Exponent, VS Code will auto-magically install your app the Exponent player and establish a debug session.

Try it now

To get started, download the ExponentJS application from the App Store. When starting a debugging session, select the Exponent option.

Steps to start exponent in VSCode

This operation will install the Exponent version of React Native and start up the React Native packager. If a user is not logged into Exponent, a prompt is displayed. Once everything is ready, the user is shown a link that they enter into the Exponent app.

To debug the application running on the Exponent app, the user can shake the phone and select “Debug” option in the developer menu. Breakpoints can be placed in VS Code and the typical debug workflow follows.

Next Steps

We hope that Exponent integration into the VSCode React Native extension helps people to try out React Native quickly, with just a text editor and a device. You can always switch back to pure React Native and add custom plugins and native code once you have decided that React Native is the right option for you.

Our team at Microsoft is also building a suite services for apps after check-in and in-production, including continuous integration, crash reporting, user analystics and better CodePush integration. If you are interested in the post-authoring set of services, get in touch with us and we would love to show and get feedback on what we are working on! Join our early adopters list.