PWAs vs Native

so let me take you back 10 years and steve job jobs kicked off the smartphone revolution when he introduced the iphone and on the iphone there was kind of a mobile browser but it was a pretty poor experience of going online so a year later he kicked off the app store and you've got the native apps and this is a really good way of getting online and interacting with online content and i'm sure you've all used loads of apps over the last 10 years 

maybe the Gmail app for sending emails maybe use Twitter for sending tweets Snapchat sending delightful pictures of yourself and then there's plenty of you i'm sure who wasted many weeks and months uh playing the king of apps flappy birds but since uh since 2008 the mobile web has increased dramatically when you're out and about

i'm sure that many of you are looking at URLs in your chrome browser but native apps have a huge benefit in loads of areas so first of all we're going to talk about performance so native apps are fast and quick to respond when you first get out your mobile phone you've got a really nice icon that you can click on straight away as soon as you click on that you get a really nice scaffolded uh app that comes up let's say you're going to Facebook it's kind of a nice blue look and you've got a Facebook icon you've probably got a load of cash content so when i get my twitter app up i've got a load of tweets there

so i see those straight away there's no going into chrome and trying to find a url and trying to load up a page they also have a smooth consistent self-contained ui so the native app looks really good on your phone you kind of enjoy using it it kind of feels you know exactly where you are and the killer piece for a native app is it works consistently well offline so whether you should be checking your emails on the tube that's another matter but you can check your emails on the tube they've been synced during the day you can then sit back and reply to one of those emails when you become a come above ground off it goes it all works well if you try and do that with a mob with a normal web app it doesn't work but why aren't native apps everywhere why aren't we using native apps for everything we do if we've got all these benefits anyone developing native apps here we got one person here how is it this is cool cool great okay so i'm not a native app developer uh i've just heard a few stories that uh it can be painful so there's different languages between android and ios

so you've got java maybe you're funky in hipster and use kotlin um otherwise you're using swift you can use react native but you still have to change the way you develop a whole load of things so there's a different way of doing css even within react native you have to do different stuff depending on the platform you're on and even then you can have to develop differently for the web so you're already some developer developing for three different platforms it's expensive to develop um expense is very subjective so if your business depends on an app you really need to develop that app so you need to run three teams and that's really part of how your business works but if you're a small startup or you're trying to do an app on the side of a bigger business then this can be incredibly expensive to have sort of three different platforms to support so last year we introduced an iphone app called monogram and it's completely different from our main business and we had a whole separate team to do that it was kind of an experiment into how the social world worked and whether we could make a social app work uh it was just incredibly expensive to keep a separate team just purely focused on what was an experiment and i'm sure there's lots of startups and companies out there which have really struggled to support native apps and all the different platforms and then there's also the application process

so i think this has got a lot better maybe 10 years ago it's pretty painful but there's still a process to get into the app store there's a different one to get into android and then even the release process we've just seen if you want to release stuff on the web it's out there it goes to your customers straight away with a native app you have to rely on your customers that they're constantly updating their phones i don't know much about that much about native app doing there's a really good video from kate huston at the lead dev so if you're interested these slides will go around you can go and have a look at that by the way this is progressive web apps so obviously progressive web apps to the rescue and this is javascript roundabout right so one of the best things about progressive web apps is it uses web standard technology he uses javascript thank god i talked about javascript javascript meetup it's got most of the benefits of native apps including performance again crowbar performance stuff in there um right once work everywhere so everyone's hopefully building responsive websites fingers crossed it's a little bit some move that aren't but most mostly we're responsive um but you just build it once and hopefully it should work everywhere you have one team maybe you need a few tweaks depending on for mobile and uh yeah you still have to test it on ieee um so ie89 but let's zoom on that for a moment but what does progressive mean

so everyone in the javascript world's heard of progressive enhancement hopefully from back in the days so in the old days we just have static html pages and then javascript came around and we wanted to enhance our pages so this design pattern there was the javascript can make the app faster and feel better but if you didn't run javascript it would still work really well and it's the kind of same thing with progressive enhancement there's a whole bunch of features that you can add to your app there's 11 the google list and each of these should improve the experience for the customer

