Paris.rb Meetup
Hotwire Native: Turn Your Rails App into a Mobile App

Summarized using AI

Hotwire Native: Turn Your Rails App into a Mobile App

Yaroslav Shmarov • November 05, 2024 • Paris, France

In this presentation, Yaroslav Shmarov discusses how to convert a Ruby on Rails application into a mobile app using Hotwire Native, integrating elements from Turbo Native and Strada to create a more efficient and user-friendly mobile experience.

Key Points Discussed:

  • Introduction to Hotwire Native:

    • Yaroslav shares his background and previous topics covered about Hotwire.
    • He highlights the merging of Turbo Native and Strada into Hotwire Native, which simplifies the development process.
  • Setting Up a Rails App for Hotwire Native:

    • He explains the importance of making web applications responsive as a first step before wrapping them for mobile use.
    • Demonstrating through examples, he shows that web apps need to function well on smaller screens to ensure a good mobile experience.
  • Development Process:

    • Developers serve their Rails applications inside a native framework using tools like Xcode for iOS.
    • Emphasis on the minimal boilerplate code required compared to previously needed for Turbo Native and Strada.
  • User Interactions and Features:

    • Discusses the navigation architecture in the app, with seamless transitions between pages that mirror native app behavior.
    • Features like modal prompts and native payment integrations are covered, highlighting how they enhance user experience.
    • Importance of correctly handling browser behaviors, such as history navigation and external link handling, to ensure native-like interactions.
  • App Review Challenges:

    • Yaroslav shares his personal experiences with app reviews in the App Store, mentioning common pitfalls like payment systems and sign-in methods.
    • He supports the idea of using the mobile app for user login while performing sensitive actions on the web to avoid complications during app reviews.
  • Case Studies:

    • He highlights several existing applications built with Hotwire Native, demonstrating its practicality and effectiveness.
    • Encourages interaction and support through the community channels for developers facing challenges with Hotwire Native.

Conclusion:

Hotwire Native presents a compelling option for developers looking to swiftly and efficiently transition Ruby on Rails web applications into mobile applications. By leveraging existing knowledge of web development and focusing on creating responsive designs, developers can save time and resources while providing users with a native experience. The approach is particularly favorable for teams lacking the resources for extensive native app development and maintenance. Yaroslav emphasizes that for web-focused applications, Hotwire Native offers the fastest path to a mobile presence without needing deep knowledge of mobile programming languages like Swift or Kotlin.

Keywords: Hotwire Native, Turbo Native, Strada, Ruby on Rails, mobile app development, app review process, responsive design, web applications, iOS development, seamless navigation.

Hotwire Native: Turn Your Rails App into a Mobile App
Yaroslav Shmarov • November 05, 2024 • Paris, France

Talk en anglais.

Par Yaroslav Shmarov
Paris.rb Meetup Novembre 2024
Merci à Algolia de nous avoir accueillis.
https://www.algolia.com

00:00 Intro
01:18 Turbo Native + Strada = Hotwire Native
04:16 Prepare your Rails app for Hotwire Native
15:22 App Review
15:57 Future
18:07 Conclusion
20:00 Q&A

Liens:
https://superails.com/playlists/turbo-native

Retrouvez Yaroslav Shmarov:
https://x.com/yarotheslav

Paris.rb Meetup

