Duration 34:46
16+
Play
Video

RailsConf 2019 - Yes, Rails does support Progressive Web Apps by John Beatty

John Beatty
Founder at Tercaet LLC
  • Video
  • Table of contents
  • Video
RailsConf 2019
April 30, 2019, Minneapolis, USA
RailsConf 2019
Request Q&A
Video
RailsConf 2019 - Yes, Rails does support Progressive Web Apps by John Beatty
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
4.58 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speaker

John Beatty
Founder at Tercaet LLC

Experienced Co-Founder with a demonstrated history of working in the internet industry. Skilled in Android, iOS, Ruby on Rails, and System Administration. Strong business development professional with a BS focused in Computer Science from Virginia Polytechnic Institute and State University.

View the profile

About the talk

RailsConf 2019 - Yes, Rails does support Progressive Web Apps by John Beatty


Progressive Web Apps are a constellation of conventions. Those conventions fit neatly into Rails, without the need to introduce a complicated Javascript front end. By embracing core Rails technologies like ActiveJob, ActionCable, Russian Doll Caching, and sprinkles of Stimulus, you can deliver powerful and immersive front end web apps.

Share

Wow. Hello, thank you all for being here. Today. We're going to explore Progressive web app and how they actually fit really well on the rails. I'm going to show you a demo of a progressive web app. I made that was very fast and responsive and was built only with a real stack. No front end JavaScript other than some stimulant in the suburbs of Washington DC. We live about eight miles from West Virginia state described as Almost Heaven. So I like to say that we're almost almost heaven. Tom Ross 8 miles from the cloud literally Amazon's Us

East one is just down the road and I even use a local Cloud to access the internet. This is my children accessing the Netflix cloud. My rails developer story starts with actually developing iOS Android and BlackBerry apps in 2010 that those apps needed a back in service to manage the date of that shows up in a nap. And at this point I was young and my time is cheap. So I learned rails to build us back in and I fell in love with rails and I found it. It matched caps were developed even down to some of the small talk similarities between Objective C & Ruby in

the meantime. I worked at a few startups in the DC area and on my own for a little bit then an opportunity to teach and run the it infrastructure to school. Can I just go with took me out of the technology hamster wheel I'll be there. I kind of artwork the job into an embedded software engineer. So actually been building a school management system from scratch that we use to manage student records and things in this is allowed me to experiment a lot of rails features to see what they can be used effectively and I currently logged about stimulus. Jas and Billy responsive an interactive website

and my block John bd.com but enough about me I want to talk about what you guys going to get out of this. I would like you to walk away from this talk instead of progressing with that bad asses. I want you to be able to not need to hand wave your way out of a conversation about Progressive web apps. I need a lot of confusion about it and specially how it can fit into a real stack. So I want you to be able to advocate for using the full real stack when you're building a fully interactive and fast web without resorting to something something. Yes for on top of rails API.

And I'm going to show you when we have done this with a version of The Hacker News Progressive web app, but I built using only rails and I'll talk more about that. Go to start. I want to set up a kind of a common vocabulary that we can talk about Progressive web apps and this will help make sure they were on the same page and so do understand and cut through the fog out there. So the most important that you can think of a progressive web app really as a convention. It's very simple and that's that's you just need to add a couple file to your app and browser. What is a progressive web

app. All you need is an HTML page Jason manifest file link to from that page and a JavaScript service worker that is loaded from that page and little bit more to that. But that's really not the essential part. It's just those three components so is an example just where we can start from this is what your head of an index page would look like you'll note that there is a link to the Manifest file with a relationship with little real tag is manifest. When you said the viewports that if she was probably on all screens specially those contact mobile

screens and then you can add a theme color would be part of the loading splash screen if someone actually installs it's a full-time app. And in the body that he can help age is real simple. I just have a title and a paragraph and a little bit of JavaScript to Loudoun service worker from our web page and we registered with the scope of whatever the webpage is. Usually the full scope of your application. And then that's truly all you need for the HTML part of this. The Manifest file is also pretty simple words.

Just a Json file that contains the metadata for the browser such as the app named. It's an app icons the show up if they install it or if your customer sold it will also set up the scope of the progressive web app so we can figure out of the root folder that everything works from and is metadata is similar to what you would put in a mobile app such as the the name and icons. And the last of the service worker there are few call back from the service worker needs in order to work properly. And this job is good workers. Also looking mention. It's one with a browser starts with

running a piece of Job Store code and is code white for the vents to fire handles. So here's the first call back if the insulation call back which will be used to cash those files that you would want offline at the very least. You can cash a special offline page. You really have to catch anything. If you don't want to later on we'll use this part 2 cast member webpacker assets and any files. We think we should should be available when the web browser is off line. This is the work service worker activation call back. You can use it for much of things here

