DAVID MALAN: Thank you,
everyone, for coming.
My name is David Malan.
I teach CS50 and work
with a whole team here
at CS50 R&D. We're so pleased to have
our friends Nick and Charlie from Expo.
And the context here is that this spring
semester, I also been teaching a class
called CS164, Software Engineering.
A couple of whose students
are here with us today.
And both of my teams ended up choosing
mobile software projects for their term
long projects.
And initially they both
started using a new an up
and coming framework
called React Native, which
is both powerful, but also
not necessarily as easy
to use as might be ideal.
And so came into the picture
something called Expo,
and that is exactly the software
package with React Native
that we're about to hear
from our friends here today.
So without further ado, Nick.
NIKHILESH: Hey, everyone.
I'm Nick and I work
with Charlie on Expo,
which is a tool that lets
you write JavaScript.
Just the same JavaScript code for
both iOS and Android app development.
So I'm just going to dive right in and
just get you guys as excited as I am.
I just wanted to show you some
stuff in the eye candy department.
So on the left, you can see an
app made by one of my friends.
His name is Brent.
It's just the list of
breweries in Vancouver
and it's just a short video of the app.
You can see it's got smooth scrolling
and it's got this cool header
animation when you scroll around.
It's all made in JavaScript, but
it doesn't feel like a web app.
It feels native and it's got in
line map view, a nice gallery.
You can scroll and zoom around on the
map view that's in line with the UI.
And if you wanted to full screen
the map, you can do that too.
My internet was a little
slow when I recorded this,
so that was just the
loading of the map here,
but it's an actual native map view,
so you'll get the same behavior.
This other thing on the
right, which is super fun,
is a Minecraft clone made by
someone on the internet named Evan
that we ran into on Twitter.
And you can walk around, jump
around, the usual Minecraft stuff.
And this is on Expo's graphics
library and this is something
we're going to play with today.
So you'll get to see how
to do 3D graphics on Expo.
And the controls on the bottom left,
the d-pad that I'm using to walk around,
the buttons on the d-pad are
actual native like iOS buttons.
So you get the best of both worlds.
You get iOS actual native
buttons, as well as
the 3D graphics abilities of Web GL.
So this will give you a short overview
of what we're going to look at today.
I'll start out with
some background on how
apps are made not using React Native,
or Expo, and the most common way
to make them, which
is either you're doing
native development, which is you
code the way the makers of the device
intended.
So on iOS you would be writing Objective
C on Android you would be writing Java.
Or you can do the same thing that you
would do for desktop web development,
except make it for a small
screen, it's a web app.
And you can have that run
through Safari or something,
or you can use something like Cordoba.
And just a background on the
pros and cons over there.
And then we'll do a basic quick
tutorial on very basic UI with Expo.
Just like buttons, text, and
we'll just throw in a map
view you there, just for fun.
And then I'll try to do
a 3D graphics example.
And after that let's open it
up for a Q&A from you guys.
So in the background section,
the first part I wanted to get to
was native app development.
So as I said, for iOS you'd
be writing Objective C, which
is this language that's
backwards compatible with C,
and it's got a bit of like small
talky message passing going on.
It looks a little
complicated, and noisy,
and you can see that's the
Hello World app over there.
That little black background text
that I just squeezed in there.
And there's a lot of
accidental complexity
compared to just saying Hello World.
And then that goes through
this program called Xcode.
It compiles to some blob of binary
stuff that you then put on your phone
using a cable that's a physical
wired cable that connects
between your computer and your phone.
And you do similar for Android.
You write Java and that gets
converted to Java's JVM bytecode
go with Android Studio.
I believe you still
need a physical cable.
So you can't just remotely
update apps that easily
if you wanted to do it
wirelessly, or if someone
was on the other side of
the world, or something.
And the code is sort of hard to
write compared to stuff like HTML,
and JavaScript, stuff like that.
Most of the apps you use on
your phone are native apps.
So why do people do this?
Because you get great feeling and good
looking user interfaces that feel good.
Using Facebook's native app rather than
their mobile web site feels way better.
And also you've got native
APIs, like the ability
to, for example, if you have a
messenger app that you want to make,
but you want people to be able to log
in with Facebook in that Messenger app,
then it can use
Facebook's native log in.
So stuff like that.
And yeah, the distribution model is
through the app store and the Play
Store.
Pros and cons there, so I just like
put an ambiguous thinking face emoji.
Wasn't sure what to put.
And the other thing is you can use
JavaScript, HTML, CSS, the usual stuff
that he would use for desktop websites,
but try to fit into a small screen,
and try to emulate the user interfaces
of native mobile phone applications.
The coding here is way easier.
You can get to this level of ease by
just adding more and more abstractions
on native, but using a
live interpreted language,
there's systemic differences there.
So for example, the user interface
paradigm is very declarative.
You just say I want this title.
I want to say hello world.
You don't have to say make a
button, add this text into it.
That's what you have to do with iOS.
It's like working on
a scene graph almost.
But yeah, you just open what
you're working on in a browser.
It could be safari on iOS,
it could be Android's Chrome,
or you can also test it on desktop.
Feature wise, it's like problematic
because the user interface
tends to be sort of laggy.
It doesn't have all the features that
you would get with a native map view.
I think it's probably
impossible, I'm not sure,
but it's hard to jump into the native
Facebook log in from a browser,
and then come back to it.
And there's a lot of
native APIs that we want.
Facebook log in is a basic example.
If you wanted something
like streaming a live camera
view onto a rotating cube in
a video game or something,
I don't know if you can do that.
You can actually do that on Expo now.
The sharing model is super great
though, you can just send someone a URL,
and they just see it.
And if they refresh,
they get the new code.
And if you change your code in
between, they'll get the update.
So just to compare all of
that with Expo, I could just
like lay out the differences
you in text, but I thought,
why don't we just try it out?
So the first tutorial
we're going to work through
is making basic user interfaces on Expo.
And for the first tutorial, we're
going to use Expo's web browser ID.
It's just the coded error
for one file right now.
But you don't need to install anything.
You can just open this web page
and just write your code in there.
And on the phone you need
to install this app called
Expo, which is the thing that
you use to view your projects.
So you'll get to see how easy that is.
So let's just do it.
So this is a mirror of my phone
screen, that I have in hand right now,
using Quick Time.
And so this is our
website and the website
that I was talking about on
the slide, snack.expo.io.
So let's just go there.
And what you'll get as soon as you go
there is this QR code, and in the back,
you can see that
there's some code, which
is what we'll get to after we
get through this QR code thing.
So the other thing you
want to do meanwhile
is on your phone you want to
install this application, which
is the Expo app.
You can find that on the app store or
you can just find it on our web site.
If you go to expo.io on your
phone and just scroll down.
And if you're on Android,
you would touch Android,
but I'm on iOS so I'm
just going to hit iOS.
And it will take you directly to
where Expo is on the app store
and you should be able to do the
usual thing, to just install it.
But once you have it,
this is what you get.
Just hit scan QR code, and
you get a QR code scanner,
and just scan this QR
code that you're looking
at on snack, which is our
name for the online editor
because it's like a small piece of code
before your main meal in Expo, I guess.
Yeah, that's it.
Now you're coding like a native app.
So this is what React
Native user interface
code looks like, which
is the library that we
use in Expo for user interfaces.
If you use React on the
web, it totally just
feels like React, except the user
interface that it's making behind it
is not the normal web
document object model.
It's actual iOS buttons and stuff.
But over here, the
first thing you can do
is literally just change
this to something else.
So like hello world.
You'll see it update right away.
So that's how quick it
is to just change stuff.
I guess it said device disconnected.
Let me see if it's still on this.
Yeah, OK, not bad.
So let's dive right in.
Let's try adding a background
color to this text.
So I'll go back to what I had before.
So what you see over here is there
is a view component inside which
the text is, and if
you've played with HTML,
it would be familiar with
you, the nesting of the UI
that's happening over here.
The style of the view comes from
this stylus container thing,
but we could actually just
in line a style right there.
I'm going to add a new view.
And so this thing is going to try
to keep updating to the latest code
while you're changing it.
So if you have an error,
it's going to complain,
but it will fix itself right after.
So don't worry too much about that.
Let's just say background color
white and move this text in there.
OK, so it seems like it worked out.
Now you have hello world
in white background.
If you've done native coding, you'd have
to make an object in Objective C, which
is a background, and then
change its color, and stuff,
and figure out what its coordinates are.
I think it's better if you use
their visual development tools.
So the next thing we're
going to do is try
to make it touchable so it responds
to touch when you touch it.
A basic component to
do that in React Native
is the touchable opacity component.
What that means is when you
touch it, it responds to that
by changing its opacity so that
there's some feedback involved.
And we can just change the view
to be a touchable opacity instead.
Seems like I made the same typo twice.
That's funny.
And when I touch it now, you
can't see my finger on Quick time,
but I'm doing it in real life.
But yeah, you can see that
it responds with this thing.
So obviously, you want to actually
do something cool when we touch it.
So let's just pull up
the logs view, which
is where console.log
messages would pop up.
And what we'll do is make it
print something when you touch it.
So these things that follow
the name of the component
are called props in React.
It's similar to HTML attributes.
We're going to add a prop,
which is this a function that
would be what to do when you touch it.
And that prop is called
onPress for touchable opacity.
And that function syntax that you see
there is a lambda anonymous function
definition in new JavaScript stuff.
But we're just going
to say just log touch.
And so when I touch it
now, you can see that.
And it says Nicklaus' iPhone because you
could have multiple iPhones connected
and you want to disambiguate
which log came from which phone.
So there we are.
So we have stuff happening on touch.
So now that we've seen
display output paradigms,
and we've seen input
paradigms, let's work
with the internal state
of your application.
So what we're going to do
is turn this into a counter
so that it's showing a
number, and when I touch it,
it just keeps incrementing that number.
We'll start off with--
So the way React works is
you have each component.
App itself is a component, actually.
So you can see that it is a class that
extends component and these things
that we name in our HTML tag
looking things are components.
So this is the name of some class that's
included in React Native by default.
There's nothing privileged
about this class.
It's the same as this
class that we're writing.
What Expo is being told is hey,
that app component that we made
should be the root component
of the whole application.
So that's the entry point, like
the main function, or something,
which is what you say by exporting it.
So components in React
can have associated state.
And what we're going to do is
start off with a counter at zero.
And the reason for this paradigm
is instead of mutating state,
we just update--
someone tried to get
into my application.
Hello there.
What was I saying?
Yeah, so we have parent state.
And render tries to
be this pure function
that just maps state to
the component hierarchy
that you want to render for that
state, and then behind the scenes,
React is like, OK, this is what
we're going to do to render it.
So a lot of words there, but
let's jump back into doing stuff.
So we have counter at zero.
What we're going to do is like--
you would think, hey, can we
just do counter plus plus?
But because of this model of having
explicit state and then having render
depend on that, you actually need to
tell React that you're updating state.
Sorry, I was lost in
thought for a second.
You want to tell React, hey, I want
to set state to this new thing.
It's actually not clobbering
state with this new thing.
This is just an object that
will merge into the old state.
So if you had other
variables, it won't lose them.
But over here, now we can
just render that state.
Hopefully, all of this worked.
So let's see.
All right, and if I touch it now, it
looks like it probably bugged out.
So I'm going to have to figure
out what I did wrong there.
Let's see.
AUDIENCE: [INAUDIBLE]
comma after the [INAUDIBLE]
NIKHILESH: Sorry?
AUDIENCE: [INAUDIBLE] I said it's
semicolon, not a comma after counter.
[INAUDIBLE]
NIKHILESH: Yeah,
actually, also while you
were saying that, someone
else pointed out what I think
might be the issue,
which is that this needs
to reference counter that's actually
in this.state because this name is
undefined at that location.
So what I'm going to use is
this.state.counter and hope
that was the issue.
Yeah, so that was it.
Also the comma, to get back
to that, you can actually
add additional trailing
commas, and it's fine.
And the nice thing
about that is you don't
have to worry about whether
something is the last line or not.
It's just like all of
the lines are the same.
Now that we have that,
what else can we do?
Let's actually try to exploit
the component paradigm,
and turn this whole
thing into one component
that we're going to call counter, and
put two counters in our application.
So what I'm going to do is copy this.
As I was saying, app is a component
here, and call it class CounterButton,
I guess.
And we're going to keep this
outermost view still in app
and make this the inner thing.
This is to show you how you would
go about making your own component.
So what we'll do is just turn
this into caller CounterButton.
The app is still the same
because it's functionally
achieving the same behavior.
It still had that, but
what you can do is now
you can just copy and paste this
line, and you have two counters.
And they are separate because
they each have separate state.
Stuff like that.
So you can see how
easy it is to just take
something you want to do,
turn that into a component,
and then have that be a reusable
thing that you or someone else
can now play with.
So now that we've seen one of these,
let's throw in some components
that Expo provides out of the
box, and see what they feel like.
So what we'll do is
let's just see if I can
get these counters to
be next to each other
just to give you a feel for what layout
is like, and then we'll add a map view.
So I'm going to put these--
oops.
I'm going to put these into that view
and make that view be a row situation.
So flex is this paradigm of layout
that's actually also used in the web
and is something that
React native provides out
of the box as a way for layout.
Now you can see that the
counters are next to each other
and what we'll do is add a map view
right above those counters just
for fun.
So these are some things that are
provided out of the box in Expo.
We've got videos, SVGs, and
location, stuff like that.
Let's do a map.
People like maps.
So we'll put a map in there.
And this is just a map
that you can now use.
It's setting the state
the the map region,
but we'll just log
the map region for now
and see if we get updates
on where stuff is going.
So you can see this is where the map
is at the moment, and if I move around,
there's updates on where the map is.
We can also add in a video, and you
can just use any URL of a video,
and you'll see it.
So this is some open source
3D movie on the internet.
So that's easy it is
to make stuff on Expo.
What we're going to do now is try
making a different application which
will involve 3D graphics.
And we're also going to try to not keep
all of your code in this web editor
and actually work on
code on your computer.
And for that, we will be installing
Expo's XTE application, which
is the tool that takes source
code that's on your computer,
and serves that in the same way that
snack is serving it so that you can
use it as an application on your phone.
And also we have ways
for you to say I want
to turn this into an
app store application,
and put it on the app
store, stuff like that.
No one would know that
it was made on Expo.
It's just feels like an
app store application.
But on your phone, you're still
using the same Expo app as before.
So let's just get XTE.
And also, NVM is Node
Version Manager, which
is a way to get NPM, which is a way
to get JavaScript packages that you
can depend on.
And we're going to use
Three.js, which is a 3D engine,
and we're going to install it from NPM.
So go back to Expo dot--
let me just kill this application.
OK so now just go back to expo.io
on your computer and get the--
I'm on a Mac, so I'm
going to get the Mac one,
but you can also work
from Windows and Linux.
And you can make iOS applications
from Windows or Linux using XTE.
And you can actually also build
them into apps or applications
because it builds it on
our server, which is a Mac,
but you don't need a Mac to do it.
Just click this thing and
it'll start downloading XTE.
I already have it installed,
so I'm just going to use that.
Let me go back to the screen
and this is what it will
look like when you first open it up.
And these are some projects
that I had open before,
but we'll just make a new project.
Oh yeah, so when you first start
it, it's going to ask you to log in.
We have a user account
system and going ahead,
we plan on making it so that if you make
a project, it's listed under your user,
and that way you don't have to
scan a QR code or something.
So just to make things
easier for you guys,
but we're going to make a new
project under Spring CS50, which
is a directory I made for just today.
But we'll call it 3d-thing I guess.
So it's going to do this
extracting project files thing,
and it's going to run a
server on your computer,
basically, which when you open
this URL that you see over here,
will be the application.
So currently, the mechanism
for getting that URL
is to actually send it
to yourself, but we're
going to add that QR code view
into XD so that it's easier,
but I'll just send it to myself for now.
And I'm not going to open my email while
you guys can see it, but let's see.
Oh yeah, I got it.
So here, you can see
this particular email.
So this is the link that was over
here, and I just sent that to my email,
and we're going to open that.
And it's going to, just
for the first, cache
a JavaScript build of your application.
And once all of that is done, you should
see your application on the phone.
Let me just get this view
actually onto that screen.
Yeah, here we go.
So shuffle things around a little bit.
OK.
Looks I can't make this smaller.
So what you should
have in that directory
is just a terminal in that directory.
You should have an assets directory that
does have some basic icons and stuff.
And your main.js file is where the
source code of it is and the rest of it
is just metadata about your application.
Node modules is just the dependencies.
So I'm going to open at in emacs.
Feel free to use any
text editor you want.
And here we are.
So some other stuff, we can
change this to hello world,
and that should update on your phone.
Yeah, so we're back to the same
high speed editing process.
And we could actually paste
in, if you wanted to do that--
let me see if that works out.
Oh wait, I actually
don't have it anymore.
All right, fine.
I was going to paste in the
application that we made on snack
and see if it worked here.
But yeah, let's just
get to doing 3D things.
So you're going to need
NPM, which is this package
manager for JavaScript stuff.
The way to get it is to
use this thing called
MVM, which is Node's Version Manager,
and MPM is Node's Package Manager.
So it's all about Node.
So just to explain that process
again, I just googled MVM, went here,
and then this text should
walk you through it.
There's a lot of it, but this
is probably the main thing.
I installed it a while ago, so
I don't remember what I did,
but I think that's what I did.
And if you do that, you should get MVM.
And then scroll down a lot
again, and get to this part,
and this should install
Node, which is commonly used.
It's used to make JavaScript
servers and stuff like that.
So hopefully that's not too bad and you
can find many stack overflow answers
to every question you have.
So going back here, I
actually have NPM already.
So we're going to do NPM install.
Save means it's going to remember
that in your package JSON
file, which is the meta data
about the dependencies you have.
Right now it's just Expo, and React, and
React Native, which are the UI stuff.
And we're going to install Three.
So while it's installing, let me
tell you a little bit about Three.
So Three.js is this
JavaScript 3D engine that
runs on web GL, which is a
specification for open GL,
which is an open source
GPU graphics specification.
It's a specification
for that on JavaScript,
which is the environment that we're in.
So it works out.
And Three.js in Expo, just like runs
on WebGL, and makes 3D graphics happen.
So I'm going to open the
most basic Three.js example
and we'll try to recreate that in Expo.
So scroll all the way
to all of the code.
OK, it's over here.
Going back here, it seems like
it lost this network connection.
But it's back.
Cool, OK.
So now that I have
Three.js, if you remember,
I installed it using MPM
install save over there.
Don't worry about all
the other messages.
OK, so oops--
I accidentally hit Command-P. I'm
just going to edit the main file again
and Expo actually has
this utility to use
Three.js called createTHREEViewClass.
And I'm going to
explain when I use that,
but first let's just import three.
So what we're going to do is
createTHREEView, which is a component
class, but it's actually created.
We need to inject like Three.js
as a dependency into this thing.
I didn't want to make Expo's
built-in library depend on Three.js,
so this was the way to do it.
If you know of a better
way, let me know.
But what all of this does
is makes you able to use
a component called
THREEView that displays
Three.js as a view in your application.
So I'm going to go here and--
OK, we're going to get to that in a
sec, but let me see if all of this
doesn't break on me.
It's going to try to
rebuild the JavaScript
stuff because you had a new dependency,
which is three.js in our case.
And while that's happening,
I'm going to start
writing, actually, the Three.js code.
To make this easier, what I'm going
to do is just copy this, not past it
into our thing yet, but OK.
Open the scratch buffer
and put it in there.
I know it's sort of weird but--
OK, cool.
Just to get a reference on what to do.
So componentDidMount
is this method that you
can implement in React,
which is what happens
when your component is
mounted onto the screen, which
is the first time it appears.
So over there we're going to create
all of Three.js scene graph stuff,
which is going to be a scene--
and actually, I think we
want to throw that in this
because I want to be able to
access it from the other functions.
So I'm just going to use
that reference that I had.
Hope you don't mind me
looking at a reference.
Hopefully this isn't too confusing.
The bottom half of the window
is the Expo application
and the top half is me pacing
in the example Three.js
application from the Three.js
official documentation.
So we're going to say new
THREE.Scene, and this is stuff
to do the aspect ratio, and all that.
But actually, Expo's
THREEView will ultimately
set the aspect ratio for you,
depending on what the size of the view
is on your screen.
So we can just hard code it to
one and it doesn't really matter.
We don't actually have to create
a runner because again, that's
what the THREEView does.
It creates the WebGL render
that Expo would need.
We do have to create
the geometry and stuff.
So what I'm doing here
is I'm saying I want
to make a box that's one
unit in all dimensions
and I want to make a material for it.
It's just flat and it
has red as a color.
Nope, it's actually green.
So this is weird, but it's basically a
number that encodes green by having--
this is red and this is green.
The first two hexadecimal
digits are red,
and then the middle two
are green, and so on.
And we'll also make the cube.
So far, so good.
And what you need to do is
actually instantiate the THREEView
into an application.
So THREEView takes a
couple of parameters
and I do actually have an example
to use of THREEView that I'm
going to cheat and look at.
But what the parameters are is
just the scene, and the camera
that you created, and
also a tic function,
if you wanted to make
stuff happen every frame.
But let's have it take the scene and
the camera that we just created above.
So if you remember, this.scene was
the Three.js scene that we made.
And so that's the camera and we
also have the same thing with tic.
It's going to add a tic function
based on the tic function
that we had in that paste.
So they're just updating
the cubes rotation.
We're going to do the same thing.
dt is the delta time
since the last frame
and we're going to do dt times
0.1 on the y and times 0.2--
sorry, that was on the x, and
we're going to do 0.2 on the y.
I'm really not sure if this is going
to work, but I'm just going to save it.
So, here we go.
Let's see.
So THREE.Mesh is this first issue, but--
oh yeah, it's three dot mesh, I believe.
Yeah, let's do that instead.
Oh yeah, I also want to I think
flex this to the whole screen.
OK, so the THREEView is
invisible, but it does tell me
about all of those three warnings.
So I think it's running.
So what I'm going to do is throw in
a view with some background color,
and temporarily move this stuff
out, and see if I see that view.
So you get to see some
live debugging action.
But let's see if this
view is visible now.
So that's a red view, and
yeah, you want to flex 1 that.
OK, so that is red.
So what we can do maybe
is just have this view,
and make the THREEView
a child of that, and see
if the red thing is still
visible through it, in which case
we would know that it's
transparent, basically.
So there's some syntax issues.
Line 26, let's go there.
Yeah, it's not good.
All right, anticipating
all of this, I actually
made this project before I came here.
So I'm going to look at that
project but it does seem
that that is basically the same thing.
So I'm not sure what the issue is here.
Anyone have thoughts?
Let's see.
I'm just comparing these things.
The THREEView class.
Oh yeah, also one thing we probably
want to do with the camera is position
it in front of the object.
So we'll set the z coordinate to five.
I don't think that's actually
the issue that we had.
I created a box geometry
material and all that.
OK, it looks not bad.
And we still have the tic function.
It's a different speed, but
that probably shouldn't matter.
Well, one thing I could do is just
open this project that I had before.
So I'm going to do that.
As you can see, the code for the
other project is basically the same.
I'm just going to send myself that link.
Let me just get away from my email.
OK, in this case, it did work.
Just to show you like what
happens if you change around,
for example, the speeds of
rotation, and things like that,
let's just make it only rotate on x.
That was rotation around the x-axis.
So we have 3D graphics, or we almost
had it in the new project that I made,
but this project is basically the same
as the project that I was creating.
There's some things somewhere
that I did differently
that I didn't have time to
figure it out in these minutes.
But yeah, there's also
the Minecraft example
that I showed you way in the
beginning of the presentation,
is open source and online.
So you can try that example.
So I just wanted to leave like 10
minutes towards the end for Q&A
from you guys.
So feel free to just ask me
any questions that you have.
I'll go back to the presentation.
Yeah.
All right, anybody have questions?
Yeah?
AUDIENCE: So in terms of
deploying applications with stuff,
how would you integrate
this with a database
if you're doing a database
[? backup ?] application?
How do you get it up so
that you can access it?
NIKHILESH: So the application
itself is just the client side
and what you'd be doing is you
would make your own server talking
to the database that you want.
And you can make HTTP
requests to the database.
And there's this API called Fetch,
which is like a JavaScript API for HTTP,
and you can make those requests.
We could actually do a quick example
of making an HTTP request on snack,
if you wanted to check it out.
But that's how we've done it for
applications that we've tried.
AUDIENCE: Build it separate
and just make a rest API
and then just access it.
NIKHILESH: Yeah, that's the way
that we'd go about it for now.
Yeah, any other questions from folks?
AUDIENCE: What about pushing
that to the app store?
Is that a lot to do?
Or maybe you have a
certain process for that?
NIKHILESH: So basically,
we have this command line
tool called EXP, which
is a counterpart to XT,
and it's this one command on EXP.
You can just say build iOS, or build
Android, and you'll get for iOS,
it's an IPA for Android,
you get an APK, which
are the package files that
go into the app store,
and you get those for your application.
But folks have successfully done
that from Windows and Linux also.
So the documentation for
that is on the website.
So go to our website and then
just hit docs and guides.
A lot of stuff on here, but
building standalone apps
is what you were asking
about, and it's got
all of the info about how to do that.
And there's a bunch of
metadata that you end up
having to write like the bundle
identifier, and everything like that,
but that's at least as much as
you would have to do without Expo.
Any more questions?
Yeah?
AUDIENCE: Are there
any limitations as far
as things you can do with a native app
such as get latitude and longitude,
or read WiFi signals?
Is that all available as well?
NIKHILESH: Yeah, so for example,
the map view that I showed you,
it's something that is a native
thing, but it's built into Expo.
And just like that,
there's a location API,
which is also built in that you can
use to get latitude and longitude.
And in the docs, we actually
have a snack for it.
So you can just open that up, and scan
the QR code, and we could try it out.
And there's APIs for a lot of the
things that you would want to do.
One thing that I added recently was
you can have a local SQLite database.
A lot of other stuff,
like you can get stuff
from the gyroscope, or the
accelerometer, and most of those
are basically one JavaScript function
call or two, versus way more stuff
that you'd have to do natively, and
also differently for Android and iOS.
And folks have used this location
thing successfully in various apps.
AUDIENCE: Can you just
talk about [INAUDIBLE]
Yeah, so also, another thing is
while we do have a lot out of box,
it is limited, in a sense.
For example, we don't
have Bluetooth right now,
and if you wanted to do
Bluetooth, what you could do
is we have this thing called ExpoKit.
So what you would be doing
is you would eject out
of being a pure JavaScript
Expo application,
to being a combination of
JavaScript and native code.
And it's just the native runtime
that runs that JavaScript
and then you can modify
that runtime yourself.
So you can add in your own Bluetooth API
that you can call from the JavaScript.
So it enables you to
define your own API,
like the location API that we have.
And then I think about that as if
you made something that's useful,
and you want folks to use it, you
can put it back up as open source,
and if its a good API,
we could look into that,
and think about integrating it.
Stuff like that.
Anything else?
Awesome.
All right, thanks a lot.
[APPLAUSE]
