Web Applications
Lightning Talk: Hotwire Native - Turn any Rails App into a Mobile (iOS/Android) App

Summarized using AI

Lightning Talk: Hotwire Native - Turn any Rails App into a Mobile (iOS/Android) App

Yaroslav Shmarov • September 27, 2024 • Toronto, Canada

The video titled "Lightning Talk: Hotwire Native - Turn any Rails App into a Mobile (iOS/Android) App" by Yaroslav Shmarov explores how to adapt Rails applications for mobile use using Hotwire Native. The talk discusses the transition from Turbo Native to Hotwire Native, highlighting the improved ease of development and user experience for mobile apps.

Key Points Discussed:

  • Introduction to Hotwire Native:
    • The speaker explains that the term "Turbo Native" is outdated, and mentions the new features brought by Hotwire Native and Stimulus Reflex (Str), which enhance mobile app development.
  • Simplification of Setup:
    • Merging of libraries into a more refined package facilitates development. Early setups involved multiple files which complicated the process; now the merged library enhances branding and documentation.
  • Responsive Design:
    • A crucial aspect discussed is making Rails applications visually appealing on mobile screens. The right design should ensure functionality and aesthetics, providing examples of ideal mobile interfaces.
  • Conditional Logic:
    • Emphasizing the significance of customizing application behavior depending on whether the user is accessing the app via mobile or desktop, including CSS strategies for different views.
  • Disabling Turbo:
    • The need to disable Turbo in certain situations, such as specific user flows (checkout processes or sign-ins) was highlighted to ensure seamless functionality in mobile settings.
  • Mobile Navigation Patterns:
    • Different navigation strategies are explored: stack navigation versus replacing screens, and how such designs can improve user experience in a mobile app context.
  • Miscellaneous Considerations for Native Apps:
    • The importance of adhering to app store guidelines, including handling user authentication and ensuring sufficient test coverage before submission.
  • Examples of Successful Implementations:
    • The talk concludes with calls to explore existing applications that have effectively integrated Hotwire Native, encouraging developers to learn from real-world applications.

Main Takeaways:

  1. The merger of Turbo and Str into Hotwire Native simplifies the development process for Rails applications targeting mobile.
  2. It is essential to ensure that Rails applications are responsive and visually appropriate for mobile users.
  3. Developers should leverage conditional logic and thoughtful navigation patterns to create optimized mobile experiences.
  4. Careful consideration of app store guidelines and user authentication methods will aid in the success of mobile applications.
  5. Reference to existing apps using Hotwire Native can provide valuable insights for developers.

In essence, Shmarov's talk serves as a practical guide for Rails developers looking to adapt their web applications for mobile platforms effectively, ensuring compatibility and a rich user experience.

Lightning Talk: Hotwire Native - Turn any Rails App into a Mobile (iOS/Android) App
Yaroslav Shmarov • September 27, 2024 • Toronto, Canada

Learn to make your Rails app Hotwire Native & App Store compatible.

Rails World 2024

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
Explore all talks recorded at Rails World 2024
+31