00:00:00.160
please
00:00:10.559
welcome good
00:00:13.960
yes Hello friends nice to be here with
00:00:16.240
you so the talks name initially was
00:00:19.279
turbo native but it is kind of outdated
00:00:21.640
now because they the news uh FR s
00:00:24.840
signals they have announced hot Native
00:00:27.199
now what isot Native basically first of
00:00:30.720
all I think it should have been Lo me
00:00:32.520
given the talk it should have been
00:00:34.000
either Joe mot or JS given the talk at
00:00:36.480
the big stage and look at this uh like
00:00:39.320
budget
00:00:40.960
version you have the version version of
00:00:43.760
a speaker it's me all I gave last year a
00:00:48.840
talk
00:00:49.520
about I also R this YouTube channel and
00:00:52.520
person I been do a series of videos
00:00:54.399
about Duron native but dur native as I
00:00:57.000
said it is outdated and this is a very
00:01:00.160
good thing it's going to make life
00:01:01.840
easier for you so if you haven't learned
00:01:03.800
toate yet it's good because now it's
00:01:06.720
going to be easier for you to learn it
00:01:08.840
now what was the main problem so that
00:01:11.479
tur that was and many people were asking
00:01:13.840
me what's the difference between turb
00:01:15.080
native and the Str and the many people
00:01:17.920
waiting for St to be released to start
00:01:20.600
working oning mobile apps that you
00:01:23.759
already do it with ter for a few years
00:01:26.400
so uh I think was kind of a brand issue
00:01:28.920
and yeah many people l this question
00:01:30.759
what's the difference between to and Str
00:01:32.880
I tried to make this kind of graph to
00:01:36.360
show the place of to Native and in the X
00:01:41.360
system how did it look just a week ago
00:01:44.040
to trade a new iOS application be ative
00:01:46.759
application so you create a new IOS app
00:01:48.880
you would install to Native you would
00:01:50.960
install on a specific branch that us
00:01:53.479
Tator it's igation library then you
00:01:55.880
would install Str to install Str would
00:01:58.000
need another like 10 files that you just
00:02:00.600
hate your life just by the moment you
00:02:03.280
have done the boiler plate set up to
00:02:04.960
start developing your application but
00:02:07.280
luckily it has all been merged together
00:02:09.360
so turbo Navigator turbo iOS and St have
00:02:13.319
been merged together into a library that
00:02:15.800
is going to have a better branding
00:02:18.319
better documentation and it is going to
00:02:20.200
be easier for you to start building
00:02:21.680
mobile applications into grounds now if
00:02:24.480
you haven't work on bu mobile
00:02:26.560
applications the the smallest for the
00:02:29.519
loop for you you have the
00:02:31.720
xod uh editor set up you have a virtual
00:02:36.840
uh iPhone drun it is a running your
00:02:40.200
local host in your real server you have
00:02:43.480
your app ser and uh you do like just so
00:02:47.200
your local host in your iOS R
00:02:52.000
so the net and the footer will be soled
00:02:55.040
as native and inside inside is just your
00:02:58.519
rails application that is served as if
00:03:01.040
you look on a small
00:03:03.120
screen so this part is native this part
00:03:07.680
is just your rails application as a look
00:03:10.720
on that S screen so going back to the
00:03:13.200
main topic how to make your rails
00:03:14.959
application ready to work with with and
00:03:19.200
how to application so it works and
00:03:23.599
on inside a n application so first of
00:03:27.360
all make it look work with a small
00:03:29.159
square when you open your real
00:03:31.040
application from the phone it should not
00:03:32.760
suck it should work nicely have a look
00:03:35.560
at X this is not the X app this is X
00:03:39.040
opened by the pros and it looks and
00:03:40.920
feels like an app it has the bottom
00:03:42.840
navigation it has the uh net bar so the
00:03:46.000
X mobile uh respon version looks just as
00:03:50.239
the app does same the blink in and uh
00:03:52.959
you can here they have the N they have
00:03:56.400
main content and the
00:03:58.439
F remember this so rule number one
00:04:02.560
before building any mobile application
00:04:04.400
just make your run application will find
00:04:06.280
on a small screen and here are a couple
00:04:09.000
of examples of like and Lin and
00:04:11.799
applications that I build that Lo can
00:04:13.760
feel fine with a small scen go further
00:04:17.519
conditional logic there are some cases
00:04:19.560
that you want to run something on a
00:04:22.400
mobile application but not something for
00:04:25.919
application you can use the help to app
00:04:28.800
and you put it helpers in the files in
00:04:32.039
controllers everywh bur forther uh CSS
00:04:36.800
uh this is the perfect set to have
00:04:39.080
conditional dent on mobile and on the so
00:04:43.479
for example in the states
00:04:46.280
have black background on the and white
00:04:49.520
background on the
00:04:51.720
applications good forther the disabling
00:04:55.080
turbo so if you put dat turbo FS on the
00:04:58.039
link that if not be clickable inside the
00:05:00.440
phot application so try to avoid this
00:05:03.840
but there are a couple of cases that you
00:05:05.680
want to be able to disable
00:05:08.479
this data to set data to gos for example
00:05:11.840
if you're like doing strip check out or
00:05:13.720
if you're trying to do sign in the and
00:05:16.520
this kind of flows will usually not work
00:05:18.639
in your uh terator application you will
00:05:21.639
need to find other base to integrate
00:05:23.360
this kind of flows in application good
00:05:26.520
brother and it here's a simple example
00:05:28.319
of what data to conf Fromm you know all
00:05:30.120
this information model with JavaScript
00:05:32.160
works in your browser and this is how it
00:05:34.400
looks and The Works in so by application
00:05:38.680
for that device works out of the box if
00:05:41.280
you install the new R authentication is
00:05:43.919
going to work out of the box if you R
00:05:46.080
out your own authentication try to store
00:05:48.360
the uh user not in session but in cook
00:05:52.240
isou remember this good for that so
00:05:55.720
traditional navigation now here are a
00:05:58.440
couple of examples so first SC you see
00:06:00.759
I'm clicking and
00:06:03.080
uh H stack navigation so you see the bre
00:06:06.280
drums and uh you I can go like further
00:06:08.639
and back the second case by click and it
00:06:11.680
replaces the navigation so there are
00:06:13.880
some cases where you want the navigation
00:06:16.960
not to stack like if you did in the
00:06:19.800
browser H you want to replace the C
00:06:22.479
screen and you a couple of go hippers
00:06:24.720
that can help you in having additional
00:06:27.759
different Navigation patterns in the the
00:06:30.240
VAP and in mile go further if you try to
00:06:33.560
if you have Target blank set up in your
00:06:35.960
R application and you so click it ins
00:06:38.639
theide the I application it's going to
00:06:41.840
look like this you see it's I'm clicking
00:06:44.039
a link inside my application and it's
00:06:46.000
opening in the in the popup browser and
00:06:48.840
it looks to so this is a p link tool
00:06:52.199
where you can uh set
00:06:54.639
the app so you don't like uh to disable
00:06:59.599
Target blank within your application all
00:07:03.000
applications uh going further app review
00:07:06.360
so if going to be hard but you should
00:07:09.680
fight for
00:07:11.080
it that does development gave me a
00:07:14.280
couple of as how to find fight it so
00:07:18.720
first of all you should not uh enable
00:07:21.680
billing inside your for application you
00:07:25.120
should enable in that application and in
00:07:27.039
some cases you would want to disable
00:07:28.800
sign it UPS in your VI application you
00:07:31.680
want to all just to sign up only in the
00:07:34.400
web application but sign in also like
00:07:37.000
they'll able just to sign in inside the
00:07:39.280
native applications and you can see this
00:07:41.400
PN in Bas and
00:07:43.599
the he for
00:07:45.639
example going further I think that there
00:07:48.080
is space for a couple of boil plates in
00:07:51.240
VI and
00:07:53.280
uh you'll be able to like the I scope
00:07:56.520
itself is more less you set
00:07:59.960
and it is reable so you do ADV and you
00:08:02.080
can use around all your locations and uh
00:08:05.440
you don't get to have likeed I code for
00:08:08.879
each application and uh about Str which
00:08:12.440
components so Str to get St system
00:08:15.479
Bridge components up there are there
00:08:17.639
different patterns for having native
00:08:20.280
elements in your page and I see set
00:08:23.840
space to have a usable library of
00:08:26.000
components currently in the to Source
00:08:28.240
there are couple of components but there
00:08:29.960
can be more uh going further I invite
00:08:32.479
you to have a look at Native top
00:08:34.640
directory robas it is a big collection
00:08:37.599
of applications that have already been
00:08:39.560
launched on the App Store that use for
00:08:42.680
Native and some of them could have
00:08:45.000
source code that you can
00:08:46.519
expl and finally there is a bus here
00:08:50.320
that is organizing podcasts and they
00:08:52.519
first launched that
00:08:54.200
application only the App Store and it is
00:08:56.720
also usernet for Native so just that the
00:08:59.800
part in the middle of a is just the
00:09:02.440
responsive app but the top and the
00:09:04.440
bottom is
00:09:05.920
native and again uh iite to have look at
00:09:09.959
seils I'm doing lots of vide I doing the
00:09:14.000
series of tated now I'm going to foot
00:09:16.160
native and uh I invite you to subscribe
00:09:18.800
this would help me continue doing what
00:09:20.959
uh I do thank you
00:09:29.519
right