 thank you thank you thank you so as we have the movie night tonight I want to get you warm up I brought a science fiction movie let's take a look at the sort of as soon as we can get him worldwide communication of course hello bill this is Henry who did you say Henry and calling from London gee that's a pleasant surprise how things in your part of the world it's a dark wet morning here I suppose you've been basking in the sun all day and when we wanted you phone in color using digital transmission by pulsecode modulation right into the customers premises well let's have a look at you bill right Henry picture coming up it's good to see you Henry you're certainly looking fit how's Betty Bill she's right here now come over here Betty and say hello to Henry hello Henry long time no see but we can do much more than that library services transmission of documents share prices bank statements let's take a look at the subscribers terminal unit to make a call we take our service card the code will be scanned electronically and establishes the callers identity for charging the call yeah and then some some ship arrives in the harbor or something so yeah this is seriously science fiction movie it's a prediction of the future from the 60s of the postal office I'm sorry I have to can you hear me well okay and what it's really cool about this one is it predicts their future like in a very normal boring manner like not the very shiny you know future prediction by Microsoft and Apple and so on where like we all live in glass houses and have transparent phones without battery and everything and here when you see this like she actually made a mistake right well like in the beginning they talk about the weather and stuff it's a very good prediction and it's also an excerpt of a talk about offline first by Alex Fayaker from the hoodie community who did great talks on a like a meta level it gives very good background on where offline first comes from and it's very good arguments to persuade like decision-makers clients and I said it because my job today is to make you excited about offline first and I hope you get home and take like 15 minutes and give it a try because it's really cool and it's fun and then if you need to persuade them look at the talks by Alex and you will get all the arguments you need I will link them in the in the notes when I upload the slides so hey I'm Gregor as Adam mentioned I'm coming all the way from Zurich and I'm very very grateful you know that you brought me all the way here and I really appreciate all the efforts by Claire and Adam and all the team from Baku and everyone else is involved and they're just giving me the chance to talk today about offline first and hoodie so I am one like one of the people behind the hoodie project so hoodie is not a company really hoodie is an open-source project there is a company also affiliated with it but it's called the neighbor hoodies and yeah I'm very very grateful like this is a very very cool team that we put together some of them are developers and some of them also illustrators like artists communication people and I think we do quite a good job at least like my perspective on not only you know putting efforts towards the technology but also the entire culture about this open-source project we care a lot about this and you're more than welcome if there's anything you want to ask to ping me directly or like ask me after the talk I'm very happy to help you with whatever it is and hoodie so hoodie itself is a server like it's an open-source web server really so it just can serve static assets but above that it also has an API for data storage and user authentication out of the box and it has a plug-in architecture that you can extend with whatever functionality you would need and what is special about it is that if you use hoodies API's your apps will work offline out of the box by default which is why we are so interested in this topic and which finally also brought me here today and I want to dive right in I don't want to do like the high-level stuff I don't want to kind of push you that often I first is super important and you have to go there actually want to show you how easy it is and and how fun and yeah let's dive right in I hope this works so this is like a traditional application that I just built very quickly sorry so it has a restful API like you can see when I make changes I don't really see the video in front of me it's a bit whatever so if you make changes you see on the right that you know like for every change to an account like just a rest HTTP request is being sent and I can like favorite contacts I can edit them and create new contacts I can sign out and sign back in and the data gets persisted and as I sign in the data gets bootstrapped again alright and this is a very very simple application it's also on GitHub so I will link it as well it's what I will take and I will make it offline first now in a minute it only uses one collection and one model and a few views so it's really really pretty simple how we turn this into an offline first step is I will show you how to create a hoodie application at first that's the video star so I made a video of it because I wasn't sure about internet connection and as I talk about offline I kind of it would be pretty funny if you know my talk wouldn't work because of internet connection so I made a recording but after that I would actually code myself and what you see here is once you have the hoodie CLI tool installed you can do a hoodie new and the app name it will take a little bit it will download all the required modules from the internet and then create like a basic standard application and then I see the into the folder and then I installed the backbone plugin which gives us some nice kind of API so we can use special kind of hoodie models and collections which do the wiring for us and we don't have to do it anymore so I can now I hope that this will work give me a second can you see my screen okay so we are in this folder right now and I need to make a few changes so this is the actually this is the standard application that comes with hoodie that we can get rid of and instead we use the assets from the application that I showed first so just like copy and paste of the static assets and I put them in here one-to-one and now I need to adjust a few things here first I need to load hoodie sorry so hoodie comes at a special URL it's API files hoodie JS so this is like the bundled JavaScript code of hoodie core and also the plugins so it will automatically have the backbone code that I just installed and then I need to initialize it so I do hoodie equals new hoodie and besides that I need to adjust the models and collections so instead of you can all read this okay I do simply hoodie backbone collection and I do hoodie backbone model and that's pretty much it I should now be able to do hoodie start which will start the server and then it should also start the browser exactly so you have the very same application now just with the difference like if I add some data here you don't see any requests at all so kind of like just by you know flipping out the collections and the models it's already working and you see it like in local storage is where hoodie stores its data right now for offline usage and there is no like requests because why should there what's also different is when I opened the app there was no login form right I jumped right into the application and this is possible because of the app logic is there the data can be stored offline so there is no really need to require the user to sign up before he can use the app or she you can just jump right in so right now it has still the like the sign out button come on okay whatever so it still has the lockout button which doesn't make much sense anymore so I made another application which is kind of the same all I did is I changed I added a new view to it which is not really interesting so I just prepared it I do hoodie start here as well I hope this doesn't look right okay now so now you see there is an account account view now here which means I can you know like create whatever in your contacts and all stuff just as I did before I can now sign up for an account sign up and I can open up another browser which I simulate with a private browser mode here as well I could even add like whatever another contact and like after I use the app I could sign up or I could sign into the same account which will then only if I you know start using the authentication will start synchronizing the data for me right so I can like just create another user here and there is no kind of special thing I need to do if we just start to synchronize the application what it does not have yet is offline like the data works offline so it's kind of half path through the other part is to make the application logic work offline as well so we can simulate this with this beautiful chrome DevTools I don't know if Firefox has it by now as well so if I go offline here and reload the page it doesn't work right what you need to do is I forgot to show you I installed another plugin which is hoodie install appcache so I already did that it's already there and it exposes another API for me which is hoodie appcache and it has some methods and one is called start and what hoodie appcache start does is it caches all the assets offline and it also starts checking for new updates so if while the application is open and a new update comes up I can react on it like maybe you some of you have heard I built like this offline app for the conference like this one really if I would push like a schedule update at some point you might see in a little overlay saying like hey there is an update you need to reload the app so now you already see in the console here that he cached all the assets if I oops if I go offline now and reload the page it will just work I can create like here I could create an offline contact and here for just demo purpose and online contact so here's my online contact and here's my offline contact and then at some point you know maybe I was in a tunnel or something I get internet again and it just starts synchronizing eventually so that's the whole point and also maybe in short demonstration like what let's say I would put it I would be in a very bad internet connection like gprs like the worst that I can demonstrate here it doesn't really matter like the application super responsive no matter if there is synchronization or not because it's entirely decoupled like the UI is very very responsive you if you want you can save every keystroke for example so it's very very robust even if it crashes it won't lose data which gives you all kind of interesting benefits okay back to okay just to give good to give you a short recap what I did is I installed a new hoodie application with the first comment I installed the backbone plugin and I put like all my static assets into this wwew folder I started the hoodie server and that was it to kind of create my hoodie application this is what it takes and then I loaded the bundled hoodie JS to it and I initialized hoodie and then I used the hoodie backbone model and collection that was the first part and for the second part for the actual app logic for the assets I installed the app cache plugin and I kind of started the the process of checking for new updates and then there's this kind of user code for the UI sugar so app cache has certain events that it triggers and if you listen to the update ready event it means that in the background a new version of the application has been downloaded and you can react on it and inform the user if you decide to and if not it will work anyway just after the next reload so that was really really simple like besides all the demo it probably would take two minutes to set this up with the backbone and the app cache plugin so really if there is one thing I want you to get out of it is the technical part of offline first application at least in the scope of these use cases that fit here are very very easy and there is no reason not just to go ahead and do it like the challenges are somewhere else really sync is a hard thing but there are good solutions for this the real challenges are more in the user experience part I will talk about this in a bit and if you decide to do it you also get some really cool benefits so it's really really fast as I showed you right we we put all these crazy efforts with these distributed CDN networks to move assets as close to the user as possible but really what's closest to me is my phone and if you put your assets here it's literally zero latency and there is nothing that can compete with that so it's a cool side effect another one that I mentioned is you have new possibilities to engage with your users like usually today you have this marketing pages and they have videos and everything what's possible to kind of convince the user you know to enter an email and a password some even like already the credit card you can stripe all that like if your app works offline first you're like if you want you have a hundred percent conversion rate because you can jump right in into the application which is really cool yeah it's that crazy nasty as honey badger so it's super robust right like whatever whatever happens you usually if you build offline first and you follow the architecture there is no need there is no real case for freezing your eyes there is no like you there's no really need to block the UI to sync like to download updates or something you can just work and you can work with it you can create new data no matter the internet connection because it's a separate concern of course it works everywhere like this is the obvious thing it works like in in a subway it works in the plane it works for me you know I like my my provider kind of charges me one dollar per megabyte if I use internet here some kind of offline until I buy like a sim card of course and also for example things that if your server is down right like we have an app in the production like an offline first app in production since a few years and usually we don't even tell our users if we have any maintenance because they don't know like they don't even realize you know we maybe get some emails about hey I cannot sign in like what's what's up right but even if they cannot sign in they can still use the app and sign in later and the data gets migrated in another aspect that I find very interesting and it's maybe not obvious but offline first or like offline capital applications could play an important part to decentralize the web at least in Europe kind of providing solutions that bring also data ownership has by now a very high economic value solar companies really ask for it and if your application works offline it means that it could easily make solutions where you put servers in your enterprise network or like in your private home and all your data will synchronize which lives up to the user expectations of today like we expect our data to be on our computer our phones our tablet everywhere right at the same time if you leave this network although you are connected to the internet your app is still offline you yeah your app works a lot right and it's not a problem because it's made for it so it's a very interesting use case also like for enterprise software and I hope that this will be kind of the monetary driver for this movement offline first and at least with hoodie it's it's a lot of fun like I mean there are other projects in this field but I really hope to achieve with hoodie is to set the bar of the experience for the developers and I hope once you had hoodie you will not go with worse API so there's a lot of pressure and I hope that this will kind of drive the whole adoption of these more robust a apps because think about all the stuff that I didn't do right I created the hoodie up so I didn't write a single line of backend code I didn't set up a database I didn't like do any schema for a database I didn't configure any user authentication it was all there like I had my app running and it was working offline in a few minutes so even if offline capability is not a use case for you it still may be be interesting to use it anyway because of ease of use because of the experience for the developers and this is what we put the most effort in at hoodie and because it's open source and because it has a plugin architecture you could easily extend it with whatever you need so if you would need to I don't know like send emails you install the email plugin and then you have a JavaScript method saying hoodie email send for example or you could integrate with third-party services like basecam like you can do whatever these are just note modules that expose the frontend API usually so how does this work yeah there is really nothing special to it right so this is the kind of standard way that you would initialize a model I like define a model and collection anyway this is how you would create a new and your record and backbone you have the events you can listen to and then hoodie all the hoodie plugins expose additional APIs that I used here for example for user authentication that kicked off the synchronization and if you look at this API you might wonder like okay but where's the offline like how do I know you know that this works offline it doesn't tell anything even if you look at the kind of hoodie store API that is used in the plugin internally that it also doesn't expose any kind of offline like methodology or variables or anything but that's also really the point the thing is like offline capability is really a generic problem so we thought we can kind of make a generic solution for it so you don't have to think about it and if you just use hoodie because of its ease of use you just get it for free you don't have to vary about it and it's a cool hack you know to bring more of these architectures into the field so what's behind the API I will give you a short insight into how the architecture works or how a typical offline architecture works so first there are two things you know that we really need as I demoed in the beginning for one there is the app and its assets and for that in this example I used application cache which is a native model a native object available in all browsers today like starting IE 10 I think and now service worker you might have heard of is coming which will be even way more awesome it gives us way more control and interesting possibilities also you could do native wrappers like phone gap note webkit or obviously like native applications have this problem solved by nature and the other one is the data and the app must handle the data in a way that it doesn't require connection and this is done by writing a reading through a local database kind of and then have a separate process that synchronizes it and for the local storage in the browser today you can use local storage our index to be could still use web sequel and you can use abstraction libraries like a local forage from was a lot which is really good pouch to be or you can use a high abstraction level like hoodie provides it so let's see how hoodie handles that hoodie saying this is how kind of hoodie does offline and everything really so there's a front end and a back end part to it and first you have the app this is pretty much like the assets that I copy and paste it in the beginning and the app only talks to the hoodie store API it never talks directly to persist data it never talks directly to the server it never talks directly to like the local storage API it only talks to the hoodie store API and the hoodie store API then takes care about persisting this data locally in the browser and if you look at that you might realize that probably this is already enough like if you go offline first you might realize I don't even need the user's data or I don't want it or I don't want all of it right so probably it's a it's a new opportunity you know to consider when you build applications today but let's let's think about let's assume we need synchronization so what happened what's happening is that the hoodie store API talks to the rest API of couch to be which has a replication API which takes care about keeping the local storage and the user's database in sync so this might sound weird but every user has their own database in couch to be which is a very common pattern it's very cheap operation so kind of the decision on what to sync is very easy you just synchronize everything because all data in this one database is private by the user and then the couch to be has a changes feed so like plugins can subscribe to changes in the database and can pick up stuff like sending an email for example so what would happen now if I would let's say I would do the example I sent an email so in my application code I would call hoodie email send and then pass the properties to send the email this would just be stored as a JSON among all the other data in the local storage and then synchronized like all the data to couch to be to remote and there it would get picked up like the email kind of plugin would be informed and it would try to send the email and if it worked it will update the object if it fails it will update the object as well and say there was an error because of this update the synchronization gets kind of triggered again back to the front end and there I can trigger an event which lets me as developer inform the user like hey your email has been sent successfully or there was an error here's what happened and what's really cool about this is that in most cases the front end doesn't really care if the back end is there or not or how fast the internet connection is it will just hang on you know it would just kind of continue to work and the users usually don't tell it's up to you as a developer to decide if you want to inform your user have to love like everyone is closing their eyes you must be tired huh yeah bear with me wait a second okay offline badger so yeah you know we like to think about like offline apps being being kind of the web's honey badger really because it doesn't care like bad internet connection I don't care I just work like no internet connection these tunnels like doesn't matter right the server is down like what do I care and this is how you know the hoodie apps work and I think that this is how really all applications are like whole life really should work like this is why the first video was good because they made examples of what goes wrong like they don't understand each other in the beginning or you made an error when you type something and all our applications they fail in ways we could not anticipate today like we have no ideas so what's good about this kind of architecture is it's built for that like it's built for eventual connectivity it's built for you know a surrounding that is not kind of the everyone has 4G kind of environment that really doesn't exist today and yeah so yeah I like it really like Alex point the coin this architecture is like passive aggressive roommates you know like they don't really talk to each other they just leave like letters you know like who ate my yogurt and you know clean up the dishwasher yeah I like this a lot but what's really really hard about us is the synchronization part and I really ask you don't go and you know start creating your own synchronization engine because I've been there I you know kind of did the local storage self-cooked thing and it's really really hard which is also why we're moving to pouch to be now but it's also the reason why we use couch to be as our back end because couch to be is a database that syncs and that's exactly what you want it has a very very nice replication API which has been re-implemented in other projects like pouch to be which is kind of couch to be in the browser there is touch to be for Android iOS and also I think just two days ago Drupal Drupal announced they will expose a couch to be compatible API to you know become a platform for my first application so even if it's not couch to be it's enough to expose this kind of replication API so yeah there's pouch to be you should definitely check out like if hoodie is too high level you need lower level control definitely look in the pouch to be remote storage is another interesting project because it's bring your own back end approach so it's the idea that every user has their own back end you just go to a URL for example download an application just the static assets and then connect it to your own back end which might be you know at home or retrieve might be an application that's running on on your computer it's really really cool there's even JS git and all kind of our stuff but no matter what like don't make your own synchronization thing really yeah so there's a really good quote I think that explains not only why offline is important but also why it's called offline first you know like for my example I kind of took something that existing and made it offline first but it was only possible because it's so simple like offline compatibility is something that is very very hard to add afterwards because it's an entire architecture that you need to follow from the beginning so like for hoodie we really fell into this by chance it was by accident like who he was extracted from an application that worked offline and we really focus on the API part the offline part was kind of just just came with it and only later on realize we are onto something here we have an interesting solution and we thought that we will ask around a little bit if this is a subject you know that people are interested in there was around the time when I was in Africa so I traveled through the capitals you know of Kenya Uganda Tanzania for six weeks and I met the tech communities there and they have a lot of interesting kind of offline first business opportunities really like a lot of point-of-sale systems for example because when there's an internet outage there is an electricity outage there is internet outage and if the system they trend on internet you can shut down you know your shop for example and they also like there are some projects that go in this direction as well like hoodie then Alex wrote a very nice article on it which you should read if you haven't yet it's like the first thing gives an introduction and our perspective on it and this kind of picked up it was picked up in the community you know it was I really liked how Jeff resultment said this is the new progressive enhancement because it really fits the offline first thing it's not something that you do afterwards it's not like you have an application and you degrade it to kind of handle offline as a problem like you only can get this far like it just wouldn't work and then Alex wrote another article on the list apart and it got an even more traction and like some of us we've been traveling like invited to conferences like here to talk about it which is very very nice we've been at the Mozilla Fest in London and made a like a like a workshop with 40 people we made another one in Bali and shortly afterwards and we talked to all these people and kind of a gathering ideas and thoughts and it was really interesting to see that a lot of people have similar issues but really didn't talk about it like this one felt like offline first anonymous meeting it was like I felt like a lot of people have this I have an issue because okay excuse me yeah a lot of people have this issue but there was not really a place that they can ask for advice and with offline first we tried to make this we created a website I will show to you in a second to kind of spark the discussion but it also had very interesting ideas so my favorite is the run keeper for fish application like for anglers and Norwegian wilderness and also like the point of sale applications for example that I mentioned before but there were kind of a few themes that we third over and over again and I just want to give you an overview how am I in time sorry sorry okay one minute okay so let me just jump through this really quick okay I just go through user stories I mean you can just take this from the slides but I think these are very interesting because they come from a lot of sources and maybe like these are interesting stories that you should consider when you build offline first apps so as an app user I want to be sure that my data is actually there when I need it so who of you is doing like the screenshotting thing you know like for example when I'm here the first thing I do is I make a screenshot of the directions for Google Maps because I don't trust it that it will still work yeah the other problem is they're always online architecture so as a mobile user when I'm offline I want to be able to use features that don't really require a connection like this is something I think that every one of us experience it just shows me a loader or something and it just doesn't make any sense like we I don't understand why it does that right as a mobile user I want to have my personal data on my device at all times I mean it's my old it's my own data I'm usually you know the one who authored it so why shouldn't be there like why should I require to load it from some other place if it has been on my phone for example before I want my data always with me and always accessible there is an interesting thing or an interesting opportunity about applications being smart so for example offline apps if I come to Boston my app could figure out like hey you live in Zurich now you're in Boston I probably download the surroundings of Google Maps for you because you probably get out and want to use it stuff like that could be very interesting or like RSS readers figuring out that hey I'm commuting starting 8 a.m. in the morning so maybe download the latest news at 7 stuff like this yeah offline first challenges and I will end with this as I said what's really really what's not hard is a tech so you can just go play with it do it and you will find a lot of interesting challenges the technology is not so hard but you will realize that there is all kind of crazy stuff that you need to inform the user about like there is no save there is no sync and you need to like need to decide if you want to inform the user is there a change there is not persisted locally yet is it persisted locally does it have a change that has not been synced yet is there a conflict stuff like this problems that you did not did not have before but you have now oh yeah so maybe I end with this you know we should get over this like we all know that this Lord doesn't say anything we all know that it's just a lie really it's just saying you know I'm doing something and it's too complex to cool too complex to explain it to you so please don't panic use hoodie