as managing state-of-the-art Cash's clearing out those steel Cashes in a no longer needed. And then finally, this is kind of where the this service worker fetch call back and see where the web app Progressive web app. Really Shines on every single request goes to this function and its sides how to handle that here is trying to retrieve each request of the network then if that fails to try to retrieve the file to the cash and if that fails and it's nice to my request in this case, the work is going to load the offline pay that we cashed previously. There's a Mozilla service work a reference

page that I linked to later on the talk that has a lot more examples of what you can do in this call back. So this is a really simple example and there's a lot more powerful things you can do here. And if I know you've got these functions we have to register them so that they actually get called on these events. And that's it. That's three miles and you have a valid Progressive web app and then I'll show you that's truly some resources that you can look into is Microsoft has a pwa builder. It's a Nifty to look at a new 16 existing site generate a manifest and service worker

files and you can actually check some boxes for things you want and you can find us a pwa builder.com and then Missoula has a service worker cookbook with many examples of different service worker Tech techniques, including cash and content Android notifications. I'd highly recommend you check it out at service worker service work. RS. Google building a chrome is a really nice audit feature that will test her performance Progressive web app setup accessibility and best practices on your page. So it's in the developer tools to cook

Audits. And then it's one of those things you can you can test for mobile networks, like 303d connections latency things like that. And if I finally get to really put them code behind my claim that this is truly a progressive web app and that it's really just a simple convention. I wrote the world's fastest pwi and you can get the source code on GitHub if you like, but like I said, it it on Google is Lighthouse audit, which is great for testing these kind of things got $100 hundred so very fast. Enemies are justifiable sport. It's got to

Icon files that are required for the pwa. It's got our index. HTML file a manifest. Jason are offline. HTML that will show when the pages offline and in the service worker and that's just all that stuff in the previous lives. And so with these these files you can get it on GitHub. IO. Maybe I could help. IO / world's fastest pwa and you can see yourself and then if you actually do you load it turn your browser off or your Wi-Fi off and then you get the offline page 2 so a really simple to start with

So why should we care about this new Convention as I can before I got into rails by writing back in for my iOS apps and any time. I told someone that I wrote iOS apps they would tell me all of the great app ideas. And I think we all had that great idea to at some point. Honestly, you know, we're all going to make a million bucks and I found myself that I really just a wrap around some kind of website content. Some of them were more complicated in truly needed to be native a lot of times. It was just pulling in RSS data and and this would explain that natively. So

do you want really games but I need a present help in some aspect and I imagine some use cases would be like if your restaurant your other customers would appreciate the menu loading instantly after the party browser. The first times at the Reno repeat customers. I think Progressive web app can negate the need for many types of these native app rappers. You can get offline support and on Android you can go Notifications Mac OS on so far you can also get notifications a little trickier, but you got a canvas that

you can build in a pond. It looks like a native app and if we can make an app look like a native app and feel like a native app isn't really a native app. And so we're going to do this. We're going to delay their customers. I'm going to we're going to need to match to perceive speed of a native app. And we so we've seen some of the simple things we need to do to make them into Progressive web app to the math. Json manifest service worker but noted really do like these customers when you have more than just three text files. So I propose that we can use rails default components to build. He's

fast web sites. We can sprinkle stimulus on the front end for interactivity. We can use action cable for Ativan communication between the app and the front end we can use after job to the little or large bits of work in the background and we can use Russian doll cashing everywhere that the background HTML rendering can be reused every time a page loads. So nothing fancy just vanilla trails. And I put together demo and it's based off. This Packer news Progressive web apps West vacation. And this thing was built like I said entirely from

rails and thought by combining all these components and these techniques and you know, what the standard way that we read them all these up by post game with able to produce a web site that scored a 100 on Google's Lighthouse test while being deployed in production and with the same time being a fairly interactive Progressive web app So I can use Progressive web app the data is going to load in the background and the pages that people get on their browsers are everywhere. Their phones are their desktop. They're going to look really quickly and in the updated in the as

the API in the background is refreshed. So I got the source code on GitHub. You can look at it wasn't able to clean up as much as I like. So forgive me on that, but it's all available. You can kind of get an idea for how you might structure nap like this. if I want to dig into those details one thing that comes back for my time as an iOS Developer is that there's one theme that we always talked about developing iOS Just make sure their apps are native apps are really interactive do in iOS or Android world every iPad the main thread which is kind of but everything's running in and then for

