 Microphone testing 1, 2, 3, 4, hello, microphone testing 1, 2, 3, 4, hello, hello, hello, hello and 2, 3, 4. So nice to see the crowd filling up. We have an almost full house today. So if you're sitting on an end, you may find that people are going to be getting into the middle. So if you don't like people passing by you, you might want to slide yourself towards the middle now. Because people will be continuing to filter in through the next 15 minutes. My name is Tink. I am your emcee today along with Akshay who is not on the stage. He's also our hall manager so you'll see him running around. One of Akshay's big jobs is to work the Q&A sessions by pointing to people. So when we have a question and answer session at the end of a talk and you want to ask a question, please raise your hand. We will send someone around with a mic. When you get the mic, please stand up because we're also live streaming all of the sessions today and we want to see your beautiful faces while you're talking. When you get the mic, you're going to need to hold it in front of your mouth like a jazz singer. Just like Akshay is doing. If you don't hold it here, you kind of go, yeah, hi, I've got a question. Nobody will hear you so please make sure you hold the mic right. And our mic runners will take the mic back from you when you're done with your question. Just want to let you know that I will continue to remind you if you don't stand up, that's part of my job. A few little housekeeping things before we begin. Does everybody know where the toilets are? Because you might need them today. They're out that door or downstairs near the food court. If you do not want to have your picture taken or to appear in media, please get a red lanyard. We'll see a few today. A red lanyard from the registration desk or help desk. People with yellow lanyards are staff and volunteers and you can ask any of us questions. We usually have answers and everybody else gets blue lanyards. Just in case you were wondering about the colors. Our food court takes pay TM or food tokens. Cash is not available at the counters themselves. If you brought cash to spend today, please buy food tokens at the food token counter downstairs. If you lose something or if you find something, please take it to the help desk and let them know. I'll make an announcement from stage about lost items later if there are any. If you need to charge your devices, you're best to do it in the banquet hall downstairs because there are lots of power points. But if you were desperate, there are a few power points there and I think in the next row. So if you pass your things down into the crowd or decide to sit in the front, you can charge things. Those are the only power points available to you guys. Everything else is our equipment and you can't use those. Downstairs in the banquet hall. We're doing something really different this time. We have an unconference. So there are a couple of our sessions scheduled down there around tables and workshop. But the rest of the space is yours to use when you want it. Yesterday we had some great discussions happening in our React Food conference. There are whiteboards. You can schedule the tables for discussions. If you want to teach a workshop, you can schedule the workshop area if nobody else is teaching in it. And we have some tall tables where you can do demos and things. So please do use that space plus there are lots of charging points down there. Feedback forms. So half of you, well, every other seat here, will have received a feedback form. We love feedback. We can't do the conferences better unless you tell us how we're doing. Now, today's feedback form is a little bit of a puzzle because the schedule changed a little bit and a couple of speakers changed the names of their talks after we printed these three or four days back. So your challenge is to figure out which talk is which and what order they came in. So you won't be able to just go, yep, first one, second one. You're going to actually have to read the names and figure out which is which. But that should keep you awake, I hope. I will continue to talk about feedback all day long. So don't get tired of it and maybe I'll have a special feedback song later. We'll see. We do have flash talks today at four o'clock. Today's flash talks are all about PWA. So if you are working on a progressive web app, this is your chance to show it off. Flash talks are five minutes long. We have room for six slots. We have six slots at the half of an hour flash talk session. If you are interested in giving a flash talk on your PWA or some project involving that, come see me or Akshay and we will put you down. It is first come, first served, no hiring and no selling. But you can talk about your projects. So if you are interested in that, please see us anytime before 3.30 today. And one last thing to remind you is please make sure your phones are on mute. It's very embarrassing when your phone rings or you're getting notifications in the middle of a talk. But please do tweet in the middle of talks. Oh, no, it's not. Our hashtag is jsboop. And now I'm going to turn this over to Karthik who will be demoing our conference app. Yeah, I think it's on now. Okay, hi everyone. So I just want to quickly give you guys a run through of our Android app. You can just search for Hasgeek on the Play Store and it should show up. It's only on Android right now. Hopefully we will get an iOS one out at some point but right now it's Android. So basically this is just a way for you to help navigate what all you can do at the conference. And a lot of it is repeating what Tink just said. Starting with just simply looking at the schedule, you can go through what's happening today, what's happening in the banquet hall and paddle in the afternoon and then tomorrow as well. You can also tap on a talk to get a better sense of what the overview is, who the speaker is and get there. You know they have a short bio. Also if you notice on the first page that says overview, there's also a bunch of announcements. These are these useful links that we will keep repeating during the conference, but this is just a single place you can go and look it up. So one of them includes feedback. So similar to the feedback forms you guys have physically, there's also a Google form. It's a very simple Google form that you can fill out. So if you notice the first card says feedback sessions in the morning. If you tap on that, you should just get a Google form where you can fill in feedback. And what we encourage you to do is do this as soon as every talk is over. So you don't have to fill out all the feedback in one go. You can just do them one talk at a time as you attend them. So you can fill this up multiple times. It's not a problem. And also like Tink said, there is an unconference space downstairs. There is no official session on the schedule in the banquet hall on the lower floor. We encourage everybody to kind of self schedule a small workshop or maybe a discussion that you want to have. So you can do that here as well. There is again just a simple Google form you can fill out. And if you want to talk about something very specific, you can fill it out here. And you can also look at everybody else's suggested sessions and see if that's something you want to be a part of. We will also be writing the same thing down on the boards downstairs, but this is just another place you can look at it. Also, Hasgeek has a community Slack team called Friends of Hasgeek. It looks like that. So there's a JS food channel on it among a bunch of other things. So if you guys want to join this, there's also a link in the app. If you hit the discussion button and if you want to send yourself an invite, you can just ask for one and then it will take you to a page where you can fill it out. It's the same page is visible at friends.hasgeek.com. But again, it's just in the app that's easier. Then there is also a live stream. So this entire conference, at least the main auditorium will be live stream. So you can follow it here. If you want to share this out, yeah, there you go. If you want to share this on social media or somebody else who is not able to make it, but you want to tell them about a specific talk that's happening, you can share this link with them before. It's jspoo.in slash live, the same URL as in the header in the nav bar. And lastly, one of the most interesting things is this contacts tab at the bottom. So if you notice all of your QR codes, all of your badges will have this kind of QR code at the bottom. This is basically the attending information that you filled out when you purchased your ticket. So if you come across somebody interesting and you just want to quickly share your contact information with them, you can just ask them to, if they happen to have the app installed, you can just hit this plus button at the bottom, right? And hopefully it will work. Yeah, so it should ask you to add this person. And then when you go back, you should see them on this list. So there are a couple of things you can do from here. You can tap on the person's contact and then add them to your contact book if you want. Or if you've collected a bunch of contact information over the day, they'll all show up in this list. And then you can just hit this export button on the top, right? The icon that looks like an upload button. And that basically generates a VCF file that you can just email yourself. So then choose whichever app you want to kind of email your contact information back. Yeah, that's about it. Lastly, like all Haskeek software, this is also open source. So this is actually visible at github.com slash Haskeek slash Android. We are still looking for a nice name for this repository. We are open to suggestions. So if you guys are interested in contributing to some of this, or maybe you guys want to use this for your own, you know, meetup or event that you're organizing, this is where you can go look it up and we'll obviously welcome contributions. We can create an equivalent iOS repository if any of you are interested in working on. Yeah, that's about it. Thanks. Introduce our first speaker for today. This is, this talk is demystifying web components as the weapon for web convergence. Rahat is a UI developer working with Apple and previously he was with Flipkart. He's worked on over 200 websites. He's authored a book on Ionic framework and is a trainer for Cordova and Ionic. He's here to talk about web components, what they are, how to develop them with JavaScript and how to reuse them. So very good morning to everyone and welcome to this DSPoo on a Friday. Skipping your offices. I hope you are all liking it. You must have had your breakfast and we'll go through this very quickly. I have a lot of content to share. Just, yeah, so just introducing myself. Hi, my name is Rahat Khanna. I'll be available on most of the social media websites using an alias called Mapp Mechanic and you'll be able to find me on Twitter, GitHub and these stuffs. So I have worked on HTML websites or web apps since beginning. I've worked from jQuery, jQuery to Angular, Angular to Ember, Ember to React and a lot of these stuff at the back end also. So as going through all of these different frameworks, you can see that the talk which we are going to do web components has become so dear to me because I've wear the pain all of you have wear, okay. So going to the next slide, what will be the agenda for today? So today we want to cover most of what about web components in a very simple manner. I will not be going to talk about very complex frameworks or as such and as you know that web components is not a framework by any one organization, any one community. It is an open framework which has been introduced into the web standards by W3C or by the standard organization like the HTML working group as such. So through the course of this session, we'll be knowing what are web components, what are the main parts of web components and then we'll try to build one small web component like a spoooper button and then we'll do the best thing. We'll use that web component in Angular as well as in React and I'll show you how to consume that. So starting off how the evolution of Frontend Dev has been there. So there were very static HTML websites. We could see some websites which went to the server. Then the response came back. You could see a wide blank screen which was not at all a great user experience. The second era was of Ajax, DHTML, a lot of animations, a lot of mobile web started to come up. Mobile web was also at a very nascent state and then the era in which we are currently, era of single page apps, era of CSS3 animations, era of PWA server rendering and all that stuff. So you see that how Frontend world has evolved and how complex it has been for all of you Frontend devs from the beginning to now. So there are a lot of problems. Everyone has a lot of problems. We'll discuss a few of those problems which we face in our day-to-day lives, in our offices, in our work. So the first problem, how many of you have seen or learnt more than four frameworks in two years time? Just raise your hand. So around 80% of you. So you'll know that every other day, somewhere in the world, someone would be making some new framework today while we are talking here. So everyone wants to make their own new framework and then if it gets popular then we have to learn it, become so free. The next problem is the device sizes. Every now and then, Samsung or Apple or any other device manufacturer things that know. Now this device size is not good enough for the users. Now you come up with a new device size. So there's a new device size, then we have to take care of all our responsive websites on all those device sizes, all those browser quirks and all that. Then the problem of dependency management. How many of you have used a MacBook Dev device which had only 128 GB? And then if you install three node projects and all your space is consumed by those NPM modules and all that, how many of you there? A lot of them. So this was a pain, the different dependency health. Even though NPM came up with the flatten dependency and all but there are a lot of different dependency management tools which we have to learn. The biggest problem I always faced making my built pipelines was figuring out which webpack loader to be used for which type of content then figuring out it for the deployment process and all and then learning grunt, gulp, rollup and all of these things. Then I have to shift all my deployment tools to that. So this is not a problem right now but still if you want to use five different libraries or frameworks right now also you have to import all of them. You have to import the HTML file, the CSS separately, the JavaScript separately and the markup separately. So if you wanted to reuse something from Bootstrap you have to copy paste the markup separately. You have to import also import the JavaScript file 4 plus 1 JavaScript code plus 2 JavaScript so many of JavaScripts. So it has been a problem. So problems are not stop signs, they are guidelines. You should not see the problems like we have to do with it or stop learning new framework. So the community thought that we will use these problems to create something new and someone somewhere at Google or somewhere in the community proposed a new guideline that why don't we make this interoperability or make this standardization across the browser so that no one has to cater to this problem or no one has to face these problems. Then came Web Component. But there is one secret which I want to tell you which all the browsers never ever told you. You know what? You have been using Web Component since a lot of couple of years and you don't even know it. You have been using Web Component day in day out. Let's show you quickly how you use the Web Component day in day out. Just give me a second. Video element, you have used input type is equal to date element input type is equal to number element and you see that all of these elements have their internal markup or they have their own logic like the date picker shows the native date picker and the input type number shows the counter and all. How do they even show these things? Just give me a second. So in Chrome, if you go inspect element you can actually see the internal DOM for this particular that is called the shadow DOM. So when you go to settings and you go I am disabling this show user agent shadow DOM this is the one which will enable you to see but now if I go to this normal video tab there is nothing associated with this scene of a new framework or a new standard altogether. It is nothing but it is just simply your native JavaScript HTML and CSS utilizing some native browser APIs. So what are those browser API generally? So the custom elements V1 spec has a browser API so that you can register a new custom element so that the browser can understand that this is a new HTML tag which it has to associate some logic or some CSS to it. The second is shadow DOM you had to attach a shadow DOM to a custom element so that that styling or that DOM is not conflicting with others. We will discuss it about more and something to look here is this block which is like the polyfills block. This is like Polymer, JS, X tag and a lot of other polyfills which are there for just current movement. Please understand that web components is not a new framework is not a new library if it is the standards that are coming to web by default but till the time those standards are not there in each and every browser and you can start building apps using these standards. Companies like Google or some communities have made these polyfills and these polyfills are very minimal shames that you can just take out whenever the native browser APIs are there. So they are not a bit of like a lot of things but so this is like a pluggable box right now it is there as soon as everything is there inside your native browser you can just take out this block and your web components you do not have to change much in your code after that. So why and where should we use web components? So as you saw that we have Angular, we have React, we have Ember or we have now View, JS we have a lot of this stuff but now if you remember that if you have gone through this page in most of my previous companies when I started with the company I started with one framework then that project got over if I shifted to another project that was in some other framework the third project was in some other framework but I had some reusable building blocks which I always use like some button element some input elements, some phone validation element some reusable logic and I had to code it every time different component in React, different component in Angular different component in View, JS but that JavaScript code the behavior of that component was similar to everything and also in large organizations we have to maintain the branding the color ratios, the sizes and all and then I have to like bloody write the CSS in different all of these frameworks do you agree it is a pain? So that pain is going to solve with web components so web components is currently for those small small components which you want to reuse in all of your building the bigger apps it can be used as Legos in building bigger apps so it will only act as building blocks and not the app itself you can use any framework for building the whole app because frameworks provide a lot of good design patterns but the underlying building blocks can be written once and then reuse in all of the frameworks in all of the building architectures okay so now starting off with custom elements what are custom elements as you may see that these new things like my app my header my content all of these can be new HTML tags that can act as a custom element and you can build those and use them in any framework as per say so how do you create a simple custom element so a simple custom element is nothing but associating a class a constructor and an object with a new selector HTML selector using the browser API which is only this method customElements.define this is the selector which you write this will be the selector which will act as a HTML tag name which you use in the HTML and this is the class either you can use ES5 to make the constructor function or you can use ES6 which is now present in almost all of the browsers available as native support and use them here and pass it here so this is very simple and there you can have all the normal gettersetters and all the constructors the new thing is now when we make a component we have to hook into the life cycle of the component in angular in react we always want to do some some of our custom logic when the component is being connected to our app or connected to our DOM so all of these life cycle methods and callbacks or hooks you can say are available with custom elements which you can create inside your JavaScript class ES6 class and they will initialize or they will be called whenever that particular life cycle event has happened during the course of your custom element the first one is connected callback so whenever your component gets connected into the DOM or it gets rendered into the DOM connected callback is called whenever it is removed from our document or DOM it is disconnected callback and now we all know that any component has two main parts one are inputs so you need to pass some inputs define the behavior of that component so there will be those in HTML terms are called attributes whenever you create an HTML element you pass some attributes so similarly in web components there is nothing different you pass an attribute and then also some the component has to emit some events to the top right so using these attributes only or using some callbacks into your DOM you can also emit some changes we will see later but now when your attribute changes in real time what if the value of your attribute changes in real time so Angular React always automatically adds watchers or they have their own internal stuff which keeps on listening these changes and then reflect into their cycle to digest it or to re-render your component similarly the re-rendering part of web components you have to take care of yourself but you can hook up to this attribute changed callback you know when the value of an attribute is changing and you can do it yourself okay let's dive into the code are you all excited we'll be creating our first web component right here right now so I have this GitHub link which I'll share with you later on right now you don't need to note but it has all the step by step procedures which I'll be going through I don't have much time so I'll probably be a little fast but I have nothing complex to show you just HTML CSS and JavaScript nothing else so let's start with the first thing I'll create a new file called super button dot HTML so you can create a web component either in an HTML file or in a JavaScript file I am creating right now in HTML file because earlier web components used HTML import but recently likely in last one month a lot of web components are being used as imports or native modules in ES6 we'll talk about this later but I'll add a script tag here and I have this small piece of a simple ES6 class which I want to show like this class has nothing is everyone able to see this at the back okay it's nothing but sing simple class with a constructor which I want that once I initiate it one once and I run it in a server it should console out log the output I have to also write the consumer so this is my web component I have to consume it in a normal file I'll start up a new index dot HTML file and what I'll do is I'll copy this normal and you see that here I have just use this super button as a new HTML tag so the browser should understand that this is a web component and associate that class with it so now if I go back to my browser open it right now you will be able to see nothing and zoom a bit but you will be able to see that console log because that constructor was initialized as the browser see parsed my custom element tag it knew that it has to associate that ES6 class with my custom element with my web component right so going ahead what I'll do is I'll also now add some callbacks the connected callback so that I want to change the text content of my inside my button I will not do any modifications to my DOM elements right now but only add the text content of my this new HTML tag in my connected callback and also have to attribute so that I can set label text as an attribute so I have a getter and a set a normal so now the next thing is I will write some code inside my consumer to have that label text so I have nothing but this label text property passing some text which I need to which will be done when my web component will be connected the text content of inside this development will be written with this text which I am passing so nothing but right now nothing fancy there are two elements and my these elements the inner text of this component is added by with the label text which I have passed everything good till now let's move ahead now I'll show some other life cycle methods as well so you can check the disconnected callback by removing manually your web component from the DOM and this disconnected callback will be running I will not test it right now but now I want that my web component will not be simple text it will be very a complex HTML element which I want to abstract from the outside world or wherever I am consuming it right so now I'll include some this custom element into this button we are creating so I'll create a div element for my button so I'll copy this and put it in my super button class so nothing but just whenever this element is being connected this will represent the DOM object instantiated DOM object of my web component or my custom element so it will have all the DOM API is like this dot query selector this dot inner HTML and everything so I'm just doing this dot inner HTML and changing some text so now it will look more like a button I've just added some appearance added some styling to my component now what I'll do is so what I want to do is I want to set the color background color of this particular element based on some attribute which I want to pass so what I have done is written a normal Gator setter for a color and then I have written this small function this function is nothing but it adds some classes class related to that color so the color values I have given using some classes to my element and inside this function I want that whatever new value or old value is being passed by someone it should update that right now the default color will always be gray so I have I need to call this method after the connected callback so that it picks up that color from this dot color attribute right this dot color is my attribute now I'll go back to my this and for one of the methods or one of the buttons I will say color is equal to red and now you see the by default if I have not given any property to the second element it is taking the default color and the first property the first element is taking the red color how they are taking they are having an internal DOM element like div class and they are just adding this red color or they are adding the gray color the gray CSS class everything okay till now very simple very basic web components are not something to dread upon but they are very useful to be used in all places now let's go ahead and move to the next thing now we want to change that dynamically when someone will change the attribute or programmatically during the life cycle of your web component it should reflect in that particular part itself so what I have written is this small attribute callback changed callback which will have like switch name so the name of the property and then the old value and the new value so based on the name of the property I will do different things if the label text is changing I will change the text content of my button and if the color is changing I'll call this refactored method which will update my color right one more thing to notice that only this attribute change callback will not work because you can associate a lot of attributes on your html elements and you want a lot of attributes are only for initialization time you don't really want to add a watcher to that so this custom elements API provides us a property we can create a static property on our elements which is called static get observed attributes so this static get observed attributes will tell us like which attributes you want to watch for the changes if you want to include any property inside this particular array the attribute change callback for that attribute will never be called okay so the next thing is I want to add some dummy logic inside my consumer so that I'll be creating some dummy stuff to change my color attribute and label text attribute at runtime so I'll just give me a second these are some dummy variables and some dummy input element so that I can change I'll just show you so now I have an input element and I want that based on this input element what I have done is I have just get got the value of this input element got my button DOM element and I'm setting the value of that input element as a new attribute to my existing web component which is already connected to my DOM so if I write something here and click on update my internal text content will automatically update if you really want to see what is happening so if I add a breakpoint to this attribute change callback so whenever I am calling this method actually it is calling me with an attribute change callback with the appropriate property name the old value of it and the new value of it it's like your simple watcher in Angular or simple update event in react right fairly simple till now but useful the use will show when you see it working similarly in react as well as Angular let's go ahead just adding that color change also I'm just creating some dummy method to update the color attribute as well so again I have added a select box just skip this I've added a small select box so that when I click this it will update the color of my second button green is not there in the list so it's not updating to green okay yeah let's move on to the next part so the third part would be now coming back to the slides for a moment so now we have seen this is all about custom elements this is what you can use to create your own custom elements in HTML and use them so now coming to Shadow DOM so now how many you have used hash important if you have to just quickly resolve some conflicts I guess even if you don't raise your hands every one of you have used it in your life you'll be shy to tell me right now because maybe the best practices in your organization don't allow that to be done but so there are a lot of conflicts between your CSS and stuff like that so Shadow DOM allows you to create a different DOM altogether what it the benefits of Shadow DOM are isolated DOM scoped CSS you can have a composition simplifies your CSS and adds a lot of productivity which will not waste a lot of time figuring out why my styling is not showing because some other specificity of a class or an element is overriding my element right so coming to the next is how you create actually Shadow DOM so Shadow DOM is always attached to an existing element existing element can be any div element it need not to be a web component or a custom element so these are disjoint specs custom elements is an separate spec shadow DOM is a separate spec when they come together they have the power of web component but you can attach your Shadow DOM to an element or a custom element and there are some styling there are new pseudo selectors for your Shadow DOM like you can see which so we'll talk about this so now what is Shadow DOM so you are consuming your web component somewhere so the place where you are injecting your web component will be inside some HTML tag that will or the web component tag or your custom element itself will become the Shadow host because that is in your main document so this left side is your main document Shadow is host is the host to which you will attach your Shadow DOM okay and then what you are attaching to your Shadow DOM will become the Shadow root because it will be its own DOM tree right then there will be this normal DOM which will run in the normal consumer app and then there will be this Shadow DOM Shadow tree so the normal DOM is sometimes called light DOM and the Shadow DOM is the normal the Shadow DOM itself light DOM is just to specify the difference between it will be more clear when we see the example for it then there is an HTML template element this is nothing more but just if you want don't want to inject your DOM elements in a custom elements using this dot inner HTML and you want it more to look like an HTML tag there is a new HTML tag in which you can create something which will not get rendered it's simply like this template element which you can use in even without Shadow DOM and something like that we'll come we'll come to the coding and then you'll see how it's being used then there's something called slots so now what if I want to deliberately place my normal DOM structure inside my consumer and put it somewhere inside my web component so when I want to selectively put something from my normal DOM into my Shadow DOM slots are used we'll see the example then the HTML import which we have done to import our in if you see in this code in my index dot HTML how my Shadow DOM or how my web component is imported by a simple HTML import super button dot HTML these days which we should not use this but it's okay going ahead with the how to show Shadow DOM I'll just create a certain conflict in my CSS in my this part so now if I go and see now the color font size of my web component DOM has increased but it's really not in my web components is it's outside I have given to a normal button class this button class is not should not affect the inside DOM elements of my so what I can create is I can create a Shadow DOM so Shadow DOM is also very easy method that on any element so all on any DOM element you can call this method called attach shadow so this represents this custom element which we have done then the attach shadow then there are two modes open or closed they don't have much difference but the internals you can read later then I'll attach this inner HTML to my shadow root and remove from this connected callback so I've done nothing but inside my constructor did this dot attach shadow and updating that inner HTML which I had given to my this DOM object to my shadow root and we'll see that it has now worked normally but now what has happened is that earlier I had used dot this dot query selector to find my button class but now my button has gone from my normal light DOM to my shadow DOM so you what you have to do is you have to find this everywhere and replace it with this dot shadow root dot query selector so the shadow root you have attached will be available to you at the shadow root part and now it will be available here your shadow root part so this is all about how Shadow DOM is selected you can see more things about how Shadow DOM changes the values and it's not affected there are some certain code which you can hop into the selectors which have talked about that there are some shadow root selectors which you can use to style your shadow DOM as well okay and the next thing is you can also have some CSS variables being passed from the consumer if you want to give a customized styling branding from outside your consumer to your shadow DOM like this border color dash dash whatever variable is starting from dash dash will be given the value and you can consume it inside your web component or shadow DOM like using where and then the name of that particular variable okay so we have around 2-3 minutes more of the demo now I want to move rather than showing the slot thing right now I want to move towards how we will consume this web components into react and angular right that is the more important part will create web components we know JavaScript we know CSS but now how can you use the same web component inside react and say inside angular that has been a dream for every front end developer right right now right we have always tried something like running angular with react react inside angular but nothing has worked look let me let me show you an example so I have some 2 identical apps so this you can see this angular icon this is an angular app can't zoom much here so this is a new angular app I have added a normal angular watcher stuff like that and this is working let me just open so this is my angular app what I have here is my app component so I have a normal app component with some variables like the colors of the buttons or some normal and I have a method that toggle flying of the so I want that I use my super button and then from my super button emit an event which will call my angular method and angular will change this variable and my Superman should start flying so I have nothing but these 2 buttons which I have consumed and what I have included here is like a normal attribute I will change the attribute color so I have showed that how you can input an attribute from the angular world inside your web component and then how you can emit event from inside the web component to outside your angular part so what will happen here is inside my web component part how do we really emit this event my web component will not just a minute yeah so it is not in my web component but it's inside my angular app itself so angular has one important thing when you want to use custom elements with your angular app you have to use this custom element schema and import it as schemas into your main angular app the second thing is how I am attaching my this on button click angular is one benefit that you don't have to do anything else apart from including this custom element schema to use web component I'll be able to use this directly this is normal angular working and then when I click on start Superman my web component is emitting an event to my my angular sorry my web component is emitting an event to my angular app and it is starting running this so also similarly react is working so the react code also has the similar thing it has a bit of which I'll just tell in a couple of more minutes okay yeah so the react thing what you have to remember importantly is that this if you want to add an event listener you have to add this event listener imperatively not declaratively in angular we added the event listener from our web component to our angular component declaratively but in react you have to manually add this event listener so that your web component will dispatch an event and you can receive that event here so I'll show you so this is same this is like normal react and exactly same like in angular exactly same in react and I am using the same underlying web component due to short of time I can't explain more of these codes but surely after this session I'll be able to show just quickly running through the two more slides this is the browser compatibility chart which shows a lot of green which will boost your confidence using this in production and now there's a website called custom elements everywhere which has been introduced by Rob Dodson in the polymer summit happened last month and it has a very good suit of tests for every framework in their world that how web components can be used in them and they have some examples also so you should surely go visit this website and then I've showed this demos and these are a lot of big companies which are using web components in production today and you might have seen if you inspect element youtube.com the youtube.com web app is completely used in web components and polymer today thanks guys thanks for Q&A we are just in time for a minute of Q&A one or two questions I think you may have time for one question okay so who is the lucky ah I think I see the lucky person let's get you a microphone please stand up we just saw the yeah sorry I'll just quickly show one second so that code I had a hosted file in the CDN to work this I didn't show that let me just quickly see that CSS code so this is a file which I already uploaded to the CDN so in order to update your event you have to use this normal DOM element method called dispatch event so you can normally dispatch an event from your inside your web component and your angular or react will handle that event sorry for that I didn't show this code last thing just as we look at the relation it is doing all the things the same thing right it is not shadow DOM so the things inside your angular component or your react component is in the actual DOM all the scoped CSS and all can't happen we can set it to native it will have the shadow DOM seems like this is becoming more of a conversation than a question so perhaps you can take it offline the roundtables in the banquet area would be a great place to gather to hear and talk about this again thanks everyone thanks a lot and you will be available for questions later so a lot of you didn't hear this morning's announcements I'm not going to repeat all of them but some of you will have found feedback forms on your chairs the feedback forms are a little bit wrong today so it's a puzzle there might be a prize at the end of the day I haven't decided yet but please do fill in your feedback forms and also I heard somebody's phone making very loud notification noises if you could please put your phones on mute that would make it much more comfortable for the speaker and the rest of the audience alright I'm going to stop nagging now and introduce our next talk this is building a PWA using Polymer Astrid is one of the core contributors to the OlaCabs PWA and has previously worked for Flipkart wow we have two X Flipkart employees in a row OlaCabs was the first ride hailing in the APAC region to build a PWA and it was built by his team the PWA he built was showcased at Google IO 2017 he's here to tell us that it's really easy to build a PWA using Polymer hi everyone I am Astrid I work as a front-end engineer at olacabs.com and recently we built a PWA for Ola so I'm excited to share my experiences that I had while building those PWA at JS food today so the first thing that comes to anybody's mind when you have to build a new website is which framework are we going to choose this time so I think so at Ola we were interested in we were very much concerned with the building a highly performant application for low-end mobile devices which are running on a low 3G network so we considered couple of frameworks so first was Angular and then was React so Angular was a framework where our entire team was very comfortable with but it had some problems in terms of rendering large lists it had problems with the digest loops so we thought about React React was a very good framework with its one-way data flow and its virtual DOM library but then Angular 2 came out which had one-way data flow and two-way data binding between its components so we went ahead and built a POC so and then we measured the performance and we found out that it required a 30 kb polyfill around 198 kb of framework and associated libraries and about 50 kb of just a POC application so and also the rendering performance was really poor on a mobile device so next we wanted something lighter we went ahead with Vue and Polymer so Vue and Polymer were very similar in terms of their development style and even their performance characteristics but Polymer was based out of web components and it had a slightly edge over Vue.js so that is why we chose Polymer so what is Polymer? Polymer is a JavaScript library where you can create your own web components that's it it's just a wrapper around web components so it basically gives you a syntactic sugar around web components it provides you a data system so basically it allows you to declare variables and bind it to the template it also gives you an event system which allows you to communicate up the custom element tree so why did we choose Polymer? obviously it was because we needed a performance framework for the mobile but also because it was based on web components and it had shadow DOM LASER register was a feature that we utilized fully so let me tell you what LASER register is I would define some element somewhere along my anywhere in my application and I would import it much much later but it wouldn't break the application and the best thing is the application was once the custom element definition is downloaded it would then instantiate all those references that I did before hand so that was a feature that allowed me to utilize this over GA Google Analytics tags so basically I included them at my top level component OLA app and then I would import it long later because I didn't want to hurt my first paint time so finally there it was it was a collection of 88 reusable components and Polymer being a library for web components it didn't have any specific guidelines for building up PWA so at OLA we created our own guideline so we went with props down and events up model and used Redux to store data that is shared between the various components Polymer also provided us a way wherein a child could reflect values back to its parent but this was a pattern that we specifically didn't use but we used two way data binding within the data within a single component so that we didn't have to do any DOM manipulations manually so Polymer provides you things like a DOM if and etc DOM if and DOM repeat so let's see how Polymer helped us in performance the first thing was shadow DOM shadow DOM scope CSS and isolated DOM obviously provided us a lot of performance benefit but I'm not going to talk much on that part that is very obvious but I just want to highlight a small problem that we faced while using shadow DOM so this is the only caveat that you should probably keep in your mind before using shadow DOM so I was using recapture JS and found out that it is not compatible when it is included inside your shadow DOM so what was happening was recapture JS was whenever I used to try to say that I'm not a robot it was not recognizing it so I had to find a workaround and get it working so the only thing is so the problem for me here was I couldn't rewrite the recapture JS on my own right it is a third party service if it was any other third party library we would have written it in house so maybe if you are using a third party library you should just keep in mind and probably build a POC before you try it out Polymer CLI is a tooling that Polymer comes with which helps you create either an element repository or a single page application so I'll walk through some of the features and I'll tell about what are the enhancements we made on that Polymer JSON is a input wherein is an input file wherein I can define my entry point my app shell and my routes it also allows me to prepare my production build wherein I can define how do I want to compile it like you know minification aglification etc or you could use the best practices presets that Polymer recommends so you could generate something like ES6 unbundled wherein you would create a disk of ES6 and it is unbundled and also simultaneously create a ES5 distribution with bundled all of this comes out of the box you don't have to write any configurations for this now let's say you wrote a PWA I mean you want to make a PWA right you just created a single page application out of Polymer and now you could just say that you know add service worker as true and you got yourself a PWA do you want to make your app purple then you just add the push manifest so once I add service worker I would also have to give it SWA SW pre-cache and runtime configurations for it so at OLA we pre-cached all of our index.html and all of our 88 web components and when it came to runtime caching there was only one API we could you know cache it because OLA being highly transactional and real-time application which provides cab service it was not possible for us to leverage runtime cache on any other APIs and of course we used it to you know like cache the images which is a no-brainer so this is the OLA offline experience that we have wherein you can book a cab via SMS so this page kicks in anytime you have a poor bandwidth connection so this is the most you know innovative thing probably and Polymer introduced distribution of unbundled code so have you ever heard of you know without doing anything you're just shipping code so that is what we did actually here you could you can see that I am all my web components are distributed individually over HTTP 2 doing this gave me a freedom that if I updated a particular component let's say which is of around let's say OLA app which is on 6.3 kb only that would be updated on the next service worker update otherwise rest of the components are untouched which probably doesn't happen when you bundle the code altogether Polymer also provides you a programmatic hook wherein you can do which it where it provides your callback where you can hook certain functions after next render so basically this allows that which says that you know you are it gives your browser a breathing space so that all the painting is done and you can do some schedule some JavaScript tasks so basically we use that to do the lazy loading so over here you can see that we at first what we did was we just lazy loaded all of the components so some components were loaded at the beginning and then everything was lazy loaded and I can show you that over here the content download for one of the component was one second and this was a relatively important component for the page and it was actually creating a block in our parsing so what we did was we thought let's you know let's get crazy and try breaking this lazy load into couple of chunks and once we did that we saw that from one second it in decreased to 100 milliseconds so that is a 90% increase 90% improvement in my download time because of my staggered loading so let me explain how we did our staggered loading so Ola is basically a location centric company so location is very important for us to serve you so we show a model wherein we ask for a user's geolocation permission so we use this and made sure that whatever was required to paint this would be rendered greedy we don't make any deal as soon as the index.html is served we make request to download this next whatever comes after the click of this any user action that comes after this will be downloaded later and in the next cycle I will make sure that whatever is required for the for the home page is downloaded and finally those pages which are generating those pages which are generated as a click out of those first page are downloaded in the final cycle so that is why it was we called it ahead of time staggered loading next we measured performance after all this and we were doing pretty well in service worker supported browsers and we were actually doing well in Safari as well but it's Safari's repeat load was not at all different from its very different from its first load and we were wondering why and we dug deeper and we found that we've since we were not doing versioning on our polymer components it was resulting in around 80 plus network calls wherein it just says and ask am I changed and says no you're not so this created a performance bottleneck for our Safari browser so what we did was we added file revisioning and added set long expiry cache headers with this this enabled us to do this enabled us to go a step further so in our serve in our SWP service worker pre-cache this is how it would look like and this is how the network pre-cache a call would go so it would basically append a cache busting parameter at the end so imagine now I have a file revisioning enabled and when I am doing a pre-cache service worker is making the request to the same resource which was downloaded couple of seconds ago don't you think that was that is a waste so once with this enabled we could directly ship the code like this wherein I didn't have to depend on service worker to bust my cache and I was responsible for managing my own application so this gave us a tremendous performance boost not only in Safari but also in service worker supported browsers so we had a couple of more things that we did so basically our index dot HTML was generated out of an index dot bug which had configurations injected into it at runtime now the problem as you can imagine is that the first time I serve and I pre-cache index dot HTML is cached and index dot HTML it it doesn't have its hash written in in in service worker because the service worker hash is generated by reading index dot bug so index dot bug basically has something like you know square bracket and you know dot config dot something and whenever I change my configurations in my Docker that will not the service worker has no clue that it is has it has changed so I thought what are we going to do about this because we wanted config only redeployments so what we did was instead of versioning our pre cache directly as you know v1 v2 etc we put we replaced it with epoch timestamp so basically this enabled us you know to deploy as many every time we deployed service worker would know that there is a update and it would reinstall so you might think now because every time you deploy if you are going to delete service worker and etc isn't it overhead no not really because we have file versioning enabled so that would you know pick up from the disk cache itself so that way we are not we are only making a extra network call to face the index dot HTML again but rest of my custom elements are safe in the cache and with this pattern we were all RPL we didn't have push and we thought let's us let us introduce push to our application and we used we took the help of cloudflare in our infrastructure to make this happen so we had measured our performance before the ttfb time to first bite was around ttfb was around 1.7 seconds but after we added cloudflare server push it increased to 3 seconds so that was around 1.3 seconds performance penalty after introducing push so we stayed RPL so if anyone of you guys in the audience have a success story around implementing purple pattern using your infrastructure please reach out to me after the talk I would be interested in listening you know to the success stories so now let us have a demo on using a Chrome extension so basically I was coding in AngularJS and I was very much used to using bad rank a Chrome extension which allowed me to inspect the scopes in my application so whenever I used to do application programming which had a lot of conditional conditionally rendering UI it helped me debug complex use cases so polymer didn't have a support for such feature so I went ahead and actually built one so that I could debug my applications just as the way I did in Angular so basically here you can see that there are various conditions that enable and disable certain features in the application so this basically allows us so basically this shows the data associated with your pal polymer element so if you are you know building a polymer application then I think this will definitely come to your help so while measuring performance we use various tools I just want to know how many of you guys in the audience have used lighthouse that's a good number and what about web page test are you using it actively I think less people there are less number of people using web page test so web page test is a website where there is developer tools integrated there is even lighthouse integrated and it gives you a lot more features over that I think that is a tool which we all of us should use and while you are using it make sure that you test your you emulate a mobile browser like Moto G4 and also use a network connection called emerging markets 3G which is a which is a benchmark against which we measured our Ola app against so there it was we had a application size of around 200 KB a lighthouse core of around 100 and our first load time on low 3G network on a Moto G4 phone was 3.4 seconds and a repeat loads were within 0.4 seconds so this was the you know metrics that got us selected for Google I O so this was all about you know how we built PWA at Ola now I want to compare and contrast you know like you know how why would you use basically polymer so recently polymer 2 was released and it was it came out with support for ES6 so before I start with the advantages of polymer I will talk about the disadvantages polymer is a lightweight library polymer 2 is basically around 10 KB but if you are using it on unsupported browsers that would require a polyfill of around up to 28 KB and if you are concerned about IE support then there is only IE support above I11 and it also it also has some flaky support in UC browser and older versions of Android and web use and if you are considered and if you are concerned about SEO and also server side rendering polymer 2.0 doesn't have support yet polymer 3.0 is on its way and it has support it is in the recent polymer some summit they have announced that they will be supporting server side rendering and other SEO benefits so now let's come to the advantage polymer is a lightweight library of around 10 KB and because it is using web components it is the fastest library that you can get in terms of web components and you saw that it had a very simple data system and event system and a little bit of syntactic sugar it is very simple it takes just about a day to learn polymer but it is though it is so simple it is very powerful and I am sure that all of our use cases most of our use cases will be you know it is good enough to support most of our use cases and buy by CSS pre-processors I don't know about you but I am just glad that I don't have to work on less or SAS anymore with Shadow DOM enabled and configurable build so basically polymer build is highly configured wherein you can create multiple distributions like you know you can create a various bundles wherein using presets you can even override the presets themselves and these were the benefits if you are thinking it in terms of a single page application but it doesn't matter even if you want to use it as a standalone web component library it integrates well with any framework so if you want to know who how many people are using polymer in production this is a slide which was presented in polymer summit recently so ea basically they created a set of customizable UI elements and used it across all their various gaming content websites predicts they built a library where in where created components and they have successfully integrated with angular and react and McDonald's the menu that you see is actually powered up by which is actually now powered up by polymer and last but not the least Ola which built its PWA completely with polymer so we got featured in around 7 talks in Google I.O. and also got featured in polymer summit and these are some of the encouraging tweets that we received that would be all thank you hello hello hello yeah in the first slide you mentioned that the bundle and bundle of ES5 and ES6 you are talking about this slide is it yeah see so basically a preset comes with the lot of options so it basically allows you to minify and ugly fire J's it minifies your CSS it in line it minifies your HTML it so basically polymer CLI also does a sort of dependency graph and creates a distribution file so you could also create it analyzes all your packages so especially when you say bundled right so it creates a dependency tree and creates automatic chunks of it so it would do the chunking for you is that so you have you used webpack so basically it creates chunks out of your chunks for you right so something that is common and then some chunks which has been associated with the route so basically bundle does the same thing for you but the recommendation is using unbundled along with HTTP to because that gives you a huge performance boost as opposed to using HTTP one with bundled code can you hear me yeah can you hear me yeah yeah so my question is so you talked about polymer and a lot of features of PWA web components etc so firstly before polymer came in Google was pushing a lot in terms of Angular as a framework so polymer seems like a competing technology what do you think are the key considerations for going taking polymer over Angular or other technologies what is one key consideration that you think that is number one number two a lot of what you mentioned PWA HTTP to in retrospect do you think you would reconsider the decision to use polymer and perhaps you know just go with pure web components along with PWA so he asked he asked me two questions so what was the main consideration for using polymer and second one was would I go use you know vanilla web components so to answer that first see so there is a talk by Alex Russell in Chrome Dev Summit last year so basically what he says is we don't understand mobile net mobile works so for a mobile web to be useful it has to have a very less payload size it has to you know load things in a certain pattern so that it doesn't overwhelm a low end mobile device using a flaky connection so that is why we went with polymer because that only that had the performance characteristics that we were looking for so we so just to show you something you can take a look at this actually so because any framework that is not web component they have a lot of abstractions above them so this abstraction really translates into downloading that abstraction and then parsing that and browser also has to process that in runtime which makes it much more difficult for a mobile browser mobile browser because it has a very limited CPU as opposed to your desktop CPUs and to answer your second question polymer is basically providing me like I mentioned in my slide so it provides me with the syntactic sugar around web components and it provides me a decent data and event system so I wouldn't think you know unless I am I I don't find any compelling reason to use vanilla web components as such because this is really a lightweight library around 10 KB if you think polymer too so more questions I used web component using polymer but that was back in 2015 when 0.5 version was there you are not even 1.2 and we actually took the risk of going ahead with a production application for that for our POC it was working fine but as and when the application got complicated for Chrome Firefox it was working well but on I I think we are using 11 at that point but it was taking 10 seconds to just come up with the initial screen how is the performance now have you tested it on I? Yeah so there is this point right so we are concerned with building a performance mobile web experience for mobile so that is why we could go with polymer so we are not concerned with desktop performance as such because if it is performance on mobile at this level then its performance in desktop will unquestionably you know similar so if you are making it work for a Moto G4 on a low 3G end connection so the performance in non supported browsers on desktop would definitely be you know may be a little bit degraded but it would not be that bad any more questions so we are also getting up Rahat on stage if you had some questions from the previous talk since we have a little time on our hand just before just before taking up more questions two things which I just wanted to add to the answers very well answers given by Astrid so one is someone asked that why angular and polymer to competing frameworks by Google so angular and polymer are not competing frameworks polymer is just a polyfill or some added syntactic sugar around web components and angular is a whole lot of design patterns and complete app architecture framework and as I shown that you can use polymer web components or normal web components along with your angular app as well so they are two different things not the same thing and they are being promoted both by Google and not only one and the second thing someone asked that about web components or polymer being used not performant in browsers in IE as such so polymer 2.5 or polymer one had a lot of experimentation and a journey polymer from polymer to onwards a lot of core architecture for polymer was changed a lot of web components API got actually materialized and came into the beam before polymer 2.0 there were no custom elements or no shadow DOM inside the native browsers because a lot of experimentation was going on so apart from the polymer 2.0 you can a lot of production apps are using YouTube that is like the largest video streaming app is using it and in the enterprise world GE everyone knows about GE so GE has a platform called predix which is an industrial IoT platform they are using a lot of reporting dashboards which stream data from IoT engines like your large wind turbines and large aeroplane engines and stream that data use a polymer app to share dashboards from that any other question questions we have one here whatever I heard about web home I have not used it any time but it looks like some kind of a pluggable architecture that you can plug in things that are not existing right now in HTML and if I compare that with say Eclipse which is a Java IDE and we use a lot of plugins what I see is that every plugin brings its own dependencies and then you know even though there are 10 dependencies that use all of them require XML parsing or outputting some data they all need to include those dependencies as part of the package making all the plugins bigger and bigger and bigger and overall the Eclipse is like super slow to use so how do you solve this kind of problem here absolutely so you are correct but here see that the problem with even any framework angular react or anything if you use a lot of plugins a lot of usable code then everything comes at an added advantage or added weight but along with the weight of those components in react or angular there's come the baggage of angular and react component code as well react components there will be only pure native JavaScript pure CSS and nothing else so ultimately you are utilizing no extra code of some framework but your own logic in normal ES6 classes so that it will be there because you are using some plugin if you want to reuse you have to reuse that code but that code will be very minimal native JavaScript CSS and HTML no other baggage added to it right just think about it we had question there hello what's the impact on web accessibility by using web components what's the impact on web accessibility by using web components so web accessibility or a11y which you probably know as web accessibility is a completely separate spec which includes a lot of role adding to your HTML elements and all so it will not affect any of it because ultimately you have to take care of web accessibility separately apart from this this is just how you can plug in your or how you can bundle and HTML CSS and JavaScript together to form a new HTML element and improve you have to take care of that web accessibility add the event listeners to your keyword navigation and all one good thing if you want to use polymer so polymer has the web accessibility built into its paper elements so polymer has a set of reusable web components which you can use to rapidly create some user interfaces and that has baked in web accessibility features if you create your own native web components you have to take care of the web accessibility yours we have a question up there very nice talk by both of you speakers my question is for Mr. Khanna I am little confused how web components are different by the Angular Directives is there a same thing or the concept is same and because it was not present in the browser the concept was used by these frameworks so that because the major concept of composition is very very powerful that you can abstract out reusable components into some directives or some custom tags and use it if you want declaratively so Angular utilize it polymer like React also utilize it but now that benefit has come into the native browser for you that is the whole thing and everyone every framework is now making efforts towards accepting web components into the framework so the website I told custom elements everywhere it contains all the suit of tests running against all frameworks that what are the problems integrating web components to the framework there has been open github issues in their contributions and every framework has told the community that we will be taking care of these and accepting web components as it is one last question the gentleman at the back is it safe is it recommended to have a service layer included in a web component or should we just supply data from the outside components what kind of service layer are you talking about any kind of data that a web component needs to a web component will probably need some data infrastructure services can be service can be a misnomer there are two kinds of services generally a service can be a minimal proxy layer inside your backend that provides some data and then there can be a service which we used in Angular to abstract out common business logic on the front end are you talking about the common business logic on the front end part so as I told you right now web components in my personal opinion are more of for those reusable building blocks which have a very minimal kind of logic to build up those user experience components which the user can interact with so that logic should be embedded into the web component itself but what you can do and what polymer also does it that you can create some data web component layer or you can create a new web component for that minimal business front end business logic and then reuse it in multiple apps if you want to reuse that logic somewhere okay thank you thanks thanks I'm sure you must be having a lot of more questions but you can cast the speakers outside thank you Ashit for a great talk and thank you Rahat for answering all our questions our conferences include are well actually two things t-shirts this is our t-shirt for the conference it is a javascript ninja our mascot I'm going to incorporate this t-shirt into our next thing which is our stretching break so would you all of you please stand up while I turn myself into the javascript ninja our stretching today will be silent so you will only have to follow what I am doing if you're interested in your own ninja mask they will be available downstairs in the merchandise desk I believe after the break which is our next thing to do let's go have some coffee or some tea come back here before 12 I'd like you to all ninja your way in towards the center and the front we are pretty much a full house today so there aren't many extra seats thank you all very much for sitting through the morning session and we will see you at noon while you're waiting for the next session to start if you check your phone and make sure that it's on mute but also charged if you need some charge there are a couple of power points up here where you can plug in your phone so you might want to seat yourself accordingly there are two power points two extension cords here and I think is there one up near your feet okay it's in this row so have some power if you are not lucky enough to get one of these you can also charge your devices downstairs in the banquet hall in our activities area there are tables and each one of them has power so we want to make sure that your batteries do not run out during the conference hello folks welcome back from the beverage break and as you're coming into the hall I would also request you to take the seats furthest possible so that other people who come in late can get a seat without disturbing you right so the folks on the right slide to the right the folks on left slide to the left the folks in center occupy the center seats first and fill out outwards yeah so up next is a sponsored talk by Google delivered by Prateek Patnagar he is a UX engineer at Google and he's here to talk about PWAs and games which when combined are called progressive web games well what it takes to make a game super fast and interacting on mobile web Prateek is here to share that with us. I am Prateek Patnagar and I'm a UX engineer at Google I work with workbox team and I contribute here and there with the PXC Li and other components of react and today I'm here to talk about progressive apps but I'm pretty sure you must have heard better talks than mine about progressive web apps, read better blogs, better tweets, better tweet threads and everything so I'm just going to change this to progressive web games instead. Now before we start let's just have a look at the imaginary arcade gaming timeline or this is how it looks inside my head so we started with Atari then we moved on to 8 bit era where there was Mario, Contra and loads of loads other fantastic games after that came Sega one of the biggest game manufacturers in the 16 bit era and then we finally moved on to super complex graphics cards, consoles platforms, PS4s, Xbox, Nintendo's and very many so this was the time we had game versions, super complex physics engines, collisions, lightning shaders, custom hardware being made for games like Counter Strike and after all of this like all of this brilliant advancements this is what made into our daily lives and our daily and into our pockets. Games with tabs with swipes these all are really huge games and no offences the games on consoles, PCs are still a huge hit and hit me up for if somebody interested in a Counter Strike match or two after this talk. But this has become a huge contributor to daily gaming era. So some of these are like Candy Crush where you swap and match the similar looking objects 4px one words which are like you're given 4 images and then you let us at the bottom as buttons you tap and try to guess the word then is color switch you again you do nothing you just tap and try to make your ball move inside the ring with the matching color and the fourth is the hop where you just simply have to swipe left or right to keep the bouncing ball on the platform. All of this attributes to one thing the rise of mobile into the computing industry so like games like these were possible with mobile web for a very very long time but so why did industry and why did companies actually choose native apps instead of mobile instead of doing it on mobile web. Some of the reasons are like app icons your browser like imagine yourself sitting in your bed in midnight and then if you're bored you open your phone will you like go to a browser remember a URL type that URL wait for that game to load and then start playing or instead just open your phone whatever icon looks really nice to you go to that game go to go to that social network instead. Next up is notifications just before PWA service workers and all of this came into play notifications was a far fetched game a dream for web games could not or game developers could not reach back to it's back to its users and tell the users that hey come back play it's been really long or we have missed you third up is full screen experience games inside mobile web were like inside a browser with a URL bar with a button with notifications on top and whatnot everything to distract you apart from the game so native apps had full screen experiences from day one next up is in app purchases you are trying to buy a power you're trying to buy a character or skin or anything add on for your game and you are redirected to a payment app website where you have to type your password in a really really small text nobody would want to do that in middle like when you're bored and on top of it you want to do that so for this comes the payments API the web payments API where you can do it do all of this in just a few tabs and no small fonts or typing passwords next up is 60 FPS we all know this that web can get tricky with 60 60 FPS animation so luckily for us I'm talking about progressive games and I'll be doing all of this with canvas web GL and open GL so a lot of it becomes way more than doing this with DOM so combine all of this luckily when service worker came into play when manifest.json came into play and when we started doing progressive apps all of this are now solved for us app icons add a manifest user will be able to add your app add your game onto its home screen just like any other native app next notifications service workers easy tons of code samples out there add your add a push notification capability to your website full screen experiences one single key in your manifest.json and whenever the user opens it from the home screen opens up in full screen no browser UI no notifications bar no native buttons back home nothing next in app purchase as I said the web payments API helps us there and 60 FPS is what we'll talk through the rest of the rest of this talk this like enough of the talking this is the game this is this is the URL where there's the native game out there and we'll try to replicate building this one along on the stock so the I'll tell you a gist of this game you as soon as you do touch your finger on the screen the ball starts bouncing you have to swipe left or swipe left swipe right and keep try to keep the ball on these jumping platforms the speed increases as you proceed in the game and it becomes difficult no nothing fancy nothing complex just simple this stuff okay and with any other and like any other app or web app we need tools and I'm choosing babylon.js as my game engine Canon.js as my physics engine preact with preact cli as my for everything that is Dom Related and Firebase for authenticating users and hosting this particular thing you might have a thing in your head that this all of this combined is a huge huge payload like these might not occur as a very wise choice in your first look so that's what I hope that you take away from this website we are going to build super quick and super fast progressive web game using all of this so we'll get started well this is the welcome screen for a user nothing just one image two buttons I'm using preact and preact material components I included them and made my Dom three Dom elements nothing fancy and since there's no code there's nothing fancy in here our interactivity time looks fine it's approximately 1.1600ms which is on a regular cg and 10x load on cpu this is here because obviously we haven't added any code we haven't added any payload about authenticating our users I'll use firebase for it so firebase makes it really easy to authenticate your users with sms with email with facebook or whatever over type you want and do a bunch of other things you also makes it really easy for you to send push notifications and other things here what I'm trying to do is just import firebase app which is the core file for any firebase application and the firebase auth module I'm not using the database or the notifications or any other module just the auth module and mind it I just imported it haven't used it haven't written any code around it this is our timeline pushes my time to interactivity 1 second ahead now does this make firebase bad no because it's a really really useful tool and since we are using it up front and since like it's a game and I have to like show the user an option to login here itself that is why I started using it but we need to fix this I cannot push my time to interactivity 1 second even further and this is on a metered network that is I've throttled my network to a regular 3g this can go even bad than this so I need really need to fix this this is how I did it I built a utility function which returned a promise next this promise calls the require.ensure of webpacks since I'm using pxla it comes already baked with webpack and its utility functions so I call require.ensure which brings firebase and firebase auth at a later point of time now this require.ensure if you would have used it already takes a callback so this callback is called when these whatever files you mentioned in the array are downloaded this callback resolves the first promise with a new function using a closure here so this function will know whatever is there outside the scope of this this function whenever is called actually starts using this using the two files that is firebase app and the firebase auth why I did this I wanted to download this file as soon as possible as soon as the game started downloading but I did not wanted to do all the parsing I did not want the parser to pass through all of this file without even if user want to continue as guest I do not want to waste time passing these files so now exactly when user will click so after these files are downloaded we'll enable the login with Google button and when user clicks this only then I'll call this return function and the parser will pass this thing and do the rest of the code this is how somewhat the code looks like require.ensure app and auth resolve it this particular returns a new function which resolves the promise and this promise I can use this yeah this this function when it's it is called when the user clicks on the login with Google and then it's passed and then it's done later on with this we gain 800ms of what we lost back in our hands I still download those files but I never use them so parser do not pass these JavaScript files and I gain all that time which was being used to pass these things so now a user can come in he'll still get 1600 or 1650ms of time to interactivity but now we can choose not to go through all of this pain and continue as guest and these files will never be passed all together lot of performance talk already did now let's see how we start actually building a game after you are done authenticating a user with continuous guest in a dialogue or with the Google you redirect him to a new route using whatever you want and here on this route we put a simple canvas element canvas element position absolute top left bottom right 0 with 100% height 100% so it takes up the entire space now this is your entire stage where we'll build this entire game so much like any other JavaScript module or node module babylon.js also comes with ESX imports and everything so we'll import an engine a scene a light and a camera we'll initiate the engine giving the canvas object just new engine and the canvas object and then we'll initiate the scene giving it the engine so new scene no rocket it's just instantiating new objects and then comes an engine render loop this tells whenever this function is called you need to call scene dot render to continuously re-render your game scene this will give you a black screen nothing like there's no background color to this canvas it's the babylon.js which has rendered a black screen because there are no lights and just a simple canvas next we'll add lights we'll add lights to our game we'll do a new hemispheric light there are multiple kinds of light point light hemispheric light and other stuff which you can go ahead and read what exactly are the use cases of this hemispheric light is like tube light in the room which evenly spreads on your entire stage so we'll do a new hemispheric light name of the light and a vector where it will be placed where the source of the light will be placed and the scene to which it will be attached so this dot scene and the intensity of the light so you can alter this intensity and it will reflect on your objects accordingly also we'll attach a camera so camera is what comes and define the viewport of your player that becomes like the eyes of your player where he's standing and where he'll be looking at the game from so again very simple new free camera again a vector where initially the camera is placed and the set target where the camera is looking at so this is like you're standing at x and looking towards y this is all an empty room you can imagine right now where you have been just kept at one place and you're looking at another one there's one line that I have written camera attach...inputs.attach.mouse as detach control for my game there is no way where the user can move its viewport or look here and there if you do not do this by default with mouse with the WASD keys the user can look left right top and bottom since it's a free camera okay now we'll start adding objects to this particular stage we'll add one platform and ball on top of it and some more platforms and then we'll start beginning the you know start the animations and everything so this is how you add a simple box or a simple platform in babylonjs you do a mashbuilder.createbox you give the name of the box and its size and its height so this is like babylonjs has its own matrix system so you might take some time to get used to it it does not really work in pixels it has its own matrix system so too on this device might give you a suffice size of your platform after this we give it a material there are standard material there are reflective materials which will give you a reflection kind of thing and there's a water material and more materials like this so I use standard material give it a color and give it a position so on x you stand on 0 and on z you stand on minus 16 so we are having a simple box in our room floating on x0 and towards us since the z is minus 16 next up we'll put this logic inside a loop and we'll build 10 of such 10 of such platforms so this is like create new box and we'll randomize the x position of it so that user has the difficulty of swiping left and right and then he has platforms at different places to make the ball jump at and then we'll keep incrementing the z position since we are incrementing the z position by 8 yes so the first one is here second one is here third one is here and so goes on into that empty space so this was all about adding platforms now we are adding a ball since we know where we place it's a static thing with this game where we placed our first platform we'll create similarly a sphere so this is how you create a sphere mash builder dot create box was to create a platform or a box mash builder dot create sphere is how you create a sphere out of it you give it a diameter you give it a scene and it starts rendering a gray or a black ball in your scene depending on your lighting source now using the position attribute again just place this ball exactly in the center of the exactly on the center of the first box any anything confusing so far this is like all simple new instantiating new objects and placing them at x or y just imagine this like placing your dorm at certain positions now we need to add texture first is the way babylon js includes texture is like you give it the file path and the object which to apply the texture then it will imply like include the file try to download the file and then apply it to the object what this can do is imagine you have already presented the scene to the user and now babylon js is taking time to download this particular image or the basketball image that we are using here as a texture so your user sees like an unstyled sphere in your in your game this is an equivalent of flash of unstyled content in your daily daily use apps so what we did with first download before this game will actually start with first download this image create a canvas of image height and image width what we downloaded never added this canvas to down though then we draw then we will draw that image on this canvas and then extract the base 64 string out of it so with this base 64 string babylon js gives us separate function to create a texture from base 64 string so we will give this base 64 string to this animation and it will give us in return a texture which we will apply to this particular sphere so this will give us what we are seeing on the right hand side a green box a 10 green boxes and a sphere sitting on top of it with a particular texture now like any other game we will need animations to support a game so the first series of animation that we will add is as soon as game opens our platforms will fall down and from opacity 0 to opacity 1 and from a particular height to height 0 there are two kind of animations first is the keyframe animation that we will be doing here so keyframe animation you say that these are n number of keyframes and these are the stop points so we will use and start in end keyframe only so at frame 0 the dropping animation the value of opacity will be 0 and at frame 20th it will become 1 the next one is the dropping animation which is like at frame 0 it will be at height 3 but by frame 20 it would have fallen at height 0 combined both this is how it will look but these are just keyframes declared we have not attached to which property will it be applied to which object will it be applied to this exactly is how you do it you instantiate a new animation give it a property name so like you would want to alter position dot y or opacity with this frame rate with which you would want this animation to run an animation type so this can be float animation or geometry animation where it will be doing matrix kind of matrix manipulations for your animations or color animation since color is a 4 value or a 3 value animation so that you can choose from here and the type of loop so will it be a constant loop will it be looping forever so since we wanted to play just once I've done constant next is we add keys to this particular animation the keys that we declared in the previous slide that is from frame 0 it's at height 3 and frame it's height 0 and then to the to the object we do animations dot push this animation from which frame number to which frame number and will it be will it be appendable so this appended to box will provide a falling falling animations you will need to do a say a similar kind of code for opacity as well and just do a box dot animation dot push opacity animation as well so both of them will play together and it will look somewhat what it's looking on the right hand side now comes a scary part physics with every game comes in collisions with every game comes in game engine impulse mass restitute and every other kind of horrifying term that you would have heard in your university or your high school if you are afraid of physics so then like implementing all of this by hand this is just too much work to do but this is how JavaScript community works right you throw a problem to it and then npm which out here are 64 solutions to it so thanks to JavaScript community nothing is really scary for us there are physics engine which takes care for all of this okay let's now see the code how you add physics again there's no rocket science again just like your load or any other kind of dependency just import it babylon js somehow I'm not sure if I'm completely right here but expects physics engines to be at window scope please correct me if I'm wrong I wasn't able really I wasn't able to scope this to anything other than window so I did a window dot canon canon canon is our physics js physics engine which implements methods for collision how gravity will work how mass will work in with your objects this and this is how you enable physics in your scene so you have to do seen dot collisions enable true so now it will your scene will start detecting collisions between objects to which you tell it to do and then enable physics this will start enable normal physics stuff like gravity and all two objects so one thing to see here is worker collisions true what will do is all your collision computation which is a lot if there are two objects are colliding so there's a lot of computation to be done it will refer it to a different web worker all together you don't have to write the web worker babylon js automatically downloads a web worker for you and does the computation here you just have to do this one line next is add physics imposters so babylon js objects in the on the stage them itself cannot do anything related to physics so there are physics imposters from canon js you add there's like a box imposter for box likes objects for a sphere imposter a cone imposter and a mash imposter not like the other three which would make sense from their name box which sticks to any shape object so it's like the most complex imposter and helps you detect collisions so for example a box is pretty straight forward to implementation against a tree kind of object there's a tree such complex cases you use mash imposter so you instantiate a new physics imposter and tell it okay it's a sphere imposter to which object will it does will it check the physics everything and give the mass in restitution so restitution is if two objects collide how much energy will they still have after the collision so if you do 0 they'll just collide and stick to each other if you do 1 there will be no energy loss and whatever velocity they were colliding with each other it will be just opposite in the opposite direction so we are not really doing a lot of impulse and thing and we'll be manually checking for collisions that kept mass and restitution is 0 next thing you have to tell the objects that you have to check collisions for you like you should not do all objects colliding with each other and checking with each other because that will be like way too much work so I'm just doing it for I'm doing it for the ball and for all the platforms next is the same it's a very similar kind of experience for for the box as well new physics imposter and to which it is has to be attached box and you have to do the box dot checks check collision dot is equals to 2 as well next the event listener now our stage is set but nothing is happening there are there's physics enabled but nothing is happening because we have not really started started the game itself so we'll do two DOM listeners one is the touchdowns as soon as the person touchdown I'll save it as a reference point and next is the touch move so when he moves his finger I'll use that reference point and check the delta and try to convert it to a Babylon JS matrix system okay this is how our game is going to work ball is at the starting position within 15 frames it rises to height 5 and with after 30 frames it will fall down to height 0 this is how our ball will look like it's bouncing in parallel to this I'll also adjust the Z position to it while our ball reaches towards 0 again we'll check if the ball dot position dot y is less than 0.5 which is like it's somewhere near to the next box and if it's colliding with the next box or not so this is like 10 boxes in an array so I'll always check if it's colliding with the box at with at the index one or not if it's not at this point of time we'll let it freely fall to height of minus 20 this is how it will look that the ball will jump and it has fallen down to great height and the player has lost if this thing if this check does not passes if this check passes I'll pause the particular animation so that it does not fall below and I'll restart the animation with the new Z index values that is from index 1 box to index 2 box this is a total animation of 45 frames and this is how it looks inside the code we'll check position dot y is less than 5 or not we'll check if it intersects with a new mash with this which is the box at index 1 if it if it does we'll add we'll call this score call back update this score somewhere here and then start a fresh animation next is animation events animation events and babylon is like if this particular frame has played or not so what I've declared is at 40th frame play this animation event and whatever call this finish callback so this finish callback will tell so it was a 45 frame animation and at 30th frame it should have collided with the next box if it hasn't if 40th frame has actually reached this means that the ball has fallen down and we'll tell the user that you have lost so this is how our anime animation events will work to any animation we'll just need to do animation name dot add event and this last event so if this animation plays up till this specified frame number then this event will be called now all of this wiring up will give you the game that we saw but here are some few bonus steps a your stage will never be scrollable scroll plus heavy animation does not really go well hand in hand next avoid the mesh imposter as I said it's too much computation and it might hurt your frame rate at mobile browsers at this point of time second differ your collisions to web workers that we have like already discussed now progressive web mapping like the whole talk was progressive web games I've told you how to build the game but progressive web thing is still missing at this point of time if you try to trace your trace your game there's a huge six second gap on your on your timeline like user is literally sitting there and waiting for game engine to download your logic to download your assets to download your sound textures whatever this is bad let's fix this I'll put a prefetch link real prefetch tag into the header so as soon as the user lands on the login screen with the lowest for this prefetch tag starts downloading your game engine and your game logic with the lowest possible priority so that whatever work user is trying to do he keeps on doing that but your game engine is also started to has also started to download in lowest possible lowest priority checking after this now this difference I'm not sure if it's visible but this difference only two and a half seconds you might say that we optimized for nine eight hundred ms in the beginning of this talk but now we are letting go for two and a half seconds there's a difference in that eight hundred seconds your app was not initialized you could not have shown anything on the screen here you could show a loading screen just like any other gaming device shows this technique is used even with even by consoles today so you can do a loading screen here you can do you can do a linear progress bar or a spinner or anything that you want to do here your app is actually initialized you do not need to leave this blank now comes the service work apart much like native apps what they do is they pre-cache everything they install all the things related to your app at first and then give you the app to interact with so let's just be web what we'll do is we'll install a service worker with minimum possible pre-caching just whatever it is needed to bring our app in offline state and then we'll install runtime caching strategies so what we'll do is when the user actually starts playing it will then intersect the outgoing request and whatever response comes in then gets cached so our service workers are not really waiting for everything to download rather it's just sitting there with an empty cache and whenever the actual outgoing HTTP request happens it intersects that and then puts it into the cache how do you use so all of you must have seen multiple service worker talks and other things but since I'm using pxc li this becomes super simple there's a file called pxc config.js and you have to use a pxc li hw pre-cache plugin I cannot really seem to remember that although I made it so there you just have to give this particular setting in a JSON object and it will intersect all outgoing sound and texture files request and whatever response comes in gets stored into the local cache and enabling our users to play this offline from second time last thing do not forget to add a display full screen this one single key gives you a full screen playing capability to your game whenever it's added to home screen and all of this is built and I'll be showing you the small gif or a video from it and the URL but some of the code is also open source so please feel free to go ahead and contribute to it here are some ideas what you can do while we saw an losing event on that we can capture the entire canvas and maybe share it with friends the high score and how we lost next is challenge our friends with push notifications or even use the point system that is already baked into the game right now to load more and more textures later on I had for today I think you have been a great audience thank you we have some time for questions questions I see there the balcony so can you please explain like why using babylon and is better or worse than unity or unreal engine because they also provide these capabilities of developing games for across platforms right so I mean is the physics engine really faster than those or they provide some something better honestly I do not really have the benchmark numbers right now but unity and I guess the unreal engine uses the WASM as of today to export the game and this is all what I built with js simple plain js I guess for unity and unreal you need to go and code in their system with whatever they are in their ecosystem whatever they give you I'm not really sure if you can just use your javascript skills to build a game there so that was the reason I tried looking at unity itself but I wasn't really sure with the entire coding ecosystem and I wasn't very comfortable with it somebody has started playing this game yeah and this is all plain js hey so one like can you hold it closer to you yeah so I saw some like I played some games on Facebook messenger STML games and they were really they had great graphics and they had like real native experience on a phone or on a desktop on a phone so you know something about that one and two like this progressive game in future or something on those lines so I am not very sure about so his question is there are games on Facebook messenger if what goes on behind the scenes are there I'm not really 100% sure about it but heard that it uses some portions of react native as well to you know on-flight deploy them and B if progressive web games are becoming a thing so there's this website outweb.io which lists good amount of progressive apps and it has a section which of games you can go and check out the games this was just my trial to bringing this thing in spotlight that we can start making similar kind of game experiences that native games provide today 2048 is one of the best game experiences even though I don't know if it gives if it uses service worker but it was the first one to come out with app cache and give offline experiences but yeah that was one of the very first and awesome games that I played on there question there I've been looking at the documentation and I'm unable to find some like real world examples of like I see this as being one of the examples but I can't find other projects so like have an example to start with right all I see is this playground of babylon js but if I save the file it's just like one html 5 and they're like tiny examples yeah so that if you're using ps6 and all of that right but even the npm project doesn't have how to use it as an npm project okay I can take that as a feedback maybe we can start something because so babylon js has a playground kind of it kind of a repel that babyl and other even facebook native gives sorry react native gives so it has similar kind of thing but not really an end-to-end documented process on how to use it but honestly if you use it from npm it's just like any other npm module just import whatever you need it from babylon and or maybe import star from babylon and just start using it so I tried to build a similar application in android marshmallow so I faced the challenge saying it was kind of not working in lollipop and below android versions also there was some problem with redmi custom ui so I was trying to kind of use different sensors like accelerometer and gyroscope but the sensor was not working I was not getting any value so is there any challenge with respect to interactions with your OS and so now the thing with web apps is that browsers encapsulate a lot of your interactions with sensors interaction with as gestures you do so it shouldn't be a direct challenge to OS but more of a browser version that we can check if it's not working in I'd be like feel more than happy to take it back so app icons and iOS still is with still icon manifest and the link tag with it the manifest does not really work however you just have to still give them the same link rel tags to give the icon of the particular web page the display full screen will not work this might this will definitely not work in an offline scenario but yeah it's playable still it's still it's playable you just go to this particular or you add it to your home screen whenever you open a network sadly as of now it does not support offline so if you have a network you will be able to play just the way android users play hello yeah hi what about the performance implication when you you know close the application or put it on standby because the animation frame will still be running in the background right pardon what about the performance implications when you you know like close the application not close it completely get a move to another application stuff like that well the animation will be running in the background mostly as far as I know babylon.js has a mode to switch it to request any animation frame so if in that case switch to other application or you just press home screen request animation frame will not fire anymore and then that will just your game will just be paused and even if it's just a note there even if it's not supported in the render loop where we where we wrote scene.render will just quickly show you this one just wrap this scene.render inside a request animation frame and you should be good to go since request animation frame will not fire and for the talk oh it's definitely performance babylon.js just happened to be a little more helpful in case of games whereas 3js is a very generic thing for any kind of 3d animation I literally build VR we have applications with it in 3js on mobile web and browser so it works fine it is performance though you might need to do some tweaks here and there but just babylon.js happens to be a little more friendly for game development is going to talk about midi technology tiny computers like the raspberry pi have finally reached a level of performance and affordability that makes hardware experimentation accessible to everyone in conjunction with midi can do wonders beyond music and George has some equipment also that he needs to set up there during that time I would like to ask audience for more feedback you told us about the lighting addition and hey we tried to fix that during the interval so if you have more things you would want us to fix or you have feedback please do share with us that helps us make this a better experience for all of you do we have any feedback anything anyone wants to share also by a very good happenstance today is an engineer's day in India we have some folks from outside India and some people in India who also do not know why we celebrate this so this is celebrated as birthday of Sir M. Vishweshwariya he was a civil engineer during the British era responsible for building the Krishna Sagar Dam Krishna Raja Sagar Dam and Hyderabad's flood protection system so he was anointed as a knight during the British rule in India so the exact title is K. C. I. E. Knight of something in Indian Empire here so he was a very eminent engineer from India which even the Britishers had to recognize him on a world level and his birthday on 15 September is celebrated as engineers day in India so happy day to all of you also on the ground floor we have an unconference and unconference is something which is not scheduled so if you want to talk about something you want to conduct a workshop you want to initiate a discussion about something you're free to contact one of the volunteers hall managers registration desk and we put it up on a whiteboard on the website there's also another session at 3 o'clock which would be happening in parallel that session is going to be about yes virtual reality using WebVR so that is in the banquet hall downstairs at 3 o'clock limited seats obviously so first come first serve and feedback forms please do keep filling them that is a lot of equipment for JavaScript don't you think okay can everyone hear me now that's a little bit better I think okay well I want to thank everyone for coming and I really want to thank JSFoo for having me there are a lot of really cutting edge progressive talks here we have talks about progressive web apps and web components and people from very impressive companies like Google this talk you know all those talks those have like cutting edge information you're probably going to be able to take home and use in your work or use in your personal projects but in my talk I'm not so sure so on that third column where you check off whether you're going to use it in your work you can already just check a one right there I don't mind I won't be offended so anyway my name is George Mandus like they said I am from Portland Oregon I am from Portland Oregon the US I'm a freelance web developer I've been doing it for over a decade now one of the earlier slides during the first talk this sort of showed the evolution of front end development it kind of made me cry on some level because I remember one of those stages so well and there's still a lot of pain involved it feels like a very long time some days before I do all that yeah so I'm here today to talk about three things sort of primarily JavaScript, MIDI and tiny computers and I'll get into what all these things are a little bit later here so let's through these some fun facts I think I think it's nice to sort of humanize developers a little bit you may or may not remember some of the things I say but if I say a couple funny things up here you might remember that and then you might remember something else I said right after it and so I kind of use it as a way to help people learn things or maybe help take away something from my talks this is my first time in India it's a fact I don't know how fun that actually is for you it's fun for me I lived as a digital nomad in 18 different countries for over a year it was kind of an interesting story I'd like to throw that up there I was born in Saudi Arabia which is a long story kind of interesting they already I forgot I put that on the bio but I once unintentionally cheated while running a marathon in North Korea I cannot advocate cheating in general but if you're going to do it I would suggest picking a more lenient country my most known project is a really frivolous one called KonamiJS I always ask is anyone heard of it I'm curious are there any hands okay I see like five hands it's like maybe what I expected and I'm guessing you found it because you googled my name because you saw that I was talking you wondered who I was maybe but that's okay it's a really frivolous Easter egg project I started over a year ago I'm sorry we're almost ten years ago my claim to fame with that project is for about five minutes I crashed marvel.com because they were using it and I pushed some changes to github and they were linking directly to the file and Newsweek decided to use it to make all of the articles on their website turned into articles about zombie attacks another weird thing like I said it was a very frivolous piece of open source software and I'm kind of proud that like my most known contribution is really pretty silly and so you know in keeping with that I'm going to talk about more silly things with MIDI today so I like to start with an experiment here okay so I'm going to pull up a website and if there's anyone out there with a laptop maybe a few people feel free to pull up this website I'm going to wait a moment I have a lot of demos I've learned over the course of giving this talk I probably have too many demos so I may skip a couple as we go down the line but if you are interested in this stuff if you think it's fun you want to see more and talk more about it come meet me downstairs later and I can show you some of the demos I'll probably end up skipping over okay so hopefully a couple people have had a moment to I see four people who joined so far that's probably enough so make sure your audio is up I want to do just a little interactive demo here to start just to see how things go and this has been occasionally hit and miss but let's see how it goes so let's see how it goes oh who's that could you raise your hand oh there we go there we go yeah so what's happening now is I'm playing I'm playing on a little keyboard up here on my stage which just in case you want to see what my stage looks like right now it's kind of a mess of many things here and what happens is every time I play a new note it comes out on a different computer out here in the audience using WebRTC okay here we go oh and now that I've got 71 of you in here I think I could actually play some chords anyway I just like to start up something kind of fun well that one went pretty well you know I think it's just fun sometimes to before you delve into the code or even instead of delving into the code these things it's just the fun to sell the fun outside of the box interesting things you can do with these things that we're talking about okay so I have one more interactive demo let's see how this goes you kind of know the drill by now there's the website so it's a little bit different and I'll try to rush through this here hopefully you've had a chance to see the domain and type it in so once you get essentially a little page just as join the symphony go ahead and click on that button at my screen this one I'm a little less optimistic about working at the moment just because I'm noticing my web font isn't loading so something might be a little slow right now well you know what that's one you can come back to then oh and grok shut down that will do it okay well let's move on okay um so like I said today we're talking about three things we're talking about javascript obviously it's a javascript conference talking about tiny computers and what I mean by tiny computers are things like arduino's and raspberry pi's esparinos basically single board computers and single board microcontrollers quick show of hands how many of you have played around with any of these like arduino's things like that okay so maybe close to half or third to 40% I can't say really mad at judging crowd hands um and lastly midi I'm curious how many people are familiar with midi and think they know what it is how many of the same people who put up their hands are musicians so we're talking about these three things and the reason I like these is in combination you can make some really fun kind of outside of the box things using javascript tiny computers and a really old protocol called midi so why javascript I don't really have to spend a lot of time on this but javascript is everywhere it's on the client side, on the server side it's peruino like I talked about earlier is a you can actually write javascript that runs on the hardware directly it's a really cool pretty thing basically javascript is literally just about anywhere you can think of when it comes to computers and programming and yeah like I said it's basically everywhere it's also you know where the people are there are so many javascript conferences and so many projects and there's a joke earlier about you know you go to MPM you type in the words thinking you're looking for the package you think you know that you want and you get like 64 suggestions and you have to figure out which one you want to use you know there's just so much traction in the javascript community it's just a really good place to be right now the asynchronous nature of javascript is a really good fit with midi so I'm going to talk about what the midi protocol actually is but midi is also an asynchronous well it's an asynchronous protocol and it's asynchronous nature makes working with it in javascript really easy it's very familiar and it's like almost any other sort of web based or any browser API you might think of so why tiny computers to be perfectly honest you know I probably could have done this talk without that but I just think they're so cool I think they're a lot of fun they also kind of remind me of sort of the hardware answer to the open source movement in some ways or something just very about being able to buy a computer and own the entire thing and be able to put things on it in this you know in this day of like serverless technologies and cloud computing it's like for all the wonderful beautiful things that those can bring you know they're kind of owned by three big companies at the end of the day and it's kind of nice to do something it's a little bit removed from anyone else's jurisdiction I think and just for those who don't know we have a Raspberry Pi and Arduino chip computer is anyone familiar with chip I'm curious they're not as popular but I think they're really fantastic I really recommend looking into them oh and by the way at the end I have a website that has links to a lot of the stuff so don't worry too much about tracking what I'm saying and lastly at the bottom I have an Esperino so this little clicker that I'm using is actually an Esperino it's a tiny computer that I've programmed to operate as a MIDI controller and I'm using it to control my slides right now I can go forward I can go back and if I don't feel like it was enough I can do this and I get a little bit of applause I have to make myself laugh sometimes okay so more you know more outside of the box than interesting so far so why MIDI so what is MIDI MIDI well it's an acronym that stands for musical instrument device interface that's kind of opaque I mean sort of it's a protocol invented in 1983 that's the other thing I think is really interesting about playing with JavaScript in MIDI it's a very old protocol that works with like the latest technology that we're using and it's funny how nicely they talk together and it's funny how I would say there are more interesting things you can do with MIDI now than you necessarily could say 10 years ago or you should say it's easier to do those interesting things now and it's just funny how you know technology as a way of being a little bit cyclical we like to reinvent wheels old things become new and MIDI is just kind of a funny outlier that sort of struck a chord with me when I was thinking about that it's also a standard it's actually the as I'll get into in a minute there are certain companies and bodies that maintain what the MIDI standard should be and I just think it's an interesting parallel with our own industry with what like W3C standards and other open standards and how those are decided and dictated it's kind of similar it's also a file format and I feel like this is probably where most people are familiar with it I think if you were depending on your age if you're growing up in the 90s or early 2000s like if you were on the internet in the days before mp3's like made streaming audio very easy you might have downloaded really chintzy sounding MIDI files like this or this but um and I you know at least between a lot with a lot of people I know this sort of these chintzy fake instruments sort of became synonymous with oh yeah MIDI right MIDI's that sort of cheap sounding music and I mean it's not 100% wrong but it's funny how that you know that's synonym because the file format the standard and the protocol are all just called MIDI there's a lot of confusion surrounding like what exactly that means and it's definitely not this either I think all of these came with like Windows 95 back in the day but I'm not sure this one definitely does actually so talk a little bit about sort of what MIDI is it's a lot of different things MIDI the protocol this is it is what allows electronic musical instruments like keyboards to talk to other electronic musical instruments and computers they describe common things you might associate with a musical performance like is this note on is this note off you know is this is this note being bent in a particular way and a bunch of other sort of musical things yeah it's you know this was all back in the days before I mean the first MIDI instruments were communicating like sort of directly with one another and not necessarily with computers like it was today and so it's really interesting to see how they came up with this protocol that still works like very well. There's MIDI the standard like I said it's maintained by a body similar to other open standards and there's MIDI the file format like I said and all that really what it does is describe a sequence of MIDI events like I said the notes that are on and that's sort of all things like that I always think of a piano roll kind of like this when I think of a MIDI file and how that works I just do that in there and the last conference I gave this talk at on stage at dawn I mean you know I feel like guitar hero is probably a much more modern example for what I was trying to convey here so again I'm talking about MIDI in this talk. MIDI is asynchronous like JavaScript it talks to hardware which is interesting that opens up a world of interesting possibilities and the ability to hack on and create interesting things and it's incredibly easy to use as we'll see. Oh the other thing is really interesting so JavaScript can talk to MIDI via node there's a lot of MPM packages and things but the thing that really piqued my curiosity in all this was when Chrome shipped a couple years ago with MIDI support you can plug a MIDI capable device into your computer and Chrome will see it and you can start interacting with JavaScript with that MIDI device without any crazy extensions or plugins or any other like in a witchcraft it just kind of works out of the box like I could take these MIDI controllers and plug them into all of your computers out there and we could start hacking on it and making interesting hardware JavaScript collaborative things and so by extension like I said Chrome OS, Chromium and Electron which is really interesting if you want to make a standalone piece of software that operates with a piece of hardware that maybe speaks MIDI and I was curious the other day and I looked at can I use to see what browsers support it and it's really only Chrome but I guess technically we have 59% global coverage which is a lot better than I would have guessed not that I expected to use that information for anything. Okay so when I'm talking about MIDI controllers we're talking about like the things I have up here on the podium like I showed you a moment ago. So there's pre-existing USB ready controllers you can actually buy controllers and keyboards and things from the mid 80s and buy an adapter and plug them into your computer and start talking with hardware that was invented before probably some of you were born honestly and you can even build your own giving back to the tiny computers I have I don't have it up here but I can show you downstairs if you're curious I've built a little MIDI controller using an out of fruit Arduino based sort of the thing and the possibilities for just creative things you can build really open up when you start dabbling with actually making your own hardware and getting it to talk to the web and here's some photos of some of these things I was talking about I've actually got this one up on stage I've got this one down by my feet I don't bring that one because it's heavy let's see oh and yeah so you know so far I've mostly talked about things like keyboards like things that have buttons but what's also interesting is there's like you know other types of sort of outside of the box controllers that they're like this one is a breath controller kind of looks like a flute or some sort of wind instrument but it's able to detect how hard you bite on it how how like hard you blow into it this one I also have up here it's an accelerometer that translates the accelerometer signals into MIDI signals that the browser can interpret so there's just a lot of different ways to like interact with the physical world once you start delving into the different kinds of hardware that's out there and then this guy this guy was like does anyone know who Future Man is I'm curious we have one Baylor Fleck fan in the audience I see anyway he built his own MIDI controller like in the 80s and was way out of his time and was kind of out there and I just want to throw that in there and like I said you can build your own video I shot at home of a MIDI controller that I didn't build but someone else built using Arduino and I was experimenting with it a little bit doing an interactive website and hardware demo here there's no extra plugins or anything I just plugged it to Chrome I wrote a couple of really simple lines of code and I made this kind of fun interactive thing sadly I dropped this one and it broke so I haven't been able to take it around so let's talk about what a MIDI message is. At the end of the day you get three numbers you get three bytes and you have only two types of messages within those bytes you have one called a status byte which is supposed to tell the controller what kind of a message we're sending like is it a note that is on, is it a note that is off is it something called a control change which is a sort of reserve word for a different type of interaction and the other two tell you what sort of data you want to associate with that type of message you know I have links to websites explained this more in depth you probably don't want to do this you probably just want to see some of the demos and some of the code samples to get a little more inspired by like what we can do with this so I'll skip through a couple of these really what all this boils down to is that we get three numbers in an array kind of like this and although the MIDI standard sort of dictates what those messages are supposed to mean like this one for example is supposed to be is supposed to tell me that a particular note is pressed on on this keyboard like I think G maybe you know that standard at the end of the day it's just three numbers and it can mean anything you want and so if you want to start using MIDI hardware to create your own contraptions all you have to keep track of is hey you know when I hit this button it gives me these three numbers if I send these three numbers back at the controller it reacts this way and so on and so forth okay so what does it actually look like if you're using Chrome you may be familiar with this you can you know if you want to make a web page that requests a location or wants to use the webcam or send notifications you have to ask the user for permission MIDI is kind of similar it's kind of a funny one it probably never pops up because there are not many websites asking you for MIDI access when you arrive for the most part but if you pull up any website look at it right now you should see it at the bottom if you're looking for requests to the MIDI access object looks more or less the same as it would to ask access to the geolocation API or something like that you know you ask for access if it gives you access you give it a function to run if it's successful you give it a function to run if it fails and then there are a few other sort of specialized aspects of the API to handle messages as they're sent back and forth between the device and the page that you have set up I have some examples here of iterating through a bunch of control like up here on stage I have 1, 2, 3, 4, 5, 6, 7 MIDI controllers I think plugged into my computer right now and so this is just a tiny example of how I have a little function or a little loop that iterates through all of the available controllers looks at them by name and maps them to particular places so that I'm not on the line looking at what was MIDI controller 1 what was MIDI controller 2 I really don't remember is it this little clicky thing in my hand or is it the keyboard I can't remember and then handling a message like I said you just get an array that has 3 numbers there's some other event data that comes with it but the 3 numbers and the data are really the only thing that are important towards interacting with it yeah so there are some existing libraries that make working with it a little bit more easily especially if you want to work with it in a purely musical context like I said there are links to this on the website I have at the end but WebMini.js does a very good job of helping you write code that more clearly describes hey we're listening for a note that is going to be played we want to send a note to this device whereas the sort of the built in WebMini API has more sort of opaque methods when it comes to interacting in that way so here we have some oh yeah MIDIUtils.js is a good utility for taking these MIDI messages and converting them to notes and frequencies if we want to again create a more musical interactive kind of experience with our MIDI controllers that's not it for the presentation that's it for talking about MIDI and so quick we mostly talked in these demos about the client side I'll touch real briefly on the server side it's very similar the only difference is we don't really have to request permission latency can be more of an issue depending on how you're trying to use MIDI I could talk more about that downstairs if you're curious working with MIDI files is much much easier some of the front end libraries that I just went through WebMini and MIDIUtils.js will also work on the server side which is very nice and you can do more interesting system level things one of the interesting things I'm playing with right now is you can actually create virtual MIDI instruments on your machine using Node and when you create a virtual MIDI instrument in one instance of Node you can fire up another one and it'll see that MIDI instrument and you can start sending messages back and forth and I get to think of a good outside of the box way to use this but I'm I'm open to suggestions we can talk about it more later yeah there's just an example of the server side JavaScript and using MIDI on the server side using a MPM package called appropriately enough MIDI we listen for input from the MIDI object when we get a message we log it to the screen I don't know if you can read that but I just put parenthetically or commented out an example of the array that it usually spits out so now it's demo time let me show you a bunch of the interesting things I made and why I think this is a really good platform for you know creative computing and creating sort of hardware JavaScript hybrids and user interfaces in a way even outside of the computer that might be fun so one of the things I'll skip that one it's not as much fun this one's more fun no no I gotta do it I feel I gotta do it okay so this piece of this little page that I threw together it is all it is doing is finding all of the MIDI controllers that I have plugged into my system right now and it is listening for messages and it is spitting out the numbers that it sees when messages are sent from this controller so if I start playing notes on my keyboard it's telling me okay when I push this button down I get those three numbers from my nano key to keyboard controller if I push this button over here I get those three numbers from my launch pad MK2 controller and when I release I notice I get another number that that third number sort of changes between 0 and 127 and the whole reason I'm demoing this is sometimes if you delve into the world of building your own controllers or you know buying controllers off of like Aliexpress like I like to do the company of documentation you have to learn how those controllers are built and how they work and so this can be a good way to just sort of explore how the controller is set up and what messages get sent when you hit different buttons okay so here's a quick musical example again you know we basically just did this in a more fun interactive way but all I'm doing is playing this keyboard up here you know pretty easy you can find a lot of different MIDI web synth demos out there under the hood we're using the WebMiniJS library I talked about the MIDIUtilsJS library and pizzicato to actually generate the sine waves there's more fun with web audio here I'm using a different controller here to trigger sounds and let's see so all I did was trigger sound obviously and now if I turn these knobs I can alter the pitch I can alter the time I'm playing with different aspects of web audio which is a fun thing unto itself and worthy of a talk you know and that's just one example of a sort of audio based demo here interactive piano recital is the thing I started at the top of the talk with this one which I will show people downstairs if they are interested and so okay let's look at the things that are not musical I should have enough time to get through a fair number of these now and then take a few questions I hope so one of the interesting things I've tried to build is ways to interact with different like CSS3 properties and things like that here is something let's see this is just a basic color mixer there we go okay and so using the knobs and the same controller I showed you here I can mix different component I can mix different levels red green and blue to use it kind of like a color mixer I don't know if it's the most practical sort of thing but it's kind of a fun interesting way to play with this see if I can get a little bit of green in there there we go again under the hood I'm using Web MIDI.js again on this because I just felt like it for some reason and then I saw a library called Tiny Color.js to mix the colors and things this is an interesting one I made a long time ago I called it interactive poetry box and so the easiest way is just to demo it all it's doing is it's taking it's creating random poems using existing texts from Gutenberg the Gutenberg project and open source video from archive.org and also random audio snippets from audio.org to sort of create a mash of these different things and this was actually the project I made this a few years ago for a band I was playing in we wanted some interactive visuals behind us while we played and so I just came up with this idea I realized oh hey I could use these MIDI signals I don't have to use them for music I could use them for something interactive and kind of interesting so I made this and all I'm doing you can't really see it I realized from down here but I have three little buttons on the stage I can step on and when I step on them it triggers just different aspects of this page I made so when I hit this button it gives me a different randomly generated poem which sometimes they seem kind of profound and sometimes they really don't and I made this middle one we should get a random video playing in the background there we go and I made this third button and so what you get is sort of this really interesting interactive kind of mark project just using MIDI to trigger different things on a web page that I threw together and this project was actually kind of eight digits for 5.0 just probably a lot more interesting stuff that we could do like with MIDI and JavaScript out there I'll close this and kind of sail through here if you want to know how I made the random poems and things we can talk more about it later it's kind of an interesting conversation okay a quick show hands who's seen the movie The Goonies okay there's a few more that I expected I might actually skip this one just because of that I'll skip through to the next one here for those who are not familiar with the movie it's an old movie from the 80s a lot of people my age growing up in the US probably saw it and there's a scene in the movie where the kids who are trying to escape these bad guys come across an organ that is made out of bones and they have to play the music correctly in order to open a gate so they can keep going through this place that they're trapped in and I was looking to microcontrollers and JavaScript and MIDI and I realized hey with a couple like servos and stepper motors we could actually build that thing and that would be sort of a fun project and I made sort of a fake version of it here and I'm going to skip it though for now because it's not as interesting if you don't know the movie to be honest so let's move on okay this is what I was talking about so here is an example of a bunch of microcontrollers hooked up to servos and motors this guy no it's not playing this guy is using a MIDI controller to trigger the servos and have them turn so what I want to build basically is a fake organ that could eventually open up a door or something else kind of interactive and strange CSS filters we I showed you the one where we're mixing colors earlier I also did one where we can play with different CSS3 filters which is kind of fun what's sort of fun about this complex is I can mix multiple filters at the same time just to sort of see how they all look in combination again it's not super practical but it's a way to sort of try something new and outside of the box and use your brain in a slightly different way someone pointed out to me that this could be a very cheap and sort of ineffective alternative to the Microsoft dial and I suppose it could be drawing a simple image so this is a pretty simple one I have something up here called a launch pad you can sort of see and so I can just click it right now to sort of light up these buttons like so sorry to launch the page anyway there we go and so now I can sort of use the launch pad as a way to draw simple pictures if I had a larger one I think it would be a fun way to like draw like a favicon or something like that oh this one's a little more interesting so this one's actually using the accelerometer controller I talked about at the top I'll turn it on though that's more helpful there we go and so this little guy now if I move it I get the x, y and z axis C's are mapped to the red, green and blue values of the colors and I thought this is just kind of an abstract way to maybe you know mix colors or make some sort of interesting demo you can also change it to HSL let's see yeah so now I'm in HSL mode and that's a little more interesting because if you keep it level it's perfectly white and if you move it up we get sort of a red color down we get that same red or a different sort of red oh and this is a twist on that same idea where let's see I'm going to go I'm going to go two more minutes and then I can take some questions here actually let me skip well let's see yeah I'll skip forward here this one so my mind always turns to games and I'm trying to think of new ways to explore things and just make them interesting for myself and other people and so I made this recreation of a whack-a-mole game I can remember playing as a kid using this guy right here so I've mapped these different pads to the different moles that pop up on the screen here and when they show up I always have to remember which one this is when they show up I can try to hit them anyway but because the pads are also velocity sensitive you can factor in different components to the game it's kind of an interesting fun way to reuse these controllers one of the first programs I made as a kid was an interactive ball that bounced on the screen I remember doing that when I was about 10 years old and like quick basic or something like that and so it dawned on me that might be a good sort of first program to try to use for one of these MIDI controllers to create a new sort of interactive thing and so let's see here there we go it's funny this has become my personal hello world to learning a new language particularly one with a visual component I like to just make a ball bounce on the screen it's a good way to sort of learn how to do something already familiar with how to do but in a new sort of paradigm skip that one for now I have to skip that one too I'm afraid and the last one I'm going to show you that's sort of interesting is who's familiar with the game Go are there any Go players here? okay good number lap I've noticed most of the time and so I was trying to think of a way to repurpose this 8x8 board that I have up here and you know although it's a little bit small I found I was able to recreate a game of Go and in combination with one of these tiny computers one of the things I have at home is a self-contained and very impractical Go board with a tiny computer which I can connect to a battery and then connect to this controller up here and you can play a game of Go so I'll play for a couple minutes up here or a second year on the screen just to sort of demonstrate I would say I'm also terrible at Go just so you know so I just wanted to demonstrate this this is another sort of outside the box application of MIDI and JavaScript here so I've sort of reached the end of the talk this is a an installation up sort of near where I live in Seattle Washington it's outside a museum called the Experience Music Project and what they've done is they've taken giant girders and billiard balls and steel cables and created this sort of beautiful like interactive musical thing that you can play and it's really you know it sounds beautiful and it looks beautiful and I just kind of thought to put this up here anyway I thought to put this up here because it sort of made me think you know what they've done there is they've repurposed non-musical things to give this beautiful musical installation and what I'm trying to show here is that we can take something that is originally just a tool for communicating about music and repurpose it to do all kinds of interesting things with JavaScript and hardware and create unusual interfaces in creative ways thank you that's the end of my talk I'm happy to take a few questions we have some time for questions have you heard of what I'm sorry yes and I've seen that one and yeah yeah more questions yeah what you showed is really awesome and almost freaking I have a question do you get any industry level projects with this API implemented do I get any what for this API industry level project or any industry level implementation industry level projects that's what you asked now industry level projects I do not personally okay but if you'd like to work on one I'd be happy to talk to you thank you so MIDI is a really old protocol right can you hold it closer so it's a really old protocol back from 1983 and like it used to work on old phones which had less space and like you know they needed ringtones so does it solve any practical purposes even today and like like does it solve any problems it's still very effective for communicating musical signals and I mean it's still very effective for like musical applications are there any bands that just release on MIDI like just are there any bands that just release their albums in MIDI or something like that bands that have adopted MIDI I mean honestly any electronic music any electronic musician working today is probably adopted MIDI I will say I just thought of an example to answer your question there is an old game from mid to late 80s an old computer game they used MIDI across a network to communicate with other it was like an old Atari game or something like that and it would use MIDI to communicate two player games because they didn't have any other way to network and so that's I mean that's kind of an interesting figure to get to lunch but if you could leave silently that would be very polite thank you yeah any more questions so how broad is the spectrum of MIDI like I'm trying to understand so there's of course the sounds that we can hear as humans does MIDI also go beyond things that we can't really hear MIDI does not actually by itself dictate the frequency necessarily I mean the MIDI standard suggests that oh when these numbers are thrown out there that should be you know this note on a piano right so there is a MIDI signal for the highest note on a piano but there's nothing that would stop you from writing a program that for example took a keyboard and moved everything up into a spectrum that humans could not hear so you could make a like a symphony for dogs or something I'm wondering if this is a good data transfer protocol which happens silently like in transfer data I can send a text to you on your phone with music that we can't hear but probably our microphone can still catch I think there could be an interesting application there I mean what you're delving into at that point really if you want to stay in the web based world you know we're delving into web audio and we just have to generate frequencies that are in that register and then we have to set up a microphone to listen to it but you could use MIDI to you know describe a sequence of frequencies like describe a message like it could be a good protocol for that one last question we have so I want a bunch of hardware for it and then maybe look up some code and get started yeah if you go to my website I have a lot of links to that and if you want to talk to me downstairs I can make some more suggestions because I have a lot of things I need to fix up there okay sounds good thank you George thank you we'll break for lunch now and reassemble here at 2.30 and at 3 o'clock there's also a bank at hall workshop or a bank at hall workshop about web VR how you can bring virtual reality to web and there's a merchandise counter outside where you can buy Hasgi goodies yay swag for developers so right we'll meet again at 2.30 thank you for lunch I hope you guys all found something nice to eat I'm looking forward to eating after this talk starts I spent my time sorting out lighting so I hope that the lighting in the back is a little bit better for you we brought down some of the light so it doesn't quite look like you're sitting in the noon day sun anymore back there our next talk this afternoon is actually a three-parter it's going to be part talk an extended question and answer and then downstairs at 4 o'clock birds of feather session so you can take your questions down and have them answered more one-on-one the topic is application security so which safety not guaranteed Riaz is a security evangelist and researcher and active in the security community for a decade now he works at SEPSECO he's here to talk about hacking not how to do it but how to prevent it he'll show examples of javascript bugs that could have caused major problems and talk about how to keep your apps safe thank you good afternoon everyone just finished lunch this is not sleepy time I'll try it and keep this as interactive as possible my talk is titled safety not guaranteed it's part of something larger that we're doing today called the application security clinic at SEPSECO my colleagues are in the audience and I'll explain what we're going to do at the rest of the session itself my name is Riaz Balikar the title safety not guaranteed anybody gets the reference anybody in the audience it's a movie about time traveling and how somebody traveled through time once and they're asking for volunteers to travel back with them but they cannot guarantee their safety we picked up this name because it sounded pretty cool but apart from that the idea that javascript libraries and frameworks you have so many of them coming out every month every year and they all of them add features that were previously built they take care of security considerations that were found earlier as well they sound shiny and everything they may look shiny and everything but how do you guarantee safety I work for SEPSECO I am the chief attacker at SEPSECO I have the company itself we do a lot of consulting work and the opinion the advice that we give to clients is extremely pragmatic actionable advice on terms of security issues that we discover right we are a specialist security company this is a question to the audience how many of you think this is a vulnerability so if it's not visible on screen that's the that's a very popular site you must have seen the URL around here but the site if you open the console okay and you check the jQuery version it tells you that it is 2.1.3 and if you use the dollar get to call an external JS file it actually loads and executes and alert for a document or cookie is this a vulnerability or not I will say yes I will say no the rest are like I am still digesting my lunch alright we come to this so what is the application security clinic right the thing that we want to cover today what the thing we want to do today this is essentially the we are trying to create a time in space for security discussion it's not visible the background is of time in space right but the idea is that we want to create an environment here we want to create a discussion amongst all you folks so that we understand what's happening in terms of security with the actual developer world and this is a three part thing this is the talk right going on here and we have a curated Q&A and a birds of feather discussion this will happen at the banquet hall downstairs at the end of this talk we will have a Q&A session and then for the birds of feather talk birds of feather discussion we will move downstairs to the banquet hall that's at 4 o'clock my team is we click this on the first day of fragment so my team is here in the audience as well so we will all be taking questions at the end of the talk alright this is about me my name is Dyaaz Walikar I am the chief attacker at Apsaco I have several years of experience breaking stuff I have been doing offensive work with all kinds of stuff including networks, windows networks, Linux networks, mobiles, IoT devices wireless networks and applicant security but my knowledge with JavaScript frameworks and libraries is very limited I will come through with the perspective of an attacker today which is why I have an exclusive slide for this saying that I break stuff for a living I am not a developer I tried to find an abbreviation that would make sense to the deaf folks but NAD was not taken and I apologize if anybody is offended by the image that's me as I don't want to infer that people slouch while programming with us there what are we going to look at today? we are going to look at what do attackers look for when they are targeting applications specifically when they are looking at JavaScript applications what are they targeting for we will also look at some publicly disclosed security weaknesses in frameworks and libraries and applications that have been built over using these frameworks and libraries we will look at some client side issues we will look at some server side JavaScript issues and we have a lot of stories but I have selected a couple of them for this talk and we are going to be presenting that from our pentesting experience a little bit of the talk will also cover the impact of exploitation this is one of the things we find difficult when we are trying to explain these two developers that the impact of an XSS for example or the ability that an attacker can inject JavaScript, arbitrary JavaScript in your code and the developer is like ok so what so we try and answer that question if possible I will also cover a brief overview of content security policy ending it with what is sub resource integrity and some security headers that a browser already provides that you can use in actively in your code first section as an attacker how do I look at JavaScript applications, how do I look at any application for that matter it is basically you profile the target and you target an attack that is essentially what is covered in the most simplistic manner I will come to a little detail in that but given the number of frameworks and libraries the choices out there this can be overwhelming because when I started looking at frameworks and libraries I had to first understand what is the difference between framework and library I had to get started from that point and then I had to move on to looking at different frameworks and libraries available out there but all of this is visible to the attacker as client side html and a server side component which is why the attackers setup could be as minimal as the attacker himself and what is known as an interception proxy how many of you have used an interception proxy before like burp this is the icon for burp sweet and you have the web server where the code is hosted what an interception proxy is essentially it is a software that sits between your browser and the web server and allows you to tamper your request and incoming responses ok so if there is some restriction on the client side I can use an interception proxy to change my data that is being sent across the network before it reaches the server and if there is some restriction that the code is going to place on a response I can intercept that modify it and let it render in my browser that is what an interception proxy does burp sweet for example apart from being an interception proxy there are a lot of other features in terms of where you can use it to attack repeatedly do a brute force attack for example it has bunch of modules bunch of features that I will not cover today but as something that you would want to try you could definitely do this so when looking at js apps attackers this is like a brief summary there is an extended version of this slide at the end of the talk but what do attackers look for the first and foremost when they are trying to profile the target you know what is the framework version identify the framework itself first then identify the version right because versions allow them to search for previously disclosed security issues there are a lot of active security researchers who are targeting specific javascript library javascript frameworks and they tend to find issues and disclose them publicly all of this becomes useful when I am trying to break an application we also look at sources and sinks for when I am looking at an application of sources the point where data is entered into the browser is dom and the sink is where it is going to be used as simple as an input field and an inner html right we also look for error messages and stack traces especially if you see the console logs if there is anything that is printed in terms of verbosity and especially client side dynamic and hard coded variables we have had luck where we found several times we found security weaknesses because something that was hard coded inside the client side code and obviously communication channels like web sockets web RTC if I want to find out the web RTC for example attackers especially uses to find internal IP addresses behind knotted machines let's look at couple of security weaknesses right these are a list of popular publicly disclosed vulnerabilities in different systems and application that have been using frameworks and libraries we will cover the client side vulnerabilities first and we will move to the server side issues next so there is the framework called mayo how many of you have used mayo fairly new the idea is that in mayo the URL object that you have a dollar dollar URL you could access the URL object using the dot parameter so you have dollar URL dot A will give you access to the A parameter in the URL something like this so if you have spec and its value is test you could access the value test by doing dollar URL dot spec okay the vulnerability this which was discovered and researched well on was that there was if you specifically use the dollar URL dot spec directly into code what is the implication of this what would happen XSS yes what is XSS XSS cross-site scripting yes but the idea that even user supplied input is used directly inside the output without sanitization without removing characters right that are malicious that could break html and this results in a XSS vulnerability in this case clearly user supplied data because you control the parameter in this way if I do spec equal to test it gets you know called in as the one of the issues with this was that the input that you provide required it to be a valid JavaScript as well as a valid URL only then the exploit would work and you do that by supplying spec equal to JavaScript colon the popular alert which is used as a proof of concept for script injection and the comment character so that this gets commented and this is rendered as proper JavaScript and then this is the path right you use something called double encoding %25 is also converted to % and then 2f is slash and at the end of this you have this as the input and this would result in XSS okay this was one of the client side weaknesses this framework was suffering from. AngularJS and expression template injection is the second example that I have templating can be tricky I actually have a demo of this setup this was a bug in uber uber had an application one of the sub domains and the application was using an older version of Angular 1.1.2.0 the server did not allow quotes but the way the setup was that you could inject uh curly braces and expand them and rather execute the expression okay so templating was possible the idea the attackers wanted to generate a proper proof of concept for this but what was disabled is that you couldn't simply you know inside those double curly braces put an alert and get a poc out of it because the apart from not being able to allow not allowing you to do an eval or alert the object dot constructor itself was inaccessible so the attackers had to build a poc that would allow them to access the constructor right and use that to call a function to call alert the final exploit is obtained using the string constructor from multiple literals so you create an empty array and then you add each character from the output of each of these and form the word constructor okay the final exploit looks like this actually I have a demo of this okay so uh in the url it's q equal to some data that you can provide so I'll say my apps are going to be really simple like this okay there's no ui or anything to them so there is reflection here the code takes data as is but if you look at the source okay it's an angular app the code on the server is a php code takes data as is and reflects it back to the screen back to the client so when I say q equal to to confirm if templating is allowed I'll say 5 minus 1 for example so definitely works and when I run the exploit code the idea was to obtain the constructor to find the function prototype to call an alert what I'm trying to show you that is regardless of applications using standard frameworks and libraries every time you let client data be handled inside output vulnerabilities can creep in okay and attackers are finding innovative ways of executing their code to do this this is another exercise in a software called as md wiki md wiki allows markdown files to be loaded okay using an xml http request it allows for markdown files to be loaded the thing is the url is example.com slash hash exclamation and the markdown file the code did a xhr to location and it would obtain the hash the value after the hash exclamation and then call an xhr on this if I as an attacker wanted to load arbitrary javascript I would have to provide my endpoint here right so the exploit final exploit looks something like this okay where this is my url where this file contains the alert or the javascript that is going to be finally loaded one thing is going to prevent this vulnerability or rather this exploit from triggering can anybody tell me what that is because this is a different domain right and when the page is loaded it will not directly get executed so we have to add a origin header to the content that is sent back saying access control allow origin asterisks okay so which would allow then this domain to load our file and execute it alright couple of service hide weaknesses as well does not yes this vulnerability was found on papal subdomain okay pretty well documented as well does suggest a templating engine for node it used this is this function is removed but the older version of dust and jas used an if helper okay what the helper would do is if you provided a condition right and based on that condition you could ask it to display or render something the catch was that for example if you had this is the actual url so at demo dot papal dot com slash us demo navigation device equal to desktop on the server side you had an if the if helper for device if it is desktop then show the diff if it is mobile then show this and that was the code but internally the if helper was using something that you know when attackers see would get them one step closer to executing their own code can you see what the vulnerabilities in this code right so on line 215 if internally uses eval for the condition right so and apart from that the application itself had some filters to prevent strings from coming up so the attacker concatenated arrays to empty arrays and injected the node express code that was required so require require child process exec and what it did was he this is the attack code where he did a curl with to his domain with the output of etc password so this is the etc password of demo dot papal dot com right because the helper object was using an eval the pretty hefty bug bounty amount as well the other one service I template injection in jade which is I believe now called pug is a templating engine again for node this is not exactly a vulnerability in itself but more like a feature abuse okay the idea is that no matter what you have as long as you take user input and make it part of your code or do some processing on it there is the possibility that you could end up breaking stuff this is an example how templating can actually lead to code execution if user input is not sanitized before use somewhere else the example for this demo was on code pen dot i o the specific exploit that would work has been fixed but the rest till where you could stop one step before executing code on server that part still works so I kind of reproduced it let's see what it is there is not a vulnerability in code pen itself or jade but a feature abuse it's an example of feature abuse based on the context of implementation I'm assuming everybody's used code pen at some point in time the so I declare variable X and then I try and enumerate my JavaScript is pretty bad but I was trying to enumerate I was trying to get familiar with the interface for jade itself then I look for the root name space okay and you can enumerate this on the server itself I then try and enumerate the root dot process okay and it gives me access to all the other sub methods and I think that I can call so from this the interesting bit is actually gone down there were bunch of other commands you could run in terms of what this would do but what we what I did was I looked at the in root dot process there's a working directory command which would get me the current working directory on the server so I'm technically able to enumerate variables on the server here and the next thing that I tried was the get UID there was a function listed here called get UID it would tell me the UID of the process the owner of this process that is executing on the server but the bit that was implemented was they had a check on keywords like get UID and other things so though the way to bypass this was I simply split it into two strings concatenated and called it so that was like a bypass on their protection okay interestingly I would want to if I would not just if I would want to execute my own code I would require the child process and I'm trying to see if I can get access to that so using root dot process I enumerate main module and see if require is available it is so I try to a module called a is not found and which is why I get a cannot find module but interestingly before after this was the next where you could do code execution interestingly the person who found this was able to obtain child process and issue an accept command what this was doing was the output of ID was sent to this IP address on port 80 using netcat and they had code execution on the server again they had a vulnerability with code pen but feature abuse if you're using jade to build apps this is something that you might want to look at this is another interesting vulnerability with node jash node serialize rather this was discovered by a community fellow community security researcher and while doing a code review we found that the user's cookie was being sent to the unserialized function and internally the unserialized function uses eval for deserialization as a result of this and because cookies are obtained from the client and most some developer I know would inherently trust that malicious data would not be found in cookies you would sanitize input at the login or the input text fields but there have been cases where we found security issues with when we've put in malicious data inside user agent strings inside cookies and anything that goes from the client to the server is tamperable because of the interception proxy something like that we can use intercept it and tamper with the contents and then send it out I'll do a demo of this in a little while but as simple as it is the most simplistic code that we could implement was this if you notice the serialized unserialized function is called and this is the cookie that is passed I'll do a demo of this when we come to the section on the impact right I have a pretty cool demo lander for this some of these stories from our pentesting experience apart from finding issues like these most of the times you find issues that can be easily avoided if security was built into the idea that attackers are going to send malicious content to my application we've been able to compromise multiple applications at the work that we do at apseco we've been able to compromise multiple applications simply because of very tiny miniscule vulnerability and we've been able to chain multiple of those across networks and systems to be able to gain the ultimate price the ultimate price for attackers is mostly data or shell execution on the command execution on the server but also I prefer the command execution but the other folks might prefer the data so there's the difference in opinion there let's see some of the stories internally we had one of our clients a pretty large client in the financial sector they had they were using a react app to deliver UI and json authenticated endpoints populated the data and that's what I understood of the setup the idea was especially when we were trying to figure out endpoints in the application one of the things earliest things that we did was we looked at the application we put it when we try to access the application we used the interception proxy we didn't have credentials for the application so when we were looking at the application we intercepted the response and where it said authenticated no we added authenticated yes in the response we didn't have any session nothing was created but when I let the traffic come back to the browser because the change in the interception proxy the browser rendered some of the UI elements and we knew what the admin or the user would see I work with visual cues so it was important for me to see what the admin or the user would see and it was pretty interesting to see that all the application had to do was once the json authenticated json would come back in popularity it was it was a marvelous discovery in my experience but then I realized that this wouldn't be a vulnerability because this is how apps work json apps would work interestingly the application was encrypting the password before sending it to server okay so when it had a login page and the username and password fields were there and there was another third field it was not relevant but the password field the password was encrypted before being sent out to me so in the interception proxy I was seeing the encrypted password okay and the question that we asked all as an attacker we asked was how is this encrypting right where is the key being stored and the key was a static key and they had done all sorts of things to hide the key with a lot of JavaScript simply randomly calling bunch of other things without doing anything but the key was well hidden and it took some time to figure out that the key was right there on the client and what the key was actually so they used a static key before being sent to the server and the idea was that the same key was being used on the server for decryption and that's a fair assumption if you encrypt something on the client and send it to the server it would require the same key on the server to be able to decrypt it the key in the ivy was stored in plain text in a converted mass of client side js right and in libraries the interesting bit was the client was reusing the same crypto components on multiple sites okay so the client was a vendor for somebody else right and they were using they had built multiple applications and they were using the same key and ivy across all of these applications what is the problem with this hack one all a hat the primary you know problem what I saw with this as an attacker was that if in the future there's security breach and we hear of security breaches all the time and there are a lot of websites that allow you to put your email address and tell you whether your email was found in a breach or not and something that we also actively do as one of the services we try and find if your email address is compromised actively but if your account is compromised and your encrypted password is leaked okay leaking ivy would allow decryption on the client side it makes the decryption on the client side possible but it would be a pain point to the client more so because a data breach leaking encrypted credentials would hurt the client more because the key was available right you would be able to decrypt all the entire database dump so when the media says that there was a breach but the credentials were encrypted you need to ask how the encryption happened it might so be that the key is lying there in the browser for somebody to pick it up and reverse your encrypted tokens the second interesting thing that we had for a different client again was again a very large client in the financial sector was using a very resource heavy JS framework interestingly it had the X frame options header said to prevent clickjacking attacks okay I'll come to the X frame options header a little later but the idea was that because of the X frame options header you couldn't overlay or rather iframe this domain by another website it is a whole series of attacks called clickjacking attacks where you can using hidden divs and other things you can steal data and it would appear that you're putting in data into the actual domain but it's actually going somewhere else the X frame options header prevents that from happening in the browser don't load this into an iframe okay when I saw the X frame options header we were convinced that there is no clickjacking but the interception proxy also has a scanner module it passively looks at the traffic that is going through the interception proxy and tells you if there is any security weakness right it kept complaining that the site was vulnerable which was interesting because there was an X frame options header but the interception proxy clickjacking attack this was the header there was a typo in the header if you look at the X frame options header same origin here there was a typo in the header can you see it you will not believe when you see this there is a tiny space here there is a single space at the beginning causing the header to fail right and we were able to then build a poc it allows to iframe the site as if the protection not there at all we created a poc of phishing attacks and the fix was as simple as removing that space right but it crept in that was the thing that I wanted to share this was another one where there was a client we were looking at and it had a regular expression that checked if the domain that it was trying to load had a specific string in it right again large customer in the automobile industry they had a blog that had functionality to load pages from the web root directory so the url again was something of this order example.com slash hash register and cross site request of being prevented using a regex check this is a regex so when I try to access if I say hash httpx41.xs.php that is the server that on which I host all my export codes it said invalid page because it does not start with the so if you try to load pages from the web root it would work but if you try to load another domain it would not work what is the bypass for this I can't change this like if I want to attack somebody else what url do I send them it was if you look at the code it was check it was not checking if it is in the beginning it was checking if it is anywhere right so we were able to do this load the attacker file and put the client domain at the end of the line and the exploit worked ok we were successful exploitations led to we compromised a higher privilege account and we were able to log in and access a lot of data from this application itself is you hear about xss and you know code execution vulnerabilities and other things and what exactly is the impact right xss we hear you hear a lot you can steal tokens and sessions and bunch of those things right very short on time so I will just skip the xss demo but there is this framework called beef which is actively used by a lot of attackers to take access to the next level not only apart from stealing session tokens but you can control the browser in a lot of other ways and this is the interface and once once you are hooked you supply the beef hook.js you will be you have access to this framework where it allows you to execute a lot of other things like if you are using an older browser you can simply select metasploit and say auto upon it will find a vulnerability that the browser is vulnerable to and exploit it for you and you will get a shell on the client's machine apart from bunch of things if you can also use it to steal tokens from the page send fishing you change the content of the page so that you can trick the user into enabling a webcam and stuff and takes access to the whole new level I will just run the demo for the node serialized bug my node app looks like this just prints hello and data from the cookie this is what burp looks like this is the interception proxy that I was talking I have enabled interception now so when I load this page okay you can see that I am able to intercept right so I will forward this if I reload this page it's you can see that the cookie was set by the server I can see what the value of this cookie is I will put in decoder it has a lot of functionality that you can actively use to check the security of your apps this decodes to this string the serialized string user name my name country India and city Bangalore right and on the server it picks the user name part from the string and does a print now the exploit that I have what I am doing is I am going to do an exec and call out to bin bash or other send bin bash I am sending this as the profile value this I have on my machine I have started a netcat handler I am targeting this domain I just hope it works so when I send it the code is deserialized on the server right and the eval causes you to execute the netcat bin bash function and hopefully right so this is a different server so now because of the vulnerability you are able to execute or rather get a reverse shell back on your machine and take control of the system itself okay so code execution bugs are bad because attackers if they are able to execute commands on a server it's almost always game over okay we will quickly move to the next section content security policy this has been a standard for quite some time where by setting headers right in your in the browser in your htb responses you can choose where data is going to be loaded from okay these are called directives and you can set the kind of directives you want so for example if you want script sources to be a specific domain right you can set that as a policy there are a bunch of them this is what a policy looks like in the most simplest form this is what a policy looks like right it says default source if like the other sources are not available image source or connect source it falls back falls back to the default source default source is none script source is only self right connect source is self image source is self so you can't load like cross domain images and stuff but this is too simplistic in the real world they look something like this okay again this is for a PayPal domain as an attacker this gives me a lot of information I know more domains about PayPal as one the other thing is if any of these domains is a place where I can write my data as an attacker and then if I find an issue with this site I would be able to load my script regardless of whether a csp is there or not because if any of these domains like imagine if this was like a amazon s3 URL right I could set up my domain itself my script and then load it from there csp also has a reporting format where violation reports are sent can be sent as json post to the uri if you the policy looks like this content security policy and then report uri the domain where you would want to collect your data like consider this policy okay so you have default source none style source cdn and report uri is this so when I try to load this right it I am trying to load a stylesheet from the same domain this will fail so it sends this as the csp you know as a violation this is the json post that is done coming to the next part sub resource integrity can you tell me if you use sub resource integrity yes the idea is to answer the question is the file you fetched really the file you fetched a sub resource integrity works is a security feature in browser that enables browsers to verify the files that you obtain and for example from a cdn for example are delivered without unexpected changes it works by allowing you to provide a cryptographic hash that a fetched file must match right if you if you get a file from a remote cdn its hash should match the hash that is already in script in your html why do you think that is that is necessary or why do you think that will help somebody tampers with the content on the way the hash will fail and then the browser will not load the file right so it is pretty useful this is how it looks like you have script source and the source and the integrity variable said to the Shah of this file how do you generate this on the server multiple ways you can use open ssl or Shah sum to generate this and put it in the page so if somebody tampers with this right you would still the browser would still not the browser would not load the file itself because the hash check has failed with combination csp you can add it to content security policy require sri that is the directive for script and require sri for stack these two directives is something that you can pass couple of other additional security headers that browsers have that you know would work in to defense in terms of defense to slow down attackers one of them is the x accesses protection designed to enable and enforce the access filter built into modern browser access protection one enables it and it has two modes mode block and report uri the http strict transport security allows you to restrict the order to access content only over https this is another header that you can add the extreme options we saw an example of a type of the extreme options but this prevents pages from being loaded in iframes thereby providing click jacking protection it has different modes the deny is if you do want it to load in any iframe regardless of who the origin server is and the extreme options same origin allows you to load the iframe if you are the origin and you can explicitly set what origin using the allow from another one is the x content type options this can be used to set but this can be set to no sniff what this allows you to do is this prevents rather browsers from guessing what the content type of the responses if you send mixed data I sometimes does that I know I is mostly used to download other browsers but some people still use some people still use I because requirements and other things I sometimes would sniff the content type and guess based on what the content is right so this allows you to strictly say that don't guess but use the content type response header that is coming back what are the other couple of things that you can do I found this site that is somebody submitted a bug to doing this will not stop attacker okay I mean the console is actively used by developers as well as attackers to figure out bunch of information so it says if you can't read behind this is a console for developers if someone has asked you to open this window they are likely to compromise your account please close this window now okay this is not going to stop attacker I discovered this because of the help of one of my colleague who is a much better node developer than I am he thought me about helmet right and I believe a lot of node developers already use this if you don't then helmet is pretty cool you can use this to set custom security headers as simple as dot hide powered by to hide your version and no sniff and access filter no referral policy etc and you can also set the content security policy using these directives it's pretty cool retire js is another project it's many things but we actively use this as part of burp interception proxy it gets loaded at the module inside burp and you can use this to find if any of the libraries that you're using in an application are outdated right all you have to do is add this to burp and browse your website at the end of your browsing session go back to your interception proxy look at the target and it will tell you that these libraries are outdated CSP evaluator is another website that you can use to see if your CSP will hold or rather it is syntactically right and hold to you can try different directives here and check if your CSP directive are syntactically right so one of the common questions that they ask is where do you start if you want to look at application security and where do you where do you want to go next and if you want to break stuff and understand the mindset of an attacker and other things the OSP project is a very good resource they have something called as the OSP is the open web application security project it has a lot of documentation around how you can attack applications and build some applications securely the OSP top 10 is like a list of most common vulnerabilities that people code to when attackers try and see if these vulnerabilities exist in their applications they there's also the testers guide if you want to become active with security testing and obviously the security documentation for your framework and library would be very helpful in this case apart from that if you start thinking like a potential attacker look at the attack surface that our application provides right and what are the assumptions that are made already in the system these are two important things that would work in that favor so coming back to this is like the take away when looking at js apps what do attackers see right what do they target what do they look for again identification of frameworks and libraries version numbers especially are very clearly written in your js file using that they look for previously discovered security issues sourcing for user supplied data endpoints discoverable through js code error messages and stack traces console messages another thing encoded sorry embedded hard coded variables and tokens browser storage mechanisms sometimes you see in application store data in local storage in session storage right that that can get sometimes a sensitive information right there cross origin communication external sources of js css images fonts any any static content that you load right and communication protocols like web sockets and web RTC this is again as a reminder part of the application security cleaning that we are running that's our Twitter handle thank you so much we'll have a question answer session now I would like to call upon my colleagues Akash Mahajan and Abhishek Dutta as well on stage and we also have time for questions in the hall so if you have any questions yeah this side when you start your short js foo website but you did not answer the question how many of you again still think that this is a vulnerability how many of you don't think this is a problem we had an internal debate about this and we figured that this wouldn't be a problem because to get this to exploit to exploit this you're asking the user of the app to open the console and recommendation please add the message stop close console right now right but we noticed that to a properly execute code we'd have to do go through a lot of hoops and by itself this is the feature of jQuery to be able to call URLs from that party very interesting talk I have a couple of questions they're not related to each other I have noticed especially working rather accessing sites in India especially government sites is that security is not at all a priority in fact I remember once accessing the IPSF site and they were sending the one-time password both to the client and the server so you can just see the response and you can see the one-time password so my question is when you find these vulnerabilities generally reporting them especially in the government domain if you do that and how do you like instill that sort of sense that you need to make security a priority one and then the second question is about service workers which is a relatively new spec in JavaScript I saw a talk by Crockford Douglas Crockford and he said that service worker the API is one of the biggest vulnerabilities in the JavaScript spec right now so have you guys looked into that and is there like any advice on that aspect as individuals you may be reporting these but we usually don't report vulnerability now vulnerabilities there is a mechanism where you can report to two different agencies but usually nobody responds or the main email might bounce right but the one is your website which is supposed to be the nodal agency but they are usually overwhelmed and the other is this new agency that's been set up the national it's the critical infrastructure something NC some I think double I or whatever you can if you google for national critical infrastructure in India you'll get that website so they are supposed to be the ones to kind of become the people to send it off to whatever is a relevant department right typically in other countries where security reporting and triage is like common for government agencies you usually have sectoral right if for an industry or for a particular sector you'll have an emergency response team and typically they will be the ones receiving these but we don't have that yet and the second question I don't have experience with service workers as such but that's very interesting to know that that's a vulnerability area we haven't really tested any applications so far so if you have one let us know any questions from balcony hey guys thank you for the talk have you guys ever seen languages which compile to JS like L and how because you are not actually writing JavaScript you are actually writing in some other language which compiles to JavaScript so are there any security vulnerabilities or does it improve security or how does it affect security as such have you guys looked into it what answer it makes no difference at all the longer answer is we typically don't think of the language the framework or the application feature we typically look at request response and we try to enumerate what request can be manipulated by user input right so if we have a look at an application or anything around the application that's the first thing to look at understand and consider are there any configuration based infrastructure things in place okay for us if we control the network if we control the network between the client and the server then anything which is SSL, TLS it doesn't matter because whatever is going to secure on the client side assumes the endpoint not to be evil right anything which is a which assumes any of the response headers right which are meant to protect the end user because the browser understands it right so he has joked about that I doesn't understand something right that just means that a modern version of the browser will understand that response header and not allow or allow something right but it is very trivial to strip off that header and if the header doesn't reach the browser the browser doesn't know right so for us the most important part is the user input but consider if there is an application where you have to you know trust the user any application which is like a which is enabling payments right you are saying that okay I allow people to buy stuff or you know send money over or whatever that particular user for that transaction cannot be considered evil and architecture has to make sure whatever fraud check whatever reconciliation has to happen and has to happen on the server side right anywhere either be it a mobile app you know a single page app anything where the business logic ends up in the client which the end user can obviously manipulate right then it's game over does that answer your question anyone else yeah question please stand while asking the question please stand up while asking the question we are recording fine okay what I was creating an application where a user can enter some number and number used to validate on the server side it should not be 0 or it should be the available point what he has so if you enter the maximum limit of the end of number so node just was not taking that one and user was able to enter the number and take that one on the server side have a different data type for checking even before that if your design if your architecture for the application your requirements have the number to be in a particular range and you can check only for that range and I think this is like an workflow that what you are saying is that if the number is larger than certain value then node.js is not considering that I really think you should look into the documentation of node.js like how it treats the integer and what are the corner cases and accordingly handle that end 16 in 32 different right or maybe there are other libraries to handle large numbers like in ruby I know there is a class called big num that is meant to handle very large integers like which is more than 32 bits yeah question that side so usually what I see in a lot of teams is that security is always an afterthought right like people after the company is big enough or after they get hacked once that is when people start taking up security seriously right and I guess as front end developers most of the attacks start at us right something as simple as XSS I'm kind of asking for recommendations of what are the few things that like where do front end developers get started and how do they make security part of the development process rather than an afterthought you want the funny answer or the real answer let's start with the funny one so I'll just tell you I tried that it didn't work well someone who's hiring you know who to talk to like he asked right why don't agencies really think about security and why government websites tend to be insecure the reality is most things that we look at because our world is a little more tinted are insecure right and it is immaterial if it's like a large Indian company or a large wherever company or a small startup in Bangalore or small startup in valley most people are thinking of features and what to release rather than you know how to stay secure unless and until it's led by legislation or compliance or something else right I honestly don't have a good answer for you what I would say is that we are available downstairs after this maybe we can continue the discussion there but there is no simple answer sorry the resources available what he's asking is how does he convince his company sounds like this will be a fantastic discussion for the rest of this clinic which is at four o'clock downstairs in the round table area I think we're ready with our next presentation so let's give a round of applause speakers up and I explain what's going on I'd like to read the list of flash talks to you the flash talks will take place at four o'clock are no flash talks at four o'clock nobody signed up so if you want to hang around we will actually be taking feedback I might even sing the feedback forms long to you so you probably want to stick around for that but if you don't want to stick around for that you can go downstairs for the app second thing at three thirty which is now we have an interesting format a sort of panel question and answer with on progressive web apps with two guys from Google and also someone from I keep running to pronounce it wrong so Pratik Hemant and Lakshya can come on up and Siddharth because he likes to be involved in everything come on up and you guys can explain the format the questions and answers it does say in the program this is an OTR but it is not this will be live streamed and recorded so ask only appropriate questions come on up how's it going are you awake louder please so this will be an open house so that's why I'm asking you to be louder what's open house how many of you have been at an open house before basically it's about two guys asking questions and there'll be one guy moderating that's me here today and I'll be introducing these folks and I'll start off with some icebreakers ask you questions for them and then you can start asking questions from whatever aspects of web may it be server side rendering node react angular web pack you name it and we'll try to answer them right and we have Siddharth Pratik and Lakshya Lakshya is from Prebo and I'm Hemant and I'm from Paypal so let's get started let's start with Pratik first so I heard you've been working on work box lately can you speak a bit of work box what it is and how is it better to compare to the other libraries we have so I need to hold it closer okay cool so work box is basically a service worker framework if you guys would have already used SWP cache or SW tool box these are like high helper libraries for your service worker code just like you have DOM helper libraries that these are helpful libraries for service worker so work box is the successor of this thing work box allows you to pre cache your content allows you to install runtime strategies few of which I talk in my talk and it brings a plug and play kind of architecture so you can write your module for example there's a module for background saying there's a module for offline analytics you just have to plug that module in for example new offline analytics into work box and give it a route and it will start working so SW tool box and pre cache came with like predefined functionalities and they are not really great in extending that functionality so work box with work box we are trying to fix that and we are trying to make the entire helper library in such a way that you can plug in more modules you can write more modules and then they work with way more ease than it was earlier yeah thanks for the short description and we have runners running around that's why they are called runners I guess so they have mics with them if you have any questions you want to interrupt us feel free that's why it's called an open house there's no format it's not like questions at the last you can't interrupt nothing like that you can interrupt anytime you can just grab a mic and ask whatever you want feel free to do that now let's talk to Siddharth Siddharth I heard like you have started a channel of yours on youtube where you talk a lot of funny stuff what's it all about I wouldn't say it's funny but yeah I try to stay updated about what's going on in the airstrip and then I just record myself and put it on youtube that's it what's it called it's called the Siddharth KP show I didn't really think it through it's just me that's why that was an opportunity for you to market yourself I think I've done that enough yesterday that's the react one let's get on to the tribo guy so most of us have read the medium post about tribo and what are the challenges they face right now could we just hear about one challenge that kind of didn't let you sleep for a week or something maybe a server side rendering spike on the CPU or something like that that's a really good question I'm sure I think not a lot of people actually how many of you do server side rendering here in your application how many of you are actually react or react okay that's fair enough I'm sure it's pretty hard right like yes or no can you scream it out so what really happened was when we initially actually tried to do like an app shell model and we tried to get that past our product manager and he was like no we need SEO I'm sorry and we were like okay fine let us figure this out so basically what we try to do is render to string which is the documented way of doing it and what we figured out was when we tried to go to prod we can't handle scale because render to string as Siddharth told yesterday at the app who was is that it's synchronous right and no matter how many instances you spin up it's still synchronous it's like all your requests are waiting in a queue trying to work around that you actually want to do asynchronous rendering and we actually use wrap which is not part of the blog post actually because I'm going to write an entirely different thing about that soon we actually went ahead and did a sync rendering to solve that so what it actually does is it pushes it to the background thread in a sense I guess I could be wrong but it lets you scale up really easily so that was actually one of one of the trickiest thing that actually I didn't sleep for to be honest to get it solved any quick questions from audience if any Hi I'm Narendra the first question I'll probably start off with the most controversial one which is react licensing I'd like to hear what's the first about and do we need to use it why when we should not use it and things around it thank you I love this question I wasted a week over this question so react license is not your traditional open source license not MIT it's not it's their own custom BSD license which is tricky but essentially like the layman version or more like what I understood version was that if you ever get into a patent war with Facebook right so if your startup grows big enough and you have excellent patents that Facebook wants but it does not buy you out instead illegally uses your patents you cannot sue them because you have been benefiting from using react which is something that they created so you can use it for free as much as you want until you want to sue them for a patent war then you can't then you have to basically spend some time refactor react out and then you can sue them again right and so a lot of people have put their own expensive lawyers on this right like PayPal and what they found is that yeah like PayPal is pretty cool whether they can use it because they I mean Facebook is not stealing their patents so it's cool and if they do they have the money to like sue them and that's fine yeah that's what Twitter, Google do everyone uses it so I guess we can use it I'm not showing Facebook so it's all chill one quick addition to that if at that day I pull in react with react compact does that still work? react you're just kind of replacing it on build but if you run a code mod and replace react with react then you're cool then yeah go ahead my question is to Lakshya so Triboo the website the first visit times and metrics are really important right so could you tell us something about you know what challenges you face to get to those metrics and like what is the most impactful solution you had for that hey man good question so one of the things that we actually had a really difficult time doing was trying to get time to interactive kind of to a reasonable rate because the accepted rate is below 5 seconds on a slow 3G network even when you do things like code splitting and things like that you have to be really careful of how much you actually split because if you split so much that everything is asynchronous then you're practically wasting time trying to get all your async code in one thing that actually helped us HTML streaming where you basically push the head tag in first with all your preload scripts for all your tags for all your main vendor and things like that and then so that when the rest of the server-side vendor thing for us it was server-side so that when the rest of the server-side vendor request came in most of your scripts are kind of already in the cache so the requests are made your kind of benefit from that that keeps your time to interactivity done apart from that first paint and meaningful paint is another important metric most of that was kind of solved during CSS chunking because it's not just code splitting on your JS right if you just split your JS and be like okay I'm going to serve a massive CSS bundle your CSS is going to be the bottleneck and if you all know CSS is actually render blocking right so you're going to block your render completely and the user is not going to see anything what you want to do is try to split JavaScript and CSS based on your chunks if you actually are doing splitting based on chunk one challenge you actually faced that kind of spoke about yesterday was trying to make a different entry point so that extractx plugin kind of brings out the CSS there's a different plugin called extract CSS chunks so if you just do import calls in your JavaScript it'll kind of split your JS and CSS for it so that's really helpful so you don't have like a bloated and T file and things like that so what you want to do is during source rendering get your out throw in the critical inline styles for that particular route so you're not render blocking at all and that'll actually help your first meaningful paint for us one important kind of like a hack I guess was trying we have like a big image right on top in our viewport we preload that as well so there are multiple things you can do it but don't preload everything right there's this quote from the incredible that says if everyone's a superhero no one is so it's the same thing if you preload everything that means you're saying yeah import everything's important whereas nothing is at that point so be careful it's kind of more on situational basis based on your app try to read more is what is actually been helpful for me so more questions or some experiences you want to share while working on PWAs some interesting situation you got into or something interesting some library you found out so I see a few folks from Flipkart here who have already built the Flipkart light and made a revolution of PWAs probably they could add in something so how is the streaming working for you I mean so when it grows 400 or 500 how do you tell to SEO sure that's a good question so the first thing we went with because we were kind of in a rush was hey we don't care because that's what everyone does right you kind of care about it after the fact but no so what we try to do is we kind of do the route matching beforehand before we even send the streamed head but the route matching does take some time so you kind of know what's happening at that point itself but in between if the stream breaks up I don't have like a good solution for that right now so that should be kind of you know something that we should tackle as well I don't have like a perfect solution for it you're right because once the so I mean streaming doesn't really work I mean this is the talk last year we gave on the same stage where we tried with the streaming it added a lot of goodness in terms of the rendering performance and everything but it failed miserably at SEO so Google started indexing all the 500 pages so we had to turn off and we had to put as a SEO completely on the server so it doesn't work we're still figuring out so that's one piece of advice like you need to take care of SEO if you're really looking to build on a desktop but on a mobile I don't think we need to do any server side rendering so it's still not clear on the same base but there is kind of a new approach that you could try Google actually released a project called Rendertron so what they basically do is it's a rendering service and they have middleware so if you have Express or Coa or something like that they have a middleware that kind of if all your search bots if the request are from search bots it kind of sends it off to Rendertron so Rendertron can render your pages beforehand or keep it or render it right then and so what's at the end of pages to your search bots specifically but to users you can kind of send it to your stream so that way you can kind of work around that that helps no comments we had a question this time just wanted to ask this question that React 16 or React Fiber has this new Fiber Reconciler so we have seen the shift changing from watchers in Angular to the virtual differing in React and now this is so how will it be pan out and will it be like adopted now by other frameworks or is it good enough this prioritization of task request new I will call back and stuff like that some of the comments from you. Sure yeah so to answer your question that will this become a trend and other frameworks will adopt it I think they already have so Vue.js even Angular's new thing which kind of depends on Angular 4 which depends on components right all of these guys tried to do their own implementation of the virtual DOM so they might not have the same Reconciler as React but everyone has a fake virtual DOM and the real DOM and all of the manipulations have been to the virtual DOM first and then to the real I think Polymer also does the same thing now it has a shadow DOM right. So every other solution out there is trying its best to like use request idle callback to React because that is one API that gives you windows of free CPU cycles and tells you that hey you can do your extra work here so like I am not completely sure about Polymer but yes Vue is exactly what is working on on this particular thing. What happens with Polymer there is we have a shadow DOM concept not really like a virtual DOM do you think it's basically a DOM which has the names added to shadowing which is all the properties of the DOM but until you attach it it doesn't really show up there because almost like virtual DOM but there is no different happening as such. I guess web components also depends on shadow DOM right and if web components if and when it picks up right and that uses shadow DOM I think that will be the standard way we build for like browsers that would be the only thing we do frameworks wouldn't even do it frameworks would be an abstraction on top of it there was a saying that said like all the all the programmers are telegraphers of 21st century you know so we'll all be dead with some something which is much better all this race will be kind of obsolete very soon Vinci. I had a question on have you guys experienced I know a couple of people have been Flipkart and housing were trying AMP to PWA so how successful have those experiments been and even when they see a standpoint have they been good enough for you guys. Anyone from Flipkart who can answer that? First things first AMP and SEO are not related. This is something all the SEO folks says but these two are not related. Again personally I don't like AMP it's still there in PWA if you reverse it but yeah that's a different debate but again in terms of like you need to build a different version of your website and you need to carefully craft it so we personally have like two versions of the website where one is for PWA one is for non-PWA like you see over and all that on top of that adding one more is a complex so we kind of pause it for now but anyone have any success stories would like to hear from that. Sir there's an interesting addition that you say you maintain two versions I've been doing in the past is when I serve a render my React components like whole HTML string I just serve that and then there are just tiny modifications between the AMP semantics and HTML semantics and that becomes my AMP version and then it's just like an interactive version which goes to AMP and then when I serve it to users like non-AMP version I like React DOM come into the client and then rehydrate it so we maintain one version and get to do both right to contradict your first thing when you say all the marketing people say that AMP is for SEO right you're right it's not really for SEO but it is for traffic right like Google clearly cheats and prioritizes AMP content and then that's what marketers want right they want traffic so maybe like you don't get SEO points but you get money like that's what people want. Oh definitely yeah yeah you're essentially saying everything I will keep a rendered static copy and serve that to everyone yeah it's definitely a pain but traffic. Is it like you have React renderer which takes in React components and like output AMP components which you have mapping for every component or every you know every tag of yours is it okay. So it's the same React render to string and but instead of an image tag I just create an image component and depending on the context it either spits out an image or spits out an AMP-image right and then we do so basically in your component library you created for both context specific and then use the same thing to render everywhere. There is a debate of free and open web versus AMP consuming it all together and probably WordPress has AMP enabled by default to get the content rendered faster at least make it free it's fast so it's still debatable yeah it's pretty open for all the controversy. I guess ghost also started giving AMP out of the box many frameworks are there. Hello I had a query about this thing shadow DOM so what I read about shadow DOM slightly was that it's something that's already built into the browser it's a power that was unlocked by polymer or web components so is it something like that. It's not like the power that was unlocked by polymer or somebody it's more of a spec web components version 1.0 the spec reads about what shadow DOM is it's part of that so for a web component there is custom elements there is shadow DOM all together paired up to form the spec so it is not like it was already there and unlocked it is part of the process like when it started polymer it feels more like a trend which was like a fallback till we have custom elements on the components on the web but now it's becoming more of a good library as spec is stabilizing right. Hi I had a service worker question. I had a service worker question the gentleman there had asked in the previous session about accessibility with service worker did you want to add anything on that and if we could do anything to prevent that from happening any so I heard that my colleague Douglas Crawford said that he's my colleague just because he works at Paypal but I didn't really read any specific article saying that what are the vulnerabilities that a service worker has if you see what could be the possible entry points we are already on HTTPS so you can't really put some network request and get in I don't really see possible entry points probably it might be since like the very first baseline of getting a service worker to work is HTTPS that rules out a lot of biometric vulnerabilities but then service worker again is a proxy that sits like outside your code and you pretty much have the power to like code it up, screw it up and if you are modifying your request inside service worker that is one of the major things that come into my mind that you have to be careful with if you are modifying your outgoing request as there or like and using the incoming response as is that is one thing that you might have to be careful with yes, up here so before a year if any one of you remember there was this interesting incident happen so one of the developer actually because of some brand imprimmage or some of the legal issues he actually unpublished many of the modules left pad yeah so actually I couldn't follow that article much so after that has npm changed his policies or managed tricks or something so if you can incident and answer my question, we miss you left bad so what happened was npm when it was a younger registry when it was not as mature as the other language ecosystems it had a pretty open unpublished policy so what happened this guy who created left pad also created another package called kick and kick is also like a huge company so they said we want this package we own the rights to it right so you shouldn't use it and so those guys talk to the developers they told him that please don't use this name because we own the copyright he said but this is open source right if you don't have it already if I took it it's mine and then so people got npm involved and npm kind of had to make a decision right who do we support in this case they supported kick the company right and they took the rights from the developer and gave it to this guy the developer got paste which is fair and he unpublished all of his packages left pad was one of the packages that he had which I think which big project you do right and everyone uses babel and which just meant that anytime you do npm install babel it wouldn't work because one dependency just disappeared so yeah and left pad was just a one liner basically but yeah that's the power of free and open source but now the npm's policy has changed it changed like immediately after that I think you get like a 24 hour window to force unpublish your packages right even if like one single person starts using your packages as a dependency you can unpublish it you can deprecate stuff release new versions but you can't go back on what you've already created so in retrospect like all the other package managers already had it like pip and like gem already do this stuff npm didn't do it but then now they do now they're like much more mature one of the funny incidents on that is when you have two registries we have a private registry in the public and if you have not pointed it properly and you sometimes end up publishing your private modules to the public and then you have to write a mail to npm saying hey this is a private report please deprecate it and like you guys you say deprecate it and probably take out everything all the code out of it and just add packages and say nothing here move on kind of a thing right yeah guys up here I have a question we are talking a lot about progressive web apps and everything there's one still question which lingers to all of us we are talking a lot about a B2C application but in B2B still everything a lot of companies traditional companies like life sciences runs on internet explorer so what are your strategies to get things going on internet explorer say for ITN I11 I mean what do you think would be the fallback to see these things working in that environment also fallback would be edge probably just a moment I have an announcement to make people who are interested in the app security clinic it's starting downstairs at four o'clock which is two minutes from now and we have four minutes left on this session yes make a choice so to be honest what you said right just tell them to install chrome or edge or something and this problem is going away slowly because windows does not support I anymore like if you buy a new windows machine it doesn't come with I it comes with edge but that's my best so one thing is like one way is like you can obviously go and say that please download chrome though I would like suggest you to like defer it as much as possible you can have a baseline that hey these browsers we support all browsers because web because that's how we have been known something like looks best in chrome with give us like okay last three versions that's most what most companies do but like just saying and closing I know there will be some shade on me on this because google comes up every now and then and do this but yeah like just completely blocking the browser all together and not doing anything should be like your last minus resort unless it's it's up to your neck but you can always like I 10 I like does a pretty fine job with maybe not with all the apis and which is what progressive enhancement is about but yeah like you can still support fewer version of it so this one scenario we have one just to add to this sorry we'll have to cut you because other people are waiting for their questions and this is one last question by this gentleman you can talk to them offline to add on whatever fun we make about I but we need to Microsoft for XHR because Microsoft was a company which gave us XHR like but still we call it as XML HTTP request it's not really it wasn't really XML anymore like probably we have fetched now but still that the idea was great and there was something called as HTA if someone remembers what HTA was so it's called as like HTML applications like you could still do it today you could rename your HTML file as HTML file as HTA and open it on a Windows machine to open up like an Elecron app that was done long back yeah 90s 80s or something like that right so and I edge edge was the first browser to implement class and trail tail recursions right so it's doing a good stuff so let's not have a war against ourselves every browser had something good and bad let's take the good parts hi so my question is a bit different like we in our company we don't deploy application on public domains so we have the application on client side deployed over there and they're using as internal apps and we have last data which gets downloaded on the browser and we need to display that so the problem we face that we used angular and knockout and it took a lot of time to render the screens okay so many a time we used to render the HTML data on the server and then rendered on the on the browser so what approaches would you suggest that what is better like we don't care of SEO something because it's inside their application and it's not in public domain so is it better to render on server because it still takes time and if we use the angular or the knockout it's still taking longer time to render and we can't go away with showing the data we need all the data on the browser I would kind of vote for a mixture of both like you could have your initial rendering and a push from the server and then the test takes care on the client so that the perceived performance will be better so apart from the libraries are you need tweaks with the browser or any other like service workers or something like that which can be done streams so a you can obviously use streams which are not really there for all the problems at this point of time but this is streams is something you should definitely definitely check then check in it is like made for this kind of scenarios and a lot more be you can always do like server renders some portion of your data may be like first fold of your stream and then just send that data to be client rider client rendered on the on the client side correct me if I'm wrong the clip card peeps yeah we still do first fold server side render for clip card and then the rest of it online so maybe something you can do like that yeah awesome thank you guys hope you like the open house and if you have any queries you can just tweet at us and like we have our twitter handles on hash.js too you can find there and we'll try to answer if not we'll get in touch with the right people to cancel the thanks guys you got a lot of good questions and I'm sure that there are lots more questions in the audience so please do check them offline since there are no flash talks I'd like to introduce the editor of our conference this is Sandhya well there she is hi Sandhya yeah I think you should come up conferences take months and months and months maybe even a whole year to put together so Sandhya's been working on this for a long time along with her editorial group and she'd like to get some feedback from you hello hi everyone I'm Sandhya I'm the editor for react foo and js foo from hasgi I work with another editorial team that's Siddharth you saw him on stage and then there's Abhinav Rastogi who is not here and Ankur Sethi who's sitting downstairs in the activity area so I just want to start this off with asking in general what kind of feedback do you guys have feel free to raise your hand so there are mic runners here yeah feedback guys we need to make this better for you did you enjoy the talks what talks did you like how could we have improved this would you like to see any more activities tomorrow I'm open to all kinds of things that you want to say if you don't want to tell Sanjay you can come up here and whisper it in my ear and I'll write it down and I'll tell her later I will start pointing if people don't raise their hand or I'll start singing I'm not sure which is worse did anyone have a favorite talk so far something that they liked a lot yep we have should we put it close to your mic I think my favorite talk was the first talk which was based on the angular gs and the react the very first talk in the morning that was a very good yeah sure so that was one of the favorite talk second thought talk was about that it was something like related to the hardware interface with through the node gs and all the George one that was the second interesting talk anyone else which one did you like I really like George's talk as he's American and I could understand him also I really like music and yeah so we were talking gear after it was fun so would you be interested in attending a workshop with George if I put that together hell yeah can I have a show of hands if anybody would be interested in attending a workshop conducted by George tomorrow downstairs yeah oh tomorrow I have to be up here tomorrow I'm gonna make somebody else emcee who wants to emcee while I'm downstairs in the workshop okay I saw quite a few hands so the first two talks I really like both the talks that were there in the first the web components and the OLA PWA I really like both of them apart from that I had a feedback about the food stalls downstairs during lunchtime I think it was I think I don't know if we had sufficient time and at the end many of the stalls were running out of food and that was a slight I mean if I had to nitpick that is the only thing I would pick up that's okay so not enough time and people ran out of food vendors ran out of food yeah okay alright is the wifi working fine for everyone hi I have a point so we are having a lot of talks around react and all the JavaScript libraries but I don't think so there are enough talks around tooling like the fact hello yeah so we have a lot of talks around like react and angular and we have having talks around the JavaScript libraries but we are not having talk around the tooling around JavaScript so that is still a black art a lot of people do a lot of stuff but they don't share their experiences or the experiences are not elaborate enough so that all the people can replicate it if you follow all the release versions some of the versions of webpack are even very different or react routers 3 and 4 are very different so how to deal with all those kind of things and how to keep yourself updated so might I suggest yes I took this and this is something that we will take care of for the next time but for now might I suggest that if you like some speaker here whose talk you really like and wanted to learn more you can actually approach them and maybe start a discussion and if you can let one of us know we can announce it so that more people can come and contribute to it at the moment yeah hi up here I had one feedback so I have been attending this one since fragment react 2 and today just like all of this one thing that I see that a lot of this talks are kind of sponsored this one or at least it's coming from people who are from those company like not just google but they were speakers from uber and even today the one on security app and a lot of this I'm not saying that the stocks are bad it's just that a lot of these are coming from the companies who are sponsoring the event maybe it should be so we have two kinds of sponsors there are sponsors who set up booths and are outside and say either they have booths or they sponsor the lanyards or they sponsor like yesterday's t-shirt was sponsored and then we also have sponsored talks so the only sponsored talks we had were google stocks today both the previous session as well as the talk in the morning so that's what we've had but are you saying that the other talks by apseco and uber felt like there were sponsored talks or did you think like the content was good I'm not sure like today it was fine just in the fragments today a lot of those talks I found that they were not very interesting but just introduced because they were from the sponsors I had one feedback there were a lot of talks about fancy stuff javascript but I would have liked to talk about core concepts of javascript something very core javascript at least one talk so that's one of my feedback so the question of the conference we set a theme and then we make sure that most of the talks align with the theme and then we have a couple of off topic talks but I think like a core talk is something that we should probably always consider for every edition of the conference a core topic like you said is probably something that we should consider for every edition of the conference right no matter what the theme is so all the talks were pretty nice thanks to the speakers but I'm surprised that there was no talk about WebAssembly in these two days so I'm not sure I'm caught by anybody WebAssembly is it? WebAssembly is it? Yes Yeah we don't have one Can you tell us a little about the talk selection process at one and second is that apart from WebAssembly I was hoping to see talks on Elm and Electron So we had Elm last year and then this year we decided not to so one of the how we approach editorial as a process is we look through our old speakers and editors we have external editors and internal editor I'm an internal editor from Hasby and we have three external editors this time there's Siddharth and there was Abhinav who's not here and Ankur who's downstairs so we take submissions on funnel and all of us individually evaluate the proposals and then we evaluate them together to see how much they align with the theme of the talk and then you know then we also rehearse we rehearse mandatorily with every speaker who goes on stage so we assess their speaking skills and then we also assess the quality of their content and then we sort of group talks together and then figure out how to fit things together and this process takes about six to eight months typically except for a couple of sponsored talks which is a sponsorship discussion although they do go through a fair amount of editorial process but not as intensive as the other ones We invite people and with people who have extensive speaking experience that we can see online especially with a lot of international speakers that we bring down necessarily rehearse with them but with everyone else pretty much we do we do this over hangouts and I'm sure there are a lot of people here who have rehearse with us already so in the framework wars I would be missing ember jays I mean it's not probably one of the cool ones but it is used in a lot of large enterprise applications I cannot change the schedule since it's already set but I would suggest that flash talks tomorrow if anyone is coming to you know willing to speak about it you're most welcome to today we had a topic we said pwa but tomorrow there isn't a topic for the flash talks we had a really great talk on ember last year is there any other feedback about say the venue yes hi actually I had a feedback exactly about the venue I posted a couple of times on Slack as well there seems to be very little contrast on the screen is there like reason why it's so bright here with the audience this is a problem we've actually never faced before but these lights were broken and then a lot of times the controller there I think wasn't functioning properly so we couldn't turn the lights back on during the Q&A session so the speaker was getting confused they didn't know where to look so we decided to just leave them on and then I'm not sure what happened we've been messing around with the lights all day trying to get an even difference between us being able to see you and you being able to see the screen we'll work on it again tonight and hopefully we'll have it better tomorrow but it's never going to be perfectly black and white right no I understand it just seems logical that because it's mostly talks and little less Q&A that talks should be prioritized that's just my personal opinion we are turning off the audience lights during the talks to make it dim for you guys so we can see you on the live stream because these front lights have never actually worked suddenly they're working and we're trying to figure out what's the best way to light the speaker so you can see him or her mostly him and also we can get pictures and we need enough light for the video it's a weird balance our projector is probably not powerful enough to be honest I don't know if 5000 lumens you guys would be really really not complaining but we don't so we're going to just do what we can do and I'll be up late tonight working on the lights so I wish that some talks were longer and some other talks were shorter because it's I mean not to be critical of the press and test it's just that can you hold it a little closer please certain topics are of actual business value to the developer so the time he spends is actually like it's worth the money that he's spending on it so there are certain topics that are not that can be great hobbies but are not necessarily valuable to his work so I just felt that some of the talks that were actually focused on core business values were a little hurried we could have seen more of what they have done I don't know I don't want to point out the task but it's just what I felt okay noted so one of the things that we consider is to bring in a good balance to the kind of talks for example we don't want the entire day to be filled with intensive talks where people are constantly learning because people do get to get tired after point so we have a couple of like lighter talks also mixed in once in a while probably not necessarily always useful to everyone and also through word of mouth we don't have an effective system for this yet but we do try to bold the audience a little bit to see what kind of people are coming so it's also important for us to put in talks that don't appeal only to developers but also to say leaders and decision makers so we have to get a good mix but we don't know the JS who is mostly developers so that's what at least I try to do make it mostly developer friendly talks that probably aren't anything else so this is like a small suggestion so whenever some Q&A section is going on mostly the questions that some people ask are not heard because they are not speaking into the mic so we can't blame those people I guess the volunteer should make sure that the questions are heard because it's as important to hear the questions as well as the talk because that's what makes it more interesting yeah yeah we do try so our volunteers who are great we love working with them but most of them are students and they're very shy and they don't want to force people to do things and people get tired of me saying hold it like a jazz singer which is really what you need to do with these mics they need to be right up in front of your face and none of you want to do that because you want to hold it like this and gesture and you know hey but then we can't hear you so we also ask you to stand up and sometimes people don't hear a herd of cats man this is a problem we face in every conference during the Q&A session people do not know how to hold mics and then when they start talking they tend to like gesture like that all over the place it happens quite frequently and we can't really enforce that there's nothing that we if there's somebody in the middle of the road we can't sorry middle of the street we can't really go do anything also one last point to that would be people need to be really patient for the mic to reach them they'll start asking questions out of the turn or even when the mic is not reach them so definitely the speaker focuses on them and answers their question but the rest of the audience is not here so it has to be coming from the audience also so all of you practice good audience hygiene now that you know what you're supposed to do and you are gonna ask a question stand up hold the mic like a jazz singer talk loud and then hand the mic back to the mic person when you're done with it so mine's actually a reverse kind of a question so how can we actually make it easier for you to find speakers for conferences and things like that yeah that's a great question because we're always looking for someone typically what we do is we have a talk funnel I don't know how many of you have seen this so people propose talks on talk funnel and that's something for JSO that I would open day after tomorrow at the end of the conference and anybody who's interested in submitting a talk on anything related to JavaScript can actually go there and do that but if you also have specific people in mind that you think will make really good speakers then please email us or ask them to propose on funnel because funnel is open till about 3 to 4 months into the conference whenever the schedule is nearing its closing point I close the funnel as well but otherwise I'm always open to speaker suggestions especially over email I'm at sandhya.hazgeek.com so please feel free to send an email about anything yeah specifically speakers yeah this works I kind of want to narrow down the question to one topic that I want suggestions on so I don't know how many of you know that there's an unconference area downstairs and then anyone can actually just say I want to talk about this and give a talk or I want to just have a discussion about something or I want to live code something right I think it's a really cool idea but I didn't really see it pick up as much as I would have liked so I'm just kind of looking for suggestions from the audience on how this can be done better and what would encourage you to just start impromptu thing downstairs it actually signed up to do something there's a women in JS roundtable at 430 today they're the only people who put something on the whiteboard I've seen people do a couple people doing things but you know if you want to support the people who actually like bothered to make a schedule go down at 430 for the women in JS roundtable so the answer to that question I actually didn't know there was an unconference thing because I don't know if it was announced or maybe we missed it but mostly I think it's because most of us are kind of shy as to can I actually talk about this or can I show this off what if I'm wrong will people judge me or maybe most of us are kind of introverts we're really shy or things like that I don't know how something that can be made easier where you be like hey you know come up and talk to us but that's basically what I think most of us deal with so isn't it supposed to happen in parallel with the talks yeah so I mean for me that's a barrier I mean what talk to pick to actually skip so I mean if there was a dedicated time slot or something like that you feel it's slightly rude to like not attend a talk and start something as in competition or are you saying you don't have enough information up front to decide if you want to attend a talk or do you want to go downstairs yeah the second one okay do you have a suggestion on how information can be better communicated I would much rather have a dedicated duration for that maybe with a little overlap here and there just to get a preview okay it's going on for 15 minutes there's nothing else just an unconference I go there I see if it's interesting I stay oh you're saying the other way around are the unconference thoughts you get to pick if you want to stay or if you want to go come upstairs and listen to the talk so you're confident about what's happening here but you don't really know what's going to happen downstairs and then it's a difficult decision not quite not quite all right all right yeah that's a good way so could I just ask a question how many of you here are came to listen to the talks as opposed to networking that's going to be my follow up all networking people they're not sitting here right now is there anyone here who's come only to network with other people prospective jobs prospective hiring yeah typically what we've seen is that in JSP people mostly come to network this is definitely an exception this year but mostly people come to network more than attend the talk so we sort of had that setup downstairs but you can just start in from the discussion but I think we need to facilitate people to start something together that's something that we should set up last year I attended the session so there were a lot of learning last year so this year you bifurcated mobile react differently but we cannot get that much amount of leave in working days so it's not like that we don't know mobile or react but the thing is that we want we have two days we want learning or key takeaways from JSP as much as possible last year the theme was basically performance there were too much things to learn and take away so that we had a roadmap of almost six seven months what is in the market and what are the things that we need to learn and keep up ourselves up based with the current situation that's what my solution and there is no such talk on testing our front-end applications so one of the very common pieces of feedback we had last year was the JF who was too focused on react and then mobile development doesn't really fit in there and it has to be like a good mix of everything shouldn't be mixed up because there are lots of people who are interested in JavaScript but weren't on the mobile side of things so anyway we decided to bifurcate that this year and then also fragments is actually a replacement for DroidCon in that we used to run until last year we found that there were lots of obviously overlap between people interested in fragments and people interested in JSP in react so we decided to keep that separately because we opened the funnel for JSP and there were like a bazillion react submissions and nothing else so we just decided to make that a separate day until this year we keep switching back and forth we have to really we can't tell what the outcome will be till the conference actually takes place so that's the risk that we run every time I have one suggestion like as per the what you suggested is how to ask people to tell like have a discussion I think one thing can be done is in the morning you can ask people like raise the topics so because people don't know what to discuss about so some topics could become and you can ask people about the words like do you want to discuss about like responsive design do you want to discuss about testing or that and then something sort of can be started in a separate time slot downstairs and people can start giving their thoughts and some like mentors can tell okay this is how it could be done like how we are actually implementing in our organization so I think some ideas could become from like people and from like other team and that could be like told to the people in the morning and can be asked for more advice and some of them can be shortlisted and can be done downstairs later in a separate time slot so that people don't feel left out like okay noted I think we can try doing this tomorrow actually we have time we can try setting up a white board at the registration and then have people fill out whatever they want to hear and I see if we can set that up can be announced in the morning and people can also do this and you can take a dub boat got it got it do we have time for one last question yeah is it article okay first of all I really want to thank you guys I mean I do not have much of experience being a speaker only this year I have had an opportunity to be a speaker and this is the second time I am going to speak tomorrow and your process has been amazing it has been the most open conference selection process that I have seen really thankful to that and I wanted to take it to speak to many other people who suggested that this particular topic was not covered that particular topic so my suggestion was that please please come forward and submit your topic whatever topic you would really want to see just come ahead and actually it is actually such a learning process you know because when you go there to talk for me and say okay I am going to talk on Elm somebody asked for Elm right I you will learn so much about the Elm and you know in the process you are going to give the benefit to the other 500 other people who are going to sit here so probably that is the right way to go for those who are feeling that certain topics are not covered next year probably all of you are requested to put your entries in thanks a lot Vijay speaking tomorrow by the way that's it please make sure you fill out the feedback form I know a lot of people have things that they want to say but haven't said it for whatever reason please fill out the feedback form as detailed as possible every single bit of feedback is really really important to us and helps us make this better if you didn't get a paper feedback form and you want one come down and see us we have a few extra if you don't like paper we do send the feedback forms out in email so you can fill in a Google form which is anonymous of course also you can catch any of us offline and give feedback personally if you don't want to speak on a public forum so there's that thank you very much for sharing your feedback we are up to our last talk of the day now this is demand driven applications with graphql vince rufi is a senior director of technology at sapient razor fish and also a Google developer expert he knows quite a lot about graphql working with rest is getting difficult because front end teams have to wait for back end teams for apis but tools like graphql make this easier with communication between tools rather than between people vince will elaborate on the challenges and points to keep in mind when working with graphql hi guys thank you so much for staying up for the last talk for the day so this happens to be my third talk actually fourth if you count meta refresh and I think year on year js who has been going and more and more awesome so a big cheer to the has big team and I think to the entire community as well and I really appreciate my new details that you guys get into and keep improving every single year so that's awesome okay so talking about demand driven applications primarily with graphql I tend to think there are three big problems when it comes to web development the first two you probably already heard of which is caching validations and naming variables and I like to add a third item to that which is adhering to Jason contracts and the reason why I say that is because pretty much in most of the engagements that have been a part of the Jason contracts that we agree upon at the start never seem to be the same when it project goes like things keep changing over and over and that's not a great thing and that essentially leads up to this whole situation of where the API tends to become a bottleneck for us so if you look at it you have the data layer and you have the experience layer so data layers where you have all your databases are of them being powered by micro services and you have the experience layer that's being built on your angular's your reacts and the view Jesus of the world and the mobile applications on swift and we'll be Kotlin nowadays so these of them keep moving at a great pace and is the API layers job in the middle to try and make sure that the data that's coming from the data layer is massaged and represented in the right way so that your experience layer can sit on the top and that's where things don't work very well and the date the API layer is also where a couple of problems keep on occurring so the first one is like it said your APS keep changing and changing an API is never a good thing for anybody every time new features get added in and you want to change an API your front-end does a very good chance of front-end applications can break and to sort of avoid that what you land up doing is sort of versioning your APIs you land up having to maintain a whole bunch of APIs with just small incremental changes over the other thing is network latency and I think network latency is the one that sort of affects the most to your API layer and that is more pronounced when it comes to mobile and that's primarily because of the way cellular networks work so every additional request that you make into an API the amount of payload that it downloads or the amount of time that it takes it actually puts in a lot of slowness to the loading of your app so network latency is one of the biggest factors that affects your API layer and the last one is documentation the way REST works, the way we build our REST APIs the whole API is of no use unless you have documentation that tells you what APIs to hit or what data to get back on so those are couple of challenges that we land up facing with your APIs and the whole idea of demand-driven architecture is to sort of minimize some of those problems and make life a little better so before we get into that just a quick look at how traditionally we have been working so if you look at it we obviously nowadays work in a component-based architecture you have a parent component and a couple of child components under them and the parent component is usually the one that makes the network request gets back a big chunk of JSON, takes the data that it wants to render components and each of those child components render the data so they pick up the data that they want to see render it up a lot of data gets wasted unnecessary information which you do not get to use at the same time certain components need some data which they haven't got from the parent components and what they land up doing is when they go and make another network call get their data and render so that's essentially how most of the application that we build nowadays work and which is fine but you know if you look at it the components are sort of doing pretty mundane things you know there's no smart intelligence over there you get the data I just render it and that's probably other reason why you call them as dumb components I know they call them dumb components for a different reason but you know the way we build our applications are pretty much rather dumb when it comes to demand driven things work a little differently so here every component knows that this is the data that I want to display and the component will make a request to the parent saying hey I need to display this component give me these three or four fields that I need and that goes to my parent component and that in turn goes to the root component and the root component will collate all the data fields that all the child components need makes one network call to the top gets the data in and renders all the data back down and what happens with that is every component gets exactly the data that they asked for which means not more not less which is very efficient on the network for us so that's how one of the primary principles of the way demand driven architecture works and graphql is one of the tools that works on this principle and if you ask me what graphql is basically just three things that you need to keep in mind one it's a query language for your API to it runs on the server so it's a service at runtime and it uses a type system so that's three basic things you want to keep in mind and while you're talking on this you also want to know what graphql is not because there's a lot of confusion around it people tend to misunderstand it so just want to throw out a couple of points out there so for one it's not a database things like graph database like Neo4j is a graph database graphql does not store any kind of a data it's a transfer protocol it's a client site statement it's not a client set state management library just because it was made by Facebook does not mean it is limited to only being used with react and relay and actually it's not even just limited to JavaScript and the node world it's much bigger than that and finally it's got nothing to do with Facebook social graph I had people coming up and asking me so you know what we build enterprise based applications and we got nothing we don't need Facebook friends we don't need friends or friends and likes so can you still use graphql and I was like of course you can use graphql it's got nothing to do with social graph so these are a couple of things that graphql is not so what exactly is graphql so when Facebook decided to launch graphql they simply pushed it out as a set of specifications of how query should be written and that's all that they did they did launch a small reference application on top of that but the main thing that Facebook owns for graphql is the specifications and what that did to the community is every community went and picked up the specifications and built a graphql server on their own favorite languages and by that now we have got graphql servers available in pretty much every possible language that's out there so which means you do not have to know JavaScript to use a graphql server if you work with Scala, Haskell, Ruby you can work with graphql in addition to that you also have a couple of client libraries that use graphql these are optional you may choose you want to use them it makes life a little easier but otherwise you can just write plain vanilla JavaScript so Relay and Apollo are couple of clients that are a lot more popular in the space how does a graphql topology look like so you have the bottom you know your databases you got your order management systems are inventory and all of that or the data from that is being powered up by microservices and then you have a graphql layer that is sitting on top of that which is essentially doing the plumbing over there so you take data from all these data points and graphql builds one big scheme over there and your frontend application whether it's Angular React or if it's a native app built on Swift or maybe native script all of them hit one single endpoint there's only one endpoint that all of them hit to get the data back so you don't need to know what are the various APIs that are there I don't need to know what is the parameters that I'm going to receive nothing I just need I just work with one single endpoint so that's the beauty of graphql so the way graphql works is so as I said every component defines the data needs so here I have a component that says I need name email address whatever I simply create a JSON object of that send it to graphql and graphql respond back to me with the JSON object with the data filled in and what comes with graphql is a very nice interface called graphical wherein you know you can live sorry in pretty much live mode write your queries and see how the responses look like I'm going to try and show you a couple of examples of this like I said graphical is a very nice interface for building for testing a graphql and there's also something called launchpad which you can access it at launchpad.graphql.com so this allows you to write build a JSON schema build your queries and actually see the live results so think of it like JS bin but for graphql so you have a left interface wherein you create your schemas and in the center pane is where you create your queries and on the right hand side is where you'll get to see the outputs of the queries so I have a couple of pads that you can just look at so at the heart of graphql is something called the graphql schema so this is where like I said you do the plumbing work you know all the data coming from the day from your APIs you keep them all concentrated in the center and you create a various fields that are there out there and your front end application will simply ask for this fields and inside a JSON schema there are just primarily two basic things one is the fields and the second one is what the field should resolve to so if you look at this particular thing these are a set of fields that I have so let's look at the first field it's one field called hello and it's of type string so like I said graphql is a type system so every field that you define you have to define what the type that goes along with it and for this field called hello I have a resolver function and a resolver function is nothing but a JavaScript function and inside that I could do whatever I want so for the hello function I simply say respond back with a hello world if I have to build my graphql query I will write hello so that's my field name and if I run it it should respond back with a hello world if I wanted to respond back with something else I just change the parameters here so let's say this rocks it would update my field on my rat panel so that's the output over there and you will see that value is changed to rocks so it's as simple as that let's look at the next example where you have a field called show cities so the field is called show cities what it returns back is actually an array of strings and in my resolver I'm simply returning back an array of strings out here so if I go in and say show cities and you notice graphql is doing an autocomplete so it makes life a lot easier for all of us and if I run that I probably get an array of cities over there so that's my second field so you can create fields that respond back with integers scalar values like strings, booleans, floats you can also respond it back with a string this is a third type of field that I've created it says get area it takes in an input of a radius whose type is integer and it runs back a float very simple thing and in my resolver I essentially have a formula that calculates a radius of a circle so if I have to try this out get area and I say radius and I give a radius of say 2 and I should get my radius over here so graphql at the core of it is very very simple a field and a resolver function which is a javascript function and do whatever you want inside the javascript function and what was the resolving value comes back as a response to the field that you requested for that's the whole base of graphql and if you look at it so easy that you can actually start saying how you can start mocking it how you can use it for mocking data because clearly when you're building front-end applications your APS are never ready right how many times are you in situations where you're building a front-end application and your APS are 100% ready very rarely your APS are never there your contracts are there yes your existing contracts are there you agree on the contracts you take them put them into static json files and go and start building your entire front-end your applications are very close to going life the APS is still not ready and by the time your APS come in ready they're different from the contracts that you have it gets very frustrating and I think that's where graphql's beauty comes in because that solves the problem for you so one it's a very... let's an example of mocking so I set up a graphql server I define my data types and I say these are my data types and this is how my schema is going to look like that's all that I need I don't need to care about anything now because graphql knows that every field is associated with a certain type it knows what to respond back with so if it's an integer it's going to respond back to or if it's a string it's going to respond back with a hello world so that's how you can do that and that's a small library that actually does it for you so over here there's a small module which says add mock functions to schema it's available as a part of the graphql tools so once you import that in mocking capability is available for you over here I can go in and so I've got a couple of queries and you can see that I've just named the query so I say you've got a query with a name called author maybe I can go and run that if you go and run author on the right hand side you see the responses have come up so that's all mocked data so wherever there's an integer field it will respond back with a random number if it's a string it's going to respond back with a hello world because that's what my module is providing me right now which sometimes isn't very great you know I want to have a little more realistic looking data or I want to get more control over my mocked data I can probably do that so thankfully I can go in here and I can define that if it's an integer respond back with a triple one in this particular case so if you notice now wherever there's an integer it will show up as triple one maybe I can go in and add an age field over here let's see how that works so age will also show up as a triple one if I want to define a certain string simple enough so that's my custom string that's going to show up now for every string value that's there in the system if I want to get a little more creative I can actually get rid of that and do something pretty crazy like in the string because it's a function I see I create an array of random strings and randomly assign a single string to any random value that's showing up over there so every time there's a string it will randomly pick up an element from the array and show it up over there so that's how you can start over customizing your mock data but you can do even better there's a very nice library out there called casual it's a nice npa module called casual you can input the casual module in and what casual does is it creates very realistic looking fake data for you so so I can input casual in and over here say for example if it's my user object I'm just going to go and just say don't come in this code out and I say get me a real looking name and get me a real looking age so if you see you got a nice name called Mrs. Jonathan Sinop Sheena and the age is 48 and the reason the age is 48 is because I've defined that I want the age to be a number between 18 to 75 so so that's casual for you I can even go ahead and even address field and when I want I want a screen name I want a city and you actually get random names of the cities and all of that so this makes it really functional mocking server for you use this get started go and build your entire application now your schemas are set in tomorrow when your API is already all you need to do is just go back and add your resolvers to each of the fields your fields do not change right they'll never change the fields not change and the fields don't change all the front and application that you build your mobile apps and native apps they're all going to and you react apps they're all going to work as this is just the resolve is what you're going to change and do the plumbing over there so you can take a walking server and take it to production without having to discard anything away so that's another classic example of how GraphQL can actually help quite a bit so there are three types of operations that you can do with GraphQL the first one is a query which are essentially the fields and that's what you saw the other one so that's how a GraphQL query would look like you essentially pass an object these are the three fields I want to respond back with those three fields the second are mutations so mutations are where where you go and update records so these are right operations and in a mutation you pass the parameters that you want to change and you pass the parameters that GraphQL should respond back with after the change has happened and they could be different they don't have to be the same in this example because their likes I'm just responding back with the like but I could say update the likes but respond back to me with the name of the product that is there that will still work the third is subscriptions and I think that's one of the coolest features here so subscriptions allows you to do real-time reads on specific fields and they keep listening to certain mutations whatever mutation happens subscription will trigger and those fields will start showing up now from a query standpoint they're pretty much similar to the way you work with a read query but things start to change on the server side so so I think till about a few months back the specs for the subscription was still in draft mode and they were not fully released but the Apollo team went ahead and kind of released a full a fully featured version of subscriptions on the Apollo server and that's primarily based on web sockets so if you want to use subscriptions in your application you need to do a little more you know for queries and mutations it's just about going and adding a resolver function and you're all set but with subscriptions you'll have to go about setting up a small subscription end point you need to set up a subscription end point and you need to set up web sockets so this is on your express side you need to write a special prefer code additional and in your resolver you'll have to use pubsub so use a pubsub to keep listening to an event of a mutation and every time that event mutation is happening it's going to go about updating the fields and ask me I think subscription solves a lot of modern day problems that we have faced right so just to so one of my pet peeves is this you know we live in a tab world we have like 30 40 tabs opened up in a browser and out of which 7 or 8 tabs belong to the same application that we have like we work on GitHub I work on GitHub pretty often and I'm working on a repo I got a bunch of PRs I got a bunch of issues they're all opened up in different tabs I've blown close a couple of issues merge a couple of PRs and my damn count is different on every single time so the count of opening issues is very different and it gets very frustrating we need to keep refreshing each tab to make sure that my counts are all same same as the thing with e-commerce right I've got 4 or 5 different product pages opened up I've added a couple of them to the cart and my cart the items and cart number is not the same across different tabs and and I think that's where subscriptions can actually come in and solve the problem for you so this is a small example that one of my colleagues built in Shalini is Shalini around here but so Shalini is a very young colleague of ours and you know I kind of helped her out with GraphQL and today can you help me build a subscription and she came up with this in a couple of days so what this is is product listing on the left hand side and it's a cart on the right hand side and you got subscriptions enabled for your items to cart and your cart page every time a product is getting added to the cart your sub thing should start popping up over here without having you to do refresh so you had to cart immediately it shows up on your cart page and the count is also changing on the top so now your browser tabs are all synced with each other so that's a small video of how subscription can work in moving on query fragments I think another cool thing about GraphQL if you remember at the start I talked about how you have queries how every component can make a demand of the data that it needs and it will pass up to the parent in GraphQL you do that with something called the query fragment and if you look at an example over here on the top is probably like a cart component a profile tile can call it as so you got a profile page you got the name and some information on what the status is and how long have they been a member so all the data is now created as a fragment and that fragment will simply define that hey this fragment is called public profile it's on type of the user type of person and it's got a name field profile field status and a message and then you also have another component called the billing component billing address component which defines that I need the street address I need my city I need my state and reserve code so on and so forth so every component I just define the fragment of the data that is required for that component and then what happens is on the parent level using a simple spread operator these fragments are pulled in and your entire query is built so again a simple example for this so on my left hand side is the whole GraphQL schema it's got all the information about the user first name last name display about the blah blah blah every single thing and what I've done in my query is I simply create small fragment so this is my public profile information which simply shows display name and avatar and I've got my private profile which got more information with things like email billing address and stuff like that and then depending on what page I'm going to query from I define what data should I be pulling in if it's going to be my personal profile page logged in profile page I want to find both my data if it's just my public profile then I'm just going to pull in my public profile information so if I query profile page I would probably get all the information in so data from my public profile and also from my personal profile and if I query only public profile I get only those two data points in and now because these are fragments I can just go in and I can so for example this component is being used in like 5 or 20 different places and now your project manager comes in and says you know what just can add this one additional field over there which essentially means you need to go and add it in all the different places not only the component but also the component is probably the same place but the APA that's been using you have to make sure that that fields are available all over there but now with very fragments I just need to do it at one place so I could just define it over here and every single place where this fragment is being used will automatically get that additional information of members and that's all casual by the way that's casual mock data that's out there so right from date and everything can be pulled in so that's GraphQL fragments for you okay so these are a couple of good things about GraphQL there are a couple of not so good things about GraphQL and the first one is the classic n plus one query problem so the way GraphQL is structured right every resolver function runs asynchronously within a promise what can happen due to that is the same record can be hit multiple times so the n plus one problem is where you got multiple queries hitting the same record and returning back with the same result that happens very often with GraphQL so if you see this example over here I got a list of friends and I got a best friend for each of those friends and there's obviously a common possibility that my best friend is somebody else's best friend also and when I run a query like this what happens is on the network or on the database is going to make all these calls and you'll realize that the person with an ID too is getting called multiple times which is essentially not a very good thing and that's a problem that happens very often with GraphQL and I can probably show that with a small demo so the same example that we saw put it up in GraphQL I got a list of friends and showing that I'm trying to get the name of the best friend and also my friend's best friend when I run that I get to see a bunch of names and you'll obviously notice that some names are duplicating over here so Shailesh for example is the best friend for a lot of people so his name shows up here multiple times and on the database what's happening is that particular ID is getting called multiple times and that's the problem so to solve this you have something called a data loader so this is a very small library that Leigh Byron put together apparently he and one of his friends sort of where programmed it in a coffee shop and it's just about 300 plus lines of code so very small library but this sort of solves the whole problem of Rn plus 1 and it does it in two ways so your data loader basically does just two simple things it does batching of all the queries and secondly it does caching of the records that have already been queried for and if I have to go and enable this in my application reasonably simple I would go and import my data loader in and I also obviously create a new data loader instance and then in my queries where I'm simply doing a very regular find by I'm going to route it via my data loader I'll just save it and run my same query again I get the same results which is great but the good thing also is just like one so one call went into the database with the data so at the most you just get one or two calls so that's the data loader and I think if you're using GraphQL on the server you should definitely give this a concentration the next thing is so a lot of questions that keep coming up very often is how do you do authentication and authorization with GraphQL and I think the plain and simple answer to that is you don't so as per the specs and for the guidelines it's recommended that you do not do any kind of authentication in the GraphQL layer but you kind of do it above and below so just to get everybody on the same page authorization and authentication is actually two different things authentication is where you want to validate whether the user who's coming in is a genuine user or not so if the person is a genuine user then let them even access the API if they're not a genuine user just return back with an error and don't even let them touch the API so that's authentication authorization on the other hand is you want to check whether the person who's making the transaction is authorized to make the transaction or not so it could be like if you're an admin then you're able to make right changes to certain fields if you're not an admin then you're only able to read so that's authorization and the recommendation is that you separate them out and you do it this way so you have authentication on the top so it's all of in your express layer or in your server side layer and once that is and once your authorization layer is there and the person request that's coming in is valid then it goes through your GraphQL layer which is transparent doesn't do anything and then it goes and checks on your authorization which is essentially sitting on your business logic or in a database layer and then if that's valid then you allow or just allow certain transactions to happen so that's essentially the recommended practice that how you recommend using using authorization authentication with GraphQL if you're using node and express very standard tools you have used passport you can use the JWT tokens you can use biker app the standard things that you do so they all on the express layer that's there GraphQL you do not want to ideally do that having said that you can do it if you really want to do it but the recommendation is that you do not should ideally not do so that's about it let's try and play a small game so this is an application that we kind of built together it uses Angular on the front end because Angular is an awesome app yes and it uses GraphQL which is a hosted version of the GraphQL server and app is very simple essentially it shows you a bunch of libraries go click on it and just vote for a library it has all three implemented in it so it is using queries to read the list of libraries and show it to you that is a mutation so you don't have to click on a star it goes and mutates the value of that particular object and with subscriptions it will keep sorting and making sure that the library with the most number of stars comes first it's on firebase and it's using free GraphQL so not sure how much of traffic or load it is going to take but let's give it a shot so that's a URL if you guys can just open up your mobile phones and try and hit it bit.ly slash get-stars that's the URL open it up on your mobile phone you see a bunch of libraries get stars so go ahead and start voting it and with my subscriptions and if my servers hold up hopefully you will see the library is opening up and you can try and see if they are staying in sync with what you are clicking and what I am getting to see you are moving forward nice to see Angular out there let's react the extra let's stop it so anyway that's a small demo out there and the codebase is also available on bit.ly slash get-stars ifon code you can go GitHub URL and play with it like I said it uses Angular 4 with AOT and it uses GraphQL in the back end so that was about it for the demo and I never had an opportunity to give public service announcements at JSU so we as a community are extensive users of open source pretty much every tool that we use every library that we use is open source our NPM modules are anywhere around 800 to 900 modules in and all of them are free we are huge consumers of open source and I think it's sort of time for us to start contributing back to the open source community and you can do that in every possible way very small small things obviously you can raise issues various libraries that you're working on and not only just raising issues I think it's more important to try and make an attempt to fix those issues to try and make an attempt to fix those issues raise a PR try and see if you can do some improvements on this I think just in the course of me doing the stock I found I was obviously playing through a couple of GitHub libraries and I found there are so many opportunities for me to contribute back in terms of improving their code simple things you know like dependencies missing out of packages just going add those dependencies in that NPM start script is not probably using Nodemon make it use Nodemon so very simple things do very small small things but start contributing back to the open source community because unless you do that the core people who are maintaining this are probably getting burnt out trying to just answer all your issues so that's one if you are getting started with open source the talk was happening down there it was only a moment otherwise there's a very nice article on Medium by Kenzie Dodd first time was only go and have a look at that talks about how you can start contributing to open source and also in GitHub go and look out for these tags called first time was only beginners or help wanted so pretty much a lot of libraries of their web pack and Angular and so many more they have tasks which are simple which are more which new people can go in and start working on go and search for those particular tags poke those repos see if you can make any contributions and keep raising PRs I think that will really help us grow as a great open source community and that's about it from my end we will take questions yeah I still can't hear you hello so this is about probably the demerits of GraphQL how we can get into trouble with using GraphQL so in typical ERP applications we want to authorize so as if someone has rolled this he can only see these fields and he can only this is an important call because this is put in GraphQL how do you handle those things and sometimes it probably becomes an overkill if you are using GraphQL for such applications I think GraphQL makes sense when you are you've got something like give me all the comments for this user ID and then for that comment give me the user ID and for that user ID give me all the likes where the schema is more dynamic but in applications you want to restrict what the user wants you will say that once a user hits this I will only give him the specified response so what are your views on this so to answer your question with regard to how so I think your question is more with regard to how can I selectively show certain fields to a user based on the type GraphQL is so there are directives called skip or include so I can say either it skip or either it include I can mark certain fields for that so you know for example you can use query fragment the classic example was a public and private so there is a public private profile I can put it under a directive saying either it include and I say if that user category or Boolean is set to true only then include these fields so even though it's a part of my query it will not render it unless my condition is set on the top so that is possible with GraphQL selectively showing fields the other question was with regard to sorry I yes so yes so your GraphQL sort of gives you access to all the schemas that are available but then the person who is building an API for you so if you look at it the person is building an API he or she also has access to the entire database in a certain way so the same person is the one who is kind of transferring on to GraphQL so I wouldn't but then like I said if you look at the example that I showed you the authorization you could still have authorization on your microservices layer so even though you have that field in GraphQL you could still reject that at your microservices layer or on your actual core application layer that's it I am new to GraphQL so and I would like to know a little more about the server side deployment that's what I would like to know right so one of the when you say server side deployment do you mean languages or how are they deployed? yeah yeah so specifically like can a single server also cater to graphene as well as REST based calls or that has to be a dedicated servers no they would be different servers and how do they interface with database so like I said in GraphQL when you have a resolver function inside the resolver function you could write whatever code that you want to return back so if you want to write code to hit a MongoDB database or to hit an end REST API and bring it back you can do that so it's nothing to do with Graphene as such no so Graphene no nothing it's a Graphene or GraphQL GraphQL yeah so GraphQL is like the server language Graphene is I think is an open source tool that allows it's similar to GraphQL actually I think a product of GraphQL yeah I think that's just a spin off of yes it's a GraphQL implementation on one of those languages I think I have that number on my list yeah so that's a Python port of GraphQL yeah that's there so it is just it works just like GraphQL it is a GraphQL server another thing is can you show me a realistic request not just a payload but I think this might be something better taken offline so that we can let everybody go home so you want to see how a networker looks like with a GraphQL sure I can show that it's essentially just a post with an object attached to your URL so even a Puri is going to be a post sorry even a Puri just catch up with Vincy after the talk thank you very much coming tomorrow please remember you need to have your badges and you need to check in again so that we know you're here the talks start at I forget 9.30 tomorrow that's right it's the late day sleep in a little bit but remember that Bangalore traffic is really bad on Saturday mornings because everybody wants good shopping