 doing those things along and so being so patient. So thanks a lot, my name is Rahul Rath, I'm a senior developer with Wal-Mart A in Mahalo. I work on web applications, I build web applications and I want to do applications for the other team. I'll be talking about progress in web apps and what design considerations you should have and you really want that, that's what I'm talking about. So before we start, how many of you downloaded the UX in the app? The link that was sent yesterday. Nice, nice. So what, so you just summarize the steps that you need to do. You need to do app store or base store and then download the app and open it up, right? So what happens if the app store isn't there? What happens if I tell you that, okay, you can just go around, open up one browser, I know that you are a smaller one and the application that opens up interacts as a different application. So that's what progress is about and for the presentation, I'm going to talk about how they are more app-like rather than the other application-like. So to start off, let me tell you how we all ended up on the progress in the library. So we were part of an event in Wal-Mart in the greenhouse. It was a cross-chill, pretty cool, I don't believe it. So the team back in Babylon, we wanted to build customers for the end users who were in the store managers. A solution which was always available. So yes, My Labs. But we didn't have My Lab developers. So that's when we started investigating the words progress of the apps. So progress of the apps, oh, so yeah. How many of you have already heard about progress of the apps? Great, great. So if you have, then you would know that they are sort of the future of the mankind, right? They are going to bring back the rainbows and the unicorns and bring balance to the force. Anyone, any Star Wars fans here, good? So you know what the force is. And in the process, it moves the mobile forward. And then back to the mobile and then to the other. So this is what I read in one of the blogs at IOL. So what progress, so if you are currently working on an application or you want to build an application, an application which utilizes JavaScript or uses JavaScript frameworks, and you want to progress it, it has the experience of the user. So this particular, or this whole concept of progress of the apps is something that you should be looking at. So progress of the apps are applications that are built using modern web technologies, which deliver app-like experience to the users. They are from pages in browsers to top of the items at the users' phone screen, which means your application is always available on your phone screen instead of going and running it on the browser. And they have a little bit of a performance. So features that are exhibited by the progress of the app by the form of generally is that it's responsible. So we are all designers here and we know that applications that you can develop now or design now need to be responsive. Applications are instantly loading. They have push notifications. You know, you can re-engage the user back to the app if they have moved on to something else. You have the add-to-code screens of the driver is coming nicely on this, but here you have add-to-code screen feature, which was generally what the native applications sort of foray, and they are fast as well as they're secure. Okay, so there was supposed to be a money here with an image, but yeah, okay. So what I'm talking about is if you see the whole problem of making your users wait for your application to load, then we all know that the longer you make a user for your app to load, your application to load the chances are you want to bounce off to something else. So the need of the app right now is to have instantly loading applications. Robust in the apps, the waiting, for waiting, instantly loading, what is done is through service. But before we get into what these robots are, let's look at benchmarks that we should be looking at when we are sort of looking at what is the timeline that the app is actually available. So let's look at the time that was paid to. It is a time when you're getting the user a feedback that something is happening. You click on the icon, you have the app comes up, you show him the loader image, sort of a talk bar, the user gets a feedback that he has something is happening on the app. And it was paid to say, is your app actually available? It paints about the full content, saying they want the headline text, something that the user can find useful. You show them what the outline of the application is, show them the cards, show them what they are expecting. And for meaningful interaction, this is when the app is actually available for the user to use. If the user starts tapping on the page, and we have actually interaction with the user. So that is, so the idea is to reduce these three benchmarks as much as possible. The time has to be as much as possible. So the way you, this looks like, actually nobody, how many of you like this? Okay. The idea is not in this guy. I don't want to see an offline dialog so no matter how cute and how thick it is, but I want to build this guy. So if we do not want, of my applications, applications should be available for the time. So the way you do it, or a professor about this to service workers. Service workers are scripts that run in the background. They are separate from other ways. Think of their life as a separate trend. They respond to events, network requests that are made from the app on the page, and have an intentionally short flight span. So they are powerful when it comes to offline usage. So you can actually cache whatever content that you have opened, so that when you are offline next time, you can actually go and use the application with the content that has already been cached to the right side. And we offer significant way in terms of instant viewing, like I was talking about, instant viewing applications, so your applications can be done, but go faster. And since you are not getting your data from some server, your application becomes that, but go faster. So this was something very interesting because as a web developer, I really didn't have to worry about offline. My users were always in front of some sort of computer, laptop, and they had internet. On the mobile apps, that was more difficult. I am right now, I do not have internet on my mobile. So I'm not the network, so that's fine. Okay, so that's when we started doing that instant viewing and offline caching because I do not want the users to go back and look at that line or something like that again. All right, so let's talk about how applications definitely end up loading on the browser. We know applications see over the browser, applications come in, right? What happens is you have your HTML that arrives on the browser. It goes and makes some requests, gets the JavaScript, gets the CSS, the JavaScript gets passed, and that is when your application gets used. So this very, this whole beast is tied before the HTML arriving and the JavaScript getting passed. The next is what most of these frameworks nowadays are doing is you have server cycles, hydration, where your HTML comes in, your view gets painted, but if JavaScript still hasn't come in yet, the JavaScript comes in and gets it all, which means you have a view, but you really cannot do anything with the application. So there is this uncanny value between usability and the sleeve of the app line. Next is where we really should be looking at getting to. This is what we call as progressive render versus bootstrap, where the HTML arrives, the view that I want to show to the user starts coming in immediately, and then the application progressively enhances and gives the user sort of a progressive experience, where the application unlocks its feature in the user. So depending upon how much time the user is, where the user is, the application reacts accordingly. So now we were talking about service app, service workers, so this gives us an opportunity to start thinking how our applications are made. To take a step back, before you get into all the architecture at all, think back what sort of an application you're making. If your application is a more data-centric, has a lot of data that the user needs to see on the night, then probably this is a unique way to think what you need to do, or what is the architecture that you need to do. So what happens with application shell, is application shell architecture is where you set the most necessary content of the application down to the network first. Say the tool bar, the drawers, a few guards, with the most necessary information down to the network first of the application, or the user gets to see this information, as quickly as possible. And then you dynamically populate the list of the content that the user is using for the application. So the major things that you need to consider when you're making a progress of the app is, it has to be responsive, but it should be having an active hosting feature as a PDP you should be making it as app-like as possible. I knew that you should be doing the application shell architecture and then actually pop it. So make it as much of an app as possible. I was thinking of not talking about any specific framework, but also frameworks as such. But the framework that generally you can use for making a good video is using React. I didn't want to talk about React, I wanted to talk about Angular 2, because I don't know if I'm going to actually talk about it. So it was finally released on September 14th, which happens to be in the US today. And you know, any application that you build on Angular 2, it's automatically progressable. So it makes your servers work well by default. You have a cache manifest for caching and everything. So you actually have one developer which can make applications for all the platforms and the application is automatically progressable. So I was looking at one of these blogs and since I was not a designer, I wanted to know what the design considerations that I should be keeping. When I was developing what designing a video lower, and I came across a blog by Owen Campbell, who talks about what the considerations should be. And a few of these recommendations that he gave were really nice. So one of the things is these pre-transitions shouldn't really feel slow when you're moving from one speed to the other. It does not depend upon the network load another page when you're moving from one speed to the other. The technical area should give you a touch feedback. That's it. So when you are sort of scrolling between your interface, if you find a chance or accidentally touch or tap or work on an element, that shouldn't give you any sort of feedback. The content shouldn't jump as a page load, which means if you're on a page and it's literally happening that hasn't got the images that are coming in the page actually jumps, that shouldn't happen. But at a non-content should be selectable. And provide an easy way to share content, which means if your application is sort of a, you can give a social sharing part in your application, the user should have to navigate from one part to the other. Give the sharing part as much easier as possible or easier to find as possible. Use system fonts as much as possible. Avoid only web-like designs. So you are building an app. Use as much, keep it as much as a web-like as possible. And that interaction should be limited very well or not at all. So, yeah. So these are a few references I would like to talk to you about my idea of spawning. I'm probably done. So if you get a chance and you really want to know what the purposes of the apps are and much, much more detail is going through this, I will probably be sharing this on some, either a slideshare or somewhere. There are a few other references below here. Yes, I'm done. Please be in touch with us when we like it. So, is it possible to have a native app and have a kind of, is it like you would suggest we have a view or having something like progressive app or something that is dynamic, that is going to change a lot and the structure and everything having a native app is it possible or not? That's a nice little question. So, basically, I was, I was just, so you do not have to worry about the content and things, you think. What do you need to worry about if your app is changing at all? What if the next year when you come in and there's an app which is a little different than this? What if the top panel has changed, what if the structure has changed? You need to go to App Store or some place and you have to download it, right? With the application, with this progressive app, you do not need to do anything. One year later, if it's still available there on your home screen, you just download the application and refresh automatically, right? There is no doubt in the process. Now, coming to whether you have a mic or would I would suggest using a Matthew for content refreshing applications, you really do not feel that's mine, obviously that's my personal opinion, but if you just want to build one application which will work on all the different platforms, go ahead, this is what's up. But if you already have a native application, if you already have a native application, what you can try and do is build this on the side and then try and get removing that whole native application from it. See, Facebook is one of them, right? Look at, look at, has their own progress in the balance there being the ones who started the whole revolution in India or through the front rounds, right? And they already, they also have the native application. So it's that much more difficult to get out of the whole native space right now, but like I said, it's the future. I think Apple doesn't. Apple doesn't support it, right? So that's why, so one of the things is that still so much dependent on Apple. And I use an iPhone, I know how difficult my applications are on this, but we will be there, very honestly, and if you really want to see at what applications are supported on which platforms, I would never mind going to a site but we don't do it on drugs. There are this list of all the progress in the maps that they have gotten their hands on and if you want you can look at what sort of platforms is supported on.