those apps that load of data over the network. There was a rule of thumb that you never wanted to block the main thread, which means you didn't want to pause the app some how to load the data. You want two things to feel very smooth and I think our web apps can adopt this Rule and I can do it really well and especially for going to compete with these mobile apps. Hardest rappers are on websites. So we have to remember that native apps are using the same body cell networks and if we can put on the air of being fast while donating something very quickly and inlaid at

aphelion isn't available over websocket connection. We can we can compete really well with these native apps and what they provide. And if this works really well and rails as I'll show you just to reiterate turbo links is going to help by keeping the JavaScript and CSS parsed. So it doesn't need to be rear-ended and loaded every time will the web page refreshes and that means that it really only waiting for just HTML to come over the wire any tasks that might slow down a web page and really can't be like accessing another API we can put those an active job

and then once we get the result we need we just send that over action cable to the front end. The service work is also going to win this case because it can cash those pages that were already visited. There's a technique on that service River Mozilla service workers page where you can load a page from the cash locally send Network request to get a new version and unloading the new page when it arrives which is similar to what turbulence does. So it's another cashing mechanism. So now I present The Hacker News Progressive web app built with rails.

The package is Progressive web app is so I came across it just doing some research one day was in a conversation discussing what kind of stamp a project to make it work on. They wanted to go swimming. It was really interactive and and their two front end framework. There's a whole lot of examples other people have done and angular view. So I look at this and I said why I wonder if I could build something like this in rails. I'd rather be a great personal project and especially since it's using some you cutting edge browser Technologies. A

video of The Hacker News Progressive web app is it supposed to have something to build on top of the idea of this to do in BC project? Where if you come up with a specification that is pretty technically complicated but it's standard then you can you can have many people build their own invitations for this specification and you can see how you can use different tools to solve the same problems. And this was what I want to do is prove that rail could perform just as well as any front-end framework and building a really fast and interactive website. So this was a good Benchmark

and this was the result of it. This is very this is at my website hn pwa. John Bailey. CO, it's using this Bulma framework is a CSS theme and it's currently running real sticks and adjusted pulling data from The Hacker News API, and then again, it's score is really well because we're doing a lot of the techniques that are recommended Are using rounds the cashing where it's served over passenger through nginx all this data of the assets cast and music and everything. So it's pretty well. There's another test of The Hacker News Progressive web apps back once you to test again, which is over

spot e3d connections is it called the Emerging Markets mobile time does a really slow 3-g connection over on a cell phone. And again, it does really well in order to make this Interactive. The day that it comes from comes into this app. Is this Hacker News API. There's a specification I get help for this to there are 5 and points that we pull the data from and base of your point of bunch of different items in a bunch of different categories and then loading the details for those items and displaying them in a nice format the

two models when I'm is an item which is kind of what everything comes in his job stories polls comments. Everything is an item and it has all the display of information. We were really care about such as the title and attacks associated with it the author any child-parent relationships when you talk about comments and then there's a user model that has a username the person who commented or I can do things are in Anthem by Rappin with you till the very simple data model. And what I did was read jiggered it a little bit to work better with how we're going to design is

real. So everything that comes into the app is an item and gets an a record as an item. And then there are five different categories that are sort of sub or Associated records with these so something and item could be both a new item and a top item depending on how it works in the system or could be in top item in the show item so that it's a every item could be part of one of these categories which is why they're separate models. So top stories of a corresponding top item and new stories have a corresponding new item all the way down the line. One

thing that those records with parent records have is they also keep track of the location where things come in the list. So each of those categories, when hit the endpoint you just get the IDS in an order and you want to keep that order in order to match with the specification wants so that's another reason for having this separate category relating to an item. This allows us to move the items as they change in position depending on how they voted on and how they appear when they get cycled out of The Hacker News. I'll wait for you and then have a parent-child

relationship, especially in regards to Commons. So if you have it their story is usually the parents item and end it will have many comments below it and those comments can have comments and you can kind of keep going down all the way. I'm so there's all these items have a parent and a child relationship associate with them. And then the the web page itself, they say it's five different top feeds that we had to match. There's a slash top which is all the top stories that goes the top stories. API and the new stories goes to new

stories egg guide all the way down and eat one of these is going to be loaded in an active job in the background. We're not going to do any of the API loading and any other controllers because we don't want the page to fuel flow when they load it for the first time. So as an example of the top page will go to the top stories endpoint and I will get back up to five hundred different IDs all in order from 0 to 499. And then after that we need to make 500 distinct request to The Hacker News API to get the details