but if their platform doesn't have one of those features it shouldn't break your app so again this progressive web app is a case of extra technologies that can add to the performance of your app with more of the features you see the benefits across desktop and web i kind of always keep comparing against native apps here but a lot of these performances are also on the website so if you have a website you don't really care so much about your mobile customers a lot of these technologies can really improve the performance of your websites uh and here's the link so if you go there there's a whole bunch of 11 really cool things that google lists i'm going to talk about a couple of those uh in a little example i've got you can go there some of them are like you need https on your site hopefully most important websites got https there's a bunch of stuff ranging from that through to your website should work offline cool

so i'm going to give you an example that's kind of enough like top level talking we might even show you some javascript as well and i kind of always wanted to build a native app but it felt like a huge amount of effort to learn the process and learn the different languages and learn the structure and get the app out into the app store but i have built some side projects some single page apps and the other week i was like well i've kind of always wanted to try and get one of these to maybe be an app how how can it be so i read a few blogs about progressive web apps and there's some terms there they didn't understand but you still sit there for a day and bang your head against the wall and eventually these things kind of play out and it was a lot of the same technologies i use in my day-to-day work so it felt quite comfortable now the type of side project that works really well is a single page app because a bit like a native app you've got kind of a structure on your page and you're updating some of the content through some api calls off in the background this is my blog i apologize for the design i'm not an amazing designer there's lots of white space and some green stuff around and just about that technology and everyone's using react but this is handlebars and jquery that old school um it's isomorphic which means that you get the initial render of the page from the server it's fully rendered so we've got handbars rendering on the server side and yeah the single page app

so we're going to talk a little bit more about some of the key features of a progressive web app and why just having a few endpoints really helps sort of do the testing for that so there's three steps let's see if there's any javascript in the first step json is json javascript let's say yes um first of all manifest.json this is just some config if you can just about read that it's basically got a name for my app it's got a link to an icon i want to appear on the home page of the phone and it's got some theme colors so this is back to that ui do you want a kind of consistent theme color to your app when it opens up on your phone oh that's step one step two no javascript here but we want to link to the manifest.json in the head of your html so it's just a link with a manifest tag there the other part that you put in the head of the html is a theme color

