00:00:09.880
Okay, welcome today. I'd like to tell you a production story about a hybrid app that we built, and what can you do with Ruby today. But let's start with an announcement that was made on the 15th of February. Apple confirmed that it's killing home screen web applications in the EU. This means Progressive Web Applications (PWAs) could be at risk.
00:00:22.800
However, on March 1st, they reverted this decision and said they would still support PWAs. But what does this mean for the future of PWAs? Are we certain that they will have the support they need? And does Apple commit to supporting them? It doesn't seem like they have a strong commitment. I'm Hana for those who didn't meet me. My formal background is in judgment and decision-making psychology. I learned R during my dissertation thesis. Subsequently, I worked as a paragliding instructor for five years.
00:01:02.920
After my daughter was born, I realized I wanted a career that wasn't weather-dependent and allowed for flexible hours. I always liked coding a bit, so I started working as a self-employed web developer, freelancing under my company, Z Online. Later, I began teaching mothers web development because, as a web developer, I found working alone at the computer lonely. I missed the connection with others and the act of teaching.
00:01:43.799
An interesting aspect of this course was that mothers could bring their children with them, and 30 to 50% of participants did so. However, they were not obligated to do anything for their kids; they could focus on learning for themselves. Then I stumbled upon the Ruby Monsters group, which is a Meetup in T. It's essentially a free Ruby course, and that experience really changed my life. I participated for two years, started learning Rails, and eventually began coaching there.
00:02:02.119
I also lectured at a boot camp, and just to clarify, my second son is different from my first child, although they look quite similar. While freelancing, I created many WordPress websites for small businesses, but I knew I wanted to work more with Ruby and Rails. Although I managed to integrate some Rails projects for my clients, it wasn't the best fit, which pushed me to seek work with a different company.
00:02:56.200
I began working as a contractor for a startup called Reef. After a year, I joined GitHub, where I have been working for more than two years in the code scanning team. Now, what would a presentation be without a cat? Here's our cat. Now, enough about me; let's explore what we will cover today. I'd like to discuss the differences between PWAs and hybrid apps, how Flamingo, the app we are building, came to life, and how we solved challenges such as notifications, service workers, and how the future with Rails 8 could look for mobile devices and Rails applications.
00:03:36.920
PWAs are characterized by having just one code base. In the case of Rails, it is simply one main Rails application expected to work across all devices: in browsers on tablets and mobile devices. A significant advantage of PWAs is that they don't require separate bundling or distribution, meaning there is no need to submit them for publication in the Google Play or App Store. They do require a website manifest. On the other hand, a hybrid app contains one main Rails application, along with native wrappers for iOS and Android.
00:04:03.920
In this instance, you have three code bases: the main one in Ruby, some Kotlin for Android, and a bit of Swift for iOS. The goal is to ensure it works across all devices, including web, tablets, and mobile devices, but it does require separate bundling and distribution, meaning you need to submit these apps to the respective App Stores. For example, with a PWA, you can save any website on your mobile phone to your home screen and access it from there. In the past, Apple and Android provided natively looking shells for these PWAs, but that's no longer the case. It's unclear how this will evolve in the future, and the current outlook isn't very promising.
00:05:36.760
On the left side, you’ll see that a PWA resembles a website loaded in your browser, while on the right side, it's a native iOS app. The iOS app has native navigation at the bottom and a nav bar at the top. Let's briefly talk about the website manifest. As mentioned before, PWAs need a website manifest, which is essentially a JSON file containing various specifications including the app name and icons. In our case, the manifest might be highlighted that it's a JSON-ERB file. We also have a controller with the show action and the respective route. When comparing PWAs and hybrid apps, we can see that WPAs need a manifest and service worker, whereas hybrid apps do not necessarily require a service worker since the rails app lies within the native shells.
00:06:41.680
In terms of distribution, PWAs do not necessarily need to be submitted to App Stores, while hybrid apps do. With PWAs, there are no native apps, whereas hybrid apps do have a native wrapper. This difference allows hybrid apps to use native features effectively. For our Flamingo app, we have implemented all of these features, even as a hybrid app, and we'll discuss why that is the case later. One of the major advantages of hybrid apps is that the business logic resides in one place, meaning it isn’t replicated across the Rails app, Android app, and iOS app. This also leads to less coding time required since there’s only one main code base to maintain.
00:07:54.080
One highlight of using Rails is the ability to iterate quickly. If you're using a hybrid app and people have already downloaded the first version, any new views or logic from your Rails app can be deployed instantaneously. Users receive the latest version without needing to update their web apps. However, there are some disadvantages; you still need to write some Kotlin and Swift, and you must maintain three applications, even if two of them are on a smaller scale. Additionally, you need to navigate the process of submitting the native applications, although with strategic planning, this doesn’t have to happen very often.
00:09:16.200
Now, let’s delve into what Flamingo actually is. Flamingo is a communication app designed to connect school staff, teachers, caretakers, and administrators with parents, allowing them to exchange information efficiently. When we started this project, the outline was roughly defined—we needed a feed for news to convey school information to all parents, but parents couldn't react to that information. We also wanted to allow chatting between individual users or different message groups, which was a crucial component due to the diverse criteria of group formation across schools.
00:10:59.200
We had to create models for users, students, school classes, and the main point was ensuring it would function across mobile devices and operating systems. Thus, we opted for a shell approach, utilizing a hybrid app to efficiently manage notifications on mobile devices. As previously mentioned, we required three repositories: one for Rails and others for Swift and Kotlin. We were fortunate to find excellent resources for setting up native shells that closely followed a guide early in the development process.
00:12:03.480
One unforeseen challenge was implementing notifications. We prepared to handle notifications for both iOS and Android, but the school staff expressed they preferred using browser notifications, particularly from Edge. This feature wasn’t on our original roadmap, but we had to pivot and accommodate their needs. To handle app notifications, we decided to use a solution provided by Chris Oliver, called Notist, which allows individual and bulk deliveries, supporting multiple methods for sending notifications.
00:13:06.760
For our use case, Firebase Messaging was vital, as it provides a cross-platform messaging solution that enables sending notifications to both Android and iOS devices at no cost. Since we started building this app, Chris has made significant updates. A new version has been released that enhances functionality but necessitates considerable rewrites. While I won’t delve into how we initially implemented it, it's worth noting that the gem is continually evolving. Let's now turn our attention to browser notifications.
00:14:14.600
Browser notifications are those messages that appear on the side of your screen. They can be delivered to users even when the website is closed, provided the browser remains open. Notifications can contain important information about the sender, the title, and the message content. To implement web push notifications successfully, we must ensure the browser supports the Notifications API, obtain user permission for sending notifications, and have an active service worker in place. This is why a service worker is included in our hybrid app.
00:15:02.839
Most of the logic for this process resides in a Stimulus controller. This Push controller handles all the necessary checks and configurations, which makes our development process smoother. We also added debugging tools within our settings, allowing us to verify if all conditions are properly fulfilled. Additionally, we leverage Hotwire, using Turbo frames for editing conversation information quickly, Turbo streams for appending new messages in the chat, and broadcasting new conversations or news as they are created.
00:16:03.480
This setup ensures that the index view updates automatically for all users when a new news object or conversation is created. Now, let’s discuss some tips that have simplified our process. Publishing the app early is crucial because review processes can take days; being prepared ahead of time is key. To publish an iOS application, you need Xcode and an Apple developer account. It's essential to prepare screenshots not only for iOS but also for iPads and Android devices. Similar steps need to be taken for Android applications.
00:17:31.880
Both Android Studio and Xcode provide excellent testing environments that help you connect everything seamlessly with your main Rails app. However, it's important to remember that testing environments may not accurately reflect real-world production scenarios. You should allocate extra time to test features in a live setting and account for potential fixes that may arise. In our case, while we established our navigation and identified the main views we wanted, not everything was ready.
00:18:25.600
You can still prepare the native shells with all the necessary controls and then determine which features can be added later. For instance, we opted to publish the app with a calendar feature, even before we finalized its layout. Once we were ready, we could update our Rails app seamlessly, letting all users receive the new feature without needing to update their apps in the App Stores. For notifications, both iOS and Android notifications used Notist and Firebase Cloud Messaging for the delivery of push notifications.
00:19:40.640
Although Firebase supports browser push notifications, each browser has its own service, which simplifies the process comparatively. We used the built-in push services available for browsers, noting that our users received notifications across all major browsers, including Firefox, Chrome, Safari, and Edge. The primary advantage of leveraging Rails is the speed of development and the short feedback loop it offers. We can react quickly to feature requests and bugs, providing our users with enhanced experiences without the stresses of app submission or update management.
00:20:21.480
Now, let’s talk about Rails 8 and the promises it holds for PWAs and mobile applications. When I was drafting this presentation back in May, early searches indicated a promising enhancement of built-in PWA support and notification systems in Rails. An issue opened on the 27th of December discussed adding default PWA files to the Rails generator, and it received a comment about a service worker functionality. However, it's unclear what stage it's at currently, and there hasn't been significant follow-up information so far.
00:22:18.760
Another important issue introduced discussions around extracting action notifier specifics for push notifications, which would be beneficial, as right now, we rely on separate gems to facilitate notifications across mobile devices and web browsers. While there is excitement about potential improvements in Rails 8, the reality is we have to wait for concrete details about these features. In summary, the future for Rails applications, especially for mobile devices using PWAs, appears less straightforward, but the advantages of hybrid apps remain clear—though setting them up requires a bit more work.
00:23:58.240
The advantage of PWAs is their simplicity in setup, but currently, Apple does not seem committed to support them fully, reducing their effectiveness with features like push notifications. Conversely, hybrid apps necessitate more effort in creating separate applications in Swift and Kotlin, but they provide a more robust framework that many Ruby developers can adapt to. We have access to excellent community resources that streamline hybrid app development, including Notist for notifications and the Web Push gem for browser notifications.
00:25:15.480
Rails 8 seems to promise exciting developments. If the features are fully realized, it could significantly benefit both hybrid apps and PWAs. While the future is ambiguous, we can build amazing applications for web and mobile devices currently, and I believe the future is bright in our industry. Thank you all for your attention. If we didn't chat today, let's connect afterward.
00:26:23.200
I’ve compiled a list of useful resources which I’ll share later, so you'll have access to more materials to explore. Thank you!
00:26:44.760
Are you ready for questions now, or would you prefer to ask later? With all the controllers, Stimulus, and notifications discussed, I may need to review the code to provide precise answers, but I’m open to your questions!
00:27:03.840
I’m surprised you didn’t mention Strada. However, Strada was relatively new when we started developing our app, and the resource materials available did not include it. We didn't pursue it initially. We find our approach satisfactory, as we were able to launch our native apps relatively quickly. Turbo Native already provides user-friendly app helper tools to facilitate the development process in both views and backend code. It simplifies the decision-making process between actions needed in the web view and app view, which is beneficial. However, it's worth exploring for our future steps.