Building cross platform experiences using React Native

Key Takeaways

[Music] hi I'm Kiki st. Onge and I'm Yulia Klein and we're both program managers on the windows native platform today we're going to talk to you about building cross-platform dual-screen experiences using react native as you likely already know react native is a framework developed by Facebook that combines the best parts of native development with react as well as best-in-class JavaScript libraries for building user experiences you can leverage familiar tools from the web to create apps whose primitives render to native platform UI react native was originally created for mobile devices targeting ios and android and microsoft has extended react natives reach to also work well on Windows because Windows supports a greater variety of input devices we have done work to improve support for keyboard mouse and ink we're also working on new dual screen components which we'll discuss a little bit later on of course everybody wants buttery smooth input both for touch ink Mouse and so we have invested quite a bit of effort with performance in mind and finally as I mentioned earlier we're working closely with Facebook and the rich and diverse react Native community to bring these changes back into the reactive core platform this means our roadmap code and issues are all being worked out in the open on github so let me tell you a little bit about the background of how we got here the react native Windows platform has actually been around for a number of years originally it came out in 2016 some of the react native apps running on Windows today were written in this original platform that we internally referred to as the current to help keep up with the rapid changes that Facebook is making to the core platform and to ensure the highest performance we rewrote the react native Windows platform in C++ at the beginning of 2019 we're actively working on this the next version and are excited to announce a new release we've updated react native for Windows to take advantage of the high performance modern C++ core this is the same core that iOS and and helps ensure that you get the very best performance when you build a react native for a Windows app so some of the things that we wanted to highlight is why we chose react native and why we chose to jump on this bandwagon of react native for Windows and to really help emphasize why we made that decision we want to highlight some of the pillars that we think make react native awesome and the developer benefits around them the first one is the fact that you can use both JavaScript and typescript to build your app so this means if you're coming from the web and you have lots of where the service calls you have lots of business logic that you've written for your web app you can port that pretty much one-to-one into your react native app and then run it on those target devices and that same logic will persist you also have as Yulia mentioned fully native apps running on your devices with fully native experiences so what you see here is a breakdown of a layer cake of how that works you have your react native UI which is where your typescript or JavaScript sits and where you write all of your logic then that translates through a react native API layer and then runs natively on the device that you're targeting either that the iOS or Android or Windows and what we're doing in react native for Windows is we're taking that react native API layer and we're making that c++ and we're making that really fast and we're making it translate great for all of the devices that you want to target whether that's a desktop a dual screen device or anything else that we release but to really help highlight what that means and how that translation works I'm going to show you a little bit of code so what we have here if you're familiar with HTML or XML is react native syntax for defining how to layout your your app so in this case it's if it's abstract on purpose and in this case we have a picker and inside that we want to choose between three different colors so when this piece of code is run say on an iOS device you get the familiar dial like feel so if you ever used iOS device and you have here reminders you might be familiar with this look do you run the same piece of code on Android you get the material design feel you get the animations the fly out and everything that you would expect as a user on the Android device lastly if you run this on a Windows Device you get that fluent design feel the desktop centric experience and the awesome effects that you get running on a Windows Device so when we see this line of code that's written in that HTML like syntax it gets translated through either to Java or it's your Objective C or to C++ if you're running on a Windows Device it Maps up to the correct native components you get all of that performance and experience that your users expect when they use those devices but you yourself are writing one single code base which is either JavaScript or typescript and lastly there's something that we like to really emphasize which is called the web like developer experience and this is basically hot reload and if you've ever built a web app you may notice that you usually have your code on one side and your web page in the other and you make some changes you hit save and your browser automatically updates those changes so if you need to move anything to the left or to the right you can see those changes pretty much instantly but to help really illustrate what I mean by this point I'm gonna show you a little bit of a demo on our Android dual screen device so what we have here is my Android dual screen emulator I've already launched my react native app on it and what I'm gonna do is I'm going to show you a demo of hot reload and how that looks on an android dual screen device so right here I'm going to edit this line of text to say hello screen I'm gonna hit save you see a little refresh there that is a lot faster than that and they've automatically updated right to the changes that I wanted to do you can see how this can extend to more things than just text you just saw some of the great benefits of using react native to develop cross-platform apps and you may be wondering how to enhance your apps to have a great experience on dual screen devices these new devices have two screens and other unique physical characteristics like hinges and esteem these physical characteristics require rethinking how you approach your design let's drill in on the capabilities of one of the new components Microsoft is building to make your work easier when a user launches your app the app will open on a single screen at any point the user has the option to span the app across both screens you want to leverage the larger area to fully immerse the user in your app for that reason we're introducing a new two pane view component so this is a component that assists with layout and it itself has awareness of the team built in it provides two panes for content and allows you to specify a paint priority which dictates which of the two panes will be visible when space is limited and the app is in single screen so kiki is going to show you a very early prototype of this particular component in action absolutely so here I have my Windows 10x neo emulator up and running so I'm going to open my react native for Windows app right here and what Yulia was mentioning a little bit earlier is that you have an app that opens on one side of the screen and then when the user wants to span it the purpose of two pane view is to be aware of that as well as to move your content and show you extra rich information on the other panes this is an enhancement to an already great app experience that you might have so in this case a little bit of an example here is maybe if you had a mail app of some sort so you can change and edit things on one side and it will reflect that automatically because this is all the same app all it's doing is being aware of the fact that you've spanned the full pane let's take a look at what you'd have to change in your JavaScript in order to get this so right here we have our render function and in that render function is where the react native HTML like layout syntax goes so I have to find my banner at the top which we go back here you'll notice is this green one right here then I have my master list and my details list and right here I've created I've wrapped around the to paint view around my view components and view components and react native are sort of what define large panes of content in your app so have my two pane view here I've specified pane priority a which in this case is this left pane so when I opened it it opened on that side and then my details list since its defined second is where the extra information goes when that app fully spans and this is all that I needed to change in order to make my regular react native app that would normally be run on a desktop or laptop device work great on a Windows 10x dual screen device so two pane view is one example of a higher level component that we are currently creating we're also looking at some lower level api's to provide additional device info as well as usable regions various aspects that you may want to leverage in your app in case you feel that two pane view is insufficient for the type of work you're trying to accomplish all of this is going to be available in the react native dual screen repo we will make NPM modules available and we welcome your your feedback both on the specs as well as final work that we will be shipping in general please do check out these these links we have great information about getting started with react native react native for windows react native for dual screen in particular as well as simply dual screen a device information so two pane view is one example of a higher level component that we're currently building we're also looking into a lower level API that will provide more basic information about whether the device is a dual screen device whether the app is currently spanned as well as the information about usable regions all of these components will be available in the react native dual screen repo and in general we invite you to to come find us on github leave us feedback and learn more about getting started with react native for dual screen react native for Windows and of course in general how to do your dual screen apps thanks for watching and I really can't wait to see what you build