[MUSIC].
>> Hi everybody. Welcome back to Microsoft Build live.
Now, I'm here with Paul and Kiki to talk about React Native.
But you guys do away more than React Native.
So maybe introduce yourself first and what you do at Microsoft.
>> Yeah. My name is Paul Gusmorino,
and I work on the User Experience Platform for Windows,
Fluent Design, and now React Native for Windows too.
>> I'm Kiki Saintonge , I'm a PM,
I work with Paul on React Native for
Windows and under the app development side.
>> Great. So React Native has been around for a few years,
and React Native for Windows has also been around,
but this was a big announcement this morning.
>> Yeah.
>> Maybe you can tell me a bit more.
What is React Native? What was the announcement?
>> Yeah. So React Native has been
around for a few years as you said,
and even React Native for Windows started
a few years ago more organically in a community oriented way,
with people working with Eric Rozol just getting it started.
Over the last year we've seen so much more demand for
React Native on Windows both internally as well as
externally that we were to get
a new generation of React Native for Windows
out that we announced is in preview today,
we're calling V2, and it's based on
the new common C++ core with
Facebook for React Native across iOS, Android, and Windows.
If you know the history of this project,
in the past iOS Android and
Windows had parallel implementations of React Native,
but it was people trying to keep code in sync,
and now there's a shared common C++ core
that this new generation of React Native
for Windows brings with it.
That is the same as what powers the iOS and Android versions too.
>> Right. So I can build Windows apps today with JavaScript.
I can do a progressive web applications.
How is this different than just a progressive web app for example?
>> Yeah. So that's a great question.
If you want to use web technologies in JavaScript
and TypeScript today to reach Windows, you can make web apps,
or PWAs, those run in the sandbox of
the browser and they can do only
what HTML in the browser let you do.
So if you want to access files or just other things in the system,
unless those are added to the browser API said,
and PWA so forth, You can't do those things.
Some developers try to use
electron which lets you do those things.
But electron still limits you to only use HTML for your UI,
and it also only works on desktop.
React Native works across desktop and mobile,
and it lets use 100 percent of the APIs of the Native platform,
including all the UI APIs interacting with
native UI components even
UI that you've built previously natively.
So you have unfettered access to the full platform.
>> So React Native applications they are native applications.
When I built JavaScript HTML depend there was native applications.
Now, are there any performance considerations
when I'm using React Native.
>> In general, we have
a much lower baseline reference
set on something like electron or PWAs,
and start with much lower memory usage already.
So you should have better performance because it is all native and
all the UI controls themselves are
fully natively implemented in C++ and so forth,
so they're all high-performance.
So like anything else you'd want to follow
best practices and so forth
to have good performance with your app,
but it starts with
a much lower baseline and a lot of other options.
>> So what about the business logic?
How does the business logic work in React native applications?
Is that still JavaScript?
>> A 100 percent.
>> Hundred percent.
>> All of that business logic that you've
written in Javascript can
be translated over into React Native,
and even if you've developed it not in React.
So React Native is an extension of
React or React JS which is a way you can develop for the web,
and if you've written JavaScript for that translates one-to-one,
if you've written JavaScript for the web in general,
it almost translates one-to-one directly over.
So anywhere where you've come from JavaScript
build for the Web you can write for React Native.
>> Then when I build my HTML controls
in React they ran there was native controls.
How does that work behind the scenes?
>> Or you said HTML?
>> Right. When I write my React applications.
How does that work behind the scenes in the architecture world?
>> Big call directly the web components, so HTML translates,
whatever Chrome or Edge,
or whatever browser you're using will use
that corresponding web components.
>> But that's awesome. So does it only work with UWP application.
So can I use this with let's say WPF or Wind Forms?
>> Absolutely. So with UWP that's where
our V2 React Native stuff is working and
it runs 100 percent on their new native Windows platform.
But we also if you're familiar with the XAML Islands,
which is the thing we introduced last year at Build,
is a way to host all the Win10 goodness,
and WPF, and Wind Forms.
Through XAML Islands you can host React Native.
You'll get Win10 richness directly inside your Win32 app.
>> So I can build my UI ones in React Native,
and I can not do it only on UWP,
with XAML Islands now I can also do it at any Win32 applications,
and I can also take that code and to
my mobile applications [inaudible] for iOS and Android.
So it's truly a more universal platform.
>> Yeah. Absolutely.
>> Now for somebody that wants to get started,
why would I choose React Native to get
started over other technologies?
>> So there's a set of ways to approach
cross platform development centers and
make native apps for each platform.
Sometimes another great solution in
Xamarin and Xamarin forms that Microsoft supports,
and that's great for.Net developers,
people want to use that ecosystem and C-sharp and those languages.
React Native is great for people coming from
more of a JavaScript, TypeScript,
Web ecosystem, and want to use
those libraries and languages, and so forth.
Those are other solutions to think
where you're coming from in the ecosystem in
languages you want to use to reach
cross-platform as well as native platform development.
>> Now, if I'm already reacted
development I've already built the React applications.
How much of my code can actually reuse across React Native?
>> All of it. For all of the JavaScript in
this logic is exactly the same in reactor.
>> Even in the UI. Right, portion of it.
>> The minor differences are the way that the UI is laid out.
So React Native has
a mildly different way that the
structures how you set up your layout and your prompts.
It actually has a styling very
similar to CSS and that's almost a one-to-one translation.
But the actual tags of how you lay out
your styling is very mildly different.
So instead of a div tag you might have a view,
and instead of an input type
being checkbox you'll just have a checkbox,
and if you're familiar with UWP,
XAML app development it's actually very similar
to that method of programming than it is to HTML.
So if you're a XAML developer
definitely React Native is a more friendly translation for you,
if you're a React developer
all of your JavaScript comes along and you just have to
learn mild translations between using
Web components versus interrupting
directly with native components.
>> Are there any applications that you
know that are already using React Native Windows?
>> Yeah. So there's several partners
and we'll talk a little bit about them in our talk tomorrow.
So there's a bunch of apps already since this has
been a very organic community thing how it started,
then shipped to the store in reverse
successful today with React Native for Windows.
There's a number of internal partners
including Microsoft Office who are working with
us on this next generation of
React Native for Windows with the intent to use that.
There was a story recently that one of
these companies that does these app statistics
published about Microsoft having I think
38 apps that are now
published to various app stores they use React Native,
and so certain thing that we're seeing,
a reasonable amount of usage within
Microsoft for and that's one of the reasons for
our doing a better job really supporting
it as a first-class way of targeting Windows too.
>> So React Native for Windows it's actually
used by first-party applications inside of Microsoft,
and you mentioned Office is actually using it.
What are they using it for?
>> Yeah. We'll show us a little bit in our talk,
but it's an open source project.
So developers from Office are
actually participating in the actual creation of React Native
for Windows and with us with the intent
to use it in a number of Office scenarios.
So what I'm going to show tomorrow is commenting in Word
but there'll be others that I'll
let those practices disclose their product.
>> So one of the big thing is about developing with
JavaScript is that the code is very easily updatable,
and I heard there's a way to actually do that through
Visual Studio App Center. How does that work?
>> Yes. Because the Studio App Center
is a service that we provide,
and it has many different features
to it data analytics of your app.
You can track events,
you can manage all the sessions,
you can track crashes and bug reports and stuff like that.
One of the features that it has which is super awesome for
app development is a service called Code Push,
which allows you to quickly
roll out and pushed out feature updates, or changes,
or minor bug fixes to your app without having to go through
the complexity of the Apple App Store, or the Google Play Store,
or whatever that is where you have to
go and download and restart your app,
is just next time you launch,
you code pushed it and your user
gets those updates and those changes instantly.
>> So I've published my application to
the store and the next thing is like,
I made a mistake, I need to actually fix something out.
How do I have to go through the certification process
again to update my application?
I just push it through App Center and
the next time the user launches the app it actually lie.
>> User's app has no knowledge of the App Center.
It's something you completely set up on the Dev-Ends,
so they just automatically get changes,
then oh my apps working better.
>> It's great because it lets you bring together a lot of
the benefits of the web development
with a lot of benefits of major development,
and have a more web-like Apps cycle
as well using things like App Center.
>> Is there way if you mix React Native application,
and React Native controls with
other type of controls like XAML for example,
or other types of frameworks?
>> Yeah. Absolutely, the way we're structured
and I'll go into a lot more depth tomorrow in our talk then.
But the way that we structure or
all React native apps are structured is that when you create
your project you get equivalence on
other platforms of a Visual Studio solution.
So inside that on the Windows then you can go in,
and you can write as many native controls
as you want you can surface them up,
or you could have React Native
be your component in your own Windows app.
>> Yeah. It was, we call it the inside-out and outside-in model.
>> Yeah.
>> You can either wrap
native components you use them from within React Native,
or you can take React Native itself and use it inside
the context of a XAML, UI on Window.
So it's very flexible on how it interrupts.
>> So if I just have a component that I want to
share across all of my applications,
or even teams that are working on different applications.
>> Yeah.
>> I could do that in React Native?
>> Yeah. Because we know the modern development world for
our customers is one where they
have lots of different teams working,
lots different components and it's different technologies,
they had to put together to make their applications,
and so interoperability is really
key and this really lets you do that,
or you could have some component
that maybe either already have or for
whatever reason you want to really write natively
to fully exploit the native platform,
and you continue investing in that code,
continue moving forward your native code.
While maybe you have some other aspect
that you want to just write,
and show a bit more of UI code of
with React Native and you can do that as well,
and putting together very seamlessly with relatively low overhead.
That's really been a lot of the B2
focuses having minimal overhead there.
>> Yeah.
>> Right, and then you mentioned you can also access native APIs,
like file system, Bluetooth, etc.
How does that work? Or how do you do that through JavaScript?
>> So a lot of stuff you get for free already,
so React Native has a core set of components,
which are like controls.
That is you would see like calendar view
or a text input or whatever,
and then they have a core set
of what they call modules which are APIs,
and those interface with the respective APIs
or non-visual aspects of each platform iOS Android or Windows.
So one of the other stuff has already built in,
for free so you call the right thing,
you look at the documentation and
you call the right thing and everything's
all set some things like file IO,
you may need to write a little bit yourself,
so you would hook it up on iOS,
you'd hook it up on Android,
you'd call the respective methods that you need on each platform,
and then you'd write one line of JavaScript that when
it ran on those respective devices would call that certain IO.
So for some things it's automatically set up,
for other things you might have to surface
it up into the React Native layer,
but all of that's available.
>> So it's like extensions that you can put into React Native.
Is there a set of community extensions
that you can use or contribute to right now?
>> Yeah. There's a whole host of
amazing community both modules
and components out there that you can use.
Another thing that we'll be showing in
our presentation tomorrow is how you can grab those and use them,
and how they're all available to you
and they have all community support it, pretty awesome.
>> This sounds amazing and sounds really easy.
How do you actually get started with React Native?
Let's say I want to start with an existing React application.
How do I move to React Native?
>> You can join us today immediately
right after this by going to our GitHub page,
and it is under the Microsoft organization is
react-native-windows,
and that's where we're doing everything.
It's all out in the open, there's
a huge effort across Microsoft as you may know to
be completely open-source with as many things as we can manage,
and we're no exception to that.
So you can go on our GitHub.
You can check out all of our issues, our milestones, projects.
You can go ahead and give us
your feedback on what you'd like to see from us.
So you can start right away and make
PR's if you want to like anything.
>> So if somebody wants to add a feature to
React Native for Windows they can do that.?
>> Yeah.
>> Absolutely.
>> Yeah. It's the new Microsoft.
>> Awesome. Well, appreciate.
Thank you so much for taking the time to spend with us.
Thank you everybody for joining us this session.
We're going to be here all day as long as
the Build conference is going on
so make sure to stick around. Thank you.
>> Thanks.
[MUSIC]