associated with each of these IDs. There's no way to get them all in one big batch, which is another reason why I put in his in background Johnson's great because if one of these jobs filled it can be restarted if you set it up with something like sidekick or some other service that will manage our back on John's. And then eat one of those items we start a second job that will fetch all the details and I think I like you and I talked about before I'm trying not to block the main thread.

If you imagine trying to load all the top items even it was just 32, but on that one controller request, you know, how many seconds probably be a couple minutes to load everything in and then display in HTML page. So by putting things that should be in the background in the background and then getting the eventual send the data to the front end. We can actually get a lot better performance and Delight our customers. So this is the active job. It's real straightforward as it is an HTTP get to the API Json and it's

an array of items and it just goes one by one with the IDS and their location and its bonds sub jobs that will actually get the information and then there's a little mechanism because that number that we get back up top items isn't always the same. We destroy the items that we are no longer part of the Json API. Then in order to get each of the items themselves these all come in a low top item job which gets the details of the item stores that result in a record and then also creates or updates the

existing pipe item that refers back to the item. We haven't updated location if that's the case. One of the great things about this too is eventually put the things into action items into action table and some of the front end. There's going to be some cash in that happened in the background job so that when people go and visit the front page just regular browser request they will there's no need to rear under all those items are already in our cash of HTML items for the load new items to load show items alone after items and

the low job items. And so this is the code I cut out a little bit of it around the pocket in the item, but we're going we're going to the API getting the data back. Jason feed to get stuck into an active record model for the item and Associated top item and then we just push those changes over action cable to have whoever is listening and the rendering there. In the message that we send is it like I'm going to render HTML and then also store that data in the cash when so it's used elsewhere. The one

great thing about this setup is that everything is rendered and server-side and HTML. There's no need for any formatting on the front end and we're aggressively using the Russian doll caching strategies. So even though theoretically there's a bunch of any plus one queries in here because we're doing a lot of the cashing with that doesn't affect the performance of the page render. So here's the top news controller in this pattern repeats for all the other five categories, but we got the same. We got a page. That's his past as a parameter so

we can do some pagination the page starts at 0 we load 32 items for every page and that we've seen we get the top item that was most recently updated that we use for cashing on the front end and I'm a load the items and then on the show HTML file here. We're just doing cashing on the news list the top item and the page so that each page has its own specific cash and there's no duplicates problem like that and then We're slicing them into each of the top items and rendering those and then each of those top items itself is cached and it drops in a little metadata that is used later by stimulants

in order to set up the action cable that data location field is use there and then we were just render the item because so many things can use the item. We're reusing that item I all throughout the the app And then the item itself I edited it for brevity. But we again have another data item id metadata that were used by stimulus when it's getting results back Mac and cable and independent of HTML. And then again this is item is cash to so that's three layers of

cashing and since were pre-rendering a lot of these Parcels in the background on API patches. We're going to get really solid performance on this. Again to aggressively cashing the content allows us to keep true to our don't block the main thread theme Men cast and love these Pages really quickly without many database queries. And if we're going to make everything feel faster, even though we know there's a lot of work happen in the background. We wanted to feel really fast. Refreshing data that happens in real time is going to be sent over the web socket connection over action cable,

and I thought it was our update in the background. We just broadcast them to anyone is listening. And on each page I will go back to it. But there are a bunch of different controllers demille's controllers are to manage those action cable connections. The stimulus controller will subscribe to either there's actually to connect cable listening to reach of this item one for the individual item if it updates because it could update Elsewhere for other categories. And then since it's on this one page will just refresh it with the most recent data. And then also we're going

to listen for updates on the locations where they are. So the top location index0 we listening for changes to that and index one all the way down to the end. So because it will happen in the background and person is just looking at their page and it's changing a real time. It does feel very interactive. Even though we know that it's really just sending HTML over websocket connection. How do I get to the Simmons controllers are going to manage connecting to the traction cable channels? I've got some annotations on this page is I take out of the show

the top show from previous slide, but we got an item location controllers emails controller that is going to use the data location attribute on each of the top items in our page and then In the controller itself is the first half of the item locations to move controller is going to take the channel name data attribute, which was over here in the section. And then started Channel over action cable based on that that field we get it. They said it was going to use the setup that I have right here is used to handle the case where a

patient either reloaded or a page is visiting from another page and turbo script didn't reload the whole JavaScript. All the doctor Kobe have so there two different ways that you can get this thing connected in this this setup handles both of those situations and then on the bottom in the received part of this channel when a message is received. Is it going to replace the existing HDMI on the page with a brand-new HTML? Imagine if you wanted it at some fancy animations and things you could put that in the CSS, but just kind of show you what that you can just replace HDMI without any