00:00:00.040 hello guys I'm excited to be here with
00:00:02.280 you my name is yav sharov originally I'm
00:00:04.839 from Ukraine uh you might know me from
00:00:08.280 the super rails YouTube channel I've got
00:00:10.160 more than 200 videos about all topics
00:00:12.320 around Ru and rails on it and just
00:00:14.400 recently a few days ago I hit 9,000
00:00:16.440 subscribers so it's a big milestone for
00:00:18.560 me I'm really excited and uh you might
00:00:21.240 also have seen my talk about Hotwire
00:00:23.680 last year at rails world but let's talk
00:00:26.679 about something different does anybody
00:00:28.599 know what this is
00:00:53.440 I've worked in a few french companies
00:00:55.640 over the years uh I've been living in
00:00:58.160 Ukraine in Poland but uh uh Destiny
00:01:00.559 keeps ringing me back to France so I've
00:01:02.800 worked in a couple of French companies
00:01:04.600 I've also created a few videos that are
00:01:07.040 particularly for solving France related
00:01:09.799 problems like factor x or uh French uh
00:01:14.520 an an Des pce
00:01:17.320 apis but today we are here to talk about
00:01:20.159 turbo native does anybody know what
00:01:21.799 turbo native
00:01:23.400 is okay uh have you tried turbo
00:01:28.159 native and does anybody know know what
00:01:30.200 Strada
00:01:31.880 is okay and do you know the difference
00:01:34.000 between Strada and turbon
00:01:36.119 Native nobody
00:01:38.240 does yeah so last year at trailville
00:01:41.000 there were two wonderful Talks by Joe
00:01:43.079 melotti and by J SS uh Joe M was talking
00:01:46.439 about turbo native and uh JS was talking
00:01:49.439 about Strada so these are kind of two
00:01:52.520 parts of the same puzzle they'll get
00:01:53.960 that now so any anyway the two words the
00:01:57.759 two terms don't make any sense anymore
00:02:00.159 so turbon native is uh not within
00:02:03.039 anymore it doesn't exist Str doesn't
00:02:04.719 exist anymore because uh now we have
00:02:08.520 uh hot V native so they have kind of
00:02:12.160 been merged together into hot V native
00:02:14.760 now I have H created a few videos on my
00:02:17.640 YouTube channel about how to build
00:02:19.480 different things with turbon Native and
00:02:21.920 now these kind of videos are outdated
00:02:24.400 but I'm very happy that they are
00:02:25.640 outdated because hot V native is much
00:02:28.599 better than what Str was and turbon
00:02:30.640 Native now again nobody knows the
00:02:34.160 difference between turbon native and
00:02:35.280 Strada and this was part of the problem
00:02:37.080 so whenever you wanted to okay build a
00:02:39.680 mobile application with the turbo native
00:02:41.959 you needed to install Strada and uh
00:02:44.599 there were a lot of steps in the process
00:02:46.120 and like many people ask me on YouTube
00:02:47.959 what is the difference uh talking about
00:02:50.560 Hotwire in general I think this is more
00:02:52.400 or less the Hotwire ecosystem so uh you
00:02:55.879 will always have Turbo Drive installed
00:02:58.120 you can use turbo frames you can use
00:02:59.560 tobo streams you can combine them but
00:03:01.760 you don't have to combine them and uh
00:03:04.599 turbo native uh doesn't need turbo
00:03:06.560 frames doesn't need turbo streams it
00:03:08.000 needs turbo drive to function and to
00:03:10.720 make strada work with turbon Native you
00:03:12.920 will need some stimulus JS so this is
00:03:15.280 more less the way I see hotfire in
00:03:17.760 general and uh whenever you wanted to
00:03:19.879 create a new turbon native application
00:03:21.760 you would uh open uh if you're building
00:03:23.640 an iOS application you would open X code
00:03:25.720 you would generate a new iOS application
00:03:27.959 you would install the turbon native
00:03:29.879 Library you would install the uh turbo
00:03:33.680 Navigator Library it's another one you
00:03:35.560 would install Strada and it was really
00:03:37.680 really hard there was like a load of uh
00:03:41.360 boilerplate work you had to do to start
00:03:44.159 a new application so this is just a
00:03:46.000 bunch of files that I had to copy and
00:03:48.400 paste from the documentation to install
00:03:51.560 Strada into an application that I have
00:03:53.760 started with the turbon native starting
00:03:55.799 out was awful horrible
00:03:59.959 Yeah so basically we can say that hot V
00:04:02.959 native is the child of uh turbo native
00:04:08.640 of Turbo Navigator and Strada and uh
00:04:12.040 Strada doesn't exist anymore it exists
00:04:13.799 as Bridge components now we'll come to
00:04:16.040 that later so has anybody ever developed
00:04:18.519 anything in
00:04:19.919 xcode it's uh okay nice it's basically
00:04:23.680 the tool that you would use to build
00:04:25.360 apps with swift so if you're building an
00:04:28.800 iOS application you will most likely be
00:04:30.360 using xcode and building there now here
00:04:33.400 I have uh the xcode editor running and
00:04:36.320 here I have uh uh super.com uh running
00:04:40.000 as a hot vi native
00:04:41.520 application and uh when you work with
00:04:44.520 xcode whenever you make some changes you
00:04:46.400 need to kind of relaunch the application
00:04:48.960 for everything to be rebuilt so uh this
00:04:52.759 is like the basics of the ecosystem of
00:04:55.320 like the way the development looks then
00:04:58.960 uh what is uh hot V native basically you
00:05:02.680 serve your rails web application inside
00:05:05.800 a rapper so uh uh here I have an example
00:05:10.240 uh in Local Host I'm just serving my uh
00:05:13.960 local application when I push uh my uh
00:05:16.880 iOS application to production I'm
00:05:18.240 serving the production URL and you see
00:05:21.120 the top and the bottom are can be native
00:05:23.720 elements and the middle is just my web
00:05:27.520 application so uh you would usually have
00:05:30.520 the top and bottom native and middle is
00:05:33.319 you're just having your web application
00:05:35.080 wrapped into an iOS or Android
00:05:39.120 rapper now how to make your rails
00:05:42.680 application work as a mobile application
00:05:45.039 basically imagine you live in a
00:05:46.120 wonderful world right now already that
00:05:48.000 you can turn any rails application that
00:05:50.240 has hot fire installed into a mobile
00:05:52.639 application it's a quite easy there are
00:05:55.240 some things you need to do first of all
00:05:57.199 as you are serving your web view you
00:05:59.400 need to make it look responsive so first
00:06:02.360 of all make sure that your app looks
00:06:04.720 okay on a small screen not only on the
00:06:07.000 by desktop that you are using at work or
00:06:09.080 at home make sure that this part of the
00:06:11.800 application works well when you open it
00:06:13.240 just in a browser yes for example I have
00:06:16.039 opened the x.com this is not the x.com
00:06:19.479 app this is just opened via my Safari
00:06:22.080 browser and you see it looks wonderful
00:06:24.479 perfect on mobile the footer is just
00:06:27.599 built with HTML some links then opening
00:06:30.240 LinkedIn again this is not the LinkedIn
00:06:32.080 application it's uh the LinkedIn web app
00:06:35.599 with built with a responsive way so that
00:06:37.800 people that don't want to install the
00:06:39.080 app can use it nicely in Safari or
00:06:41.240 whatever other browser so again looking
00:06:45.560 at this application this is just a web
00:06:47.599 app but again it follows the same
00:06:49.360 structure as it would follow in kind of
00:06:51.479 a native application it has the uh
00:06:55.000 header it has the main content and the
00:06:57.199 footer so three parts of the content you
00:07:00.560 should think
00:07:01.599 about uh yeah so step number one make
00:07:04.960 sure that the application looks good on
00:07:07.199 mobile uh on a mobile phone before
00:07:09.440 building a mobile application where
00:07:11.240 you're wrapping your web application now
00:07:13.319 here are a couple of
00:07:15.759 uh uh web apps that uh I have built that
00:07:19.879 uh uh so here's like Twitter and uh
00:07:22.759 LinkedIn the way they look on the web
00:07:25.080 and here are a couple of applications
00:07:26.560 that I built that look very good on
00:07:28.639 mobile and you see I'm also uh I also
00:07:30.759 have headers I have the main content and
00:07:32.520 I have a sticky footer so it kind of
00:07:34.479 feels when you open it even in the web
00:07:36.240 browser as a mobile
00:07:38.440 application now there are a lot of uh
00:07:41.520 there are a few behaviors that uh you
00:07:43.840 get out of the box when you uh create a
00:07:46.720 new turbon native application and serve
00:07:48.360 your your web application through it
00:07:50.720 first of all there is this kind of a uh
00:07:53.120 screen Transitions and stack navigation
00:07:55.919 so uh I will demonstrate once again you
00:07:58.120 see you click somewhere it uh adds the
00:08:00.680 previous page to history imagine your
00:08:03.120 web browser you add it to history and
00:08:05.199 you navigate to the next page you can
00:08:06.840 click the backlink and you can also have
00:08:10.560 the title of the page you see there's
00:08:13.120 this title and it will serve whatever
00:08:15.159 title you have in your HTML for the
00:08:17.000 specific page so be sure that it isn't
00:08:19.960 just the name of your application for
00:08:21.159 all the pages make it something more
00:08:23.520 descriptive then uh models so native
00:08:26.800 models are very easy to integrate uh if
00:08:29.159 you I building a hotti native
00:08:30.759 application this is what a basic native
00:08:32.800 model can look like so you click on
00:08:35.519 create new record or edit record and it
00:08:37.839 would pop up as a model but not to have
00:08:40.399 a full page redirect and this would feel
00:08:42.279 more like a native
00:08:44.720 application then uh there are a lot of
00:08:47.839 features uh in Turbo Drive uh that
00:08:51.200 manage the way you your application
00:08:54.200 interacts with the browser that you can
00:08:55.800 use to make it uh feel better on mobile
00:09:00.079 so uh first of all uh you have the
00:09:03.560 helper if turbo native app and you can
00:09:06.079 put it anywhere in your views in your
00:09:07.760 helpers in your controllers and uh have
00:09:11.000 different logic uh on the web and uh on
00:09:14.360 mobile uh for example there are some
00:09:16.640 features you don't want to show on the
00:09:18.800 the mobile application but you want to
00:09:20.600 show on the web
00:09:22.560 application uh then conditional uh CSS
00:09:25.480 so you can uh this is like the whole
00:09:27.360 recipe of how to add the
00:09:30.440 uh uh um add a variant to TA T CSS to uh
00:09:38.240 have some CSS Avail uh execute only on
00:09:42.640 web or only in an actual mobile
00:09:45.920 application uh then if you put data
00:09:49.079 turbo false or disable turbo globally in
00:09:51.240 your application no links are going to
00:09:53.000 be clickable the app will just not work
00:09:55.240 and uh you should not use data turbo
00:09:57.399 fults on links that are available in
00:10:00.600 your uh mobile application they'll just
00:10:03.320 not be clickable there are some cases
00:10:05.959 where you would want to at least in your
00:10:07.959 web application to have data turbo FS
00:10:09.880 for example uh Omni out sign in or like
00:10:13.079 open stripe checkout and uh these are
00:10:16.200 also a couple of examples of pages that
00:10:18.680 you would usually not uh enable on
00:10:23.200 mobile so you would hide these kind of
00:10:25.040 links on mobile now
00:10:27.680 uh uh talking of
00:10:30.320 uh where was
00:10:32.480 I yeah talking of stripe so your app
00:10:35.959 will not be approved uh if you have your
00:10:39.000 own uh payment system uh available on
00:10:42.279 mobile so uh uh Apple will want to have
00:10:45.399 their 30% cut and you will have to use
00:10:47.120 their own uh payment system so uh for
00:10:51.040 example the way Bas comp does it uh uh
00:10:53.760 you can pay them only in the web
00:10:56.279 application and uh uh you can Only log
00:10:59.839 in into the mobile application you
00:11:01.839 cannot even create an account in the
00:11:03.279 mobile application you can only log in
00:11:05.200 as an existing pay
00:11:07.680 user uh then uh maybe you have uh used
00:11:11.440 this data confirm or the new syntax for
00:11:13.800 data to confirm to pop up a JavaScript
00:11:16.240 model to say yes or no so if you use it
00:11:18.880 uh in your web application it is going
00:11:21.000 to work out of the box in the uh mobile
00:11:24.279 hot Native application and will look
00:11:25.760 more less like
00:11:27.360 this uh web authentication like device
00:11:30.800 or whatever authentication gem you are
00:11:33.480 using uh for your web application it is
00:11:36.399 going to work but uh be sure to store
00:11:39.200 the uh user data not in the session but
00:11:42.440 in the
00:11:44.160 cookies uh done this one is really
00:11:47.000 interesting so uh here's an example of
00:11:49.839 navigation being stacked so I click on a
00:11:52.560 link and it adds it to the uh browser
00:11:55.680 history I click another link and it adds
00:11:58.040 it to the history and sometimes you
00:12:00.120 would not want to kind of Stack this
00:12:02.600 navigation history on mobile so you
00:12:05.600 would want to use this kind of uh uh
00:12:07.680 Turbo Drive behaviors as turbo action
00:12:10.560 Advance or Turbo action replace turbo
00:12:12.639 action Advance is the default one it uh
00:12:15.040 is broken out of the box you don't have
00:12:17.079 to write it and it Stacks the navigation
00:12:20.440 if you use data turbo action replace you
00:12:23.199 see I click it and it kind of uh
00:12:25.360 replaces the current page with a new
00:12:26.920 page you can also try it on the we
00:12:29.320 browser and you will see that if you put
00:12:31.040 data turbo action replace uh
00:12:34.320 the back button in your browser is not
00:12:37.079 going to uh actually redirect you to the
00:12:39.720 previous page because you have replaced
00:12:41.199 the previous page content with a new
00:12:42.959 page and uh you would want to have some
00:12:45.839 behaviors different on mobile and on the
00:12:49.160 web so here on the bottom is a helper
00:12:51.760 that uh you can use on some links to
00:12:54.880 replace navigation on mobile and stack
00:12:57.519 navigation on the web
00:13:00.920 um what's
00:13:04.160 this
00:13:05.680 um oh yes so here is an interesting case
00:13:09.880 here I put Target blank to open in a new
00:13:13.040 tab uh and you see it tries to pop up
00:13:17.399 the uh Native inbuilt browser and uh if
00:13:22.560 you have uh Target blank inside your
00:13:25.199 application to open internal links it's
00:13:27.560 going to try to not just direct but it's
00:13:29.720 going to try to open an additional popup
00:13:31.600 browser so you would want to uh not have
00:13:34.760 uh Target blank in your uh mobile
00:13:38.800 application and here is an example of
00:13:40.839 like setting Target blank only if it is
00:13:44.360 not a mobile
00:13:46.320 application uh there are some native
00:13:48.480 elements that you would want to
00:13:50.040 customize and use in your applications
00:13:52.120 first of all the coolest one the one
00:13:53.959 that you will 99% want to use is native
00:13:56.680 tabs so imagine here by default it's
00:13:59.560 just uh one uh it's just one browser tab
00:14:03.279 imagine you're navigating inside One
00:14:04.680 browser Tab and you can add a few tabs
00:14:07.240 and each of them will have their own
00:14:08.800 browsing history and most applications
00:14:11.279 uh these days uh will have these kind of
00:14:13.600 tabs and if you like navigate inside
00:14:15.720 Instagram you will see that the browsing
00:14:19.040 history in each tab uh is separate I've
00:14:22.600 also got a video about how to integrate
00:14:24.440 uh uh Native tabs in uh iOS for hot
00:14:28.800 Native
00:14:30.360 then there are sometimes features that
00:14:32.120 you just can't give a really good
00:14:34.040 experience in in the web so you'd want
00:14:36.480 to have some native screens for example
00:14:38.320 for maps here's an example of rendering
00:14:40.800 a map in a hot Native application then I
00:14:44.560 previously talked about stripe and uh
00:14:46.560 payments so it is possible uh to
00:14:49.639 integrate uh Native payments in a hot
00:14:53.079 Native application you basically can
00:14:55.320 inject native elements or native Pages
00:14:58.560 inside your H native
00:15:00.639 application okay let's say you've built
00:15:02.600 your application great job but now this
00:15:05.120 is the hardest
00:15:06.360 part uh app review this can take quite a
00:15:09.199 while my last application that I've been
00:15:11.240 working on I had maybe like five or six
00:15:14.040 uh
00:15:16.160 uh big debates with the app review team
00:15:19.320 on uh like different small things that
00:15:22.920 they didn't like uh about launching it
00:15:26.000 but uh uh one thing that I mentioned
00:15:28.319 previously so so try disabling building
00:15:30.759 logic in your application make people
00:15:33.199 check out in your web application and
00:15:35.120 use your mobile application as a reader
00:15:37.480 app and here are a couple of closes from
00:15:39.920 the Apple
00:15:41.800 developer um documentation uh that you
00:15:46.199 can use to fight with the app review
00:15:50.079 team so you should uh explain them that
00:15:52.560 according to your guidelines this and
00:15:54.279 this is
00:15:56.079 possible now um there is a a decent uh
00:16:01.639 turbo native or hot Native boiler plate
00:16:04.399 uh it's jump start iOS I use it for a
00:16:07.120 couple of projects in the past at the
00:16:09.519 moment the approach the code base is a
00:16:12.160 bit outdated but you can still try
00:16:14.319 playing with it and uh it will help you
00:16:17.079 launch an existing DRS application uh
00:16:19.680 faster with u turbo native not hot
00:16:23.000 Native yet it's not using hot Native
00:16:25.199 then there's another repository as a
00:16:27.440 turbo native initializer again this is a
00:16:29.560 bit outdated but uh I Envision that in
00:16:32.600 the near future there are going to be
00:16:34.519 new uh boiler plates with everything
00:16:36.959 included like tabs uh and other native
00:16:39.839 behaviors that you can just plug into
00:16:41.680 your rails application and launch on iOS
00:16:45.120 or
00:16:46.279 Android uh then uh one thing I didn't
00:16:49.920 talk enough in this presentation is so
00:16:52.199 Shad Bridge components these are
00:16:53.800 basically additional behaviors that you
00:16:55.759 can add to your application uh uh like
00:16:59.600 native buttons or uh yeah like native
00:17:03.319 buttons native navigations and so on uh
00:17:05.839 I'm not going to talk about it this time
00:17:07.160 maybe next time uh then there's quite a
00:17:10.280 bunch of applications that have already
00:17:12.000 been launched uh on the App Store as uh
00:17:16.319 like Android applications or iOS
00:17:18.400 applications all these applications are
00:17:20.079 using the turbo native so they basically
00:17:22.640 wrapping their web View and uh serving
00:17:25.720 it as a native application there's a
00:17:27.760 bunch of them and uh uh some of them
00:17:29.799 even have the source code open so you
00:17:32.520 can uh see how they did it and uh learn
00:17:35.240 from this and uh recently my friends
00:17:38.120 from bus Sprout launched their
00:17:40.080 application uh with hot fire native and
00:17:42.840 uh it feels really fluid and you don't
00:17:46.919 feel that like it's not native enough
00:17:50.440 now if you want to learn more about um
00:17:53.919 hotti Native or if you want to discuss
00:17:56.039 different problems that you are facing I
00:17:57.520 think the best place for disc
00:17:58.840 discussions is the discode of Joe
00:18:01.760 melotti uh everybody who does hot V
00:18:05.000 native is
00:18:06.360 there and uh to summarize uh H native
00:18:09.840 might not be the like uh best way most
00:18:13.400 scalable way to uh maintain a mobile
00:18:17.799 application like Facebook wouldn't uh
00:18:20.039 launch a hot V application uh if your
00:18:23.039 team has already like uh five uh uh iOS
00:18:26.360 developers maybe they can just build a
00:18:28.799 native application but if you want to
00:18:30.600 quickly uh launch your rails application
00:18:33.559 as a mobile application I think it is
00:18:35.919 the fastest way to launch it also it is
00:18:38.640 easy to maintain because whenever you
00:18:40.280 put uh you push updates to a web view
00:18:42.240 your mobile application changes and you
00:18:44.240 don't have to Res submit to the App
00:18:45.440 Store and go through the review process
00:18:48.039 uh once again uh some bad things are
00:18:50.960 that it is quite Niche so there aren't
00:18:52.799 like thousands there are hundreds maybe
00:18:55.120 applications uh that uh launched on the
00:18:57.720 App Stores using turbo native it's uh
00:19:00.159 quite a new technology and
00:19:03.360 um uh the community is quite small again
00:19:06.799 I invite you to visit super.com and uh
00:19:09.640 I've got a bunch of videos about hot
00:19:11.360 Native uh these are the most newest ones
00:19:14.159 that I launched After hot V native was
00:19:16.520 announced a month ago so I invite you to
00:19:19.120 learn hot V native launch your first uh
00:19:22.280 uh iOS application with hot fire native
00:19:25.159 just turn any of your's applications
00:19:26.760 into a mobile application it is really
00:19:29.559 easy you don't need to uh have great
00:19:32.120 knowledge of Swift or of uh cotland for
00:19:35.520 Android you just uh stick the puzzles
00:19:40.440 together and uh again at CS you can
00:19:43.480 subscribe and have access to the source
00:19:45.840 code of all the
00:19:47.120 episodes that's uh it thanks for
00:19:50.039 listening and uh ready for your
00:19:51.840 questions
00:19:59.720 thank you for the conference was really
00:20:02.440 nice uh I was wondering if uh
00:20:05.559 Progressive web application could be an
00:20:07.640 alternative to hot wire native because
00:20:12.640 uh we don't have some of the transition
00:20:15.440 ET but uh to go to the market with a
00:20:19.240 near native experience I think it might
00:20:22.200 be quite good first of all uh people
00:20:26.080 don't know how to install a progressive
00:20:27.679 web app like uh I will go how do you
00:20:30.679 install a progressive web app I go to a
00:20:33.400 web page I need to open a file or
00:20:36.880 somewhere else I need to click add to
00:20:38.679 Doc and then uh I will have it uh
00:20:41.600 available uh then I will have uh the
00:20:45.039 application available here like here I
00:20:47.000 have superl pwa but pwa is just like uh
00:20:52.120 a hyper link on your homepage to the uh
00:20:57.400 web application that is served kind of
00:20:59.440 in a browser without the browser
00:21:02.400 controls um my wife is there and she
00:21:05.320 would say if uh uh and if I can't find
00:21:09.240 it on the App Store I'm not going to use
00:21:11.039 it and uh young people these days they
00:21:13.640 are most likely more likely to use
00:21:16.200 applications than uh uh something in the
00:21:19.679 browser now U PW are good like uh I just
00:21:24.520 a couple of days ago released a video
00:21:26.120 about the experience with the wa's at uh
00:21:30.080 rails world so at rails World there were
00:21:33.120 two pwa one pwa for um
00:21:37.919 campfire and uh yeah this is not
00:21:40.159 campfire 1 pwa for the agenda
00:21:42.159 application 1 pwa for campfire and th000
00:21:44.919 people at uh rails World used these two
00:21:49.000 pwas the cool thing was uh having push
00:21:52.760 notifications
00:21:54.720 uh yeah it's cool but uh
00:21:58.840 people are not so educated in using in
00:22:01.360 installing pwas and
00:22:04.279 um
00:22:06.240 uh yeah pwa I would say is a trans
00:22:10.120 transitional step to having your
00:22:12.480 application uh on uh served as a native
00:22:17.000 application so pwa okay you uh already
00:22:20.679 had some have some experience with push
00:22:22.600 notifications you already made your
00:22:24.240 application look good on a small screen
00:22:26.919 Next Step uh just uh launch this pwa as
00:22:30.080 a native application is it possible to
00:22:32.840 make uh this app work offline uh in some
00:22:36.480 degraded mode
00:22:37.960 maybe or it's online only um I think uh
00:22:44.120 William Kennedy yes William Kennedy was
00:22:47.799 experimenting with this topic of
00:22:49.840 bringing
00:22:51.640 uh uh an offline experience into turbon
00:22:54.520 native applications uh I don't know uh
00:22:58.679 uh how successful he was I haven't uh
00:23:01.880 talked about this for a long time if you
00:23:04.559 want to create an offline experience for
00:23:07.440 your
00:23:08.520 pwa uh Alisia roas at Trails V did a
00:23:12.440 fantastic talk about how to make your
00:23:14.520 pwa work of line hi uh I have two kind
00:23:18.760 of adjacent questions um quite short
00:23:22.200 first of all you speak quite a lot of uh
00:23:24.159 about I iOS right and how the
00:23:27.080 restrictions for the app um when you
00:23:30.320 look at um Android and like the Google
00:23:32.880 Store are there any differences that uh
00:23:35.559 someone developing should be aware of um
00:23:38.600 so uh there are two uh libraries one is
00:23:42.640 uh H native iOS and the other is hot
00:23:44.919 Native Android one is in Swift one is in
00:23:47.440 cotlin the development uh experience is
00:23:51.960 uh I mean uh more the same but there is
00:23:55.400 more documentation at the moment for iOS
00:23:57.440 and uh uh uh again going back to William
00:24:00.720 Kennedy I think he uh has the most uh
00:24:04.400 content and experience in uh building uh
00:24:07.640 Android applications but it would be
00:24:09.640 more or less uh the same cool uh I
00:24:13.640 myself haven't launched an Android
00:24:15.679 application with the hot V yet uh and I
00:24:19.720 prioritize iOS because uh usually uh
00:24:23.720 people who use iOS are statistically
00:24:27.840 more like
00:24:29.320 to uh spend money Fair
00:24:33.360 yeah uh and a very quick other question
00:24:36.720 I've developed a little tiny bit with
00:24:38.480 react native and uh I've had some issues
00:24:43.520 uh and this is not really tied to hot
00:24:45.399 wire but I have had some issues with uh
00:24:49.840 Tailwind uh not working the same way as
00:24:53.120 it does on browser do you by any chance
00:24:55.000 know if it's the same way in hot wire
00:24:57.640 have you ever had trouble with uh tailin
00:25:00.039 CSS uh classes not working
00:25:03.360 properly no not really okay fair enough
00:25:06.520 basically it's just serving your web
00:25:08.720 view the way it looks on a small screen
00:25:11.480 uh uh like on your web browser in the
00:25:15.039 mobile the same it's going to work and
00:25:17.080 look in the uh hotw Native application
00:25:20.320 fair enough thank you very much thank
00:25:21.880 you oh and also awesome talk thank thank
00:25:25.600 you uh quick question also uh know
00:25:28.640 nothing about react native but have some
00:25:30.600 colleagues who use it and um I
00:25:34.360 understand it's a bit closer to Native
00:25:37.159 like we have pushed notifications uh
00:25:39.760 things like that what I'm curious about
00:25:41.880 is um do you know by any chains how we
00:25:45.880 could maybe
00:25:49.159 um have a Hotwire native application
00:25:53.240 mixed up with the reg native application
00:25:55.640 for
00:25:56.600 like uh to use some of the functionality
00:25:59.159 of R native but using uh hotway Native
00:26:02.440 at the same time you have any lead or
00:26:05.159 ideas about do something like
00:26:09.320 this I uh can't answer this question uh
00:26:13.840 in the RightWay okay thanks uh I know
00:26:15.880 that in Hotwire applications you can
00:26:18.480 have some rect components so it's like
00:26:21.120 you can have some rect pages uh I
00:26:23.360 haven't uh tried mixing uh re native and
00:26:27.159 uh hot fire native
00:26:28.760 yeah I don't know if it's a good idea
00:26:31.080 anyway but just curious thank
00:26:35.279 you so thank you for your talk uh my
00:26:38.640 question is uh we know that uh it's
00:26:40.520 challenging for the for the mobile
00:26:42.399 applications to get accepted by the
00:26:45.440 stores iOS or uh Google Play My question
00:26:49.039 is is there any issue coming from the
00:26:51.279 turbo native for the apps to be accepted
00:26:53.960 on the stores uh the main issues would
00:26:57.039 be around the functionality of your
00:26:59.120 application so for example if you have
00:27:01.760 the sign in with Google button they will
00:27:03.840 also request to have a sign in with the
00:27:06.320 Apple button then uh another thing is
00:27:09.080 with the payments uh another thing is so
00:27:12.399 like you have to go through uh either
00:27:15.320 having a Reader application as Bas Camp
00:27:17.559 does so people can check out on the web
00:27:20.039 and Only log in in the uh mobile uh so
00:27:25.480 it's payments it's a login options it's
00:27:30.480 um uh again maybe you have a gambling
00:27:34.080 application
00:27:35.559 or some kind of other restricted uh
00:27:38.760 topic then you might have problems there
00:27:41.399 but uh it would be mostly about features
00:27:43.480 of your application that uh they will uh
00:27:46.679 scrutinize and not uh the way it's coded
00:27:50.440 okay guys thanks a lot for your
00:27:51.440 attention
Explore all talks recorded at Paris.rb Meetup
+2