 Hi guys, it's very good to meet everyone this evening, my name is Baok and I'm a developer relations program manager on Google, based in Singapore and Thailand. I'm taking over the Thailand and Malaysia market, so I am a team mate right back at Google, I need to take care of some of the developers. So if you have any questions, feel free to come to me, this is big time. So this week today, just before I start, I just want to destroy all the gigalits, this bag has a couple of slides to record, I'm sure you guys are basically used to seeing all the slides. So this evening I just want to talk about a short story of progression, and I just want to walk you through the experience of mine when I come, how I come about formulating this talk. So what happened was that last week I had to deliver a session in Bangkok, in one of the events called IREX Center 2016 Bangkok, and there was like, and two weeks before the event, I really don't know what to talk about. I know it is a web session, but I really don't know, I have no idea what, so am I going to be talking about progressive web apps alone, maybe, then there's also Firebase for web. So if you guys haven't seen Firebase, just go to www.ibisoclub.com, it's a new product we're going to go out this year, it's amazing. There's a lot of tools you can basically use to be able to synchronize apps by writing chat and things like that, to synchronize across devices in real time. So I was thinking, we should talk about Firebase as well, since it's a new product, no one knows about it, so maybe I should talk about it. I think this is a material design. Should I talk about material design for web? Now I'm starting to get really confused, there's so many things to talk about. And then last year is in year two, we just launched. And when I think of this one, I say, holy shit, this is getting over too much, my head is going haywire. So what I did, and I was at the airport actually, waiting for my flight back up. So what I did was stand in there for inspiration, I just wanted to pull out my phone and start loading an event agenda, just to get some inspiration from the other speakers. And this happens. I get the really cute little answer on my screen, my phone, and when I get this one, I say, holy shit, I'm really screwed. I really have no inspiration, I don't know what to talk about. But then I found that I was connected because there's the airport of Wi-Fi. And that's when I realized the problem with the situation which I called Wi-Fi. So there's Wi-Fi, there's off-line, and there's Wi-Fi. Anyone in the community of Wi-Fi? Because when I asked anyone in the community of Wi-Fi in Bangkok, the one who shakes their head, so I assumed they were always connected, but it seems like general structure is better than this program. So recently I got a moment and I said, oh, okay, I suddenly had an idea. And the idea is that maybe I should talk about my individual journey in developing an app, a demo app for the event. There was some line that signified basic web data and also uses the material design as my components. That's just a pretty good talk. I think I'm getting down to the right track here. So the first thing I did, and being very lazy, and it seems that everything that I put down is a calculation for some degree of easy, I don't know why. So I started, and this is really awesome, here I'm finding a single app for these five single apps. Let's forget about that one. So I started doing this. I started doing some research and I said, hey, maybe Angular allows me to build more apps really easy. So I started doing it and Angular 2 does allow me to build more apps really easy because they have this Angular 2 kit. So just before I go on, anyone use Angular 2 before? Oh, nice. I'm so happy. Anyone use Angular 2 before? Okay. At least you guys don't know that I'm actually talking shit. So Angular 2 kit. When I saw this, I was like, awesome, use this. I only got like 12 hours to complete my demo. Actually, we're going to do this. So I started downloading and I started installing. Anyway, this is me. Very happy about that. Then we started downloading and I saw this. I said, oh my god. There's no way I'm going to complete my demo. And the reason behind it is that we were developers. We used a lot of open source tools. We used a lot of NPM to make up packages. So somehow my clients on my laptop, some dependencies actually complicated. So, oh well, this is not good. I'm really getting nervous. I'm seriously getting nervous. So I said to keep calm and carry on. And I started reviewing the requirements for my demo. I'm really excited about the Angular 2. I want to synchronize in Firebase, complete this demo, and it will cool down. These other features, we can do this. We can do this. All right, let's go on. So the first thing I do was I go to Firebase.com and I set up. And if you guys want to think of all the API keys to it right now, it's pretty easy to use. But it's because of this one. Before I actually close it down. But yeah, the first thing I did was I go to Firebase.com and I start setting up my Firebase database. And the Firebase database is very similar to, at least a little bit here, I think. I don't use a little bit here. So it's a no-SQL cloud database as well. And everything you find here is basically in JSON format. So very good thing I just put, just pumped in a couple of demo data. And then I've got this done. I just put it back. And then I'm going to copy all of this. And then just put it into my no-panel server. And the next thing I want to do is now install Angular 2. So Angular 2 has to be also two of Angular and CLI. And then it uses NPM as well. So install it using NPM. And then I started to create a new project called and I ran this from my NGDU, I open up this thing. And then it goes on as a single structure. And NG server. And that's the nerve-wrecking moment. Because it goes well. I got this. It has a local server. You can put it up after you run in JSON. And when I saw this, I was very happy. So let's move on. So then I installed the Angular 5 library, which announced me to talk to Firebase back-end through Angular 2 interface and handle the data bindings and all that. So I didn't do NPM install Angular 2 without Firebase desktop save. Just with NPM package. And then I started configuring it up. So if you've known with Angular 2 before on an official TypeScript, Angular 2 uses TypeScript. So don't worry about the thing that's too much, but just to show that, you know, all of it was a new part of Firebase Writer. And I'm coming out with details. So there's another chance for you to take out all the keys. I can use my database. Then after that, I set up in the main component. And the main component is sort of like the run function of the app. So what I did was that I would say, you know, declare available accessions, which is of type Firebase is observable. And that actually handles all the data binding. And then in the constructor, I just call here of the database of this accessions and grabs all the data out of Firebase. And that's it. But you leave it as that. Anytime when there's new data in Firebase, in the Firebase database, that's the wrong cluster, Firebase database, Firebase actually push it out to your client. You don't have to find a more code. Right? You have to make it super nice. So in this building, all the data is also very easy. Angular also has all of these characters, like NG4, so you can read everything systems and find the data binding. This is how you're going to be very comfortable in this programming syntax. So what I did was I just looped in every session and just put it on the client. Just pass it on. So we're going to end up at this stage. It works. So that's how, just to assure that's how the UI looks like when you're running the local web server to test your Angular app. And basically that's getting the data from Firebase and putting that in. I'm not sure they asked from here with the mobile view in Chrome the responsive design. Awesome. Read your Chrome stickers before you decide to change the code or you can double-click code. But yeah, so that's, there's not a lot of reviews. There's not a lot of reviews about responsive design as well. So back to this stage. Awesome. Can we do, is this really? This is a little good, right? We pass this to your boss and boss will say, that's fine, thank you for the service. So this is a little good and we can let me do that. We are developers. We have the power to do that. So I didn't say I'm making pretty, right? And that's when the change design comes in. So change design is just a design framework just for you to actually set up that line so you can think about how you want to structure your UI. So you work nicely across your entire system. And the nice thing about Angular is that we have Angular material, which is another library. And off I went, but yeah, that's me again. And after I went to kind of chat, you'll just notice my son has run at NPM install and did some material. And the nice thing about this line is that it's modularized. So you know what you do with CSS frameworks? You kind of download the entire CSS and then you pick what you want. But for Angular material, you can actually pick exactly what components you want to download those only. So you kind of don't drop your application. So I just downloaded a couple of things in the card, calls, things like that. And once you download it in your HTML, you can start using it because it has all those HTML directives. So I did a sitenab, which is the menu that comes in from the left-hand side. I also do it by the top. And then I mistake everything in card form. So when I do this, everything goes well and now it looks like this. This is so much better. At least I feel good about myself. Oh, yeah. So also when I get to this stage, I was thinking, okay, maybe this is it. But I have a reminder. I need to make it offline labor. And we can definitely do better. Let's push the boundary a little bit more. We can do better. So I can't remember this. Client labor is burn this. And make it this. Even though it's live file offline also. So what happens here? I need to make this offline worker burn. So you need to do this. Why does that really structure our app a little bit? Think about how we want to make this online. One concept that you can leverage is the app shell concept. The app shell concept is very simple. Just think about all the files you need for your web app to run offline. So the JavaScript, the media, HTML, your CSS, all the stuff. Just basically think about them. And then anything else that lowers is the content. Is the value content. So the first step is to cache all of this. It's like we're going to cache all of this. So when browser launches without Wi-Fi, at least the browser will see and get it to cache. So that's the app shell concept. And to cache all of this, we actually need service worker. Where's work with service workers before? One, two, three. So service worker is a new feature. Some relatively new. I will say it's been around for a while. Actually, 2014, it started. There was some changes in all the feature browsers, except Safari. But the last thing is that Safari actually tweeted. I think in the last two weeks, they are still looking at this. So that's good news. And I'll talk a little bit about Safari later on. It's on video. So the most important part is that it actually runs in the background. It's a JavaScript file that runs in the background, even if your app is not open. And what you can do is that you use service worker to intercept every single HTTP request. And the nice thing about this is to imagine what we can do in total caching. Every request that goes to the server, you use service worker to listen to the response from the server. And then you grab that file, whatever content that's returned by the server, and put it into the cache of the browser. So, browser these days have exe, cache storage, storage, and so on and so forth. So that's what we're going to do. We're going to take two service worker to do that. And again, me being lazy, I started looking for tools. And that's the beauty of web development. There are tons of tools out there. So, I came across this. And, yeah, that's me again. Up and down, very emotional, quite. And then I came across this tool, known as the relash pre-cache. All right. What this tool does is that it's really cool. It actually provides a command line tool that also generates the service worker JavaScript. So you don't have to do anything. And after you generate the JavaScript, all you have to do is just, in the JavaScript itself, you just put in all the file names of the things that you want to cache. And that's it. And then, when you need to follow up, these are the steps. So, you solve it, and then you use GAL to generate the service worker of GAS. And then we'll go before. For those of you who haven't gone before, it's actually something very similar to a few tools that also generates tasks. It's just a secure task. So, you see, you use GAL to generate the service worker of GAS. And that's how it's being done. So it's generating, generating, generating, generating. And then you, in your HTML, in the HTML, you put in the script button. You register it, right? You register with the browser that this is the service worker script. And then, if everything works, everything, whatsoever, is done actually. You do it in the city files. You eventually release this. So, I just want to go on my slide and show you something. A real-life example. So, I learned my lesson in showing my own demo under a shopping of 9 dollars bills. So, I'm going to show someone else's demo. Thank you. So, what do you have here? And if it fails, it's on my phone. So, what do you have here? It's really an application that was built by the Polymer team. And the Polymer team is an asset of framework from Google as well. And you know what I said? I'm actually offline, right? It's sort of like an online shop that allows me to shop for Google and Legendaries coding. And it's offline. And I still can browse. I still can add to cart. I still need to cart. I'm just going to check out and then I can go back and look at another section. And all these things are available even offline. So, you can really experience if you give to your users. And when you come online, they can resume whatever experience they're back to. And one really interesting use case that was being showcased in the PWA Summit app. So, then last week was that a country in South Africa built a PWA app that allows them to have offline checkout workflow. So, in the soft line, if you do checkout, the entry calls the company to complete the checkout. Which is really, really cool. So, imagine you're not using using customers, you know, whatever, offline, live-fire, online. You're just going to be rid of by yourself. So, yeah, you're going to be able to see all the files in that app. So, when you get into offline service worker, we'll just pull out all the files from the cache. So, that's the demo. And I'll just correct my side. And again. So, that's what we have done, right? Progressively, we send out the database. We send the list here. We send the file to. We generate the service worker.js. We generate the service worker.js. We register it. And we end up with a web app offline. So, that's just a pretty fun tour of what we have discussed today. But then we can actually do way more. There are more things that we can do. We can add a web manifest file. So, if you have a mobile phone, and then you can actually add the web app to your home screen. And then when it launches, especially offline, you can also use the web push notification at the end. And also, the file is not necessary to push notifications out to your users. So, it's really, really cool. And right now, the developers are getting power with all those amazing tools. So, I just want to take a step back. When I talk about policy web app, they cannot say that policy web app is a web application that installs a mobile phone that gives you the native app experience. But essentially more than that, it's actually a concept that you progressively enhance the user experience. So, early on when I was saying that Safari doesn't support service workers. So, obviously, you can't have your work offline. But all those concepts that you've developed early on became responsive or basically you know, what else did you learn? But all those things that you can do in order to improve the user experience, thinking about this of all the browsers, latest features, you're actually doing the user a great favor, because you're progressively enhancing the user experience. So, it's really about the concept. So, not so much, even if Safari didn't support it, it will still benefit from whatever you've done to your web app. So, if you want to learn more, there's a beauty page, right? And this again happened like two years ago, I understand. There's a lot of amazing talks. There's one talk about streaming HTML content, which is sort of like a beauty jet around a browser user. So, instead of loading one HTML page through HTTP, what it allows you to do is that the first slide that is being retrieved from the server to the browser and immediately can display the content. So, there's a talk about that as well. So, check that out. It's really cool. And I think that's it. Do we have time for questions? We have five minutes for questions. Please don't worry. So, we did. I'll be sourcing. You can do upload your HTML, JavaScript, CSS, fonts and other resources. Yeah. Look, how long do we take to load your web app? For this one? Yes. This one it picks rather fast. Because they're very little data. But when you cache it, right? It terms of where you saw. Is it less than one minute? Maybe less than a second. Yeah. It's, I mean, just in the context of this demo, it's just because they have very little data. Interesting. Your question is actually very interesting. So, there's a variation of the playlist. There's really a comparison. Like, if you're loading from cache, there's really a comparison between loading from cache versus a native app. And there's really a comparable and sometimes between the native app when you first load it. How about initial loading? Initial loading depends on your app, actually. So, for yours? Yours. For me, it's very good. Just because it's the end result, it feels strong. But this is the best game already, right? There's something about how you're going to optimize it. And then you can start really reducing it. And that's one measure for PWA. It's the time to first load it. So, just reduce it to whatever you do that satisfies and then they're visiting you. Hopefully, you'll make your quality standards. Any other questions? Will the web replace native apps? I hope so. Just because it will definitely outlive them. It will definitely outlive them. Yeah, precisely. That's the part. Does anybody remember Sydney? You. Oh, we have the actual camera here, actually. Yeah, so, I would say the web has been around longer than than native apps. Each has its own, obviously, its own strength. But the web has its reach, right? So, for example, if I want to if I want you to use my app if I'm on the web, I send you a link. You load it, you edit it on Twitter, that's it. You call the user. But if you want, if you're on a native app, you need to download the name, you need to build a store, search for the app, download, and wait for the app to download the name of the store. So, for countries, it's very expensive and it's a lot to ask users. Like, sometimes, you know, I'd say the hand map could be $10, and just before the the user app, they're already paying for it. So, that's it. So, in this case, I mean, PWA can make more sense for data-sending countries. Any other questions? Yeah. Do you notice a performance difference between using Safari and Facebook? Ugh. Ha ha ha ha. Ha ha ha ha. Ha ha ha ha. Ha ha ha ha. No, no, man. Real time offline job. Okay. I'm interested to know how do you host on the Firebase hosting, is it something like it pulls from a GIP GIP report? Okay, so it's basically you just deploy. It's a deployment model. So, it doesn't have a version name. So, it doesn't have version name like Github. It's a very lightweight hosting solution. I'm sorry. Do you have any other questions? You talked about using a session after the user gets their questions back. How do you deal with potential conflicts in data? Do you think the prices have changed or the stock has changed as long as the users are offline? Yeah, so one of the strategies is timestamp. Always timestamp everything that you actually cash in. And then when you kind of go online when you pass the data to the server you compare the timestamp. It takes a little bit more work. The good thing about Firebase is it actually does that automatically from one of the Firebase SDK, the JavaScript SDK in the query. Every data that you save I then show right to Firebase and show read. But when you run data with Firebase and it goes online it should understand it and cash in. When you go online you can compare the timestamp. Do we have time? What happens to user's session on that case? Ah, good question. You have to handle it yourself. I think that's it. Thank you for being such awesome. That's one of the things. So we have this program and this presser club. There is this program called Express. It's a really nice program for people that are really expertise around the web. If you want to know more we charge some money. It's in charge of the program in Singapore. If you are here to visit for me I think you are part of it. Alright, thanks a lot. Thank you.