of that. This is the second half of the steam controller. So here again in the Kinect call for the controller. It will attempt to listen on to the action cable connection in Leviticus. If it's set up it will subscribe and if it hasn't been setup and it just kind of doesn't happen and then the initialization The initialize call for the controller gear takes care of prison the channel. Animal Control is disconnected like at the page refreshes. We moved to another page. This is going to send me unfollow command to the action table

action cable channel and will actually stop streaming anything to this page won't send any extraneous Tatum. And then finally here we've got to listen function of the bottom. This is the one where it goes through all the data location and get to the location of the page were concerned about. So if it were on the first page ob03 31, if we're on the second page 32 through 63, etc, etc. Put them into a little Ray and then call the follow command on the channel and send those

locations and then on the accent tables to hide it will when the follow command is called it takes the locations that are passed to it. And set up a stream for each one of those locations and when active job is loading the data, it will send it on whatever the top item Channel and is related to this and then unfollow will stop all these dreams. That's how we build a really interactive website and we got is going to make this a pwa to satisfy the needs at this is an app. I

think there's any way you can probably do this. This is one way that I found work pretty well. I think it works because I want to be able to cash all the way Packer assets. So I wanted to be able to use E R B & B asset helpers in order to put those URLs in there and in any images two of those things would come in there. And so what happens is I a single-purpose controller. And I said it from routes for the service worker in the Manifest file in my real Tap and then I had to the templates that I needed and in those temples and I can use my 10:30 RV I can put in the end of the route that I need

and then simply aren't supposed to be cashed. These have to become what we want these to be fresh every time that the browser ask for them. I don't think it made sense to put them in the other asset pipeline locations that with those are some of the reasons they were put in their own controller do on the route to file. I got three different Route 1 for the service worker one for the Manifest and one for the offline file. And they all go to the service worker controller the service worker control. In this case. It doesn't do a whole lot. The only one thing it needed was

the remove the protection for tree for the service worker. I'm at them and do it because it's a Javascript file. Google Chrome wasn't happy. And then this is my manifest. Jason. Of your B file and you'll note that the asset path for the icon means that it can we can use asset pipeline. Do you start your while you were out in the scope we can set those as with our URL helpers. So that's one advantage of them being actual templates in our atras opposed to and coated assets.

Then this is when the service workers to hide. I just had to uninstall cuz that's how it was really need it. But here I can cash the assets from webpack without having to hand code whatever that Shaw is at the end. So this saves a lot of work and then whatever files you can also put in here that you need in this situation. I just wanted the JavaScript CSS on the offline file so that when it's not your browser. Online everything looks really nice and crisp. So that's it. You can build a really fast rap that

Rivals any front end JavaScript again. We're leveraging turbo thinks. It's really only sending HTML over-the-wire after that first load and this really isn't different from any other app any other web app that has to load all of its resources in and it would only talk to a Json API Json. So we're going to get the same performance than any of those front-end framework I have The Russian doll cashing is going to mean that each request won't need to be rear-ended every time what will save a lot of database calls by reusing

existing partials active jobs going to do tremendous amount of work by loading several hundreds of items at 1 and then when it's ready passing that dated back to the front end out of band overaction cable, so act like it when I act of y'all are going to work really well together to keep the perceived main thread open so that this page load feels very snapping and then finally stimulus will add the interactivity so that everything that doesn't need a service. I'd request fueled like it's happening on the browser side. So

that's it. I hope you have some ideas how you can speed up your own rails application. Even if you're not building Progressive web app. I think the principal is not blocking. The main thread is a good idea to keep in mind no matter what kind of experience are giving to your customer even replace an Android out now, especially since they have to Portrait notifications and they're getting first party support on Android. If not now in the next release and that's actually pretty good because of the turbulence Android rappers kind of in a state of limbo. So if you're looking to change

something from that you could use a progressive web app and not have to worry about it a native Android app, depending on what you need. And then even if you don't need no vacations, you could look into replacing a native iOS client to sew Thank you very much. You're now able to cut through the front end frog front end for fog and keep it rails when building Progressive web app. Thank you.

Cackle comments for the website

Buy this talk

Access to the talk “RailsConf 2019 - Yes, Rails does support Progressive Web Apps by John Beatty”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “RailsConf 2019”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
170
app store, apps, development, google play, mobile, soft

Similar talks

Danielle Gordon
Software Engineer at Nift
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Ben Bleything
Developer Advocate at Google
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Christopher Sexton
VP Engineering at Radius Networks
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “RailsConf 2019 - Yes, Rails does support Progressive Web Apps by John Beatty”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
616 conferences
25145 speakers
9271 hours of content