so you saw my app that was kind of white with a bunch of green there this is for anyone who knows the hex that's kind of green and this is a screenshot from my app on my phone and you can see that that top bar is already that green color which it fits in with the theme of my app cool step three service worker i'd heard loads about service workers and kind of got in my head that they were really complicated and there's a load of javascript with a bunch of promises so if you know your promises uh service workers are kind of not too bad let's jump the script yeah javascript roundabout here you proxy server good so the service worker sits between the browser and the network it's a proxy server and there's a bunch of javascript logic and you can manage your cache programmatically basically you get access to any of the requests that come in from the front end and you can do what you want with it i'm going to go through a little example of just a very simple one that i did for my app um matt already talked a little bit about varnish and setting headers and stuff some of that sort of vco language and the headers can be a little obtuse and this is a more programmatic way of managing that cache in the browser uh cloudfront are actually gonna allow service workers to sit on the edge so if anyone's dealt with vcl varnish config language this is going to be a way of using javascript in your cdn cool it's a progressive web apps first first of all we want to check that our app or that our client can can use service workers so this is just my main.js which is my main javascript file for my app and just check that i can use service workers and then register my service worker and i've got this service worker file which is sat in the root of my directory second bit we've got a cache name and then a bunch of files that i want to cache so the service worker is this proxy server and all i want to do is have a whole list of files and assets i want to cache and sit there the service worker will store that and it means that when my app's offline i can hopefully use this cache to serve that content to my customers as you can see my app's not super complicated there's an api which i can get all my posts from it's worth noting you can you don't have to be limited to routes that are in your domain so here i'm getting some google api stuff some fonts i've got a couple other javascript files there so that's the first step second step you get my service worker there's an event listed for installing and i want to do some logic when it starts installing this is the key line cache to add all the files to cache it's that full list of files i had before i try and add them to my cache my service worker goes through that whole loop goes off to the network fetches content for every single one of those routes and that backs into my cache promises so you've got an e wait until so this is kind of promised it's waiting till all those files are added into the cache when that's finished it says my server's working service worker is installed ready to go after it's installed the next thing i want to do is if someone in the app requests anything i want to interrogate that request and then i can do what i want with the cache this is a very very simple example that on any fetch request i go through my caches caches.match and i check to see if the request that's come from my server is in my cache if i do have a response i'm just going to send that straight back so if you're talking about performance if there is something in my class there i'm going to send that straight back to the client and my page is going to render immediately otherwise i'm going to send off the request out to the network and hopefully it's going to come back to me this is kind of one caching strategy just a couple of lists of other things you can do you could return the cache immediately and refresh that cache in the background maybe cool off to the network first but if your network's really slow let's say your user is on a 3g network maybe you call off and if nothing's come back within one or two seconds you can return whatever's in the cache you can do a whole lot of logic in here so if you know that your customers at certain points in the journey and they will need some other assets further on you can call off in the service worker and go and get some images let's say they're looking through an album of photos you're going to go and pre-fetch some of the photos in the next page as you've got some pagination you can go and get some content from the next step you can even sort of build up the dom or build up some html in the service worker so that the next step in the app is is really quick for the customer cool almost native i'm just going to show you some screenshots here so this is what happens when those three changes so i did the manifest.json added the little content in the top of the page and i've added the service worker this is what you get so i open my app up in my chrome thing my chrome thing my chrome browser and a little button pops up at the bottom so it's a really simple way of allowing your app to get added to the home screen of your phone so instead of going to an app um into the app store and installing it as soon as you open up my web page you get this little button uh i built an icon you could probably build a better icon but you can see there on the right the blog nice little green green thing uh there's a couple of other icons there there's a hacking news one there which is a progressive web app someone's built a hacking news with vue.js the rest of those are all native apps as soon as you click on the blog you get this really nice green screen again with my terrible icon in the middle and the name of my blog there and once that's opened up you get the whole page here the great thing about this is you don't get the url bar at the top so you can see that this screen on the right looks and feels just like you'd installed a native app all we've done is written maybe 30 lines of javascript we have maybe 20 lines of adjacent we can add a couple of things in the html of the head you don't have to go through any app store or any other kind of process to get this onto someone's phone and it works offline and it's fast with a slow network i'm going to carry on with the size we can double check that it works offline live demo is always terrible but it does uh when i'm on my phone i can go read my whole blog i wrote it so hopefully i should remember what it is my mom gets to read it when she's at home and she doesn't have internet connection so she's really happy cool i'm just going to show you a few tools that you can use to help debug the the app i think i get really stuck in my development that i use the same things in the google chrome console it's really cool to know there's other things that are there um i think there's loads of things i'm way off uh learning about the application side there's a whole chunk of stuff on the service workers and you can see a lot of the sort of process and flow of your service worker and exactly what's stored in the cache if you haven't discovered it yet in chrome there's also an audit tab it's a bit like web page test so it does a whole bunch of audits for your app so you can also look at performance here but there's a four schools and one of those requests progressive web app store uh web app score um i'm doing a talk about it so thank god i got 100 out of 100. um there's a there's 11 past audits here you can click on them so if you've got an app you'll probably pass a few of them like if you have https you've already scored one point out of 11. there's a whole bunch of other things there with little tips and links on how to get your app to be progressive uh imagine google they're starting to use more and more that people's websites work well on mobile for their rankings i imagine at some stage in the future something like the score on the progressive web app will be part of their rankings gotchas there's always gotchas one of the two hardest things in computer science so cash and validation naming things and off by one errors caching is hard we get it wrong all the time we get it wrong with murloc there's been outages in the two years that i've been there because we screw up headers and we mess things up caching is hard don't cache customer user data if it shouldn't be cached you really want to give someone else's private data to someone else that's my number one tip for today so if you don't remember anything else don't cache people's data when you shouldn't uh in chrome sometimes you have two tabs open and the service record work is registered with one and you try and refresh and it doesn't refresh the service worker and then you try and change some other stuff and you close all your tabs and you close chrome and you open up again it's still not working and then you realize you've been refreshing the live site not your dev version um but that's just javascript debugging for you but there are some little gotchas with service workers that you kind of need to get used to when you're trying to work with it finally what your app works offline always even on localhost so i've been developing i shut my app down i came in a couple of days later i opened up python simple server it was running on the same host i went to my browser and it refreshed the app that i've been working on three days ago because it's been stored for offline use so this new thing i've been working on uh was sat behind my offline app so you just have to make sure you change your port number and remember that this thing is stored in your cache somewhere or delete it and get rid of it cool so conclusion progressive web apps awesome website and technologies that can be improved used to improve the performance yeah we've got performance in again and feel of your website build wants work everywhere it's javascript yay cool thank you very much