 Hello. Okay everybody, welcome to day two of JSFOO and Meta Refresh. How many of you were there yesterday? Okay everybody, how was yesterday? Yeah? Okay, so I'm hoping that today will be even better because this morning what we're doing is starting with two very interesting talks on security. One by Lavakumar Kupan and the other by Dominic Dahl. Yesterday we touched on what I would say are tactical, operational and day to day issues with security. Today what we will get is a sense of a slightly higher level and therefore what we'll do is have a joint question answer session immediately after Dominic and Lavakumar's talk, which will help you to kind of tie the sort of connections between two. I'm told that spoiler alert Dominic has also looked at the talks yesterday and tried to draw some insights and instances from yesterday in order to reinforce his points today. So I'm hoping this will be a useful session. Then after we have two very interesting talks on functional programming. Hari Gopal and Ritesh Pillai will talk to us about the work that they are doing with ReasonML and with ELM. And post lunch we have a whole series of talks on performance, on backend and on what is very interesting these days, which is native script. So I'm hoping this will be a very interesting day for JSFOO. For Meta Refresh the talks are actually starting at 10.15 in auditorium 3. Just an announcement, you will notice that there are cops and dogs at this venue. That's because the Chief Justice of Karnataka is coming to do an event in auditorium 2. It is not run by Haasgeek. It's a government event where there's a portal launch today. And so between 10.30 and 11.30 they will have a high profile inauguration followed by an event. So therefore the talks at Meta Refresh will happen in auditorium 3. The theme for Meta Refresh this year is design systems where we are trying to understand how organizations have structured their teams as well as processes to help developers and designers to collaborate and to ship apps more easily. So if you're interested in design systems do come over to Meta Refresh track in auditorium 3. There are talks by Nakul Shanay, Tejas Bhatt, Sri Hari Sri Raman, Abhinav Chikara and Ravi Suhaag all of them talking about design systems. Then we have a couple of interesting talks on how do you design for voice user interfaces. How do you design for virtual reality? And then we have a very nice closing keynote by Rahul Gonzalves, the founder of Uncommon on how do you actually structure your design team and therefore scale your biggest design system. So it's going to be an interesting day at Meta Refresh. I know it's hard to choose between two but I'm sure that either which ways you will have the recordings of the talks available after the conference. So it's not going to be a win and lose situation. On that note I'm going to hand over to Chakravarti to take over the proceedings for today. Good morning. Wow. So welcome to day two. I'm Chakravarti. So yesterday we have fantastic talks about GraphQL, security, JWT and all the stuff. I don't want to waste your time recapping all of those stuff but I have to do this. So without waiting further I would like to introduce our next first speaker, the Laokumar. So he's a WWE fan. He's also a security researcher and a founder of Iron Man security. So he's going to talk about the malicious code execution. So let's welcome him. As Chakravarti introduced I am the Laokumar and very happy to see so many people on a Saturday morning. To be honest if I wasn't speaking I wouldn't be here because Friday nights are usually very colourful. I in fact saw one gentleman here sleeping and woke up just in time. Okay, so like he said I'm a WWE fan so I like to wrestle with web applications, find security vulnerabilities in them, develop tools to actually fix these vulnerabilities and also talk in conferences and other places so I can help spread awareness about security in general. So this talk is titled everything you need to know about client-side code execution essentially cross-site scripting. Before I get started I would like to know how many of you are familiar with the concept of cross-site scripting. Pretty much everybody right which is expected because if you are into web application development and if you do not know cross-site scripting then you're doing something really really wrong or at least your employer has done a huge mistake hiring you. So everybody does know what is cross-site scripting but the depth of understanding of cross-site scripting could be very different among different people. So this talk will and with a lot of technology new features and new frameworks coming over there's a lot of changes in the XSS space as well both in terms of how XSS can happen as well as how XSS can be mitigated right. So this talk is going to talk about all of that. So this is the outline so first we will establish what is client-side code execution talk about its impact then we will talk about the different forms of different types of client-side code execution then we'll look at how to prevent client-side code execution because this is a developer conference and you know a prevention or fixing these vulnerabilities of primary importance then we'll look at you know an online tool called as DOM Goat it's an application of created which can be used to learn DOM related security vulnerabilities primarily DOM related XSS issues so I'll show some examples with that you know just to drive home the point okay to get started when we look at security of applications I mean there have been a few security talks yesterday as well so primarily when we look at security people think that security has to be first put on the server you know you have your server side of the application that has to be secured properly if you think of your server side as a very strong and you know a powerful vault or a safe right so what you do is you try and put it behind as many layers of protection as possible you know you have your ideas IPS firewall and you do all your security testing on the server side and you have different kinds of monitoring systems there so think of it like you know you put like a really thick wall on your you know vault and you have put a really thick door but for an attacker to actually get access to what is on the server he doesn't necessarily have to break the vault what he has to do is he has to steal the key to the safe if he has the key then he can just open the safe and he can access the contents of the safe right and if you think about it in web application terms your server side is like the safe and the client side is essentially the key to the safe right because all the data and functionality which is present on the server is essentially accessed through the client side so if you have a vulnerability on the client side then it is equivalent to you know your client side being your key being compromised to the safe so person can essentially steal all of this data or access all of this functionality without really having to do any hacking as in they do not have to break anything on your server side and again if you think about it 50% of your app is on the client side whereas almost all of your security practices are focused on the server side but on the client side you have a bunch of security problems and in this specific talk we will be focusing on code execution client side code execution which is cross side scripting okay when we say client side code execution primarily people think injecting JavaScript into the browser right XSS in the name itself you have cross side scripting so the popular you know idea is that you would the attacker would inject the piece of JavaScript into my page and then he would do some bad things but it is not just JavaScript injection you can have HTML injection and CSS injection as well and these can lead to different kinds of problems which I will just talk about so when a attacker is able to inject JavaScript into your page and he is able to execute JavaScript in the context of your site on a user's browser then they can pretty much do anything your user can do essentially they can take over the user's session perform actions on their behalf and they can also try and steal the user's password by using social engineering techniques and you know you can consider that to be a full compromise of your client side essentially and if the user is an administrative user if his session is being compromised then you know there are a lot of much more serious things that can happen because an admin user has access to a lot more functionality on the server side let's say an attacker is not able to inject JavaScript but they are able to inject HTML on the page right so this is a limited form of an attack in this case an attacker is still able to do some bad things for example they can steal sensitive data from the page and if this sensitive data happens to be your CSR of token then the attacker can now impersonate you and they can actually perform actions on your behalf and depending on again what kind of functionality the application exposes this can be very serious and again if I am able to inject HTML into your site then I can you know write on the trust and I can you know perform phishing attacks by which I can steal the passwords of your users and I can also convince your user into downloading malicious software for example if I am flipkart.com hypothetically and if I am able to inject HTML into the you know the website of flipkart.com then I can say hey this is a big billion day and we are going to do a new you know app you can download and you can run this app and if you do this you can actually you know book your products faster than you can do from a web interface and people are more likely to download that EXE whatever is being offered for download and because they think it's coming from flipkart and it could actually be from the attacker and it could be a malicious piece of software these are some examples of you know attacks you have a dangling markup attack where a person can inject HTML and they can actually steal sensitive data in this case they are stealing CSR of token this is another attack where they are actually changing the the URL to which a form is submitted so all the sensitive contents inside this form can get submitted to an attacker's website right and then what if an attacker is able to inject CSS into the page he can again steal sensitive data like CSR of tokens and they can also perform a limited variation of clickjacking attacks how many of you are familiar with clickjacking attacks okay some of you so clickjacking attacks are essentially a form of you know making a user think that they're clicking on something when in reality they're clicking on some other part of the page so you essentially force trick the user into performing actions that you want them to perform while they think they're doing something else and clickjacking attacks are performed by essentially playing around with CSS on your site and if I can inject CSS into your page then I can perform a limited variation of that and I can trick you into clicking on different sections of the site which you would normally not click on for example there might be a button which says delete my account maybe I'll trick you into clicking that account and deleting a single person's account is not a big deal but then let's say for example you have spent a lot of money and you know trying to convert visitors to your site into actual users of your application and then an attacker is able to inject CSS and he you know he kind of tricks a few thousand people into deleting their accounts it's a lot of time and investment and money which has been lost right this is an attack called a CSS XFL attack this is a technique by which someone can actually steal sensitive data from the page by injecting CSS so I'm not going to do the details of these attacks I've put them on the slides you can refer to them but I'm just letting you know that these are well established and well known attack vectors against you know for CSS, HTML and JavaScript ok so now I think that establishes what could possibly go wrong if a person is able to inject any of these three types of data into a page now let's actually see how this happens how does somebody inject this into your site in the first place now XSS has two variants one is server XSS I think server XSS is the most well known variant what happens here is the server will send HTML JavaScript or CSS to the browser and in this data which comes from the server is controlled by an attacker right now how does an attacker control the HTML JavaScript or CSS which comes from the server there are two places from which this can be done either whatever data goes in the request the server takes this data and then it puts it back in the response and then it serves it to the browser and if the server is adding this data in an insecure manner so for example if I send some data in the request and this data is taken and then it's added into the HTML of the page without any kind of sanitation or encoding then you know I can actually have attacker controlled HTML in the response that comes back the other vector is server side storage this is also called a store XSS where you collect data from somewhere it could be from the request or it could be from other places you take this data you put it in a database and then when you are serving a page you take this untrusted data you put it embedded inside a page in an insecure manner you send it and now you have control HTML, JavaScript or CSS being served to the browser now this is the most the more popular popularly widely known variant of XSS but then it is not the most common variant of XSS anymore in modern applications this is a talk from Krzysztof Kotowicz he is an engineer security engineer at Google he has recently found or he has at least proposed a solution to prevent DOM based XSS vulnerabilities this slide is from there and as you know Google has a bug bounty program which is if you discover a security vulnerability in Google application a bunch of Google applications then they would actually reward you with a good amount of a fairly good amount of money in exchange for the knowledge of the vulnerability and then they will go and fix this issue so he handles the bug bounty program so he has a knowledge about what kind of vulnerabilities are discovered in Google and what kind of vulnerabilities are reported by people on Google infrastructure and his observation is that inside Google DOM XSS is the most common variant of XSS vulnerability just because of how modern web applications are written and this is true for most other modern companies as well unless you are writing web applications like people used to write 10 years back if you are using modern design patterns then DOM XSS is the most common type of code execution issue you are likely to have but unfortunately DOM XSS is not a very well known variant of XSS and even those who know DOM XSS they do not know the depth of the different ways in which it can actually happen and in this talk we will try and look at that. Okay so in a client XSS so when I say DOM XSS I am essentially talking about or client XSS these are interchangeable terms so in client XSS what happens is your JavaScript engine which does a bunch of things and then based on what kind of instruction is being executed it will take data and it will either send it to the rendering engine if you say adding something to inner html or it will send it to the JavaScript engine again if for example you are doing a set timeout or eval call or it will send it to the CSS engine if you are trying to manipulate the style. Now if attacker control data comes to the JavaScript engine and the JavaScript engine will take this attacker control data and send it to any of these three places then you will have DOM XSS vulnerability is happening on the client side and depending on which engine it sends it to you will have a different kind of an impact you know whether it is html injection, script injection or CSS injection. Now how can DOM how can attacker control data actually end up on the JavaScript engine there are a bunch of different ways in which this can happen you have different kinds of DOM properties so these are common ways by which you can actually get entrusted data into your page that is your JavaScript engine can get this data and you have communication channels as well which is you have your Ajax calls you have your web socket messages you have your cross window messaging which is your post message and you also have more lesser use but then again these are features available which is your service and events you have web RTC messages which is essentially your peer to peer communication in modern browsers so these are all places from where you can get entrusted data I am sure because you are developers you are already familiar with most of these different kinds of APIs so the application which I was talking about which is DOM boot so this is actually available on online it is available at DOM.go.at I will use a local version of that so this has a bunch of information about DOM accesses and it has a list of DOM accesses sources a source is essentially a place from where you can get entrusted data and all the different DOM property based sources are listed here and their corresponding values are shown now these are called as DOM accesses sources because an attacker can actually control this value so for example if when this page is loaded and in this page if the developer is say for example he is reading location.href then the value of this property can be controlled by an external attacker and the way somebody does it is they can construct a URL and they can send this URL as a link to you say on a chat or over an email and you click on this link and you open the site now at this point of time the location.href is essentially the URL of the page and the URL was constricted by the attacker so there is attacker control data being written for this particular DOM property. Similarly you have navigation based DOM properties window.name I think most of you are familiar which is as you navigate between different tabs between different pages as long as you are in the same tab the window.name property remains the same which is I can say if you visit my site I can set the window.name property and then I can automatically redirect you to a different site and then the window.name property will be the same when it is being read from the other side. Similarly document.ref is again a navigation based source which is I can have put whatever payload I want to put in my URL and then I can navigate the person to the next page and then in that page when they refer to document.ref it will have the payload which I had the attacker actually configured and communication based sources like I said Ajax responses. Now Ajax web socket cross window messaging these do not necessarily have to be cross site communication which is to say if you are say jsfood.in and then you make a call to let's say google.com and then you get an Ajax response so that's cross site data which is this data is coming from an external source which is inherently untrusted data so that is something which an external party can control but even same site Ajax calls when you make a call to your own server and you get the response back even those cannot be considered trusted because you do not know where the server is getting its data from I'll just show an example of that. So a lot of people think that they do not really have to worry about DOM security because they are an app only company and to be very I think honestly nobody is an app only company if you really think about it because when they say they are an app only company it means the product that they give to their customers is an app right but it doesn't mean that they do not use any web applications at all especially in companies like this I would say web security is even more important because think of a company like Ola you know hypothetically and Ola primarily is an app based company I don't think anybody uses the Ola portal to you know book anything you all use your apps and the apps are with the users which means the data that they send to the Ola server that can be controlled by the users right so let's say for example I'm trying to book a cab and whatever look if I'm not able to find a cab then let's say this information gets stored in the Ola server so that people could find out in which areas they have hotspots in which areas you know people are not able to find cab so they can better redirect drivers to those places and let's say the Ola app sends the look you know name of the place to the Ola server saying hey in this place this user couldn't find a cab and if I'm an attacker what I'll do is I'll intercept this traffic and then instead of the name of the place I'll actually put a you know a piece of HTML and JavaScript and then I'll send forward this the Ola will get saved on the Google server I'm sorry the Ola server and then when an Ola engineer who's sitting inside the Ola network right and when they are looking at their portal to see which areas cabs you know in which areas people are not finding cabs then that page it might make an Ajax call to you know get the list of these places the server will send a JSON which will have a list of these places and then the JavaScript on this page on this portal I take this JSON and let's say it adds it to inner HTML of the page right now what will happen is whatever payload the attacker sent from his mobile app will essentially get executed on the portal of an Ola engineer who has a lot of privileges and he is sitting inside the firewall and I say it's even more important for an app only company because in a company where they have a public facing website they usually tend to have you know good web security practices because you know they are worried that people might attack them but in an app based company their security usually tends to skew towards the mobile site so most of their security engineers might be mobile security engineers they might not have web security experts which means whatever internal portals they have they are more likely to be insecure and then you know someone come from outside they don't have to do any kind of firewall bypassing they can directly you know try and start stealing data from within your portal okay again Ola here is just completely hypothetical right because it's just a famous app this has no bearing on the real life scenario in Ola okay now in client accesses there is an indirect form of accesses source as well where you have attacker control data which comes to the JavaScript engine this information will get stored on the client side in the browser so you have different kinds of storing data on the client side and then in a different section of the site this data is read from this client side storage and then it is sent to these different you know engines so the different kinds of storage you have on the client side you have cookies you have local storage session storage and index DB and then you also have HTML you know element attributes so for example data attributes so what can happen is you can get untrusted data you can then set it as a HTML elements attribute and then in a different part of your page this value could be read and then it could be used in an insecure manner so this is an example of an indirect accesses on twitter so here in the URL after the hash part whatever data was sent it was actually taken by the page and it was stored it was on help.twitter it was saved in local storage and then if you visit help.twitter.com without the hash then that page was reading this content from local storage and then it was setting it to in a HTML so which meant that you had untrusted data being stored in a storage mechanism on the client side and then this data was taken from there and then it was executed in a different part of the site so even if you have if you're reading data from your local storage or session storage then you should consider them as untrusted data because you do not know from where the data is coming originally okay so those are you know one way in which you can have code execution on the client side which is you have data from untrusted source going into a sync there are other ways as well for example malicious libraries and components in modern applications you are using so many external code in fact I would it would be not incorrect to say that there is more third party code in your application than code written by your own engineers there are so many libraries which you use for different functionalities and then you have your analytics you have your advertising from a bunch of different people and then for the advertising in other places developers don't really have a whole lot of control for example these are not so much engineering decisions as they are business decisions for example your company might do a tie up with some other advertising company and this decision is taken by some business folks and then you will have to embed their JavaScript code into your browser so there are cases where either these companies are malicious or they are insecure which means they send untrusted data or they send malicious data which will essentially affect your site as well because that code is executing on your site and you might be embedding third party content inside iframes and s3gmages I will talk about it in a little detail later images are usually something which you take from external places and embed them in your site and they can also lead to problems sometimes this is an example where in New York times they had imported JavaScript code from an external party and then that code turned out to be malicious and it was forcing people to download a virus by doing social engineering kind of an attack so and then they had to issue a public statement for that and with SVG now usually images are considered to be harmless they are not executable code they are just meant to look pretty and which is usually the case apart from SVG because SVG can have JavaScript embedded inside it and if you think about it if you are including a library from an external party then in more mature organizations you will have a certain process by which you will have to send this through an approval process for example there will be security engineers who will have to look at this code and say that okay this library is okay you are using the latest version of the library it is from a popular repository you can use this library or you cannot use this because it looks to be a little obscure but for images it usually processes well most of the time it is not even developers who are using images the images come from your designers and you just embed it into your site and SVG images could have embedded JavaScript and if a person visits the image directly as in if you put it inside a image tag it is all okay if you were to visit this SVG image directly in your browser then the embedded JavaScript will get executed it will have access to all the client side functionality okay so I think with that I have quickly gone through the different ways in which you can have client side code execution from what are the different places from where you can get understood data now let's look at how it can be prevented how whatever we discuss can be secured against when we are looking at prevention there are ways in which we can do this I'll go through this one by one the first one is content security policy how many of you are familiar with content security policy okay how many of you have actually applied content security policy on your domains a few of them that's good now content security policy you can think of it like a firewall for your browser would anybody host your app server or web server without a firewall is anybody brave enough to do that raise of hands without a firewall nobody does that right even if a company is hopelessly insecure they still put a firewall and hey does that mean I have this time you rang the bell I have 15 more minutes okay so so everybody on the server side you would definitely put a you know put your server behind a firewall it's it's the bare minimum you can actually do and content security policy you can think of it like a firewall on the client side which will protect you against you know code execution vulnerabilities so again it just makes common sense that you use content security policy on the client side now just putting content security policy doesn't just because you put a firewall doesn't mean you know you're good if you put a firewall and you open all the ports on the firewall it's as good as not having a firewall at all right so you put a firewall you'll have to do a little bit of you know common sense based configuration to make sure that the firewall is actually doing something the same way in a content security policy you can configure it so that it at least gives you a certain level of protection you can configure it to make it really secure but then in practical cases at least you can have a configuration where it gives you some level of protection against you know these kind of issues and if you have to start by you know to protect against the client side then I would recommend you start from content security policy because it gives you the highest return on investment for the time you will actually put in because any other form of protection is a continuous process because you're continuously writing code so you will have to ensure that the code is securely written that it's free of vulnerabilities and so on so whatever process you have has to keep happening you know as you're writing a new code but content security policy is something you can put once let's say for example you spend a week or two and then you set it up once and as you're writing new code whatever you've already set up the firewall you've set up will continue to give you returns on you know all the new code that you've written let's say for example you write a code after three months that has a vulnerability this firewall will still give you a little bit of protection against that so if you have to start somewhere I'll say you start from here first set this up and then you go and do other things okay so again like I said with firewalls the configuration is the key it's about how you configure it not the very fact that you have put a firewall so the most secure way is in content security policy you can set a directive which is script src self so this means that when your page is being rendered by your browser your browser will essentially ignore all inline JavaScript so if you have put an event handler in a say an elements on click attribute you have put some JavaScript hard coded there or you have the script tag and you've written some JavaScript code inside it all of that is ignored by your browser the only JavaScript your browser will execute is script which is loaded with the script src directive and this JavaScript file must be served by your own server as in the domain name must match the domain from which the page was originally loaded so this means that you have essentially in some ways you have whitelisted which JavaScript is considered to be you know considered to be legitimate so you're telling your browser hey you only execute these JavaScript content so whatever JavaScript an attacker injects into your page will get ignored by your browser right so it does not execute at all and if for example all your JavaScript files not if in most cases the JavaScript files are not hosted on your own domain you have you have JavaScript code being fetched from or referred from external sources like CDNs and so on in those cases what you can do is you can explicitly mention the name of the domain from where you are you know you are loading your JavaScript content and when you do that try and be as specific as possible for example if there's a CDN and all your JavaScript content is inside a specific directory of the CDN then don't just give the domain name of the CDN because there could be other people who control other directories so try and be very specific you know try and give the path to the exact directory from where you are loading this you know JavaScript file okay now the first option is probably the most secure if you put that in place then you know you are pretty much taken care of code execution JavaScript code execution at least but that's not practical in most cases so when you have a scenario where you do have to execute inline JavaScript code then there are ways to whitelist that as well you have the you know you have two approaches one is you can add a nonce so for the let's say for example you have an inline script tag you can add a nonce to that script tag or you can add a hash to that script tag and in the header that's being sent the content security policy header you will have to give the same nonce as well right so essentially this is a different way of whitelisting so in this case you tell the browser hey you can execute inline JavaScript as well only if the inline JavaScript is matching whatever signature I am specifying right so this means that an attacker who is able to inject JavaScript he doesn't have this information and so he cannot you know specify the nonce and which means his JavaScript will not be whitelisted and it will not get executed by the server so this way you can whitelist your inline JavaScript code as well okay but what if you have to load JavaScript dynamically which is you have a JavaScript already written and this will at runtime create a new script tag and then it will start loading JavaScript files so in this case what you can do is you can use the script dynamic tag so what this does is it will you know you initially whitelist whatever JavaScript is embedded hard coded into the app either through script files or through inline and after that you say whatever other JavaScript which is loaded by this whitelisted JavaScript I trust that also right so it's a transitive trust model it's kind of like a relay race which is you give the bet on to the first person and then they can give it to another person and you know that is trusted and they can then hand over the trust to you know somebody else so with this you can still protect against server side accesses but this doesn't you know protect against client side accesses but again if you have to choose between not using CSP at all due to the way in which you load JavaScript versus using CSP you can use this so that you have some level of protection still going on okay now CSP is very simple in concert but then again when you are implementing it things can get out of hand for example you know you're not just loading external content from one or two domains for example this is the CSP policy from Twitter you might be loading it from a lot of different domains and then it just becomes you know too chaotic and whenever your configuration policy becomes very complicated then you tend to make mistakes in managing them and you know you might have untrusted domain slip into it as well so what you can do is you can have a CSP policy but then have the assumption that someone is still going to bypass it and you know they will perform code execution so what you can do is you can try and use CSP to also limit the level of damage a person can actually do like for example in a firewall you can put inbound filters so that a person cannot get into your network you can also put outbound filters so that if a person does get into your network and they have stolen a bunch of data then they will have to get out of you know the network as well and if outbound traffic is blocked then an attacker is not actually able to take your data and run away so these are some ways you can actually with you can actually do that here you can say a form action self means you are essentially telling the browser that html forms can only be submitted to the same domain they cannot be submitted cross domain and frames you cannot load iframes from different domains and connect src is essentially for all your communication APIs so it says your Ajax calls your web socket messages and all of that they can only be made to the same domain which means an attacker he is executing JavaScript he is able to access the contents of the page but you are making it difficult at the very least for the person to send this data you know outside from the page but say for example this was a vulnerability an attack I showed earlier by which a person can actually you know steal the contents of your html form but with csp this attack will not work anymore but then again like I said csp doesn't mean that your issues are taken away like completely taken care of this for example is a bypass for the same attack again these are on the slides you can refer to it later so the person did a slightly more complicated attack and he was able to bypass the csp directive so even if you have csp you know people are still going to bypass it but then at least you make it relatively difficult for them to do okay and then the other thing to do is make sure that the vulnerability does not occur in the first place which is you manipulate the DOM in a more secure manner how many of you are familiar with SQL injection vulnerabilities here most of them right so what is the how do you prevent against SQL injection encoding okay anybody else parameterized queries right so parameterized queries is the is the right way to protect against SQL injection encoding you might do when your logic is such that you cannot write a parameterized query you know you will have to construct the SQL query from a string only then maybe you can use encoding so when you're when you're controlling DOM the way in which this particular HTML element is created it's similar to you know constructing a SQL query with just adding strings together and user control data and then you send it to your SQL API which is really insecure way to do that instead you can use the parameterized query way which is you can construct the DOM more securely which is you use the right APIs for doing that instead of just concatenating a string and setting it in a HTML you can do you know like create you can add the attribute separately and then whatever user control data you have to add you can add it to the inner text attribute so that it doesn't get treated as HTML and with this you probably have performance benefits as well I'm a security guy so don't put me on that but I would assume you know that would be the case okay and like with SQL injection there are complicated scenarios where you cannot use parameterized queries and you will have to construct the SQL query from strings similarly in your DOM as well there could be scenarios where you cannot construct the DOM that way or you have a lot of legacy code where they're just you know adding strings together and setting it to another HTML you cannot just go back and rearchitect everything I don't think your manager is going to approve that so in places like that what you can actually do is you can encode the data before you add it to the you know string so there are well tested libraries available for doing this you have ISAPI for JS you have the jQuery encoder plugin these are libraries which have been written by the security communities and they've been extensively tested by the security community as well so you can you know you're in very good hands using these libraries so they have different kinds of methods now when you're doing encoding encoding is very you know context specific you can think of it like you know speaking to somebody like for example if you're from Tamil Nadu then I can speak to you in Tamil it'll make sense to you but if you're from Karnataka I speak to you in Tamil then you know you might it might just sound like gibberish to you so when you do encoding you will have to encode it for the proper context otherwise you're not really doing much in terms of security so depending on where you're putting this data for example if it's going to go into the place of a URL you can encode it for URL context if you're going to put it inside an HTML attribute you can encode it for HTML attribute context and so on now here even though you have the ability to encode for JavaScript and CSS I would still recommend against doing that try and see if you can design your application differently so that you never have to essentially you know put a user encoded data directly inside a script tag for example instead of putting something inside the script tag what you can do is maybe you can put it inside a data attribute and then from the script tag you can read this data attribute element so you can do a HTML attribute encoding put it in a data attribute in some other element and from the script tag you can read that value of the data attribute rather than you know embedding it directly inside the script island okay and for the malicious and vulnerable libraries what you can do is you can ensure that your libraries are up to date you're not using any outdated libraries these are very common you know best practices and if you are going to use an external library right let's say for example there is there's a certain functionality you need you found this in one library which was written by somebody some six years back and you know it has not been maintained after that you do not even know this person you know you don't know if this library can be trusted but the functionality is very is very unique and you actually need this functionality in your application let's say so what you can do is rather than include that library into your you know into your page using a script source what you can do is you can create an iframe and you can sandbox this iframe which means iframe has very limited access it cannot access your DOM and you can load the script element inside this iframe okay and you can expose it like a library so you can have a cross window messaging where you can take the user you can take the data you can call and you know send a message to that iframe the iframe will call that library do whatever action it has to do the results can be sent back to you using you know a cross window message so this way you are using that external library as well at the same time you are not exposing the contents you know to that library so think of it like you know you have random people walking on the streets and you want to talk to them it doesn't mean you directly take them into your room and like house and give them full unrestricted access what you will do is you take them to a coffee shop or something and you will do your discussion so you know this is similar to that you put them in an iframe and then you know you do your transaction through a cross window messaging and maybe once I finish this we can do that and sub resource integrity which is if you are loading external resources you can use sub resource integrity by which you can give a signature for this resource and if that domain which is serving this resource gets and then if an attacker is able to change the contents of that resource your browser will not load it because it fails the integrity check and finally for SVG images serve them from a separate domain if possible so that you know the JavaScript doesn't have access to this domain's contents and set a CSP header so that you disable all inline JavaScript and finally if both those things are not options the least preferred option is you can set the content disposition header to attachment so that if somebody visits this SVG file then it downloads onto their laptop instead of rendering on the page and executing the JavaScript right so with that I have come to the end of the session I do not know if I have time for Q and A I'll let there's a join Q and A okay okay thank you guys so that was all I had thank you for those of you who want questions we have a joint Q and A of the tools so you can fire away at that time thank you I think that was very informative this especially the front end engineers it's a lot of things you can try and put together so our next speaker is a sailor he lives on a boat and he feels that his sailing skills help him to probably audit security it's a very unique take to it so I'll end the stage over to you Dominic maybe you can give us some insights yes my name is Dominic this is the audit approach to security design as introduced to Greg I live in a sailboat back in New Zealand and there are so many ways to die when you live in a sailboat you have to get very good at risk management and that is directly applicable to computer security so I have been working as a security auditor at a company called Least Authority the last like 18 months and apart from that I have a project called Secure Scuttlebird which is not the subject of today's talk so security is more important than ever more and more like hacks and stuff like this so becoming international headlines nation states are trying to hack each other mostly by hacking companies and individual people inside of those places most of our software isn't really designed well to be secure a lot of it was designed like we've still got a lot of software that was designed like a long time before even the internet existed or before people had really like thought hard about security and also soon literally everything is going to be a computer so now we have like multiple things in our pockets and that sort of stuff within like a decade or two computers will be so cheap that like take away cups can have computers in them and things like that so security is only going to become more important so defining security so software engineering is about correctness which is did it do what should happen which there's a silent part in there which is like when it was used as it was intended to be used normally it's like limited to that but security is about what shouldn't happen when it's used as unintended which usually isn't defined but security we have to figure out if the thing that happens when you use it as it's unintended is that a thing that we want to happen or not so some ways that something can fail nothing happens is the best one an error message if you're lucky that is the sort of thing we want and next one is maybe performance degrades and resources are wasted which can be a denial of service information is leaked I made this slide late last night and I noticed now that I left a couple things off it valuable information is leaked the attacker gains some control over the system for example they are like mis or they have become authenticated when they shouldn't have been and can interact with it some ways and the worst one is they gain total control of the system where they can execute arbitrary code and make your system anything they like so there's a number of approaches to this security problem from academia their proposed answer is formal methods so you define a logical model of what the correct behavior is and then you have an automatic system that can derive or at least check that the implementation you have is actually provenly the correct software that sounds like a really good idea but the problem is it's far far too complicated and no one really uses it for except for like super complicated, expensive very very very special stuff it is definitely a very long way from mainstream and it has problems itself like what if you didn't specify the correct model what if the spec has a bug in it then you could correctly implement that bug it ends up you actually did the wrong thing so you still need to audit the model and you still need a human to do that and also it doesn't say anything about like social engineering or other human attacks so another problem is often security is treated like a waterfall model so the waterfall model is a theory of software development where development starts at requirements phase then you do design then you implement it and then you verify that you implement the right thing and then maintenance and the waterfall model was not described by people that were advocating the waterfall model it was used to describe how not to do it because software is not like building a bridge you can't just often you learn a lot about how you're developing software and so you can't just do the implementation after you've done the design you'll end up doing some redesign later so you need you actually need an iterative model and same with security you can't just rub a stamp that oh this is secure now at the end you might learn things that you should have guarded for beforehand and it's better to redesign and re-order if you really want to have a good security which is which is necessary so how I ended up becoming a security guy so I was interested in this problem of database replication so the idea here is you get I want to be able to have a database and then copy that database to someone else they can still edit the database I can still edit the database and then later on we can synchronize changes again and then continue editing it and this required a completely different security model to typical application design because your ordinary applications you have one database and then you have secure network connections and someone connects to the database that are authenticated then they can make changes someone else has to connect the stuff but all of the authority lives in the database and this depends on cryptographically secure connections to the server now you can still take that idea of cryptography and put it into the database itself and then so like each update you put into the database is signed the network doesn't need to be secured anymore it's still good to have a secured network but you don't need to secure it and even if you haven't received those updates in the database directly from the people that made them because the signed by them that they made that they made those that they made those edits which gives you like a completely different kind of system and there's a couple of projects that are exploring this space but you kind of have to like start again and rethink of everything so I had to figure out how to build a new kind of like build secure systems and there really wasn't like an engineering practice that described like okay here's how you go about designing something that's secure so I had to figure that out for myself but I think you'll agree that what I came out with is pretty obvious and that you would have the same conclusions as well so I call it audit driven security the idea is to let the needs of the audit drive the design so it was inspired by a test driven development so in test driven development you end up redesigning code to make it easier to test and I totally advise redesigning code to make it easier to audit as well so to put the focus on knowing rather than having because that's how you know that you have the thing that you want so an example analogy is navigation driven shipping so navigation is knowing where you are so focus on navigation rather than just getting there let the needs of navigation drive decision making know where you are at times and it's better to arrive late than dead so here's an example of one time they didn't use navigation driven shipping they're syncing of the SSY wrapper so they were heading from Sydney Australia to Auckland New Zealand which is about 2,000 miles that about 100 kilometres to go and they were driving at full speed at night in a heavy fog and they drifted of course a few miles and they crashed into a cliff 140 people died and what is still one of the worst maritime disasters in New Zealand ever and they were they were just going to so they had a commercial incentive to go quickly because the more passages you make you get and the more profit you make they didn't actually know exactly where they were but they didn't know that and they didn't act well they should have known that because it was foggy and dark so they didn't they knew there was probably a good chance they weren't where they felt they were but they didn't act to reduce uncertainty they just assumed they are safe not focused on knowing so how we focus on knowing with computer security is by auditing so auditing is mostly reading the code in the specs and then understanding the code and what is the intended use and then asking yourself can this be misused in an interesting or evil way which is the fun part the best thing a security order can tell you is that it wasn't very interesting to audit your code that means you did a good job so it's very important to study reported vulnerabilities to get ideas about ways that things might possibly be attacked the security community you get a lot if you discover a new kind of vulnerability you get a lot of kudos for describing that often in like a talk at a security conference and that sort of stuff so there is a lot of material out there to be studied another thing to do is look for signs of weakness so this isn't like a vulnerability itself it's just a clue about where a vulnerability might be so some really simple signs they look for is just like I start looking in the place where the files are too big because that's kind of usually more disorganized and people end up more confused and like don't really understand how all that works if you have a really good understanding of the thing you end up with a small file so big files or messy code and that sort of stuff those are like good places to start looking and even like really small fixing really tiny things that aren't really big problems to improve those are the things where that could have been bugs so that keeps you further away from bugs but real attacks are always like combinations of these things so for example in a ransomware for ransomware to work first you need to fool people make a social engineering attack with people to open attachments and that compromises their system via some technical problem and then they encrypt the hard drive and demand payment and encrypting the hard drive is interesting because the of how file systems works enables this to work if you had a different kind of file system design where it was say always possible to roll back to a previous state then this wouldn't work it only works because file systems are mutable and you could overwrite the files and then go back to the old version so this is a very important concept error chains so whenever a plane crashes and stuff they investigate everything about what led up to that like all of the things that came together to make that plane crash and that's all the chain of things that went wrong is called the error chain so and then you look for ways that that error could have been that the disaster could have been invented so the SSI why Iraq was driving at full speed couldn't see where it was the ship had drifted so if you changed one of those it wouldn't have happened the crew knew they were driving at full speed and they couldn't see where they were they didn't know they had drifted this disaster was in the 1890s and GPS hadn't been invented yet so they could have definitely reacted to some of those things for example slow down would have been the easiest thing or even wait until the fall went away so it's easy to stop prevent things by attacking the error chain so it's like wearing a belt and suspenders at the same time when I was researching this I was looking for this image I found many articles that said it's a big fashion mistake to wear a belt and suspenders at the same time and that you should not do it but I think from a security engineering perspective when I see someone that's wearing a belt and suspenders I'm like that's a genius is security engineered a much much lower risk of his pants falling down so for security problems you should definitely go for belt and suspenders so an example is two factor authentication so with two factor authentication you have to log in you have to have a phone and your password and this makes the error chain longer because you have to attacker has to compromise not only your password but also your phone and note is that this if your phone has access to the email that probably used to reset the password anyway then having the phone is actually all you need but it means that to get to compromise you now they need to be physically near you and steal your phone which is a lot harder than like if someone is physically really far away from you then they have no chance of doing this however on the other hand you could easily lose your phone but it's still an improvement because it protects you from like most of the people on earth who aren't near you and then the next thing is like avoiding if you can entire classes of errors like can we design things in a way so we don't so we skip like entire complete types of attacks so this idea was really came to me by the work of Dan Bernstein or DJB as he's known this is a really important so this is something I'd want to stress as well is that you really the way that you really keep abreast of what is important and happening is by following the security community like I think it's better to put more trust in individuals and see that from these people that are considered to be reputable who do they trust and who do they acknowledge doing the important work and so on I'd put a lot more trust in individuals than in institutions and I'd evaluate the institutions based on the individuals but Dan Bernstein is quite widely respected because he's like a leading academic but also writes libraries that are useful to like practitioners so there's two papers that I learned a lot from one is some thoughts on security after 10 years of Q-Mail so Q-Mail is a security oriented mail transfer agent like an email server basically it was written in 1995 it used a variety of approaches to get really good security interestingly the main thing was just like a software engineering it's like vulnerabilities are just bugs so just try and write less bugs ideally try to write zero bugs as it's happened Q-Mail has had very, very few bugs and the main technique it used to get less bugs was to write less code because the more code you have the more bugs you can have and then there were a few particular things that he suggests being particularly problematic a major one is avoid or any sort of thing where you go from one format of encoding to another form of encoding which was like the subject of the previous talk when you go from like data in a database into HTML that transition is the dangerous part and then an interesting thing that he suggests in the paper but doesn't actually put in Q-Mail is if you take complicated things such as like converting one image to another you can put that into a separate process that is like locked down so it can't communicate with the internet and that sort of stuff and then if something, if that breaks or that has a vulnerability you can't get out kind of like if it's also in the previous talk advocated putting like the firewall on the outgoing firewall put the thing on the inside a box that it can't escape from if it gets hacked and the other thing was really interesting was the security impact of a new cryptographic library this was about this library Nackle or Libsodium is the now maintained version so this was just a collection of cryptography primitives that's kind of the go-to library to build but new systems I think was released in 2009 and it was systematically designed to avoid whole classes of errors so for example there's this thing called a side channel attack where when an algorithm is running if you observe it in particular ways you can usually by the time, how much time it takes to run you can learn like secret values that are inside of it so AES which is part of TLS and it's very likely to widely used encryption library has a side channel attack where if you can observe how long it takes to decrypt thing you can learn, you can regenerate what the secret key is and then decrypt it and it's kind of like an academic problem, I haven't really heard of like practical attacks that have used this but the thing is that the attacks of this class will probably improve and then it will probably become a practical danger at some time in the future however this library completely avoids it by using designs that simply don't have the side channel attack so the side channel attack happens because as the program is running depending on the secret information sometimes it branches over to here sometimes it branches over to here and these take different amounts of time so you can tell if you observe how much time it takes you can get hints about what's inside of it but the algorithms in this they just always do exactly the same instructions every single time so they never make any difference in how much time they execute in and so it doesn't reveal any information at all it's also as fast as possible so that users aren't attempted to disable security and includes only like the best algorithms it has one of each kind of algorithm and doesn't allow you to configure it at all so once you've chosen to use sodium you've got the best algorithms and you don't need to it doesn't give you the opportunity to shoot yourself in the foot and the algorithms are carefully selected so that the implementations are straightforward and don't have any... you don't need to remember really special things if it works then it's probably secure and that makes it easy to check that the implementation is also correct and secure so a negative example that I learned about yesterday is Jason Webtoken Sid did a great job explaining what some of the problems some of the things you needed to know to use to use Jason Webtoken so one is that it has this algorithms none you can just completely turn off security why would you want to do that in the in the spec it says in case you want to put it inside of another thing that's already authenticated but someone actually needs to do that like that just seems like that's kind of a really bad idea and maybe that should just not be part of Jason Webtoken and then it's also possible to enable a combination of algorithms which is insecure so if you have an HMAC algorithm and assigning algorithm then you can trick it into into using the public key as the HMAC key and that means the attacker can generate their own thing that seems to be signed and this was all described in this blog post in 2015 and yeah so it's been around for a while and it's like it's actually like a bad design because you shouldn't have to know about things that are inside so if we apply like an error chain analysis to that well libraries correctly implemented the spec there were too many algorithms so like it gave you these extra options that allowed you to change it if you didn't have those many options you wouldn't have you wouldn't have that problem if libraries had incorrectly implemented the spec it could have been more secure and so it's kind of strange to have them in the same in the same system so if you just had HMAC or just had signatures it would have been okay if you had removed none that would have been great too so I went and like actually read the RFC to see what it said and I found this interesting part that even if a JSON web token can be successfully validated unless the algorithms used in the JW2 are acceptable to the application should reject the JWT it's like hang on what does should mean again and that's in capital letters so that means it's the should as is defined in RFC 2119 should this word or the objective recommended mean that there may exist valid reasons in particular circumstances nor a particular item but the full implications must be understood and carefully weighed before choosing a different course were the really valid reasons in particular circumstances for the library not to reject an unacceptable algorithm I think the spec should have used the word must here so I think this is a somewhat pedantic case where the spec is actually wrong the spec is actually the course of the vulnerability so when I was researching this I also discovered this thing called simple web tokens which the JSON web token cited as an influence and I was quite impressed that simple web tokens are great the S might as well stand for secure it's a URL query stream plus an HMAC so it's kind of like JWT except it only does HMAC so this is harder to use insecurely and also it doesn't seemingly look like it's been encrypted because JSON web token encodes as base64 which looks like you can't read it, it looks like it's encrypted but it's not encrypted so don't think it's encrypted, don't think you need anything secret in there simple web tokens it's obviously not encrypted because it's just a query stream so it doesn't mislead you into using it the wrong way so my suggestion for secure JSON web tokens would just be same as JSON web tokens but without none and without HS secure simple web tokens already exist so you can use that if you want HMAC most people could probably just use that so that's an example of configurable security this is actually how most airline disasters happen in the era in this case there's a switch wings stay on, wings fall off it accidentally switches the wings off this is a very good example of how that was a problem with so don't make security configurable it's like this, a convertible you can leave the top down you can leave the windows open in any way someone can cut through the walls with a knife but with an APC windows to leave open armor plating can withstand rocket fire you have eight wheels, they all drive so like mines, land mines can go off under the wheels and you can still go home actually as I was researching this slide I thought, oh tracks like tracks are better than wheels but turns out that tracks are actually quite susceptible to mines and so everyone's gone over to using wheels instead so yeah, that's what, that's the kind of security we want to be security we want everyone to have another way of looking at this problem is you don't want to leak internal details, like if there's something about a module or protocol or something that you need to understand and how to use it securely then it's just likely that you won't understand that and then you'll use it insecurely so I joked that all three letter acronym algorithms have a secret bug in it that you need to understand to be completely sure that you're using it securely I'm not going to go into what all of these are but at least this exercise for the reader you can research those but all of those have bugs and they're all like very widely common common uses probably in the software that you're writing as well so it's good to actually know what those things are but the ones that have four letters or five letters, those are probably those more chance of those being safe. Certainly all of the algorithms in Libsodium were explicitly designed not to have not to have these not to have any bugs and they're much safer to use so the goal is to be secure by design you should just better look at the design and be like yeah this is a bit different way secure and then obviously secure even and then to make something that's obviously secure and insecure that would be obvious as well because you look there and if there's something extra that shouldn't be there then then it's like that's obvious you shouldn't be able to make something insecure just by leaving something out and still having it work like if you leave something out it should just completely fail and then it's obviously that it's not correct yeah so an example of this is train brakes so train brakes have a really interesting design where there's big springs that hold the brakes down onto the wheels so it's the opposite of like on a bicycle or on a car you have to push a lever to engage the brakes on a train the brakes are engaged by default and you have to push a lever to release the brakes to start moving and that those levers are controlled by that lever is controlled by compressed air that is generated in the engine and then comes down in the pipe and this really has the clever thing that's that if the train becomes decoupled then that pipe breaks and then the rest of the train that's no longer connected to the engine now has no air in it so the brakes will come on and it just safely stops and it's pretty obvious that this would happen to like check that the train is going to automatically stop like this you just have to check that there's nothing extra like the brakes haven't been welded open or something like that which would be much easier to spot yeah so obviously safe so wrapping up the audit design driven design process so study vulnerabilities and similar systems for inspiration define what the system does and also doesn't do then try to think of ways you can misuse the system or something add don't do this to the previous step and then go back and redesign it consider small problems and bad patterns to be vulnerabilities like if it turns out that like there's some tiny little piece of information that you can extract or something like that like consider that actually we don't want to do that either repeat until there's no vulnerabilities and documentation should clearly state what it does and what you specifically designed it not to do so thank you and remember less card, less bugs separate things into well defined things so you can build a secure system from secure components and explicitly document what you could happen and study reported vulnerabilities that was a great talk thanks Dominic so let's have a Q&A before that I just have a small announcement please turn off your mobiles or put it in silent and we also have feedback forms in the left of your side of yours so please take it and try to give us as much feedback as you can please any questions please and I it seems to say that image tags if there was an inside an image tag it was disabled but if it was inline SPG it was enabled but it seemed like there were quite a few ways you could embed it in SPG if you the mic is on there if you had you could have a script inside an SPG and then if you load it through the image type then the browser does not it ignores all the script which is embedded inside the SPG but it's only when you visit it directly that you have so is that what yes that's good news if it were to execute if you put in an image tag then you have much bigger problems send in a malicious SPG and then you load it on your site it's a big big disaster questions please anything about OS security HTML files guys you have two security related folks on stage so the questions do not necessarily be on the topic discussed but then any other security queries you have because all the other talks are by developers right so any security queries probably this is one you know chance where you can ask two people so that's even better than one person hey my question is regarding the content security policy that you mentioned so you said that the most obvious and secure way is to make sure that only JavaScript that is gotten from a white listed domain is executed so how does that work with stuff like analytics when you have you have to have inline JS as well as JS that can come from an external domain I'm assuming that there are multiple stages where you can customize this so on a practical level what is the ideal stage you would have let's say an e-commerce site point which is one you have an ideal scenario where as per the recommendation you can only load a code from a white listed places but then in reality you have to include a lot of external code so for that I had mentioned you can use sub-resource integrity where if the code from the external party is not going to vary a lot then you can actually create a hash of that external content and you can refer that so in some ways you're saying hey this is the signature of that external code and if that external code changes then the signature does not match your browser will ignore it so probably that's one thing you can do on top of csp so did that answer your question so that would probably make sense for let's say jQuery when you're getting it from cdn but when you have something like google tag manager or google analytics the scriptlet that you get you certainly have to have inline css that is going to execute on your list and it is going to request script file from google analytics which I'm assuming we can write list but then the inline css has to happen it has to execute on your page so how do you get around that and keep your page secure yeah so that if you again this also had mentioned which is if you are going to load inline css there are couple of ways to actually do that in csp you can either have a nonz or you can have a hash and you also have another one which is I think it's dynamic strict where it's a transitive trust model which is you whitelist a javascript initially and that if that is going to load other javascript content it does not have to have a nonz or it does not have to be whitelisted the trust is automatically transferred to them and they can load further javascript files and trust is automatically in that case like I said it can predict against server accesses but it opens you up for client accesses but that's a balance you'll have to make because in that case your design requires that kind of a behavior so you don't have much of a choice so you can have your csp with that particular directive the dynamic strict so that you have some level of security as well as you have your functionality unaffected as well hey hello hi my name is Gaurav, my question is for Lakumas so you talked about a lot of js vulnerabilities but I also wanted to understand about css vulnerabilities attached with js because as a frontend developer we see that we see a lot of js attacks but you also talked about css ifill attacks so how does it impact when you are creating something which is more bank prone basically I'm working with bank sector so how do you think that css will attack anything which is very vulnerable or a bit prone because it helps and how we have to prevent that thank you okay I'm not sure I understood the question correctly css doesn't really attack anything so what happens is if an attacker is able to inject css into your page so that's a css injection attack now by injecting css what can an attacker actually do now what they can do is they can steal data from your page and one technique is css xfill attack right using that I can steal like a css of token maybe and another thing is I can maybe say overwrite the styling of some buttons and so on let's say there are two buttons one button is like delete my account another button is submit a form or whatever I'm able to inject css then I modify the css of the delete button I make it like really wide so that it goes over the other button as well and you know the user whenever he clicks you know he wants to click the other button this gets clicked right something like that that's what you can do by injecting css right as an attacker is able to inject css into your page right did that answer your question or was your question something else right so css itself doesn't go and do anything it's only when say usually all of these things happen when attacker control data appears somewhere in your page right and if it is appearing in a context of css then people usually think oh it's just css so nothing bad can happen but even if an attacker is able to put in css into your page he can still do some bad things right in a limited context so hey this is also a question about csp so recently I think this two days ago our website sb.co switched from csp version 2 to csp version 3 and what we used to do so was the official guidelines from google which states explicitly that we should use strict dynamic and they actually call it the strict csp policy and in that it's just hash nuances and the strict dynamic on the script source but according to you that is somehow still vulnerable to client side so I'm a bit confused because google says that this is the strict okay that is google's policy on how to okay so that is google's policy on how to implement csp v3 right now and according to them you should use hash nuances and strict dynamic which is the version 3 of csp which is still a working graph but still works but from your talk I heard that it's still vulnerable to client side attacks so how does that work and I'm a bit confused as to why google would suggest that we should use v3 of csp so first thing google is when it says you can use a strict dynamic right so they are saying you use script dynamic when you need that particular behavior wherein you have one JavaScript code which is going to pull in further JavaScript code right under that behavior you can use script dynamic this was not supported in the earlier version of css right so now it is supported so what you have is in the earlier version you had to completely turn off your csp for inline JavaScript files so that this behavior could actually be made possible but in the newer version they actually make it possible for you to set this directive and do it in a more secure manner right but the thing is once you are once you have enabled this JavaScript code you can load other JavaScript code and it can load other JavaScript code at this point if you have a vulnerability in any of this JavaScript right so like for example attacker control data is being executed as JavaScript by one of those JavaScript files right or that is going to like say uh attacker control code is going to like load its own JavaScript tag for example right in those cases the transitive trust is passed to the attacker control JavaScript as well right so that's why I said client accesses it doesn't protect against it that well but server accesses it does but still by doing this you are the behavior that you want right you are still doing that in a more secure manner than you could have done in the earlier version of css because this whole behavior was not supported in the older version hello hi yeah so you mentioned one of the news websites got they were showing a pop up through some malicious ad company so my question is that how would you you know short of whitelist you know third party scripts and how would you sort of whitelist ad agencies putting ads on your website any how would you whitelist the ad agencies well really the ad agencies you cannot whitelist them because these are all business decisions right what you can do is the JavaScript code which you have been asked to embed into your site right by a particular ad agency if the JavaScript code is going to be static right it doesn't change so much then you can actually you know put a sub resource integrity or you can create a hash of it and you can put that that's the best you can actually do right if the JavaScript code itself is going to be you know malicious then like that's something you'll have to take with a vendor unless you have an option of maybe putting it in an iframe with a sandbox and if you could still have your purpose serve you could do that but I think in more most cases of advertising that's not really possible I guess it's probably quite likely that advertising agency probably also they are getting user the ads are their user supply sorry you are trusting them to essentially you trust them but sometimes you know either they are bad parties these external advertising companies or they get compromised right so in those cases if you can include them with a hash so that if their code changes then it doesn't execute anymore that's probably the best you can do I cannot think of any other predictions we can put in place anything maybe from your experience well I mean if the ads are like the less functionality that the ads can have but better like if it's static pictures then you know a jpeg is safe I think static ads I think so you can like skew towards that as in if you could just include an image and probably you just do that and you know only in cases where you have to absolutely load a script you do that I have a question for Dommie so as you said it's good to use a simple jwt token rather than going for jwt token so my question is we have three parameters in jwt that's a header payload and the signature so as you said that we should have an hmac we should always hash map that token and send it to the server so like for my scenario if I'm having an application so I know this is an intended user so but if I'm redirecting my application to a web I'm completely redirecting it to it and I'm passing the token as a string so for my server it is very hard to interpret that who is the user actually for that token if I use jwt so from the payload I can get the user id and I can get the particular map token for that particular person so I can maintain the session for him but if I use a simple jwt token and I use hmac so it's not it's not possible for me to at server side to reproduce it again what actually the content was so how I can solve this problem so let me clarify you're saying that you're using jwt with signatures yeah well my point isn't that jwt is intrinsically insecure it's more difficult to use securely than it should be so if you use it with the correct settings then it's fine it's just that the average any random you can't be sure that any random jwt user is using the correct settings because there's lots of ways they can configure it well there's several ways they can configure it that aren't secure so if you've got it configured securely it's okay it would be better if it wasn't possible to configure it so I mean using signatures is fine any more questions alright thank you guys I would just like to add one thing we have a birds of feather session as well on data leakage and privacy so if you're interested in that you could join that after the break as well I'll promote that okay thank you so much okay we have a morning break from till 11.30 so you guys can come back by 11.25 or 11.30 thank you all volunteers please assemble all volunteers let's have a quick meet so hi had a good break so there is a small announcement the sensitive data like is BOF is postponed by one hour so it would be it would be started at 12.30 so our next speaker is an old-school gamer like if there is a job where you can play he will definitely take the job he can play for 24 by 7 so he's here to speak about the reason ML which is a statically typed language and also compiles to JavaScript so Hari please so hi my name is Hari Gopal I'm the engineering lead at a small team that works out here in Bangalore called start-up village and I have been working on a personal project for about a year now a password manager for teams so why a password manager a password manager is a tool that I have used throughout my career and there was always something about them that were features that I didn't like something about them that ticked me off everything that I used some feature that I didn't like something that I just plain hated so I thought well why shouldn't I make one I have been working on web applications for well over 10 years now so why shouldn't I build one so that's exactly what I did about a year ago I decided to build one I really wanted to build an application that would run on the desktop and something that would run offline so I picked framework and tooling that I was familiar with I chose react for the front end react and electron for the front end and rubian rails for the back end and I got started but after a few months I started running into a few issues especially because I had chosen to build a proof of concept and I had made the decision to not write tests so that sort of came back to to pipe me what I should have done probably in hindsight was write tests from scratch but now that I was where I was I had few choices I could either start writing tests and do TDD going forward or I could try something out I had been hearing about from what seemed like every direction and that was to introduce static typing I didn't really have any experience with static typing till that point of time so but it looked cool there were features that I thought made sense and I thought well why shouldn't I try this out I might as well learn something new while I'm doing this so I shopped around and looked at what my options were at that point of time and there were four that stood out there was TypeScript and Flow if I wanted to keep my codebase intact and I wanted to gradually introduce static typing to my codebase then there was ReasonML and Elm if I wanted to completely convert my codebase to a staticly typed language and I ended up choosing Reason because of a couple of things first ReasonML looks a lot like JavaScript syntax is very familiar I like that I like that I didn't have to learn something completely new but it also had features that I had never seen before and that was exciting two ReasonML is created by Jordan Woke who you probably know is the creator of React and I love React so there's a lot of intellectual powerhouse behind Reason third and most importantly I have two friends who have been working with ReasonML who had been working with ReasonML for over a year at that point of time and I knew that since I didn't have any prior experience with static typing languages staticly typed languages I would need help and I was sort of looking forward to bugging them for help so what is Reason? ReasonML is actually not even a true language it's a new syntax for OCaml a 20 year old systems language which itself is derived from a 45 year old meta language which means that it's part of the ML family of languages which is a smart people language and what's special about OCaml is that there is a project called BuckleScript written by some fine folks over at Bloomberg and what BuckleScript does is it takes OCaml and converts it to JavaScript and what's special about the JavaScript that BuckleScript creates is that it is very clean very readable and it is also quite performant so Reason Toolchain takes ReasonML code passes it through the toolchain, converts it to OCaml then uses BuckleScript and then converts it to JavaScript which seems kind of complicated and it only seems that way because the toolchain works so well that all of these shenanigans are hidden behind the scenes so we don't really get to know all the different steps that it goes through we just see recent code and the output JavaScript how hard is it to get started? well, I can safely assume that most of you are JavaScript developers here which means you probably have node installed on your system which means there are only two steps you install VS Platform and then you install recent CLI for your particular platform and assuming that you have VS code installed on your system which is again very likely there is a plugin that gives you excellent editor integration so that really is it alright so let's look at some code but before, just before that let me point out that ReasonML is statically typed and it also has something called sound typing what it means is that if some recent code compiles then the compiler is guaranteed to know the type for every single binding that you have written and this is true even if you have not specified what the type for any particular thing is and that is because it has a type inference mechanism it has a very good type inference mechanism called the Hindley Milner type system that was introduced back in the original Metal language 45 years ago so it's gone through quite a few iterations works very well and the best way for me to characterize the type system is to say that it feels like a human is sitting there and trying to figure out the types for the code that you have written and we'll see this in the examples so this is how we are going to look at Reason code today so on the left in black showing you Reason code and on the right in white I'll show you the corresponding JavaScript code that is generated by BuckleScript so here I'm simply saying that car is equal to bloom out of the 800 and that compiles to something extremely similar on the JavaScript side I think particularly interesting going on here but you'll note that if it compiles Reason knows that car is a string I'm not saying that it is a string anyway I don't need to when I look at it I know that it's a string so what is Reason? That's how the type inference mechanism works Let's look at something a bit more complicated I'm adding two strings saying that car plus plus sold out plus plus is just the string concatenation operator in Reason so Reason has different operators with different types it's just a little quirk that you get used to pretty quickly but if I try to do something like car plus one that obviously generates a compiler why? Because this has type string and your editor would point out that with some squiggly lines at the bottom of car saying that car is type string but somewhere wanted int and by somewhere it means that you're trying to do a plus one that is not okay you have to change that now Reason also has something that looks very much like JavaScript's objects in fact in this example it looks exactly like an object but it doesn't compile that is because in Reason it's called records and records must have an explicit type definition so Reason doesn't know what the shape of this particular record is right now we can give this a type we can say the type car has three properties color make and model all three are strings and now it compiles you'll note that I'm not actually saying that my first car is a car when we look at it we can tell that my first car looks like a type car so that's how Reason works it compiles on the JavaScript side you'll also notice that instead of being an object it's actually an array of strings but BuckleScript leaves helpful comments in line because it wants the code to be readable just in case you need to go in and make changes some sort of production issue or something but this is still quite readable now there's something in Reason that blew my mind when I saw it for the first time that is variance variance gives us a way to model different possibilities in code in a way that I had never seen before so type color is a variant and I'm saying that it's either red, blue, white or pink and those are the variance constructors so you can read this as color is either red or blue or white or pink only one of those things so I'm going to use variance to change our previous example I'm going to say that there is a make manufacturer who is either Maruti or Hindustan Motors model is either 800 or Zen or an ambassador color is either red or blue or white or pink and now instead of the type car being having string values I'm going to say that make is of type make model is of type model is of type color and with this we can change our previous record to say make is Maruti I'm going to use the constructor model is 800 color is blue that reads pretty well I guess it should not be confusing and on the JavaScript side you'll notice that instead of it being a string those constructors are being converted to integers now this is something that a compiler can do with extremely perfect accuracy and machines can do this sort of translation but we can't even if we wanted to but because JavaScript wants this code to be readable it still leaves helpful comments in line in the JavaScript output the truly mind blowing part about variance is when you try to do something called pattern matching on them what I've written here is a function production run which takes a car and then returns the years during which the car was produced as a string so I'm going to use the switch statement to pattern match on the cars model so you can read this as switch on cars model if it is an 800 give 1983 to 2013 now you'll notice that there is no explicit return statement this function because like a lot of languages that you might have seen the final expression in the function is what is returned from it so this particular function in reason looks quite simple if you're a JavaScript developer it should be pretty readable but on the JavaScript side the output is quite complicated it's requiring something called camel built-in exceptions and it says in the function if the matches not equal to zero throw a match failure but otherwise return 1983 to 2013 now why is this happening why is it even throwing a failure well it's because we are ignoring a warning for the compiler it's telling us you forgot to handle a possible value here for example the thing is the compiler knows that a cars model is one of three things it's either an 800 or a model or a zen or an ambassador and it's reminding us that we have forgotten to handle these values so let's fill the function and do what we were supposed to do to begin with so let's fill in the values for ambassador and zen now on the JavaScript side you'll notice that it is much cleaner it's just got converted to a switch statement and that's it and the thing to notice reason knows that this function cannot fail it is impossible for this function to ever fail because it knows that the cars model is only one of three properties so it will always return a type string and it will always be always satisfy all of the possible inputs so this is how the compiler works so assuming that we use variance to model all of the possibilities in our code how it says it removes a lot of overhead in terms of what we as developers need to keep in mind to remember when we make changes you are shifting the responsibility for remembering to a machine and machines are much better at it than we are so these types that we have written are already useful it allows us to not have to remember everything that every possibility that our code handles we shifted that responsibility to the compiler but this has an issue it lets me write something like this I have never seen an ambassador in pink on the road it's a odd thing now you could presumably purchase an ambassador and then paint it pink I would question your taste but it is something that you can do so it is within the realm of possibility but you certainly couldn't purchase a pink ambassador from Hindustan Motors it was never one of the factory approved colors similarly you could never purchase a pink 800 just wasn't available in pink you can however purchase a pink zen that is one of the approved colors huh however this is something that you will never see on the road a myrithy ambassador what is that and yet it compiles it gives you a valid record there's something wrong here why is that it's because we've defined car as having three properties make model and color and they are apparently separate but they're not really separate are they in reality a make a manufacturer would have a certain set of models it's working so in reality a manufacturer would have a certain set of models and that model would be available in a certain set of colors and often it's like some big fancy name the models have fancy name colors so what really exists in the real world is a nested relationship manufacturers have models models have colors and there is the way to model this in reason and matter so the next slide that we're going to look at has a large chunk of code don't be frightened we will take it from the top down so the top three lines I'm going to write ambi color is either jet black or oyster blue or fire brick red or a crew beach these are some of the colors actual colors that the ambassador was offered in similarly I'm going to write zen colors you'll notice that there's a fusion pink in there and then 800 colors you'll notice there's a blue blaze in there now the interesting stuff happens in the second block so fine I'll write that there's a Maruti model a set of Maruti models it's either an 800 or a zen but the constructor is taking an argument I'm saying that if it is an 800 color 800 model then it needs an 800 color if it's a zen then it needs a zen color similarly Hindustan Motors we're really concerned with one particular model here so it's an ambassador it has an ambassador color ambi color now your make is either a Maruti or Hindustan Motors but if it's a Maruti it must be a Maruti model if it's a Hindustan Motors then it's a Hindustan Motors model and now we really have one property left in car which is make and because there's only one property I can actually roll that up and say car is either a Maruti with a Maruti model or Hindustan Motors model now with this with these types in place can we write the cars that we wrote earlier so we can write a blue Maruti we can say blue Maruti is a Maruti 800 in blue blaze this is a nested relationship from the JavaScript side you'll notice that it compiles with by requiring a block and then saying and then representing the nested relationship with blocks so the values for the particular constructors as integers are still the same but instead of it being an array it's nested with this compiler it's valid how about a pink ambassador this doesn't compile that's the error constructor fusion pink does not belong to type ambicolor this is something that the compiler knows it knows that if it's an ambassador the constructor only accepts an ambicolor fusion pink is not the zen color so it doesn't compile how about a Maruti ambassador constructor ambassador does not belong to type Maruti model same as before it knows that Maruti only hacks the Maruti model ambassador is not so what we have done here we pushed business logic into the type and this is a pattern that you'll find applied again and again when you're using a functional programming language and we call this make illegal states unrepresentable so when types are written correctly it can prevent you the developer from even writing an invalid data structure in a lot of cases our applications go into an error state they have bugs because our state our data structure tends to contain incorrect data so if compilers make this impossible by writing correct types then it can potentially prevent a very large class of errors but so far we've only discussed data that exists inside of our code so far I have been the one defining the data in my code what about data that comes from the outside I definitely have no control over it for example you could have some data coming in from an API or you could have a UI for example imagine that there's a UI that looks like this for some reason it hasn't been designed very well and the user has been allowed to accept to select Maruti ambassador infusion thing the question of why the UI was designed this way is not relevant let's just ignore it assuming that this form gets submitted we can assume we can imagine that our application would have to deal with some values that look like this free strings Maruti ambassador infusion thing coming from somewhere outside of our code now that it has landed here what can we do with it we have to remember that functions in your code they use the type car for example you could have a production run function like we saw earlier it takes car turns production string or perhaps you have an in stock it takes a car during the boolean indicating whether or not the car is in stock these only accept type car what you have are these things we again have to remember that we wrote this complex type system just to make it impossible to represent something that is invalid you can think about it in this way you can think about the compiler like a child who is trying to fit puzzle pieces together we've told that there are rules which let it fit together Maruti and blue blaze as a valid car or a Maruti Zen infusion thing or a Hindustan motor ambassador in jet black but if it just randomly take three pieces ask the compiler to fit them together that is never going to happen that is actually a mathematical impossibility you simply cannot do it what do we do when you get data like this from the outside let's not answer this question right now let's take do a short recap of what we've done so far we've written a type with the explicit purpose of making illegal states unrepresentable and we did this by using two dcml language features we used variants to represent possibilities for our values and we are relying on the compiler to ensure that those requirements are satisfied because we did this we can't just naively assume that data that comes from outside of our code is going to fit into our types what we really need is some way to pass the incoming data make sure that only valid things are processed as our types and that invalid things are that invalid things are handled properly and I can call this another pattern I'm going to say pass all external data and then close boundaries I'm not going to go into much detail on how this particular pattern is implemented simply going to say that we can use pattern matching which we briefly saw in one of the examples and that we can write faster functions that use pattern matching to make sure that data coming from outside is passed correctly and that only valid things become the type of everything else is handled as it should be but these are just two patterns there are more patterns and this is not even a complete list this is just a few things that I am aware of all of these patterns are enabled by features that are present in functional programming languages like now when someone when a developer talks about learning a language a functional programming language they don't really mean picking up the languages syntax learning the languages syntax or even picking up how to use the languages features what they really mean is learning those patterns so if you can think of a languages features as the tools that you use to build your application to do your work then you can think of patterns as techniques to learn to do your work properly to do your work better I believe that learning patterns makes us better developers it improves our craft and it improves the quality of the applications that we create I also believe that recent ML is a kinder language than JavaScript it is a strict language to be sure it doesn't really let us make mistakes but it does provide really great advice for when you do make mistakes because we will make mistakes, we are after all human in fact that warning on the top on the right side that large paragraph is what finally taught me how to properly use functional parameters in reason ML functions once again what you want to be focused on if and when you choose to learn a functional programming language are the patterns that I just mentioned not the features and I have personally discovered that reason ML is a kind and forgiving companion in that journey so I hope you guys try reason ML out for the reasons that I mentioned and if you ever have any trouble I'd like to point out that the community is extremely welcoming there are some really great people in it you can go to the community at reasonml.chat which is a forum if you need immediate help for whatever reason people are also available on discourse at discourse.gg or if you want to reach out to me I'm on twitter or on email oh and the password manager or teams that I mentioned at the beginning it's completely open source you can find that at and that's there if you want to take a look at a slice a very large slice of completely working reasonml code so it's a reason react application with a Ruby on Rails backend that uses GraphQL to connect the two so that's it from me bye bye any questions please so when you were building your application did you stumble upon things like leaf and nodes in recent because a couple of months ago when I checked it out I looked at the documentation and it was as simple as angular ones documentation I'm really sorry but I'm finding it very difficult to understand have you did you stumble upon things like leaves and nodes in recent yeah no I can't say so okay okay okay because I just had a couple of doubts with that I couldn't understand that so I'd like to point out one thing if it's a functional programming concept that you would like to learn Ritesh has a talk next he has been working on functional programming languages for much longer than I have would be an excellent person to ask these specific questions about functional programming concepts because he has worked on Haskell and now he's working with Elm so he has quite a bit of experience okay hi yeah so like for what kind of applications is like a reason suited for like if I have an application I want to decide between using reason on JS so like this is obvious factor if I want to enforce some kind of data structure on the data then I should use reason but what other factors should drive my decision in choosing reason or not so for JavaScript developers it's actually a very easy choice because you are not going to use reason in production you are actually going to use JavaScript which means that if you have reason code inside your code base what the most common use case would be to have the compiler create JavaScript files keep that alongside the reason code so you have no change in your build process absolutely no change that question is a bit invalid you can use reason wherever you are using JavaScript right now one of the design decisions and I believe one of the reason it is created this way is to increase the ease with which you can adopt the reason reason is JavaScript for all practical purposes of course because reason also compiles to OCaml in the middle you can also choose to compile to native but that is a different story and that has a different purpose hello the last question maybe you said that you started working the FJS and then you moved to reason ML so what problem do you face working the FJS then you chosen reason ML on top of the FJS so it was a complexity that was introduced to a mistake that I made as I mentioned I didn't write test so once the code base the point became large it became complicated adding things making changes was I wasn't sure if I made a certain change whether a thing would break the thing about static programming languages is that you have the option of having the compiler make these checks for you so I'm not saying you're not think that I'm saying that you don't need tests you still do but types you can do a lot of the work that you would generally give to test you're shifting responsibility to the type system still use tests but with reason ML in place so I illustrate this with an example with one point of time after during this during the point of time when I switched from react to reason react on personal manager I worked on a single commit over a period of two days during which I changed the basic structure of the root state because I changed the basic structure I had to go through the entire code base and make a massive amount of changes in code and during that point of time because I was making changes the compiler was always complaining that something was broken so the process I followed was look at what is broken fix that look at what is broken fix that at the end when it compiled after two days the entire application work there were no mistakes I have never experienced anything like that while using dynamic languages where you make sweeping changes across your code base and when it compiles it works this is an experience that that truly needs to be need to experience it to believe that it can actually work you can make massive changes and rely on the type system can trust the type system but when it says that these types line up they do that is why I switched that is my primary take away Hi first of all great talk I just have a question that the function that you mentioned they uh sorry so the functions that you mentioned in the slides they I see that they don't have a return type or the arguments were not typed so why is that I mean it's a type language once again reason ML it's a type inference mechanism when you look at that particular type can you tell what it is we can infer right so there's something called the type inference mechanism where you don't need to specify as type specifically you don't need to say that something is a string and it looks like a string behaves like a string it is a string so there's a mechanism called the Hindley-Mindler type system so that's like a mathematical notation bit complicated and over the top for this particular top but what that system allows the compiler to do is to guess with very good accuracy what the type would be so it infers a type usually it infers a type from how you use it for example if you were to uh have a value coming in from outside and you were to going to treat it like a string and the compiler infers that it is a string and then for all future use cases it treats it as a string and that it must be a string but what I'm saying is probably incurring but that's sort of how it works like is that does that answer your question in the morning? Hey, great talk. So what I wanted to know was are you using ReasonML in your production apps right now? Yes, we are using ReasonML as we talk to you. Right, so most there will be some part of the code that still you can't really convert totally to ReasonML so there must be some interrupt going on between the two so what I want to know is there are some things certain things that I still can't formulate in my head how to do it in ReasonML right for example animation request animation frame observables or advancing kind of thing generators that sort of things like have you ever run into troubles like that and what's your relative percentage deals to ReasonML in your code base right now? The percentage is very small right now so we are actually gradually adopting ReasonML we are not trying to like completely so the new things we're building we're building with ReasonML and ReasonML does have extremely good interop with JavaScript it's formalized there is lots of documentation on how to connect your existing JavaScript code to ReasonML how to communicate between the two if you want to call Reason functions or if you want to call JavaScript functions from these that is possible and the interop is very good it's a bit awkward the syntax for it is probably the most awkward thing you will encounter about ReasonML writing interop can be the first time I looked at it it didn't look quite pretty the rules are very simple so once you learn it's pretty easy how to write the interop bits Hi so this talk was extremely brilliant and thank you for that so one thing I wanted to ask was do you see soundness of the language as a big advantage of ReasonML over alternatives like TypeScript and like if the application there are a lot of interop scenarios involved where you are having interop with vanilla JavaScript does soundness still remain a large advantage in these cases like if the application is entirely written in ReasonML then I can understand that the soundness of the type system prevents a lot of errors but if you have a lot of interop scenarios is this still an advantage as such correct me if I'm wrong TypeScript I haven't used TypeScript but you can still have nil in TypeScript correct yes so like the security talk we had a little bit earlier it's always best to have a sane default nil is not sane in my 10 years of experience as a web developer I have had more trouble rising from the damn nil or null for you JavaScript developers than anything else no method I write on nils some nil being passed there nil is not a thing when you think about it when you have a sound type system everything has a guaranteed type it is always known so yes I do think soundness matters when you eliminate nil from the equation it's you can think about it from a security perspective it is a weakness I don't think there is any particular value to having nil because everywhere where you use nil it's actually a stand-in for something else so if you were to use something like nil in reason and in elm you would have something called the option type where you say something where a thing is some value or none so it's again a variant it's actually a variant wherever you see and where you think you should be using nil probably you should be using a variant and then you introduce soundness to your system so my question is not really get towards reasonable but just around the ecosystem so let's say I am a package developer I want to develop a node package so doesn't like the community is fragmented towards like type script flow reasonable so whenever I want to create a new package I have to write my type definitions for all these three things and that is a kind of an overhead for a if I am a single developer by writing types do you mean like writing definitions on the there are other sites that provide definitions is that what you mean if I am exporting a library so I would provide my own type definitions would you be writing in javascript or in one of type languages so in typescript we have .d.ts files which we typically ship with every node package but then if my consumers are using flow then I need to write flow types and I think reasonable must also be having some similar kind of thing to export its library definition so isn't it like an overhead to write for all this isn't the community fragmented to write type definitions in all these different languages the fragmentation in the community is like a huge topic one that we could have like our long conversations about but in this respect again interop between javascript things that's solved for typescript and flow I think the interop works quite well you can have interop between flow and typescript because fundamentally they come down to jas it's always jas at the end of the day it is possible in the interop is there the story is there similarly if you're writing reason again interop with jas is possible flow has interop with jas typescript has interop with jas so they all have interop with each other through jas I think that's sort of the answer to your question but it's not complete that's not complete thank you guys thank you I think that was a very well thought out nice so a couple of quick announcements there are a BOF session on security which is happening of the person who gave the talk in the morning is going to be there another thing meta refresh talks on are designed by Abhinav and Shriram are happening in auditory so you can have that so our next speaker has I think given me the best intro for himself so we end up asking everyone that tell us something that we can tell embarrassing about yourself on stage so he's claimed he has the memory span of a jellyfish which I don't know how he's quantified he's also said unsuccessfully for 10 years he's tried but not able to learn guitar okay and his talk is more on functional programming and elm so how many of you guys do functional programming in production working non-breaking okay nice so good I think for the rest of you this is going to be a good session it's a nice talk so hope you enjoy this is working so yeah hello everybody and thank you for joining me here I will be talking to you about elm today this is going to be an introductory talk about the language and I'll also be sharing about our experience in using a language like this to build a real world application and yeah I'm not actually going to go serve tea or something that just stands for the elm architecture so a bit about myself my name is Ritesh a couple of months back I joined big binary as a senior software engineer and we wanted to build a product that would provide contextual help documents to the users and we call this product as help so this is still like in the very early stages and let me give you a quick overview of what is help is and what we wanted to achieve with it so for the sake of an example let's assume that you have a web app to upload and edit videos or something and you wanted to provide some helpful documentation to your users guides so to speak so what you could do is you could sign up on a cell create your documentation by following a few simple steps I won't go into the details and once you have your documentation ready then you can get a JavaScript code snippet which you can then insert in your app or website this is much like you know how you would integrate Google analytics or intercom or something like that so once you've done that the small button or a help icon would render in your website the user can then click on this icon and this would open up this widget which would you know provide the help documents for your user now one important feature of this product is that it provides these help documents based on a certain context rather than the user just having to search through you know a repository of things so it takes into consideration things like the current location or the URL of the user that's you know that the user is right now and suggests some articles to the user based on these parameters so yeah I mean that's just that's the gist of the application gist of his help and these are all mock screens so you don't have to worry about this now we knew that the front end would involve a fair bit of work and there were two parts to it one was developing the widget side code which would reside in the you know the client website and the other is developing the admin side where you know the users would sign in and create your documentation and stuff so yeah the front end right I mean there are a number of frameworks and libraries out there that you could have adopted and these are just amongst the you know the popular ones I'm not even sure if people use mobics but yeah that's that and and these days it's quite difficult to pick one right most of the frameworks have evolved over the years and they've come a long way and you really have to look at certain other aspects to pick the right one for you that being said we do quite a bit of work with react within big binary and we like react and its ecosystem a lot but this is all still you know JavaScript and we knew that if we relied on JavaScript and any of its framework and tooling it would still bring in issues that inherently exist within the JavaScript world and as the code base grows it's only a matter of time that these issues you know start cropping up so if you've dabbled with the front end development then for sure you must have faced issues like for example with null or you know undefined is not a function and JavaScript is inherently impure and mutable now this is not just me being pro fp here and you know bashing JavaScript but it's a known fact that this leads to unpredictable behavior and bugs now there are measures again that we can take to curb these problems script and flow for example gives us static type checking right and it's great but again there are times where we need where we need JavaScript's dynamism to work for us or rather as front end developers we tend to fall back on JavaScript's dynamic nature to you know for shortcuts so both these systems they give us the any type which essentially allows us to escape the whole type checking altogether and sometimes functions become rather complex and it's really hard to determine what the type signature should be like this might be because the function itself is impure in nature might be mutating some external state or doing multiple things you know within and of course we can use other libraries and you know tools to further enforce things in our code base use mutable data structures linters and build up some discipline but even that might not be enough so this is a recent screenshot of the slack app captured by one of my colleague at big binary uh yeah see what I'm saying here so now I'm not really hating on JavaScript here I love the language I still use it it's super flexible multi paradigmed but due to JavaScript's inherent nature or rather maybe it's right to say due to our human nature the cost of this flexibility can be quite high for us especially when it comes to software development and if you don't handle it well it can get really hard to feel confident about our code especially as the code base grows so when we look at as help as a product where we need to get integrated with the user's website or app to display the help widget and to provide help documents to their users it becomes especially important for us to avoid such kind of issues it definitely would not speak well about the product if if these kind of issues did prop up and spoil the entire user experience of the website so what do we do well there were a couple of choices out there to tackle these challenges but for us one particular candidate stood out elm why well a quick look at the elm website and the feature that's enlisted at the top is no runtime exceptions that's a pretty bold claim in well front-end land actually there are some cases and known issues where it may not guarantee this but for the most part it does there are a bunch of other features too like great performance and small asset size now this is the so the elm real world application that compiles to like one-third of the size of the react version which is pretty impressive and there are you know a couple of more benefits so what is elm elm is a functional programming language for a declaratively creating web apps it compiles to JavaScript so in a typical elm app you would have a bunch of modules elm modules and an entry point you then compile it down to a single output which would which would have the JavaScript code now the output is not meant to be human readable the point here is that the compiler would do the best job for you and you don't have to worry about it as I said before it's a purely functional language it has strong static and type inference elm has a huge emphasis on being beginner friendly there is a learning curve but as a functional programming language it does not bog you down with a lot of things but just enough to get you started you know thinking in a certain way so you won't find like funky terminologies that usually that are used by you know functional programmers so it's a bit easy on you okay let me give you a typical example this is a add function in JavaScript and here is the same function in elm so the syntax as you see is you know worlds apart from JavaScript it might it is actually more close to Haskell and there is a bit of getting used to here but once you do it's actually fun so we define a function called add and it takes two arguments X and Y but notice that we separate them with white spaces and there is no parenthesis or comma and and that way it's a bit more terse than JavaScript notice also that there is no you know opening and closing curly brackets or anything like that in fact the function itself is a single expression there is no concept of multiple statements and you know a return keyword or anything like that and this is how you invoke a function and since all functions in elm up here which means it cannot mutate any external state and it purely depends upon you know the values that are passed to the function and that gives us strong guarantees in the sense that whenever we call this function we are sure to get back what is otherwise expected so this function gives this would always be 10 okay so let's try let's say we implemented that function which would display that bit of text in the Slack app that we saw view all you know some number of users or members here is a here is the JavaScript version again it's quite simple but let's let's just examine this so if you pass a list of users or you know an area of user names we get the expected result but what happens when we pass it nothing or a number and as we saw in yesterday's flash talk if the implementation was slightly different we could get all sorts of unexpected results okay so let's try to do the same thing in elm so if we I mean you can just have a look at the code there's nothing much going on here it's pretty much the same as what the JavaScript code did so if we pass the right values we obviously get the expected result if we try to call the function with another type let's say an integer the compiler with throw an error so this is elms type inference coming into play here during the compilation process it notifies us that we we are not passing the right type of argument this code will never compile and it would never make it to the user's screen so what happens if we don't handle the elms condition which is very well possible in JavaScript but the thing is in elm this whole if elms thing is one single expression and it has to be complete the compiler basically addresses us to handle all conditions and if you don't do that obviously you'll get an error and this gives us you know strong guarantees again so all functions in elm are by default so if we go back to the ad function and if you call the ad function by just giving it one argument you would get back another function which is you know waiting for the final argument so you can create an ad five function which expects this one argument and you know just adds five to it so we saw that elm can figure out types it can infer types and it is pretty accurate at it but it also lets you write a type annotation on the line above the type definition if you want so is how you would define a float a string a bool and a list of you know integers and the way we do it is quite simple you you just have the identifier followed by a colon and you know the type and this is how you would define you know the type signature for functions and this you know introduces arrows so if you look at the half function the way we read it is from left to right so it takes in a float and returns a float and the way and the way and we and when we have like multiple arguments for example the divide function so how you would read that is takes a float as the first argument then it returns another function which takes another float and that function finally returns a float right and as you know how he said this is also using the Hindley Milner type system now people can make mistakes while defining type annotations so what happens if we say the wrong thing well the compiler will still figure it out for you and you know try to do try to match the right thing for you and it would even suggest you know it should be a float instant of a in in this case in other words the compiler will always verify that all the annotations are correct. Okay, so in a cell you can create these articles right and articles can have a title, a description categories, URLs and a bunch of other things right so elm allows you to create something called as type aliases to represent something like this and which is nothing but defining the shape of the you know the record type and this is how you would actually create a type of article which we defined in the previous slide. It's pretty similar to how you create an object in JavaScript except we use the you know equal to sign instead of the golden sign and we can use this in our type signature as well. So let's say we have a function which takes in a list of articles and returns list of and extracts the title out of it and you know a list returns a list of title. Title. So yeah, so this is how you would define that and notice the dot title method over there a function over there. So that's the same as you know calling article dot title. It's it's just that you have record field accesses as functions also in elm. Yeah. So this basically just extracts the value out of the record and that that's it. Yeah, so elm has a pipe operator that sort of relies on partial application. For example, say we have a function that takes an article extracts the description or truncates it and adds an ellipses right to get a short summary so to speak. Now a better way to represent this is by using the pipe operator. So in this pipeline we pass the initial input to the dot description function and then the output of that gets passed to the truncate function and finally that the output of that gets passed to add ellipses and yeah, and that the bar and the greater than sign is how you represent the pipe operator on similar lines. We also have an operator to compose functions. The only difference being here is that we do not pass the initial input to the pipeline and by doing so it's you know, it's it's a it's known that we return a function that's waiting for an input and obviously the operator is different right so all data in elm is immutable. So this article type it gets passed around a lot in a lot of functions in our repo in you know a cell. So if you wanted to create a function that takes in an article type and we wanted to update it to something new. We wanted to update the title to something new the way we would do that is by copying the original article and so here we are saying that you know, take the original article keep all the other fields as it is but for the title set it as a new title. I mean that's how you would work with records now the benefit of doing this is that there is going to be a flow of data without worrying that some random function might be you know mutating the original value which is otherwise possible in JavaScript and these are sources of bugs that can be quite tricky and difficult to track down all right custom types. Custom types. So in case help an article could have this status which can either be active or inactive. So if the article is active it it will be displayed in that widget and if it's inactive it won't be and the admin users can set the status of the article as active or you know inactive. Now we could use strings to you know represent this status but then we have to check the value of the string to be you know equal to the string active or inactive and we'd be concerned about upper cases or lower cases and what if you know there are typos and what are the value changes altogether so we might have to do some run runtime validation to take care of this right. So a better way to to represent this status is using a custom type. So I can have a status type which is either active or inactive and now I only need to deal with these two variants of this type. So if I have to set the status of the of the of an article as active or inactive I just use one of these variants that we defined in the previous slide right and yeah so you just set it as one of these variants and you your status type is now type check so if we give it any other value the compiler will fail and thereby we can just avoid you know writing a lot of runtime validation code. Okay so let's say that we requested for an article from the server but that article does not exist and the server returns a null right but some time but sometimes we need so basically elm does not really have a does not have a null or anything equivalent to a null but sometimes we need to represent this right we need to represent no data so how do we do that the one way to do this is by using maybe custom type which is sort of built in with the core library and the variants of this maybe type is just either yeah just a value or nothing at all so notice the a here that's that's a variable type which is to say that the type constructor of just takes you know any type so it's like a boxing type it it's a little difficult to explain this it it yeah that's what it does it just wraps around some type some other type so we can have a maybe of in a maybe of string float or you know even a maybe of an article yeah so this is so we can have a default article which is just some empty value or we can have nothing at all but the thing is that we will have to deal with both these cases now so let's say somewhere in the view we wanted to display some text if the article was found or not found then we can use this case expression to do this so this is basically a fancy sort of way to do switch cases so the incoming article can have can come in two variants right and it can come in only to a different variants the just and nothing since it is a maybe type so the case expression allows us to do what is called as pattern matching and you can just you know sort of do this by branching out into these two types yeah so so basically this allows us to have like it will always return a string no matter what so yeah so that's a basic overview of the syntax and how certain things work in L but it just it doesn't end with just that okay so in today's day and age what do we need to do to build a fairly large frontend application you need some kind of a package manager a compiler or and a module bundler some kind of a framework to hold things together and a bunch of other libraries and tools to you know to be careful about our code and avoid bugs now this can be a pretty daunting task to you know wire all this together to get things going especially for a beginner when you don't really understand what these different components might be doing so in L there is an equivalent of what you know all the things that we saw in the previous slide built in so it has its own compiler package manager repel and a dev server it also has its own built-in framework which is the Elm architecture and it enforces this architecture to build you know web applications the working is actually pretty similar to redux as you can see in fact the creators of redux also mentioned that redux was inspired by the Elm architecture in some way so so Elm applications can basically take over a single node in a larger application or they can cover like the take care of the entire document so to speak so you set up your app through what's called an Elm program and that this is the core of the Elm architecture and it lets you define one of these programs using these helper functions so you can have a sandbox this is primarily just there for you to learn and understand the basics of the Elm architecture it's solely there for that purpose and then you have something called as an element function which also lets you create a program basically this will allow you to create an just one HTML node which is managed by Elm so you can easily integrate into larger applications that are not built in Elm then you have the document type which lets you take care of the entire document Elm manages it for you basically that includes the title and the body as well and finally we have the application type of program which is like the real deal it lets you do that's what you would use to build a single page application so you can do routing and stuff like that okay so if you look at the type signature for the sandbox function it has one argument and it takes in these three different parts and so you have the init thing which basically takes in a model which is the state of the app and hold the data of the app then we have the view which is a function which takes in the model and returns an HTML message we look at that briefly the next slide and then you have the update function which takes in a message or some user action then it takes the current model and returns us the updated model okay so if we create a sandbox program from a high level it would look something like this you have the Elm runtime within which your application would reside and the Elm runtime is going to manage the data flow for you so even the HTML that you define in your application is managed by Elm and it's not even the real HTML it's virtual DOM the Elm runtime would you know finally figure out the actual HTML so the basic flow would look something like this and this is very simplistic representation of it so you have the initial model which would give out the view then you can have events basically user actions or something like that which would trigger an update and that would finally update the model which would return the updated view I mean we're all familiar with this sort of flow so in the sandbox program you do not have access to the outside world at all so you cannot do something like Ajax requests or anything like that you can just you know describe the HTML so how do you cause side effects I mean if you don't do side effects you don't really have a real application so if you look at the type signature for the element function which also gives a program an Elm program there are couple of changes it introduces something called as descriptions which takes a model and returns something called as sub message we won't look at that right now but the interesting thing is that the init and the update methods are also different here so the the return type of both init and update is right now modified instead of just returning a model it right now returns something called as a command message and we'll look at that so unlike the sandbox program the element program can communicate with the outside world in a couple of ways you can use commands to trigger the Elm runtime to do HTTP requests you can subscribe to events like clock ticks you can pass in data from JavaScript through flags as the Elm program starts and then finally you can interrupt with JavaScript using something called as ports so basically you can essentially fire a command to do an HTTP request to the server and once that gets completed that would trigger an update with the with the message and the payload and then you can and that would again update the model and update the view finally right so that's a very basic overview of the Elm architecture and one other thing that I wanted to share with you was about you know a great refactoring experience that you get with Elm okay so so you have this article type right and in ASEL the shape of this article type went through multiple iterations so initially when we defined it could just have the article could just be assigned to one single category but then later we changed it so that it has can be assigned to multiple categories or a list of categories then we added something called as URL data to this article type so the thing is that I mean this whole thing gradually happened over a period of time and as the requirements changed and you know a lot of things happened but all we had to do really was you know change the type definition and the compiler would obviously complain but this acted as guides so to speak so that it would allow us to make changes in throughout the code base and no corner cases were missed primarily so this is otherwise such a huge issue because it is something if you're not careful enough in JavaScript it could cause bugs and eventually that would finally land up in the user screen okay so this might seem like a lot and yes there is a learning curve but at the same time I've seen a couple of people a lot of people just you know catch on to the language pretty fast it's just that the initial effort that you need to put to understand the syntax and the couple of things that can be a little difficult if you're not used to this sort of a language but yeah it's it does it does take some time but you can get over it and one important thing is that when you're in applications in L you are building for the long-term benefits especially when in terms of maintainability and it's obviously safety first and you end up building applications that are very predictable in behavior it is highly opinionated it can sometimes feel very restrictive at times especially when you're working with JavaScript or the outside world and I might also add that it has a great community so the Elm Slack channel basically is always active there is always someone there you can easily reach out to people if you're stuck and there's always someone there to help you and this was a recent tweet by Richard Fledman who works at Node at Inc where they have like about 200,000 lines of Elm code in production and yeah so after two years that's when the finally encountered a runtime error and that too it was because of debug.cache so yeah so basically that's the kind of reliability that you get from the by using by working with this sort of a language incidentally the creator of Elm Evan Ciszapliki if I'm pronouncing the name correctly also works at Node at Inc okay so how do you get started you can visit the Elmlang website it has like great documentation and then you can also visit the guides.elmlang website it does a great job of onboarding users to the language great documentation again there's the Elm spa example by Richard Fledman that's a great resource you wanted to look at the code of a real of a real world application and then finally ASEL is it's also open source you can have a look at that or you can just talk to me so in conclusion I would like to say that in today's day and age there are a great variety of tools and frameworks and languages available to build frontend applications and when it is a question about building reliable robust frontend applications Elm is one such language that should not be ignored thank you I'm not sure if you have time for questions thank you Ritesh sorry we will have questions after some time okay sure a couple of announcements we'll have a functional BOF at 140 and then at 240 there is a BOF about ethics in design 340 there is a BOF regarding the freelancing as a web designer and 420 there is another BOF regarding PWAS so let's have lunch and let's meet at 130 okay you guys had lunch everyone no one's going to be sleepy or might be so we'll do some exercises not now more people come because it's going to be little bit of fun so our next talk is on I think the most popular database that everyone uses anyone uses anything other than sequel no sequel anything I am asking you guys okay you guys are just eating clearly anyway I think we have someone from Oracle I wanted to ask you why did you open as a logo I don't know maybe you guys can answer it so I'll just leave the stage open for our next speaker Sanjay to talk about this so good afternoon everybody I think I've been giving the interesting task of keeping everybody awake I'm not a part of the exercises I think they'll do that later so people ask me why we've used the dolphin I think dolphins because one is it's very intelligent animal it works in groups very well and I think that's what even MySQL is all about we have always been very good with you know multiple databases working together especially with our application and things like that so that's where the dolphin comes from and the name there's a name of the dolphin also it's called Saquilla so today we are going to talk about MySQL 8 and the progression of 5.7 to 5.8 a lot of interesting features I think one of the most important features that you guys should be interested in is there is a document store that we have and MySQL 8 is now SQL plus no SQL database so both the databases are together in this so NoSQL document store JSON, CTE, Windows functions, data dictionary, I think I'll focus on document store for this audience and we've been evolving from 5.7 we created something called InnoDB cluster which is basically high availability out of the box and I will also explain to you how that has value for this audience moving on quickly here so what is the document store I think the paradigm of the whole of the web was shifting there was a huge focus on having JSON documents and not an SQL kind of interface and therefore we said okay if this is natively how people want to look at how they store their data that there are a bunch of JSON documents that are there and they are not interested in different multiple columns they are not interested you know indexes and joins and all those kind of things we can do that but for us to move and make it simply a document database means that we have a two column database right if you look at it from the SQL point of view there is an index and then there is just a JSON document right but it cannot be as simple as that there are certain things there are certain terminologies that have to be exactly the way people just don't think about it so for example we have to talk in terms of collections you know as far as the API itself is concerned and the way things are called I don't think anybody wants to call SQL there has to be method chaining that has to be there something not something not something and obviously it has to be integrated extremely well with Node.js or any kind of an IDE that you know the modern developers use it can be multiple ones but let's concentrate on Node.js here but one of the things that you must remember and that's the reason I have this architecture diagram here at the bottom of it all it's still a transaction oriented engine into which all your documents are going so it's truly asset there is nothing like eventual consistency and all that kind of stuff your data even though it looks like a no SQL at the end it goes at the bottom there and this is a database or a storage engine which is called InnoDB it's been used for donkeys years it has been used for all kinds of applications the data is stored there your JSON document is getting stored exactly there and it's completely completely asset the moment you say save it is saved and in fact if you want to have transactions inside your JSON and JavaScript you can also do that I will have a quick you know I'll show it to you how it works but for that we earlier has used to have something called the standard SQL protocol but now you had to create a new protocol I think we've said the extended protocol or whatever it is so that's the reason it's called the X protocol and X protocol clearly understands that somebody can be talking to it in SQL or somebody can be talking to it in CRUD and how the CRUD looks exactly and how do you call it is something that I will also talk about again maybe I'm you know reaching to people here who already know about this what is the collection I think very very simple there is just a bunch of JSON documents and there is underscore ID that defines the key to it and it's easy to search you should be able to search not only you know for the document but anything inside the document you should be able to search through it and we have implemented it as a simple table for us so for us to go from the SQL world to the new SQL world was very very simple we basically implemented just a table it has an ID and it has an ID and the extra complication that had to be there was that earlier the indexes used to be on a column but here we needed to create indexes that were on items that were inside a hierarchical JSON document so you could say you know I want to have you know I have a user and there is a user ID and I want to create an index of the ID or something like that which is something deep inside a JSON document and we are able to create indexes on that so that's an addition that we had to make as far as collections are concerned as I said there's a new protocol we have and this has to cater for JSON so it's a again the plugin itself which is used to call this is called the X plugin and it uses the Google Protobox that's how it is able to not only talk in JSON you can just change the languages the languages don't really matter you can talk multiple languages there's a single shell you can call it and it understands the context the expressions are there and you can have again pipeline commands are there so that's something again I'm going to actually show them to you not running but at least on the screen how these look and you can actually bound the parameter you can say I want a limit on the total number of things or documents that I want coming up so that kind of thing you can also do okay how does it look it looks exactly like this so you have anything that you want to call there is auto-completion that is there, there is help that is there so it's completely integrated full support for promises and I will show you exactly the code for promises how it looks documentation and tutorials I think we are still adding more and more stuff so my request to people here because we are a very very community driven thing so if you try something and you discover something, blog about it maybe do a podcast so that gets just added to the community because this is something which is quite new so if you are doing something whether you pass whether something looks to be very difficult whether you fail doesn't really matter so I would love to have feedback from you this is how it looks and as far as the documentation is concerned this is you know we have a tree or a graph of each statement that is there so I want to do a add, I can have a document or JSON and then you can do commas and you can add more and more documents to JSON in the end you say execute and document will get added so for any functions that we have in JSON we have given you these kind of trees and you can have a look at them and you can just write your programs using this again node.js again I am like preaching to the people who know everything about it remember it is single threaded asynchronous, non-blocking we can do all kinds of blocking and non-blocking stuff I think you guys know about it I don't need to preach to you but just for completion I have kept this here so there are multiple ways of dealing with asynchronously no city and there are these multiple methods there are one or two methods like you know async and promise that we have implemented those are available and that's what I'm going to show you exactly how we do it okay so this is you know a typical callback function right so if there is standard which comes which is there is no error then you will get foo out and if there is an error you will get bar out that's your typical implementation that you do on the server side and this is how the thing looks and this is how it's implemented similarly this is how a promise looks so you can have a promise which comes out the moment the data comes out it's the promise is going to get delivered and based on what promise is there your output is going to look like either foo or bar again this is the implementation of node.js the official implementation it's completely based on our new x protocol as I said asynchronous it is allowed and completely you can have something dot something and you can go on and you know with it and in the final end you can call execute or whatever you want and flexibility in parameters and methods so I'll just show you exactly how it looks rather than just talking about it because I think even now as far as examples are concerned there are not that many examples I think the more people write on this the more examples that will come out okay I'll just show you all this right exactly how does a crud look you know if I want to again we are a relational database so if all else fails and you want to just call an SQL you should be able to do that and transactions and unlocking this is something that is unique to us that you can actually have a transaction inside JavaScript you can do that to make it secure let us suppose you want to have an SSL which you want to go to how does that look how is that done a little bit on authentication and I will also talk about the document store right there sorry you know about how you make sure that you are highly valid so if I have a cluster of servers and one cluster fails and the second one automatically takes over how do I make sure that that kind of automatically happens and you don't have to do anything to program it this is your crud right I've got my ad I've got my find I've got my modify and I've got my role so basically you create a collection and you simply can you know give your your names of different things you can add add add and execute and your collection will get that information you can have you know obviously it's a just document you can have completely different structures that you can have if you want to find something just bind that and you execute and then again a simple simple standard you know there's nothing complicated here for this you can modify and you can remember you can create indexes also I've not given it here and the indexes if the index is there you know the and you switch it on then automatically there is you know the database will know that the index is there he's going to search using using that index right also we have something called a cursor so let us suppose there's a huge collection that has been returned and on each recent document you want to do something something like a mail merge kind of thing that can simply be done using a cursor right so basically you get the collection and then that function gets executed on each and every row we call it row you can call it document the output that is done then if you want to have a find I just I just want to show you these code snippets so that you look at them and you realize that you know there is something that is very very simple I use these functions and I can do my you know simple operations that I that I want there is some basic setup that obviously you must do before you start out I think the MySQL XD API is something that you need to stop so that's the first thing is that gives you the full infrastructure all the commands that we have so we need that require and there is a session that you create and I think the most important thing that you need to look at here is these parameters that you're talking about when I say get session I'm talking about a local host and I'm talking about a port remember this port is something that is important because this is what is going to give you automatic you know failure safety and whatever if someone fails and next takeover this is what they give you so there are a bunch of parameters and we'll talk a little bit more about these parameters also here what we are doing is you know this is an example so we create a schema we make sure that schema is not there we drop it and we can catch it again and finally you will get a schema and from from the session you're getting the schema and the schema will have then the collections so there's a little bit of schema that is that is still there even though we call it schema less we call it noise but this thing has to be there right so this is how you create a collection in the schema you say okay collection I say await I'm using my async function and then I just create this collection using collection is equal to create collection and remember this create collection again is context searchable the help is available on this if you have completed you know it'll get completed automatically you know these are things that we talk about because as far as you know the skill programmers are concerned they're not used to these beautiful ideas we just remember things I guess so you guys are probably just very very used to it and I'm surprised why I'm you know focusing on this too much because there's something new for us it's an easy program okay let's go to the crud how do you do create you can do it in one shot you can do it in multiple shots all the promises are going to get delivered and you can just add together documents and again the format of the documents can be anything right here there are multiple we're doing it in two steps here we are adding multiple documents here extremely very very simple and if your collection gets created nothing you don't have to understand SQL you don't have to care what the scheme is you know everything is done for you automatically you want to update something that's how you do it you say modify right a particular ID you set something and then you basically execute it right so you you find it and you change it so if it is node and I want to change it to foo that's how you know the modify is done again straightforward one or two statements that you can do it if you want to delete something again you simply search for this document and just remove it it's automatically going to search it and it's just going to remove the document as I said there is transaction support so there is something which you say start transaction and then you will execute all this if any of these in the middle fails because remember all this data that you're putting and this is a simple one or two statements that we have you could have hundreds of statements that you want to put and if something fails in the database the database rollback is going to happen you can have private you know you can have in the case of error the rollback is something that you can so either all your commands get executed together or if something fails in the middle you can do a rollback so your typical transaction again straightforward nothing very complicated as I said we are old SQL guys and we say when all else fails if you want to actually write an SQL command there is always the session.sql so you have the session you give the SQL and then you just you know patch in the SQL command things are looking very complicated but there is some old foggy there who just doesn't understand JavaScript he still wants to write his SQL command he can just do it and he can add documents there or do anything that he wants there as I said so as far as connecting to the database is concerned we support all kind of security there so if you want to have you know CAs and CRLs if you want to add that as far as your options are concerned when you are connecting with the username and password and things like that you can give your SSL options and you can have all your certification authorities and URLs that you can use remember that as far as SHA-256 is concerned you need to have MySQL 8 or later because some of this is already given in 5.7 but 8.0 means if you want to use SSL SHA-256 so again MySQL has a special focus on security so anything that's any security parameter that is supported at the back end we support it make sure that you know as far as your commands are concerned and your security is concerned it's taken care and it's something that translates to all our connections and I think by default in 8.0 we are secure so we will assume that you're secure till you tell us you're not secure and then you can say okay I don't want to use it but by default you're going to be secure and we're talking about you know the cluster thing the high availability right so this is another thing that you know we have now given with 8.0 so you can have a group of servers that's you know something which is set up together as a group replication so there are a bunch of servers that are there and this shell talks in JavaScript you can set up this cluster using the shell and if one of the clusters fail one of the nodes in the cluster fails another one normally what we do is we have a single primary right so all your writes go to one node and the reads can be done from any of the nodes the reason for it you don't if you write on multiple things there are still certain limitations we have not many but there's one limitation that you can't have videos which are running on multiple servers so you know in this we have a group replication you have a single primary the primary fails the second it takes over the moment the second it takes over you know basically all these are running on different sockets so the first slide that I showed you in which you know I talked about connectivity so I talked about the support the socket number localhost 33060 what you can because each of these servers when you have in a cluster they are running on different nodes but then we have something on the router what the router does is it creates a single port for you and that port is the one that is connected to the ports that is your server or main server so there's a main single port for read and there's a single port for write and as far as the user is concerned they connect to the port that is given to you by the router the router finds out okay this is the server that's up I'm going to now connect this server if that server is down another server is up for write he's going to write on that different server but as far as you're concerned you connect it to the port on the router you don't really care about the infrastructure below anything can fail anything can pass and you can you know simply keep on using the same port and your data is going to be returned to you because remember it's group replication it's a broadcast protocol there is all your servers are perfectly in sync so you can have high availability out of the box so yes we talked about you know I just mentioned the shell a little bit you can do all the commands that we run you can run them on the shell that's very easy for you to do but if you want to create the cluster for example so I want to say these are the this is a cluster I want to add another node I want to add another node you know I want to set up the router anything that you want to do it's a single you know screen on which you can do everything right so you can you know I think any command that you can run manage your cluster you know access your database all those commands are available and they are available in multiple languages so I can write and the cursor actually changes so here the JS means that right now the commands that I'm giving they are being given in JavaScript I can say slash sql then I can start giving commands in sql I can say slash python and I can start giving commands in python so your shell is a single point in which multiple languages are there and you can use all those multiple languages to be able to support you again just a quick reminder the kind of json functions that we support we have all these json functions that are available for you to write you can have merge table you know whatever just search so it's not it's not a small thing that is implemented it's just not a subset which we patched on top of something all the json functions that you can get they have been implemented natively and not only there is just a bunch of tutorials I've left this is for your documentation for you to know but just to let you know it's not just you know json that we've implemented even on our replication we have made sure that as far as the replication is concerned if a json document is going from a master to a slave and the json document has changed a little bit we don't transfer the whole of json document this is just to make you understand the overall picture that as far the engineering that has been done for this whole you know document architecture and json is very very deep I have only 5 minutes right some more interesting points are there on how you you know manage your databases how you manage your rollouts I don't know how many people will be interested but there is invisible indexes there are different security rules that you can give you know obviously we support GIS so if you have you know json documents and you have json GIS you can simply upload it into your MySQL database works straight away and you can start running your queries remember it's indexed right so you can have quick searches on that there are persist configurations there are you can if you have a configuration you want to save it that can all be done and there are just you know these arcane I think I'll skip over you know two things these are for SQL purists that we are now more and more conformant with your SQL 92 or later guidelines we have very very quick add columns that we have latest and there's a huge number of features just to tell you that the focus on MySQL is still there as well as Oracle concerned we are growing and growing and we are making sure that a lot of new things stuff is there for 8.0 I think it's one of the releases that we are really really proud of and as far as you guys are concerned there's a huge wonderful package we should start using it one of the good things is my last slide is that we have an upgrade checker so if you have a 5.7 you want to go to 8.0 you want to know what all can go wrong you can simply run the upgrade checker and you will come to know these are the maybe some data types that are changing or something that has changed go ahead as far as learning is concerned huge number of blogs huge amount of documentation and the community really helps us as I say use 8.0 and if you like it write about it if you don't like it write about it because that's what helps us to improve again and we are not I mean we are used by everybody practically everybody out there on the planet uses us and just to tell you if I have made any promises to you that's what this slide is for that's it that's my time any questions is this the first major upgrade after 5.7 after you have taken over my SQL is it your first major upgrade 5.7 I guess okay and so one of the problem I have with Oracle is in general as your last slide had I cannot benchmark it even though you say it's very performant your clusters are there I am pretty sure that InnoDB was in my SQL in fact I have used it in like 80 years back I guess to build applications but I cannot benchmark it at all and like Oracle stops me from doing that and I cannot publish any benchmark in details either on your own blog if you want to blog and benchmark there is a refusal Oracle when I accept your agreement Oracle has like Oracle has stopped people from doing that they actually suit some people suit some people in the US anyway my point is how is it better than my MongoDB for example see one of the things that we have as a very large companies we never want to compare ourselves and I think it's up to up to the users to compare you compare you like it you don't like it you use it you don't use it it's not for me to talk about okay I am better in this way they are not good in this way you know Oracle has a very clear thinking I am going to talk about my technology and I am going to tell you what is good in my technology yes you can let me know this is not good and we will try to improve but for me whenever I if I compare with another technology I am going to say something negative about that why should I do that it doesn't make any sense I am not here for and we are especially as far as you know my has been a community driven database for a long long time and I think the community is made by you know calling people in together and being happy yes some people are going to like some other technology some people are going to like my technology use it but never I want to you know this thing but this I will follow up why does Oracle refuse for anybody to be able to benchmark because I know definitely as far as Facebook is concerned they have run some benchmarks so they they run at how fast you know MySQL runs in certain scenarios so they do publish some numbers and this is a big surprise for me I don't know if it is specifically to Oracle or this is also specific to MySQL because this is the first time I am hearing about this and I will definitely follow it up and make sure that you know I don't think as far as you are concerned you know MySQL is popular because of you guys if you stop using it you will stop being popular right so there is all anything your criticism your bugs you know if you tell it tell us that it is a shit perfectly fine tell us we will come to no we will improve it if you don't tell us anything if you are not listening to you then what is the point then it is not going to remain the most popular it is thank you I am not going to discuss Maria dvd any other question yes so ideally you heard up in whenever we played a connection with MySQL earlier in Node.js we used to create a single done approach but actually you have given in the NPM package you have given get session so does it create a single done does it check for the single done approach in the package itself or do we have to write it see we what I am telling you is there are these are the different methods which design pattern you use it is perfectly fine with you in fact there is as far as when we do when we are doing testing so we have got these multiple or 10 or 20 tests that we want to perform so there is I think there is something called mocha use mocha and then it is kind of it gives us a single at least a single connection can be reused over that so that is something that we use but I don't want to recommend any this way of programming or that way of programming because every way of programming has its own pitfalls and you have to be very very careful when you are doing you know especially client side or server side how to use security and then there are compromises to be made too much security and then the speed goes down or amount of data that gets totally increased so those are approaches that I think we have started out and that is the reason I am requesting people that you know if you have code snippets put them out right if you want to put it in the single done approach why don't you put it out in a blog and then ask the question I have done it like this is it good or not I am sure there are people who are setting or scanning all the forums they would love to hear and if there is an improvement we can always say in this code yes don't use it like this use it a different way but I think the things are still being tried out security is still being implemented there are you know multiple hundreds of things this is just version one for us 8 to 13 is also version 3 for us so we will we will improve but I don't want to give you a specific because that answer will not be correct any more questions alright let's move on thank you we will take it off thank you so much okay we are going to do some exercises because people are yawning we are going to play a game it is called ninja training we want all of you to stand up please can you stand up wow okay so the role of this for me to pick like a winner or a set of winners I have some really nice stickers to give out not company endorse anything so here is the thing when I say up you put your hands down okay when I say down it goes up if I say right towards the left and left towards the right just make sure you don't hit the guy too next to you that's all and when I say foo you clap okay so we will do a trial round and then we will start eliminating people okay so the first round is going to be trial let's go foo foo down okay so everyone has got the gist of it okay now we are going to start again whatever I say the opposite and then if you get it wrong you sit down okay alright ready let's go foo foo left okay sit down whoever didn't do it sit down okay fine right up sit sit sit sit everyone sit don't cheat down up left foo left okay this is going to be hard down don't cheat man I don't have so many stickers up sit foo bar whoever claps sit down sit sit sit sit foo bar foo sit sit sit sit right left left sit sit sit sit sit top there was nothing for top it was up whoever did that sit okay right left left he did it right up down foo bar foo up okay fine this is going to be hard so all of you if you guys want stickers I am here you guys can all come because this will take a lot of time plus the organizers will kick me out this was like exercise or warm up to our next speaker so it's a really nice interesting talk so you guys can introduce me I am here by the way okay so a quick announcement we have a BOF on ethics in design which is happening outside so I asked some of the colleagues of Ritesh to say about him so they have given me a small intro I will just speak it out so this one here is a man of multiple talents an artist at heart he spends his time at painting, challenging design systems and composing music a passionate and disruptive javascript developer with an unusual affinity towards inline styling don't let this innocent who will you Hitler as his juniors refer to him strikes terror in his colleagues by Mirius well it's fine who as you are about to see his passionate web workers presenting Ritesh can you reset this so hello my name is Ritesh I am a lead software developer at Anorock and I will be talking about web workers initially the subtitle was a graphical intro but now yesterday when I was rearranging my slides I realized that there's more music than graphics so I actually changed it to a musical intro so first of all I will talk about how JS actually works then I'll take up a demo and explain how I improved the performance of that app so this is a tiny code snippet it's I think from front-end developer and back-end developer can understand this so this is a small video I paste that code snippet on my console try to click on the repel and you can see that my clicks aren't getting triggered so basically it's not getting registered and as soon as that function completes then your clicks are getting registered so this happening because your main thread is actually blocked so additionally web browsers only have a single thread so we say that JavaScript is single threaded and sometimes we also say that the browser is single threaded but saying JavaScript is single threaded is correct browser is single threaded is not correct okay so browser assigns a single thread to each of your tabs to run your JavaScript on so that's a single thread so I'll explain how it is and so imagine this line is the main thread and the small dots that you can see is the code that you actually write so the yellow ones are the blocking code and the red ones are the non-blocking code but if JS is single threaded all the code should be blocking right so red code come from which doesn't block the thread so to understand that first we have to understand that the code we write actually consists of two parts it's the web APIs and code JavaScript so code JavaScript is blocking okay and there are some web APIs that are non-blocking most of them are blocking but there are few which are non-blocking how does this happen so you can see that on the left I've written few web APIs that we generally use and on the right you have the code JavaScript so if you have learned if you have started learning JavaScript or any language the first thing that you generally do is you do do a where a where b add them and you do some operations and then you feel that okay you know the language because tutorial just tells you about that then you start thinking that okay this is JavaScript fine but how do I interact with the DOM I mean it's not just addition subtraction division and all so the browser gives you a set of APIs to interact with the DOM so those are web APIs those are not part of code JavaScript okay so now so since browser has given you few of their APIs they can handle them okay so they can say that okay these are the set of APIs that I have given you and few of them I can keep in my own thread okay so things like timers set intervals set timeout these go on a separate thread on the browser's thread stay there until their times come time comes to get executed okay so that was the concept about how few APIs like set timeout promises and all move to a separate thread they still get executed on the main thread itself okay it's like they are waiting on a separate thread not blocking the other code and when their time comes or your call stack is empty they come back and get executed in the main thread so this is just event loop in a nutshell okay so before introducing you to my app I had to make this clear how basically javascript works how multithreading actually works in javascript so I have learnt music I mean for around 5 years or more and there are times that I went to learn music to some classes or something and then I realized there was a very big problem in how they teach music okay so because they always start from scratch now how many of you here are I mean some point of time in their life tried to learn something I mean learn something in music an instrument maybe you would have given up after some time but you would have tried to learn something right and how many of you had given up after some time why do I see more hands in giving up than tried so there are multiple reasons we are developers basically lazy okay and we don't have time okay to take out some time go to a class and learn music that's hard and also it's expensive okay it is expensive they charge you by hours and the most irritating thing is you go there you mostly when you go you have a song in mind you want to play you want to learn that song and they start teaching you from scratch okay so imagine someone says that okay I will teach you Sare Gama Pa and after one year you will be able to play this song that you want you give up okay so so I had an idea that what if I make it accessible for everyone so you can just open your browser play the app learn music connect up your and it's in your control what you want to learn what you do okay so I'll show you a demo so this is the app okay it's still a work in progress this is just an initial you can say that initial thought that I had about the app so first I select the file then I select the track okay sorry the sound isn't playing so uh there are three parts to this app okay the first thing I'll talk about them one by one so first I loaded a midi file any midi file you find on online you can just load it then I played the music you heard the sound and then you saw some visualization on the top right so when I thought about this I realized that there will be a lot of challenges because you're playing audio on a browser and every day you come across things like your main thread is getting blocked imagine you're a single tone getting delayed just because your main thread was blocked the whole music app doesn't make sense okay so so let's go one by one so loading midi files so this is the normal code that you will write to load a simple midi file you will load the midi file you will parse that midi file and then you will get a json or an object which your javascript can understand and based on that you will play the music okay so the biggest problem here is your midi file can be very large why it can be large for you to make sure you understand that I will have to tell you what a midi file has okay so midi file has a info to all the tracks in a particular song so the different tracks are the different instruments that are getting played and then it has the info about which note was played at which time okay and for how long so you have to first parse that and that's a heavy computation if your song is very big okay and the problem is you are blocking your main thread if you are using if you are parsing the file in your main thread it's getting blocked so the file loading part is still asynchronous it's a web api it goes in a separate thread but the parsing part is still synchronous it's still blocking your main thread so the solution is so the solution will be if we are able to move that blocking javascript code that we talked earlier into a separate thread okay so we are already able to move those non blocking web api separate so how do we achieve concurrency for the yellow ones which are by default synchronous even when they are synchronous you create a different thread and you move it but you still don't say that javascript is multi threaded because it's the browser it's the environment that is providing you a separate thread it's not done by javascript by default okay so you can use a hack like you can wrap your whole function inside settimeout and then it will go into a separate thread but if you are aware the time that you gave in the settimeout is not the actual time that callback will get executed it's the minimum time that the callback will get executed okay so that's still hacky and won't solve your problem so the solution is web workers so what are web workers generally they're a separate thread provided by the browser where you can run your code simple okay so there's a worker thread and you can now move your code to that worker thread but there are few limitations you can't access your DOM from there okay and the messaging happens through the post message api you can't just send data from A to B and B to so and we can create multiple web workers these are question that comes how many web workers are enough it depends on your OS actually because it is using your OS to spawn a new web worker and you can also spawn a sub worker from a worker if you think that a single worker is doing a lot in itself it can be blocking right I mean a single worker and it can become slow if it is doing a lot of things inside itself only but the use case is very less that you want to create a separate web worker from a web worker so let's see how we use a web worker so there's a worker constructor available in the browser workers are pretty old in concept so majority of browsers support that you actually create a new instance by passing the URL of your worker file and then you can send your message via the post message API to your worker from your main thread then the worker actually accepts that message it's a kind of a observer pattern not exactly but similar to that you get that data you do whatever you want to do with that data and then you send back the result via the post message API okay and then your main thread gets back that message this web worker in a nutshell very easy to implement so let's get back to the problems that we were trying to solve first one was loading files and now the file upload part has been moved to the web worker okay so it gets the message it gets the URL to that file it reads that URL gets the data and parses it sends back the parsed JSON object to the main thread okay so we have handled that problem so our second problem is playing music okay so playing music involves two parts first you have the info about what at what time a particular note should start and for how long it should play but you have to still create callbacks for that so that you play a particular note at a particular time right so so first you schedule that notes schedule the playing of those notes and then you play the actual sound so the second part is handled by the web audio API by default web the audio plays in a separate thread so you don't have to worry about that but you still have to worry about the first part scheduling notes because it has a lot of I mean still has a lot of problems so everyone here would have used a date dot now right you know that how the JS clock works so the minimum precision there is of one millisecond and if you're making a music app the precision is far less than that you require a precision far less than that okay so that's the first challenge and the second challenge is how do you create callbacks how do you call a particular function and ensure that it's getting called at the right time because if your main thread is blocked it will get delayed and even if a single note gets delayed your whole song is going to be terrible so there are two solutions I mean for each one of them so first the the first one is that you use a combination of set time out and audio hardware clock so this there's also a spec right now high precision time spec what it does is it gives you time the precision is very less than in milliseconds okay so has anyone heard about performance dot now this API called performance dot now so that uses that spec okay and but still it's not available in all the browsers and so as a fallback what you what you can do is you can use the time that is given to you by the web audio context so when you are when you are creating when you want to play a sound you have to first create an instance of the web audio API create a new instance of the audio context you have to pass it to that now it's fine even if you don't understand all this but one thing that you can understand is using the web audio API you can get the actual was time and was time is far better than the js clock time so by using the combination of set time out and that you can achieve that precision but coming to the second problem the js timers I mean first first problem is a problem but not as bad as the second one so for that you have to move your timers into a worker and ensure that you are not doing anything else in that particular worker that can delay or block the worker thread okay so by doing these two you have actually made sure that the scheduling nodes part is also happening at the right time okay so we have tackled two problems now the third and the biggest problem is the visualization so the top part that you see in the demo is what I am referring to as the visualization the first solution to this is you create multiple divs and then move it from top to bottom right and keep it keep it in sync with your audio but the problem is that every time you try to re render you are doing painting, re layouting, composition and everything you are blocking the thread okay and it will make your app slow you will lose the sync between your audio because you have already handled audios but you also have to make sure that your visualization is in sync so if you are doing this by divs you are going to I mean see a lag so the solution to this was canvas the top part is a canvas okay and one more thing so I had already made a timer scheduler for playing the sound so do I actually need to create a new callback for the visualization can't I use the same timer to actually also keep that visualization in sync the problem is when you hear music you want to hear it at the correct time but when you are rendering something you want to achieve 60 fps you don't always want to update your rendering just because your sound has changed okay so there's a difference in time I mean you don't want to do changes to the visualization at the same time that you have done the played the sound so that problem can be solved by a single timer also if you are using request animation frame if you are using request animation frame you can create a single callback and then keep the visualization timer also there and also the audio playing code there so why canvas how did it solve my problem so canvas is scriptable what does this mean that imagine you have a TV on your wall okay you have set your TV it has already taken its space the content that you see on the TV is controlled by somewhere else okay so you don't have to worry you can put the different frames that you want to put on the wall because you are sure that the size of the TV is not going to change okay only the content is going to change right in in case of canvas if you want to even change the size you have to use JavaScript for that okay and when you are just changing the content you are not I mean changing the boundaries and anything so you can actually you can actually show whatever you want in the canvas by using JavaScript so what does this mean that if I want to use the content of canvas I don't actually need the DOM once it is already present in the DOM right and so what I can do is I can move the control of my canvas to a worker because it doesn't need the access to the DOM okay so this is the main thread I use a new API called transfer control to off screen then I push the off screen to a worker fine so what's this so to understand this you have to understand the post message API so by default what you can transfer through the post message API is a serializable content it has to be an object or anything that serializable so it first you serialize it then you use post message to send it then there you deserialize it and this whole process is actually copying your object and this process is slow okay so the solution to that is transferable objects so transferable objects like array buffers something if you are coming from a ccpp background you are heard about pass by reference or also in case of objects so what you are doing here is you are not creating a copy but you are actually transferring the reference to that object but the con here is that it's no more accessible in one thread and it has been totally passed to us another thread so the alternative to this is shared array buffers so it is being shared by both the threads the reference is being shared by both the threads but the problem is that if a makes changes to it and then B also makes changes to it there can be a race condition and this problem is solved by using atomics something that I am not going to talk about here so the second argument that you see in the post message is the transferable list you have to pass the transferable that that you actually want to transfer the first one is the data the second one is the transferable list so this is the time difference you can see that transferable objects are pretty passed compared to serialization and so now what I have done there is the main thread has transferred the transferable to the worker and it has no control over it now in the worker thread you actually get the canvas and you can do whatever you want to do the canvas what you would have done on the main thread it's just a normal canvas you can do all the operations that you were able to do on the main thread so this is the main ways I have actually used the worker on my app so mostly my main thread is still empty the things that I want to do in future is I want to show the open sheet music it's like you would have seen that there is some and then everything written on a paper the musicians see that and play the song so that is open sheet music and I can render it in a canvas using the same transfer to off-screen API but the problem is it's not supported everywhere it's a very new API and I'm still figuring out how to solve that problem maybe I might not be able to show the visualizer in every browser and I don't want to show it with a lag if I move the canvas to the main thread then the problem will be as soon as I add some other feature that might create or lock the main thread my visualizer will come out of sync I don't want to do that so I'm still trying to figure that out so this is the demo what more it can do so you saw the read part it was the read mode where you upload a file you read the file and then you see it okay this is the right part where you can actually play and then you can actually see what you are playing and you can do multiple things here you can play using 128 sounds it's a MIDI spec there are only 128 sounds you can record what you are playing you can download the MIDI file and you can actually connect your any MIDI device maybe a keyboard or a piano and control it from there and you can do the vice versa okay so this is a demo where the keyboard is being controlled by the browser okay so the sound is coming from the keyboard the MIDI file has been uploaded on the browser okay so this was about the talk any questions is there any solution to the problem if your web worker is overloaded there can be scenarios where your web worker is loaded so you can spawn a sub worker from a particular web worker okay so what does that mean that you are creating a separate worker from that worker to handle that process the way you are offloading tasks from your main thread you can offload tasks from your worker also by creating a new worker from that worker understood there can be hierarchy there can be multiple workers and there can be multiple workers under a single worker and the whole hierarchy can go on is there any limit to that it takes the memory that's it there's no number it depends on the browser and the OS that you are using and what about the security when you share the data do multiple workers create multiple threads or they lie in the same thread no multiple so for example if you are I mean stopping your code at a debugger others won't be affected they will keep running the scheduling of nodes that you did you told that there is a performance dot now that gives a better accuracy of time yeah but then set time out still takes it in milliseconds right so what it didn't went into is there is a concept called look ahead timing okay so you don't put the timers for the whole song at once but you create chunks of that song okay and then you actually set time out for that chunk only okay so the solution is that even if there is a problem with one set time out other won't be affected okay so you are just decreasing the possibility of going out of sync you are not actually totally solving the problem alright thank you any more questions no alright thanks okay I am not doing any more exercises because I had 85 stickers which got over in like 30 seconds not gonna distribute anything so for our next speaker he has a continuous github streak of 209 which is more than or almost two thirds of the year and also it is like first talk at a conference so this is a lot of inspiration for the rest of you that you know even you guys can come up here if you are doing something like submit proposals so it's a nice new different topic as well so let's give a welcome to Swapnil hello everyone today we will talk about some of the new web APIs that have been recently added to the browser and how you can leverage them supercharge your web apps quick introduction my name is Swapnil I am a software engineer at Mesho prior to that I worked for two years at Amazon I am quite passionate about open source sustainability and generally helping people start their open source journey so if you are any of this excited you as well I would love to connect and hear your thoughts and find me on social media by the handle Swapnil so back to the topic brace yourselves memes are coming and also new browser APIs are coming so here is a sneak peek of the APIs that we will be talking about today so this talk is presented as a series of six introductions about new APIs so let's start so have you ever written JavaScript to enable infinite scrolling or to lazy load images that appear below the fold like if you are like me you did this by listening for scroll events by requesting the elements scroll top property or by calling the get bounding rectangle function on an element you force the browser to stop everything and repeatedly recalculated the layout you suffered the user suffered it was a dark time so guess what the dark times are now over introducing the glorious intersection observer API so this is a relatively new web API that provides easy to use efficient tools for detecting changes in the DOM's elements visibility within the browser's viewport or within another element so don't get no more reflow no more suffering none of that so here's a quick demo of the API in action so as you can see the top banner displays the answer to the question is the green box in view of the device so as you may have noticed this works across iFrames also but wait there's more this API also supports an option of specifying a list of thresholds so your callback will be called every time the intersection ratio crosses one of these values so the default value of thresholds is 0 which means that every time an element enters or exits the viewport will be notified but as we have overwritten the thresholds to 0.25 0.5, 0.75 and 1 will be notified every time an additional quarter of the elements comes into the viewport so as for the use cases obviously lazy loading you can decide whether or not to perform resource intensive operations like animations based on whether or not your user is going to see the results also reporting of visibility is important in case of advertisements for revenue calculation also imagine a navigation bar that allows you to jump between various sections of the page for a better user experience what you can do is as the user is scrolling through the page you can highlight the corresponding section in the navigation bar using this API you can also provide and improve user feeds experience this can be done by checking which of the feed cards are already seen by the user in order to you know duplicate and avoid showing them in future for the browser support this API is already supported by major browsers like Chrome Firefox Edge etc so moving on to some authentication magic so Russia provide a sophisticated user experience it's important to help users authenticate themselves to your website so this is important because as your users are authenticated you can have a profile which they can use to contact other members of your website to provide data across devices as well as you can process data on behalf of the user even while the user is offline list of benefits of authentication goes on and on but for the user creating, remembering and typing passwords tends to be cumbersome especially on mobile devices it can even lead them to using the same passwords again on different websites which of course leads to a security risk enter the credential management API it gives developers programmatic access to a browser's credential manager and helps users sign in more easily so here are the API specifications the first three are simple thread operations, get, store and create the last one is a bit interesting so this API provides a method called prevent silent access it's true by default which means that on every next credential access request user mediation will be required but what you can potentially do is ask for us users if they can browser can store their information and set this prevent silent access to false which will then enable the user for a seamless sign in experience so let's take a look at what I was talking about so as the user logs into the, visits the website you can see the bottom blue bar trying to you know sign the user in and this experience is quite seamless for the user just note that this would only work when you have explicitly said the prevent silent access to false so most exciting part of this API is definitely the auto sign in feature as we just saw users can be automatically signed in as whenever they are their session is expired or even if they have credentials stored on some other device it allows users to have a one tap sign in which the user will presented with a native account user and you can just select the account which he wants to sign application can also store user name and password combination or even federated account details these credentials can be seen across devices by the browser have this experience everywhere this is already supported on chrome and uc browser for android which combined accounts for more than 70% usage in India so let's talk about responsiveness so responsive of design has revolutionized the web a single website as you know it can adapt its layout when viewed on a range of different screens and devices all that's required is a few meta queries to detect the screen size and load alternative CSS however using the screen size to detect browser capabilities is similar to judging a car speed by looking just at its radio modern smartphones and tablets have increasingly large resolutions and will happily show a desktop view but that view adds numerous fonts images and other assets which for a mobile user it may lead to a degraded experience so the network information API provides a solution here it indicates whether the user is on a metered connection such as a pay as you go and provides an estimate of bandwidth using this information it's possible conditionally load images, videos fonts and other resources at a very basic level you could just override a media query to ensure the mobile layout is retained whenever the user comes from a slower network so just for an example you can use service workers on high resolution, low resolution images based on your user's bandwidth another at an advanced connection aware component can even render multiple elements based on different speeds so for example when the user is offline you can just return a placeholder with alternative text when your user is on a 2G or reduced data mode you could potentially return a low resolution image and when you take that a user has moved to region network you could return a high resolution data image and for users with 4G and above you could render an HD video which obviously would have a more engagement ratio so this is what how a connection aware component would look like for different users so we have the alternative text, a low resolution image a high resolution image and a video so here's a good example on how this can be achieved so we have set the preload video to check for the navigator.connection property and if the connection type is cellular we are deciding so this is the custom business logic we are deciding not to preload videos for users who are on a cellular network you can also use this API monitor for changes so you can add an event listener so and whenever a user's connection is updated for example he moves from a 3G 3G to a 2G network or from a 3G to a Wi-Fi network you could get that event and you could change your business logic according to the new connection so this is supported on Chrome and Firefox for Android and support from many other platforms are coming soon so we are at the half way point so good question like how do you add sharing functionality on a website today so like if you have ever built a website and needed the ability to share a social network know that it's not easy as it first sounds in order to just add very basic share functionality you often need to include a third party script and become familiar with its API not to mention the fact that third party scripts can have a detrimental effect on your websites load performance and when you add more social networks you will quickly start to collect a lot of scripts so like for web developers it's always been a jealousy point because native developers have the ability to tap into the sharing capabilities of your device sharing between native apps devices like very easy but there isn't any reason why it shouldn't be so easy for web developers so this is where the web share API comes into play it allows the websites to invoke the native sharing capabilities of the host platform directly from the web it includes three main advantages first the API is really simple to use as we will see in our code demo also you can share to any of the installed apps social networks and even websites from a mobile device the best things is it provides a very very uniform and familiar user experience so here's a code sample for using the web share API as you can see it just provides a really simple method navigator.share it takes a data object and you can specify title text and URL which you want the user to share let's take a quick look at the demo of the integration of this API what is the familiar way of the share UI it's like very familiar with your mobile users and this is directly from the web so this is a website this API is rolled out to Chrome and is in Safari's technical preview version right now so let's talk about memory range of capabilities of devices that can connect to the web is wider today than has been ever before same web application that serve to a high end desktop can also be used served to a low powered phone tablet or a watch and it can be incredibly challenging to create telling experiences that work seamlessly across this variety of memory devices so quick fact though memory devices like 512 megabytes of RAM or even under one GB of RAM are widely used in emerging markets so the device memory API is a new platform feature aimed at helping web developers deal with modern device landscape it adds a need only property to the navigator object navigator.device memory which returns how much RAM the device has in GB downed it down to the nearest power this was the thing I was trying to show you before at low memory devices are widely across widely used in the emerging markets like India so good sample here you can see business logic being implemented whether the website whether the device has less than one GB of RAM or more for use cases can enable the developers to tailor content at runtime accordance with your hardware limitations of the user's device for example developers can now serve a light app to users on low end devices resulting in better experiences and fewer frustrations can also add context to metrics such as the amount of time it takes the amount of time a task takes complete in JavaScript through the lens of device memory this will result in a better understanding of how device memory correlates with user behavior and versions and other metrics important to your business as for the browser support Chrome and Opera already support this API so let's look at a typical checkout form so buying things you know all most always always is a hassle especially on mobile even if your pages are well designed it's always the websites require a lot of information building information contact information shipping information as well as the payment information so you're ever given up while checking out sometimes you are in the majority so they might institute an average across 37 different studies found that 60 as much as 69% of the chopping cards are abandoned and unsurprisingly this number is worse on mobile where it reaches as much as 84% the rise of mobile browsing over recent years this means the overall problem has been getting worse for e-commerce sites these abandoned cards are costing a huge amount of money business insider estimates that 4 trillion worth of merchandise would be abandoned one year alone thankfully the web is fighting back against this problem W3C working group has been working on a revolution in payments on the web developing new standards to help make online payments much easy payment request API is the step forward in that direction it aims to reduce the number of steps needed to complete a payment online and it actually aims to potentially do away with all checkout forms so here is the demo of this API in action this is where you are browsing the website as soon as you proceed to checkout the API takes over and this all information is already present in your browser you just select whatever the shipping option and you want to have and you just click on ping obviously you need to enter the cvv and your order is complete and this is what a seamless experience for a user would look like again decapping the previous slide users can enter that details credit cards, shipping addresses once into the browser and then they are now ready to pay for goods and services across the web no longer have to fill out the same details repeatedly across different sites thereby reducing shopping cart abandonment browser can then also check for the validity of credit card numbers and can fill or notify the user if the card has expired or is about to expire browser can also automatically suggest which card to use based on past usage patterns or restrictions from the merchant and also set a default or a favorite card or website and that can also be achieved it also allows you to build a feature called express checkout so this is where you let the customer buy on your website without requiring to log in first because that is what your final input is as soon as your customer buys make that experience very very seamless and then after the payment request UI has been completed once they have made the purchase can now then offer the opportunity for the user to create an account for future use so browser support it's there on Chrome Safari and Samsung internet browser so a quick recap of all the APIs that we look today so we look at a modern solution to handle scroll events we look at how we can keep log in simple for your users look at how make a website network responsive in addition to all already the responsibility that we have that how sharing can be made easy using the web share API and also tailor content dynamically based on device memory using the device memory API and finally you can buy seamlessly on the web using the payment request API so I'd like to add here that all of these APIs can be used progressively that is you don't have to wait for all browsers to support this can integrate them in your website in such a way that users who are on supported browsers can be upgraded to a new experience while those on older browsers will still remain on your old flow so on that note I'd just like to emphasize one last thing you should always develop features keeping your users in mind and just not for the sake of it so that's all I have for today thank you for your time any questions? as you said that there are many features which are related to the card details and some were nearby storing or creating or passwords and all so how secure you think like these browsers would be because as far as I know okay Chrome they probably have done all the security checks but if you come to UC browser or other browsers they might have to be very careful before saving our details to them because one XSS leads like one times you get an XSS means you can get everything around it your security is only as strong as a weakest link so can you like do you have any data around how secure this is on Chrome or at least any so I was like expecting that question to be honest so from security perspective the mentioned browser support that we mentioned using the can I use dot com website or the mdn support already looks for all these features when declaring the API is stable for using production so I think that's any other questions what's the behavior like for the web share api on desktop browsers the web share api on mobile I get that you'll get the need of share options right but on desktop browsers how does it behave you'll get a simple like popup feature like you get for payments and stuff get a popup and share your favorite browsers thank you soapnil that's a great talk so our next speaker has a working title of chief production crash here he also loves cats and playing video games so he also likes to know and improve the performance of pages so let's welcome pages to speak about the performance load time please give a big round of applause hi can everyone hear me yeah I guess you can so today I'm going to be speaking about some quick wins for page speed actually that's a talk that I've submitted but the real title of my talk is web performance for lazy people like me so let me just speak a bit about myself my name is Tejas I make terrible jokes you'll find a lot of them feel free to laugh and you know make me not feel so bad but I love closure and I love JavaScript I work at TwinType and that's my credentials over there so I've listed this talk as a maybe beginner to intermediate talk I think there's been a lot of talks over this year's JSFU and last year's about things like progressive web apps and stuff like that but I wanted to kind of get back to some of the basics of what you can do to make your app faster and in particular I was looking for a few of the quicker things that you can do without rewriting your entire application and maybe porting it from one language to the other some of the smaller things that we can actually do which will take us a long way so like most important or great talks I'm going to start with an important quote so if debugging is the process of removing software bugs then programming must be the process of putting them in this is from Edgar Dijkstra you might remember him if you studied computer science the Dijkstra algorithm the first thing is why should I care right so let me answer this in the context of what I do which is that we are sort of a software for a lot of India's most popular news sites you might not have heard of us but we power a lot of news sites behind the scenes and the digital news space is incredibly competitive and maybe even worse than a lot of industries bounce rates are incredibly high just imagine how you interact with news you're probably scrolling through your Facebook feed and you might see something important you might click on it and then you've forgotten all about it and you're on to the next thing and because we deal with a lot of news many of our readers are from very rural parts of the country we work with some customers whose main users are in like very rural parts of where the network connection is terrible and the devices that they're working with are also extremely yeah so most of you would have gotten bored by now so this is what that experience is for a lot of people where they kind of come to a big white screen and they don't see anything I held on that slide for about four seconds and I know that most of your heads you're like okay what's going on and something go wrong over here most of your users around 60% of your users will actually drop off if your page load is four seconds or above and this is the first reason why you should care about your page loads and unfortunately this is pretty brutal almost for every 150 or 200 milliseconds that it goes either way you'll see that you're that the number of people who stick around and actually consume your content changes and the second reason and this is the update that Google has pushed in July 2018 is that Google is now using your page load time as an indicator into the page rank algorithm for they're giving you benefits if your page speed is good and they're penalizing you if it takes a long time to load your page I don't know how many of you have noticed this new page this new area coming up in the Google page speed indicator site recently which uses the Chrome user report to actually tell you how fast or slow your page is on actual users this is not an estimate this is actual users and the time it took for them to experience your site and like a lot of things page speed also is probably governed by the Pareto principle which is otherwise known as the 80-20 rule you can probably do about 20% of the work and get about 80% of the benefits and after that it comes down to a lot of squeezing that last bit of performance out but we can actually do a lot of really quick things and before we go too much further I'm going to mention that a lot of these things are not in scope simply because they've been covered elsewhere or I think there's enough material out there on these and I'll put my slides up so if any of these look very interesting you can always look up the slides and figure out what to do here we're going to be covering making everything progressive web app with isomorphic rendering in part because this has already been covered and also and this is actually a true story we actually spent a lot of time converting our entire site to progressive web app but we still didn't get like that sub second page load that we really wanted so let me introduce you to the seven step program for a fast page load so my first step is to build a chart here's what I made earlier right and please please don't just blindly copy my browser compatibility table what you really want to do is segment your browsers according to how much you really care about them and how much effort you're willing to put in so for me it was the good in which I'm optimizing for speed maybe the last five chromes firefox edge safari vivaldi these are the browsers I really really care about and in these I'm going to spend a lot of time benchmarking my performance and stuff like that the bad which is I want it to work but it's kind of slow as the previous speaker mentioned you see browsers up there because it's a pretty big browser in India but we care a lot about it to work but we're okay if it's a little bit slow and the last category is browsers that you just don't care right I'm not going to spend any time trying to figure out how to get this to work on these older browsers obviously this should be very much influenced by your actual business I'm not going to make a blanket statement that ie6 is not worth covering or anything like that look at your analytics, look at your your actual users and figure out what they are really using and be ruthless in trying to figure out what you should support and I'll give a very simple example which is like simple as css grid or flexbox which is covered by a lot of browsers but maybe not covered by a lot of the older ones your development team can really choose about do I want to spend about 3x the amount of time writing css to handle these old browsers or do I want to maybe cover this smaller set and that's something to continuously keep in mind that supporting older devices costs you actual money both in terms of coding for the lowest common denominator as your dev effort it's a decision you should be really pragmatic about and my second and most important step in this program is to profile which leads me to step number 3 profile and for those in the back that's profile and just in case the people on the balcony missed it profile step 6 is also well no it's not profile it's make a small then profile because that's the most important step over here why why should you actually profile your stuff there's really two reasons so the first is because the speaker of today's talk that's me likes to make a lot of claims that you should not believe right there are no silver bullets out there because to quote Leo Tolstoy all fast pages are alike every slow page in its own way my problems are not your problems right I've optimized for a certain set of constraints you may not care about that you may have a totally different target audience so please profile the most important thing the next question that we want to answer is what are you going to profile so unfortunately there are a lot of things that you actually can profile and sometimes these are very orthogonal concerns in order to optimize for one of these you may end up sacrificing the other one and it's very very unfortunate but but these are again decisions that you'll need to make in a very practical manner for your business as an example you might care about the first time page load first the subsequent load which is jumping from one page to another or even coming back a few days later to a different page on your site and again this is something that you know will be very business and domain contextual so for example we had a high bounce rate so we care a lot about the first time page load and the second time is you know it's icing time to first contentful paint and time to interactive and what's above the fold the entire page is completely loaded so you're going to hear this a lot which is above the fold so this is what the fold is typically if you look at on your mobile device whatever is visible on the first screen and maybe I'd argue maybe 20 or 30 percent below the bottom of that that is what everyone refers to as the fold so now that we know what we're going to profile and ideally you should have targets which is I want my first load to be maybe under a second and subsequent load to be under maybe you know half a second how right so most people don't realize this but the best tools to actually profile your site are in the browser itself in this example what I've actually done is I've clicked on more tools and remote devices if you're building for an audience that's primarily on a mobile device your best practice should be to actually profile on that device it's not a thing a lot of people know but just with a simple usb cable you can turn your you can attach your chrome to chrome running inside android and you can do a very similar thing between safari and ios this panel actually will show you a lot of details which I won't get into right this is actually a picture of me sitting in an area which has terrible internet connection trying to figure out why things are slow the next tool I wanted to show off is something that's known as google lighthouse just raise your hand if anyone who's seen this well okay that's about half the audience so google lighthouse I think it showed up maybe last year the year just a bit before that and this actually shows up in the audit tab in google this is actually one of the most powerful tools for debugging your actual page speed and they have releases of this almost every single month and it just gets better and better you can actually run this outside of chrome as well and we're going to maybe talk about that in a bit but this actually goes through a lot against an actual browser and it tells you after simulating your network and it tells you how long things took and the last question you want to ask is well how to profile and this is one tool that I found very very useful this is called a webpack visual bundle analyzer I think yeah webpack bundle visualizer sorry so what this does is it loads up your webpack bundle and it kind of tells you where your different hotspots are right so in my example I can see that my app.js is 350k out of which load ash was 48 kilobytes this kind of brings me to a myth in today's community that serving large assets with gzip is fine it's really not compression reduces network but not your processing and India is actually in a very unique space in this right because I think whereas maybe various other countries the adoption of higher end smartphones has been a lot higher in India the network especially in like you know for example the suburb the study rural area the network has improved thanks to a lot of work by the various telecom companies but people are still not buying high end phones so you actually do have a huge amount of people who have decent ish network but terrible low end smartphones which actually brings me to sometimes the best javascript is done at all a lot of people here do react and everyone thinks about react to the front end finding you know well rendering onto a container but a fun read that I had is the BBC actually uses react only for server side rendering they completely do server side rendering without any client side rendering at all just because they felt like their site didn't demand that amount of dynamicism but even though they enjoyed the framework so enough kind of you know being a bit philosophical let's get on to what's the actual quick wins and what this talk is about so the first thing I'm going to actually say is you can actually tell the browser what's important in your site most sites or most pages rather will look some variation of this you'll open your HTML and you'll have some important CSS it will have maybe some images that are below the fold and then a bloated third party javascript that you know every time it loads your users are waiting forever and then finally your app.js or whatever whatever you actually need for interactivity your browser is smart you can actually make it a lot smarter this actually brings me to the first tip that you can do which is which is link headers what HTTP spec and also you can embed this in your DOM allows you to do is allows you to tell your browser that certain resources are important so in the first line I say that app.js please reload it what the browser does in this case is it makes the network request to download this javascript ahead of time as soon as it sees this header in fact there's a very good chance that it will start to fetch the the resource this means that by the time you'll actually load the you actually include the javascript on your page it'll already probably be in memory or disk cache or whatever your browser is holding it for you and doesn't need to wait for network at that point you can actually do this with JSON with like fetch data as well so for example JSON you can actually send that off to preload as well and one thing that's sort of interesting that not many people know is that if your CDN supports it they'll actually do an HTTP to push for this so people who are not familiar with HTTP to push what that means is when I'm asking for this page even before you ask me for this javascript the CDN will just give it to you again this is maybe great if you're trying to optimize for the first page load but of course carries the risk that on the second page load you might get a duplicate thing so try to benchmark and see if this is actually worth it but in our experience we found this is something that's been really great the next tip I'm going to come to is to inline your CSS especially the ones that's important so true story I think I spent at least 5 years trying to figure out how to do critical CSS in the right way I've tried passing it through phantom.js and like you know every single method that is there but one day just an experiment what I tried was I just took my entire CSS and I just pushed it into the into the head right I didn't even chunk it by page I just put the entire CSS over there it turns out it actually worked because anyway I was downloading the entire CSS and from there you could just improve on it this does of course improve your first time page load so again you're duplicating it on every single page so your subsequent loads may suffer a bit but you have other ways of doing that including optimizing that including with PWA or PJAX or any other way of loading your page and not duplicating it just from a security point of view please remember to sign your CSS but in general and coming back to the principle of you know not making things work so much compressing your CSS is like it's probably the best thing you can do to actually reduce things a lot and I know a problem that I've always had is we'll first start by writing an application and it will be great and performant and whatever but then as requirements change people will just forget to delete the old code and this is a problem that I've seen many many people have across different projects and CSS in particular because there's no real way to figure out if this block is unused we'll just sit around forever and just load things up so what we found here was CSS modules is actually a great way to kind of slowly fix this for us right and I'm not talking about CSS in JS over here but even though I mean they are sort of similar but what I'm talking about is over here you can see in the header.js I'm importing a style and then I'm using that style in this component right so in essence if I stop using this component this CSS goes away from my CSS bundle right which just means that I can use my regular webpack hey this class is not being used you really want to import it as a way of also deleting old CSS and another hidden feature that a lot of people don't know in Chrome is that Chrome has added a coverage tab I think this is about three months ago so Chrome has a coverage tab which actually tells you what percentage of your CSS and JavaScript is actually being used so you can see over there in the circle bit this is actually pretty bad on one of my sites it's about 64% unused I think our internal target is to get it down to about 30% then we'll know that you know this is not worth optimizing anymore at this point and the most important of all the CSS that sort of comes through I would argue is the font this is I think one place that everyone kind of falters when building their site and for those fonts are great because they really help push the branding of your site but unfortunately when you don't deal with them correctly they end up being pretty slow so the first thing I wanted to say is please choose your FOIT or FOUT strategy yeah please choose your FOUT or FOIT strategy very carefully so what does that mean I'm going to explain it right FOIT is a flash of invisible text and FOUT is a flash of unstyled text so invisible versus unstyled that's the difference speaking in English what that means is while your font is loading do you want all the text to be invisible and then the font suddenly shows up or do you want to see a system font and then everything turns into that into the font that you are trying to load that's the two strategies and use font display to choose between these two behaviors font display will help you ensure that you choose these two strategies but actually with this comes a secondary problem that may not be really obvious by default what browsers do is every single font that's loaded will cause a re-render of your page so which means if you're loading four fonts you have the initial render and then four renders after that and by four fonts it's probably two fonts with two different weights a normal and a bold which causes four renders on your page and typically this will look like an earthquake I don't know if you have seen that but your screen is kind of moving a little bit left and right as the fonts get loaded one at a time there's actually a JavaScript library which will help you on this with the font face observer what you do is you say give me a callback when all of my fonts are done or you know for example say two fonts are loaded you have different options like that and you can actually control this with CSS so you would have a class which applies all your fonts at once which forces the browser at least to do a single re-render as opposed to four re-renders so let's come to the most heaviest part of your site and I know that this has been covered including in the talk just before this but images images are actually the single largest contributor to weight about 55% of your page is probably images so we had a great talk by Rahul from ImageKit yesterday but yes definitely use a service such as Imgics, ImageKit, Tumblr Cloudflare, Polish you know any of these to make sure that you're serving the right image for the right device and of course please use FB which is all great but I wanted to call out the most probably the most important mistake that a lot of people who are not familiar with HTML5 do is please do not choose your image in JavaScript it's going to be ridiculously slow and it's just not worth it your image tag has long supported support for this is pretty good has long supported a field called source set so what I'm doing over here is I'm saying this image the source is large image.jpeg and the source set is and I'm giving a list of images along with the sizes that they correspond to so small.jpeg is 200 pixels, medium.jpeg is 400 pixels and I think most people stop at this but please remember to put the third parameter which goes along with this so the third parameter which is sizes helps your browser figure out which size it should actually ask for so what the sizes in my case says is that if the minimum width is 1024 pixels that's what I call a desktop then this image will occupy 25% of my browser screen that's the VW port width and on a mobile device it's going to be a big image it takes 100% so what your browser actually does is says I'm on a MacBook 13 inch that's 1440 and I'm going to take 25% of that that's whatever number it is and I'm going to pick the image that is slightly bigger than that and maybe depending on my network I may choose a smaller one but the browser handles that for you and this is actually very very well supported as long as all these images are in the same aspect ratio if you're using a different aspect ratio there's another there's another tool for this called the picture tag which you can look up and of course lazy load your images and with intersection observer if you can I'm calling out with the caveat over here lazy load whatever is below the fold lazy load what's above the fold you're again back to things being slow I'm going to go through this quickly because I know the previous speaker did a great job of covering the picture but over here I have an image it has a source which is just an empty one cross one pixel just hard put it on the page and it has a data source which is the actual image I'm going to create an intersection observer and say that start a trigger my callback when it comes 100 pixels below the bottom of the screen I'm going to observe with all of my on every image that has a data source and for each online 15 you'll see that I just set the target source to the data now this is really great because I'm able to use intersection observer which is a technology and it and you can use it as a polyfill on older browsers polyfills are the greatest because they let you use tomorrow's technology today and people who are not familiar this is what a polyfill is right over here I'm just trying to do new promise something or the other and promise is not supported in this browser I'm sure everyone knows the solution to this right I'm going to import promise polyfill and just for the heck of it from the previous example I'm going to include babel and fetch and maybe another few polyfills the tradeoff is that doing this blindly will probably end up with something like this where you can see over here babel polyfill is actually sitting in about 20 20% of my of my bundle that's simply not ideal because I don't want to make my faster browser slow just because some old browser out there doesn't support promises which brings me to my next hack which is a conditional right so over here you can see on line 2 I actually check if fetch is defined and window.promises is defined and if it is I include the entire polyfill else I just load app. and then I later load app.js I'm sure there's a webpack plugin which will do this for you and much faster but it's frankly just like a few lines of code so we weren't too bothered with it this actually does support our overall goal so this does support our overall goal which is that it's really fast and has no performance penalty on my last five devices and I think you see browser doesn't support promises and it'll load it in fact every time you load a library you should check your bundle size not just for polyfill and I keep having this debate I think with different people on my team who tell me stuff like hey you know but when I just added the memory of Chrome just went up sort of by maybe 15 or 16 MB and should you care about it so to this my response is that 16 MB maybe on the server is not that big a deal 16 MB of RAM across 225 thousand concurrent users you're wasting about three and a half terabytes of RAM globally so my argument is it's morally wrong for us to willingly waste RAM speaking of libraries let's play a game when I say it's 2018 you say we don't need it anymore okay so yeah so I'm going to start with it's 2018 and yep so yeah so let me kind of get started and I know a lot of you will know about this already which is underscore dot map array and with some function you can just rewrite that as array dot map I think you'll kind of see in all of these discussions or these two or three libraries that I'm going to cover I'm not saying bad things about these libraries at all I don't think web development would have been even possible without low-dash in the last I don't know like a few years but browsers have slowly picked up and brought this functionality in-house which makes a lot of use cases for these libraries more esoteric or for more obscure browsers that don't support this anymore so with that in mind let's don't do this right don't necessarily even if you do need to use one library from low-dash or say one function like for example omit don't just import underscore from low-dash the reason is it actually pulls in the entire library for you which can be quite huge instead do this you can use a totally different tiny library such as object.omit if you really want to use low-dash you can import omit from low-dash slash omit which is right now my preferred way of doing it but in webpack 4 doing import early omit from low-dash will actually reduce and import only that one function thanks to webpack for tree-shaking abilities I couldn't get the last one to work myself so I'm kind of sticking with the third one but frankly removing global imports of the entire low-dash library actually brought down our bundle size by about think about 30-40 kb and the next thing or maybe a little bit more anyway so the next library I want to cover is jQuery so I'm going to say it's 2018 and you guys will say yeah that's right so jQuery I'm going to be a bit more nuanced because jQuery everyone knows it does a lot of things it's really powerful library that's been around for a long time but what I've found in a lot of my own web apps was that what would happen is I would have most of my app react or view or whatever else the framework is today and I just do react jQuery for a few small things like for example fetching some JSON or maybe looking up a DOM an element in the DOM and binding something to it or rendering react into it it turns out you can actually get away without jQuery at all for some of these simpler use cases so here's an example bit of code with jQuery I'm querying a link and when I click on it I'm going to add a CSS class and I'm going to hide it over 500 milliseconds and I'm going to do some $ I mean yeah get JSON and the equivalent in not jQuery is very similar I use document.query selector or document.query selector all to fetch my items I'm just going to do .classlist.add to add my class and I'm going to use CSS transition to handle the 500 millisecond shrinking and of course we have fetch instead of the JSON APIs and once again I'm going to caveat this I know that the huge wealth of libraries that are out there that are built on jQuery and I'm not going to pretend as if you know you can get rid of all of them overnight but it is still a starting point for you to think and jQuery came in at a point where browser support for query selector and query selector all was pretty pathetic and you know everyone would be implementing in a certain way but as we moved on to 2018 things have gotten a lot better so the last library I'm going to cover but maybe not spend any time on it is moment I know I love moment a lot it's great for date manipulations or for anything to do with times and dates but I found that if I'm only using something like to print out the current date you can actually do this with a lot smaller libraries as well the reason for this moment actually comes pre bundled with a bunch of local so if you just import moment and don't do anything to prevent this it will come into like Dutch support in German and like every language almost that you can think of so just in conclusion some final thoughts although we were a PWA that wasn't nearly enough to get us to a sub-second page load in fact you'll probably find that progressive web apps are all optimized for subsequent page loads and do very little for your first time page using a lot of these tricks as well as some of the PWA stuff we brought our first contentful paint down from about 350 milliseconds to 90% and saw somewhere between 35% and a 50% increase in traffic and this should be a continuous journey I've seen a lot of teams thinking about a birthday where we'll make everything slow for like a month and then one day we'll sort of clean it up that's never a great idea because birthday never shows up every day should be performance day the last thing I'll say is the easiest way to get that to work is to measure your important metrics as part of CI Lighthouse is now available as an npm module and can launch Chrome in headless mode and generate your response as a JSON response it's very easy to run this every minute or every hour or whatever your capabilities are and in fact there are even services out there which will do this for you there's one called Trio.sh which will just run Lighthouse against your site every minute and tell you what your speed is and alert you when things are bad in closing I wanted to link to some great resources that I found the first is the Chrome developer podcast called HDP203 non-authoritative content this one's really great they publish about a video every three days and every single video I'm like wow I didn't know about this I think last week they did a great video on some of the new browser features which actually let you measure performance in the browser so that's navigator.performance and it has a great amount of stuff on that I of course showed you webpack visualizer and the last thing I wanted to show you is or will not show but is cssstats.com in which you can actually go through your site and tell you these are how many fonts you've used these are how many sizes you've used and give you a bunch of stats and as I have three seconds left on the clock I'm done yeah thank you before asking questions I just have a couple of announcements so there is a BOF on how to travel the world as a remote developer like freelancing stuff then there are two methods like designing for voice voice and VR interfaces please take the feedback forms and fill it like every feedback forms at the end of this row and then there is a break up to 420 you can continue questions yeah so if there's any questions raise your hand or however else they handle it I'm not sure hey I'm here straight wait where my left or my right ah hi yeah hello so I just wanted to know how do you do how it's above the fold rendering then so above the fold above the fold yeah so what I understand is so if a user opens a website on his laptop per se so the screen height which he which he's currently seeing that is being rendered server side and the rest of it is rendered client side right yes so I just wanted to know how is it how is this done where is the logic being written for this okay so I think this kind of comes to well really what is the responsive design right obviously there are two approaches to this one is if if you're relying on your CDN or something to do a lot of HTTP caching then then what we like to do is to render to give the same HTML back to both the mobile and the desktop and then render it in csa I mean and render it with query selectors and whatever and you can do a different approach if you don't rely on caching very much but to answer your specific question I think at least what we do is the server side kind of will render whatever is above the fold for both the mobile and desktop I think at least we've been kind of lucky in that the number of resources is drastically different like you might be able to see like five images on mobile versus say 12 or 17 on the desktop we found that the penalty for that hasn't been too high though even though mobile only is using five or six of those 17 resources I saw over here, nice talk thank you what I wanted to know is we always talk about that lazy load your images but then there are sometimes pages where images are like a placeholder at least otherwise I think we'll start coming up I wanted what is the parallax style I want my styles to scroll up based where I am on the browser but if I have not loaded the image that space will be empty how to handle that part right so that's why I think the previous talk also covered this pretty well which is that I think the earlier way of doing this was you would use a lot of like for example jQuery which would listen on scroll width which would then calculate for example dot get bounding rectangle typically to figure out which of your images are coming into view that actually was really really slow the reason being that when you start debugging with the Chrome profiler you'll see something a lot called reflows which is what it's actually doing when the browser is actually trying to figure out what's on the screen and kind of reshape everything even calling trying to figure out the position of an image with dot get bounding rectangle which actually causes a reflow and that was actually one of the reasons why this would be really really slow if you look at the intersection observer API I'm just going to go back to that specific slide anyway if you look at the intersection observer API it actually gives you a lot of ways to very easily deal with this right so you can actually say that if you see line number 6 it actually tells you that 300 pixels below my screen is when you should start loading so that should give you a sufficient buffer one and two is because intersection observer itself comes pre bundled with your browser there's no question of any external library loading before this loads there's two thing I'm not sure about the support of this yet intersection observer so it's in my screen it's actually reasonably well supported I believe Safari I mean mobile Safari and the desktop Safari also has support you see browser is the only one that if I remember you need to worry about which is IE edge supports intersection observer if I'm not mistaken and I think I need to check the chart on a counter question on that when we say lazy load what happens is that there are now if you see browsers your browser doesn't load your page from the top of it so if a user has scrolled so say let's say 50% of your screen refreshes the page actually the page loads at the 50% of them wasn't that lazy load would fail at those situations now you are saying you are looking at the middle of the page so for example I'm scrolling up a page where let's say my page was like three times the screen size I've scrolled the second half of the page when I refresh the page what the browser automatically does it for me it loads it loads from there instead of loading it from the start of the page it loads me from the middle of the page where I was last scrolled was so what an lazy load will not allow me to know what is going to be load preloaded well let me think about that what I will say is that intersection of the browser I can see is very very light so frankly even if you are at 50% of the page or whatever intersection of the browser will figure out pretty instantly that you are at that 50% and will immediately figure the callbacks for those images and if you see the way intersection of the browser actually works it says 20 pixels above the page below that's my example over here so it won't load all the images that it took for you to get to that page so whatever is on the first half of the page it won't load that it will just load whatever is in the second half I'm not sure if it solves that specific use case which is somehow you loaded the page at the 50% mark yes if you don't lazy load the image it for that microbench market might be a bit faster but I think overall what we've seen including on UC browser is that it's a pretty seamless experience especially if you polyfill this okay I guess I'm out of time right thanks everyone so finally the talk that we've all been here for waited for two full days so I don't think the speaker needs much introduction but some things that you probably don't know about him he's finished his visit to the Taj Mahal like everyone else who comes to this country likes Bollywood this is his favorite movie in Bollywood and also he's dropped a production database so Ben this is the stage is yours sorry you hear me okay this is Ben's MacBook Pro I should probably log in again huh so yeah this is my first trip to India I'm having a lot of fun here the very first thing that I've experienced in India was the driving which is awesome it's really exciting I even got an app for my phone so I could feel like I took part which hold on let me turn up the volume and I'll put it next to the mic here so we can hear it Lauren Honking incidentally in the US that means you're angry but here it apparently just means I have a car right so it's pretty good so this is a talk called complex features made easy I'll put that in quotes with RCS I know that a lot of you here probably aren't angular developers how many people here have used or heard of RCS before how about used RCS I said heard of so you might feel a little bit during this talk like I feel in traffic here in India I'm gonna go through some features I'm gonna go through very quickly my expectation is not that everyone's gonna walk out of here going oh I know how to implement everything just like Ben did with RCS my intention here is that you get excited about RCS and its features and see some of the more powerful things you can do with it so again everything I'm gonna show you is easy if you know RCS as he said I am Ben Lesh I am an engineer at Google I am the RCS project lead and I'm also on the angular team at Google so what is RCS for those of you that did not raise your hands before don't know what it is and maybe this might help some of you that already think you know what it is I'm gonna give you a very quick primer not gonna go in a lot of depth there's a lot of other ways that a lot of other people have done that before including myself but observables I'm gonna mention those a lot observables are the primary thing the main focus of RCS observables are a primitive type and what they do is they give you zero to many values and they push those values to over time they are cancelable in that you can tell it to stop sending you values and they are lazy meaning they don't do anything until you subscribe to them so they are lazy in a way that a function is lazy like if you have a function the function doesn't do anything until you call it observables do not do anything until you subscribe so this is what subscribing to an observable looks like you have an observable you call subscribe on it and then you generally give it one call back that says oh every time this next a value at me it emits a value I want to call this function and do something with it in this case I'm just logging there are many ways to call subscribe you can also provide a secondary argument for if there is an error and this means the observable is going to stop with an error okay and finally this is a complete so this is just saying oh the observable is done sending you values and it was done successfully don't worry about it but generally speaking most people only ever call it with the one honestly sometimes you can also call it with an observer which is just an object with these three methods on it they are in complete one interesting thing about this is the cancellation aspect of it so observables give you this really ergonomic way to try to cancel and say I don't want you to send me these values anymore I want you to stop and what it is is it returns a subscription from the subscribe call and later on you can call unsubscribe and that will that notifies the producer inside of that observable to stop sending values through the observable so observables push values zero values or an infinite number of values over like an immediate amount of time or any amount of time and they also will either complete successfully then notify you of that or they'll notify you that there's been an error and stop in any case it'll tear down any resource that's underneath the hood but that's what observables are about and the important part about this for the talk today is observables are really collections of pushed events or values so anything that you can imagine an array or a web socket or whatever can be now treated as a collection in this shape of an observable and collections are very interesting because then you get into things like category theory and whatever and monads and end of bunkers and yada yada those are horrible words that don't really explain anything that well to anybody I'm sorry to any mathematicians that think they're wonderful words and the crowd you can beat me up later but really what that means collections of anything they can be filtered which means narrowed down to smaller collections of the same type or transformed into new collections of the same type or they can be joined with other collections into a new collection or they can be split apart into different collections there's just a lots of different things they're flattened it would be like if you have an array of arrays you can make it just into an array right so these are various things you can do with collections and it's not a property of an array it's not a property of observables it's not a property of having a collection of things you have a collection of apples you can make a collection of apple pies it's just a property of collections so the most common collection that we deal with every day is arrays so we have these arrays and with an array I can say here's my array of numbers I'm going to filter it down to all the numbers that are greater than four I'm going to double those numbers and then this reduce down here is going to summit together so that's kind of reducing it down into a single value and I end up with 52 I can do exactly the same thing with Rx you'll notice that I'm not dot chaining what I call dot chaining here dot filter dot map dot reduce in Rx6 and above we're doing pipe changing it's the exact same concept it's just functional there's a lot of advantages to that I'm not going to get into that too much here but what you need to know is it takes the source observable and then passes it to the filter and then to reduce and so on but we have the same exact sort of operations with observable that we have with array but observables have a little bit more than that because arrays you can go over synchronously but they're not asynchronous observables can do asynchronous things which means there's this temporal element this element of time and because there's an element of time we can do things like debounce them or throttle them or you can say combine the latest value of time running and when they arrived in time here's an example of something you might do with observables this is a basic drag and drop so here everything that you see with a dollar sign in this case that's a thing I lovingly dubbed finish notation after my friend Andre Steltz who lives in Finland who kind of started popularizing this but every variable you see with a dollar sign is an observable and what we've got here is I'm making an observable of drag and drops from an observable of mouse downs every time there's a mouse down I want to map it to an observable of mouse movements and I want to take all of those mouse movements until the observable of mouse ups emits one value and I know that's how this works because I know it exhaust map and take until do these are just part of RxJS here's another thing so just exhaust map just to kind of help see what it does we're actually going to this would be a button where you say oh I don't want someone to hit the save button too many times and accidentally post data more than once and so people disable it or whatever this is another way you could disable it you could just say okay so every time there's a save click I'm going to map it into my post which is an observable and then I'm going to use exhaust map on it what exhaust map says is wait for that observable to finish before you allow any other map before you allow it to map to any other observable and subscribe to that so it's going to map to that one wait for it to be done before it allows another one to go through the save button so throttled auto suggest so this is another one called auto complete or look ahead search or something like that this is a kind of idiomatic example in Rx there's a lot of demos and tutorials that show this but what you have is an observable of text input so these are changes to like a text box on your screen and we're saying we want to debounce those by 500 milliseconds which means if someone changes it then wait a full 500 milliseconds before you allow it to pass if they change it again before that 500 milliseconds drop the previous value, save the current value wait a full 500 milliseconds before it gets through so it's just a way of preventing you from spamming the server with requests and then after that we're going to switch map that to our get and switch map is a little different in that if that get takes a long time and before it responds and another search is requested it's going to unsubscribe that one and subscribe to the new one that it maps to so it's the opposite of exhaust map but the point of all this is composing asynchronous things is really what RxJS is good at it's the wheelhouse and that's kind of what we want to get into here RxJS just so all of you know can be used anywhere I worked at Netflix prior to Google at Netflix I did not use Angular I'm on the Angular team now at Google of course I use Angular at Netflix I used RxJS with code I use RxJS and React and I use RxJS with Ember I can tell you actually anywhere that can run JavaScript can run RxJS so again this is going to be an Angular app that I'm showing I'm on the Angular team I think I'd be doing my team of this service if I showed you a React app right but I'm going to be updating features in an Angular app and I'll try to give some context as far as React because I know there's some React developers here as well remember that I said before observables require subscription in Angular we've got a really nice feature called pipe async so you're going to see that a little bit what this does is it's part of the template and it says hey when this component mounts I want you to subscribe to that observable and every value it necks out I want you to place in the template right here just bind it out and then when the component unmounts or is destroyed it's going to unsubscribe for you automatically so you don't have to manage that subscription so it's a very nice feature for reactive programming as far as Angular goes and if you have something like this where there's like an if statement around it so based on some boolean it's going to show or hide or remove this part of the template it'll actually subscribe when it's shown and unsubscribe when it's hidden it'll do all of that for you so it's a nice feature in Angular if you ever want to see a talk on Angular or RCS basics because I didn't really get into it in depth here I did a talk already you can watch a much chubbier version of me give the talk I'm big in that video and it goes into more detail about what RCS does internally so here's the app that we're going to update it's just this randomly generated news data and just this dumb news feed app and all it does right now is you load it up it shows you the news if you wanted to see the news again you'd have to refresh it there's not even really a refresh button you just have to refresh the web page so one of the features we want to add is like an auto refresh so like on some interval have the data refresh itself for you so you don't have to do that and then the other one I want to add that's more exciting is drag down to reload so if any of you have ever used Twitter before and you're on and you have to drag down in order to reload you drag far enough then if you don't drag far enough and you let go then it goes back up to the top but if you drag far enough it goes and when the spinner goes away and animates back whenever you're done loading there's lots of interfaces like that that's what we're going to add to this so the basic structure of our existing app there's really only two pieces there's a news feed service which is just a class that has an observable line that gets data for us and we have a latest news component which is what's displaying the data so the latest news component looks like this I've got just to kind of focus on I don't need all the imports up there what I've got here is I've got this property news dollar sign that's an observable of the actual news and you'll see it's an observable of arrays of news objects that's coming in and then I'm also injecting the news feed service down here so Angular has dependency injection it's going to provide this news feed service as a as a private property and the news feed service is actually what's providing the news observable so our news observable is actually coming from the service at this point here's what the template looks like so you'll see up there kind of like in the fourth line down I've got that pipe async and I'm pipe asing out that news property so that's going to get that news array out and then I'm using ng4 to kind of loop over that array of news whenever it comes out and just bind it out the title and you know whatever the string is and the time stamp and those sorts of things so the news feed service right now looks like this it's I'm providing the HTTP client and all I've got in here is just a property with an observable on it now that alone is kind of weird to people who are used to promises promises you generally have a method that returns a promise the reason you have a method that returns a promise is because what you really wanted is a lazy promise and promises are eager they are not lazy so you have to wrap them in a method and return them in observables case they don't do anything until we subscribe so wrapping it in a function is just pointless it's not going to do anything for us in this case so this is an observable that when you subscribe to it will perform a get to get our news feed it will get the json out of it it's got a catch error that just kind of logs the error to the console and forgets it and I'm also sharing it so if I have multiple subscribers to this it shares the one HTTP request amongst multiple subscribers until that HTTP request is done so we don't spam the server a whole bunch but again this is just a basic feed that's all we needed to create this basic feed was that bit of code so far let's add the update interval feature because that's the easiest one but it is going to require us to refactor some things so the first thing that we're going to need to refactor is this is the news feed service so the news feed service looked like this before we just had a property on it that was our observable of news arrays right and I'm actually going to rename that to load news it's the same thing I just renamed it to load news and then I'm going to add another property that's a behavior subject called refresh and the point of this is every time I next into this this behavior subject behavior subject is both an observer and an observable so you can subscribe to it like an observable and when you next a value into it I'm going to map that to load news up above and that becomes my new news dollar sign so that news dollar sign is still providing the data that I need for my view but it's coming from every time I next into this behavior subject and one of the properties of behavior subject is the first time you subscribe to it it gives you whatever the previous value was in this case I'm initializing it with null because I don't really care what the value is but this will get us to where we were before already but just now there's a way to trigger it to reload news data and then we've got to go and we have to update our latest news component so I'm going to add a refresh timer so this timer function here comes from rxjs and what this says is have a timer that starts at 0 milliseconds and then goes once every 30 seconds so every 30,000 milliseconds and what I want to do is have that trigger the reload of the news somehow so how do we do that well we know that we want the news to be the property like the news feed news to be that news property we're going to have to add something that takes that refresh timer and next into our refresh behavior subject so I'm going to add an ng on init if you are a react user this is roughly the equivalent of component did mount and inside of there I'm going to subscribe to my refresh timer and pass to it that behavior subject because it's got the same shape it's an observer so it's got a next method on it and every time the refresh timer emits it's going to call next on that refresh which loops back into our news feed service and triggers news to emit which we've got on here as a property to our view the other thing we need to do is we need to actually track the subscription so I'm adding since I said this dot subscription equals here I need to add the subscription otherwise type script will be unhappy and then finally I need to add this ng on destroy so this is the this is the react equivalent of component will unmount right so this is saying so whenever this goes to unmount or destroy I want to call unsubscribe in the subscription so that will stop that interval from ticking over and over and over again you don't want to leave that running in the background it's a memory leak so again just to kind of go over where the subscription part is I have a whole slide specifically for this because this is a very common pattern when you need to subscribe to something if this were react it would look basically the same only it would be component did mount and component will unmount instead of on init and on destroy pretty much identical so that's it just to recap what we did so far and then I'm going to show it working we used a behavior subject in our news feed service so we kind of refactored our news feed service to reactively trigger that reload and then we also we also used a timer in order like on our component and have that you have that timer next into the refresh that behavior subject that we put on our service and then we manage our subscription and on init and on destroy and here's it working now I upgraded it to three seconds so you can see it otherwise you'd have to wait for half a minute that would be really a boring talk in my part I could dance or something so it's updating now that's what we wanted so just a few things you notice we didn't touch the template at all right the template we just we renamed some things that's probably why we had to do that but mostly we just kind of did the small refactor and we kind of worked backwards and that's a little hard to see in this case because it was it was a small addition but we we kind of worked backwards through what we needed starting at the time let's work on our pull down to reload feature and this one's much more exciting because it's much more complicated so here's why it's complicated you have to start when user touch starts and you have to accommodate for the fact that user could touch like twice right you also have to track their downward pull with some sort of icon if they release before they get down to where the reload starts you need to animate it back on its own so there's an animation you have to deal with if you get it down to where the reload starts you need to trigger a reload so then you have to deal with whenever the HTTP starts and ends and then you also have to animate it back whenever it's done so there's there's a lot going on here there's three different user provided events touch start touch move and touch end you have to worry about when the Ajax request starts and when it completes and you also have to worry about animations so I'm going to add a touch drag to load component the whole purpose of this component is it's going to control that icon that you're going to see on the screen and it's also going to handle dealing with all the user interactions as well as dispatching events to whatever parent component owns it so the parent component knows oh I should refresh data or whatever I'm going to do when it gets dragged it also needs to have some sort of mechanism to start spinning if while during the loads while the loads going on so we need to refactor our latest news component and that means we have to include our touch to drag touch drag to load component in the template and we also need to wire up the event to next into that refresh on our on our newsfeed service here's the basic class back in class for our touch drag to load component what I've done here is I have this refresh event so in Angular when you define an event you say it has this output you give it an event emitter and that means that in the template someone can bind to refresh and pass a method to it that can be called the template looks like this this is just HTML right now I'm not doing anything dynamic with Angular this is so I've got an outer div here that positions it left to right 50% and then I've got an inner div that's going to be responsible for translating the icon down up and down it's got an offset of negative 35 pixels because I've got a 70 pixel diameter circle that I'm going to use I'm going to use two circles one kind of offset inside of the other one and then my SVG tag here you'll notice I've got transform transform rotate zero degrees that seems pointless I have it here because that's what I use to update the rotation when it's loading and with my latest news component dot HTML now what I need to do is I just need to add my touch drag to refresh component and you see I'm wiring up that refresh event that output that I showed you earlier to just next on that refresh behavior subject now it's actually all wired up I don't need to do anything else so as soon as a refresh event comes out of my new component it's going to call next on my refresh behavior subject we know triggers the news reload and we'll update our view but right now we haven't wired any of that up we just put it on the screen and we can see it's up there that's my icon it's just hanging out up there at the top not doing anything else but we know it's working so let's go back and change our touch drag to load components template a bit to make it dynamic so I'm going to have transform the style of that second div there to move it up and down that's going to I'm going to have an observable called transform positions that I'm going to pipe out with the pipe async there I'm going to bind to it and I'm also going to bind to transform rotates on the second one to deal with the rotation part of it and when we go and we actually look at the component now I put in the minimal thing I need to do just to get it to work and that is basically I just took the text right out of that style tag and I'm saying I have an observable of that text right in both cases and this is the minimal thing I need to do to just have it render but I really like to deal with numbers and not strings so I'm going to make my transform positions actually derive from another one called positions that's just an observable of zero and then I map it and I'm just using string templates here to get the same sort of string out of that so now if I change zero to something else it'll change the rotation or the position rather I do the same thing for rotation so if I change you know that zero on rotates something else it's going to change the rotation of the icon it still looks exactly the same I didn't do anything but again I'm working my way backwards I'm just providing so now I have observables controlling these things at least but we need to make these observables come from something more interesting so we've got a slight tweak to this to move the marker off screen I told you the diameter of the circle is 70 so we're going to add negatives that we're going to subtract 70 from the position so it moves off the screen because we don't want to live up there the whole time we want it to just come down when you pull and now let's make touch drags actually affect the position so remember before I showed you drag and drop with the mouse down mouse we're going to use this exact same pattern only with touch and it looks like this we're saying from event which is a method from Rx so anytime there's a document touch start make that we have this observable of touch starts same for touch moves and touch end and now I'm going to say for every touch start I want to map into touch movements and take those until the touch ends so now I basically have this observable of touch movements touch movement event objects really and I can just include that in my component class like so and what I want to do is I want to make my positions actually derive from touch drag so what I can do is I can just do that I can just say okay there we're going to map y minus 70 there's a problem with this because that is an observable of touch events right and I can't I can't subtract a touch event or 70 from a touch event that doesn't make any sense that's not a number right so I need to get numbers out of that and I can do that with a simple mapping up here where I'm saying okay we'll just take the current touch y position and subtract the start y position from it so I get like an offset so now I have this observable of numbers for the offset of how far I've dragged my finger and just to kind of just focus in on that a little bit I got really some of the corrupt so you can see it the other thing I'm adding in here is I'm saying I want to start the position with zero down there at the bottom I've added to start with and that's just to make sure it starts off the screen I don't want it to start in some other random spot so now when I drag it follows my drag at the very least that gray dot there is my drag right so that's not too bad that it's that at least is doing that but it's not the full feature right so let's make it animate home when we let go that's kind of the next incremental step to making this work so I have a whole talk on RxJS animations I won't get into that here the basic idea is that I get an I get an observable of animation frames and I do a little math with the offset of when it started and the current date time to try to figure out like how far it's gone along and I do some math to be able to tween between two numbers over a certain duration so tweening meaning like if I start at zero and go to over two seconds then like at one second I get the value five and you know at one and a half seconds I'll get the value seven point five and so on so it kind of does that for I get an observable of numbers the short version is I have this animation service that has a tween method on it to which I give a start number and an end number in a duration and it gives me an observable of those of numbers between the start and the end over that duration on animation frame so now what I want to do I'm going to go back to my touch drags and my positions here as I want to focus on touch drags because that's where I'm going to update this because really at the end when I get done with the touch moves that's when I want to play that animation so when I let go with my finger right after touch end there that's where I want that to happen so what I can do is first of all I'm going to add a property on here called move home so this is a move home animation that if I subscribe to it and I'm just saying tween between the current position which I've added a private property for and zero in 0.2 seconds and then what I'm going to do is I'm going to concatenate my touch movements with move home and what concatenate means is play the first observable till it's done and then play the next observable so what I'm saying is do the touch movements until touch ends and then run my animation so we've got a little problem though we need to update whatever the current position is a bit of state we need to track so I've added this tap and what tap does is just say tap into the observable right here get the current value and do something with it so the side effect I'm doing is I'm just updating that underscore POS and there's another little problem here in that whenever that move home observable is created POS is zero so it's always going to animate between zero and zero and that doesn't make any sense so we need to have it delayed or deferred a bit and there's handy enough there's a method in RSGS called defer which basically says here's an observable that when you subscribe to it executes this function and then subscribes to the observable it returns so now we should be able to see it move home as soon as I let go which is pretty fun by itself honestly when you're playing with it but we want it to load so let's make it refresh the feed if we get far enough we're going to go back to our touch drags here because we're going to need to do something with this because it depends on how far you drag right so what I'm going to do is I'm going to add another tap down here at the bottom where I'm saying okay if y happens to be greater than half of the inner height so if I drag it more than half way then I want you to call emit on refresh so refresh if you remember is the name of our event on this component and when you call emit it emits a value out to the template where we found out refresh to update the to call next on that subject which triggers the news feed to reload so this should be all that's really required with the exception of we don't want it doing that over and over and over again because tap is that's going to fire for every single time y is greater than the inner window height so I'm just going to add a take while right after that it says but only take this while y is less than or equal to half the window height so as soon as you go over that once it's going to trigger that emit and then the whole observable is going to stop so now we can pull it down a little bit and it animates back we pull it down far enough and voila we've got it actually reloads the data but then it gets stuck there which is not what we want after it reloads the data we want it to animate back so let's have it go home after the load after the load's finished and some of that works already done we already have a move home animation observable right so what we're going to do here is now I'm going to focus on position I'm not going to deal with touch drags anymore I'm going to go back down here to positions and I need to have the positions actually update from more than just touch drags because no one's touching at this point whenever the load finishes you're done touching the screen it needs to something else needs to trigger that so I'm going to have this move home after load observable and what I'm going to do is say hey whenever I get news back from load news remember I was sharing that before that's the actual HTTP request I'm going to go back I'm going to map that into my move home animation and I'm going to wait for that animation to complete before I allow it to happen again and then I need to take move home after load and touch drags and combine them in some way to update positions and what I'm going to do there is I'm going to say I'm going to concatenate these two together so I'm saying take touch drags and whenever touch drags is done then start load observable that's going to wait until load news is done and then it's going to play the animation and that also means I need to have positions like position updates feed into positions so now we've got it and it works but it only works one time it's kind of a bummer it was really exciting when it worked the first time but we wanted to work more than once and it's actually a really easy fix so what happened here is concat as I stated before plays an observable until it ends then it plays the next observable until it ends and then it ends right so everything we just wrote happened one time and then it's done so we need to have it happen more than once and so then we just add repeat on there and that is a feature of rxjs and this is because observables are lazy you can simply subscribe to them again when they're done that's all repeat does internally and as soon as we do that it works so as soon as we can do it more than once and it's fine but it's boring because it doesn't spin right what would be driving through the streets of india without honking we need some spinning to make this more exciting to make this sucker spin alright so we're going to go back to our rotate so we've kind of forgotten about this for now because we're dealing with the position but we'll go back to rotate we want to update rotates we want to not be an observable of zero we want it to be something more exciting so we can do animations and we can tween between zero and 360 degrees over the course of half a second and that's going to make it go around once but we want it to go around over and over again so guess what we're going to use our friend repeat and now it's going to spin infinitely so we can check it out just because it's fun spinning it always spins probably better that way honestly if you leave it like that we only want it to spin while it's loading so here's what we're going to do to make it spin only while it's loading I'm actually going to say whenever someone calls next on refresh I'm also going to have it map into my animation of spinning so as soon as someone calls next on refresh it's going to start spinning and then the other thing is I've got to have it stop and then it comes in so I just say take until newsfeed load news so load news fires when the data resolves when it comes back from the server and then the other thing I'm going to add here is end with zero and end with zero is just because if it's spinning around like this and the data comes back while it's down kind of crooked then it's going to be stuck there until the next time it starts spinning again so I just wanted to jump back to zero so it's in a nice clean spot and then standing up here talking and my mouth's getting dry and people are looking bored or looking like what is this guy talking about it's crazy but yeah so that's the entire feature and the reason I went over this is because again we're coordinating user events data load animations I really wish I had time to get into the animation side of it because it's really exciting you get to use math and do nerdy geometry things which is fun but the most important thing is that entire behavior even though I stood up here and talked about it for a while to explain all of it there's only about 50 lines of code like the whole thing end to end and I roughly guarantee you that if you were trying to do that imperatively it would be a lot more code than that and it would be buggy and they wouldn't get the deterministic memory management that you get out of RxJS with the guaranteed tear downs and everything so that's one of the reasons I like this particular example RxJS is best used for coordinating events if you're just clicking a button and loading data please don't use RxJS I write the library, I love people that use it don't use RxJS for everything you don't need RxJS for your Hello World app that's crazy whenever you're working on it try to work backwards so provide the observable that makes it work first and then figure out where you need to get those pieces from and combine those observables to make that observable and so on and so forth and then work your way back if you ever need to create an observable dynamically this is a weird thing that comes up and Angular developers ask me about this sometimes it's like I had this situation where I had this observable and I thought I was creating it properly but I need to create it on the fly there's this cool method called defer that I think is underused in Rx and there's also this pattern with repeat so it's harder to see in here but basically if you compose a whole observable that you think you want this to end I really like it and then there's some sort of terminal thing like it loads data and it's done and you want it to come back out you've got to take while it stops or something you can just repeat and guess what the whole process starts over again it's fine so take while it repeats an interesting pattern that was visible in here and then the other thing you want to do is try to factor out your observables into other things so for example I had that I had one property that was transform rotate and another one that was called rotates and another one for move home don't just make one big observable that is just like a giant thing think of Rx.js as a domain specific language for dealing with events if you have one giant observable chain it's like the same thing as writing a giant function and we all know that's bad at least I hope most of us know that's bad so you can break it apart into smaller pieces into smaller observables and it also makes it easier to test so that's it I'm open for questions the repository for this is available here at the bottom and you're welcome to go check it out you can find me on twitter that's a great talk just a couple of announcements before we go through questions there is a closing keynote happening in meta-refreshed talk by Rahul so some of the people were participated in known academy coding challenge so the winners are here Karthik, MAM and Himadri Ghosh congratulations and your prizes are waiting outside please go and collect let's get back to the questions please it was very interesting talk so I have a situation where say example I have a observable and on top of when the observable ends I have to perform few more observable calls so in that case do I have to make it as .all or kind of like I can wrap it inside saying exhaust map so multiple the question I think if I understand it properly is you have an observable and when it ends you need to do another observable and when that ends you need to do another one and so on so that's concat and the difference it gets a little funky in there but what you probably want is concat especially if you want each value out of there independently the other way that you can do that is you could do something like you can have an observable switch map into an observable that switch maps into another one both of those are fine patterns just know that concat is going to be a little less memory pressure because it's not like you're not closing over one you're not going deep you're kind of going more linearly so concat would be the right approach yeah that's right any more questions no you blew my mind with all this crazy rx talk so I have a somewhat basic question so given that angular has this deep integration with rx.js then why do we need zones or change tracking code what was the last part of that zones or change tracking in angular.js that's a good question so zones was a decision that was made prior to the inclusion of rx.js so zones to describe it for everybody is what they use for change detection and what they do is they kind of hook into everything so anything that could cause some sort of asynchronous event triggers zones and they'll say ok that's going to fire this event and here in the zone and that event is going to go through and roll through a change detection array and try to figure out what to change and update the view if you're using observables for this question if you're using observables since observables tell you when you have an update you could just use that to update the view so you can use change detection on push as a strategy and it attempts more to do that I think there was a period where it still kind of used zones but there are ways to do that and then more future thinking there's going to be work after ivy and other state management ideas which are bound to be more reactive because so much of Angular is already reactive I hope that answers your question Hi, thanks for your talk so this may be a very trivial question but how would you unsubscribe what would be the best way to unsubscribe observables when we have multiple of them so if you have multiple subscriptions what's the best way to manage them all there's two different ways to do this one is you can create a master subscription and then add, there's an actual method called add like add all of your subscriptions to it and then that's the only one you have to unsubscribe from later or you can do something where you merge all your observables together and do like a take until or the other one is you can have each one have a take until on it and use like a subject and next into it and you're on destroy they're all valid and my personal go to is just to have one master subscription and just kind of add everything to it it's only because I know the implementation under the hood but it depends so the take until thing is very powerful because you can then say well what if I want more than one thing to cause the unsubscription right it's not just when you're component on mounts it's when you click a button or when you do this other thing a web socket event whatever you want it triggers these observables to unsubscribe so or to complete rather which is the same thing as unsubscription so it's really up to your use case in a general sense I would say my guidance would be if your general use case is all I'm doing is subscribing when I initialize and unsubscribe when I destroy I would probably just go with regular subscription if you're if you see a point down the road where you're like oh you know I might I might need to or if you come to a point where you're like I have more than one way that I need to unsubscribe from this then take until is a better go to if you're using a state management library like Vuex or Redux and I also want to use RxJS so what is the architecture pattern that we should follow to co-exist both so the state management architecture you could follow with RxJS really so there's a lot of different ways to do that what you want to do whenever you're dealing with that though is kind of separate the actual state of what your app is doing from whatever side effects your app has so side effects being things like sending requests to the server or updating the server or getting things from the server or pretty much anything that's like an animation is another side effect so you want to kind of separate those two things architecturally with your Rx and when you end up doing that what you really end up with is something like Redux so you use scan in Rx and that's a way to track state internally it's kind of like a reducer only it emits the reduced value every single time which is Redux and then the side effects things ends up being basically a Redux observable or NGRX effects when you end up like finishing it off so NGRX NGRX effects are identical in nature to Redux and Redux observable there's really not that much of a difference other than some sugar for angular and ultimately if you were going to roll it yourself with Rx just to avoid the extra library overhead or whatever you wanted you would end up in a very similar pattern most likely I wouldn't move to that pattern until you absolutely needed it because it can cause some complexity but at the end of the day that's what you'd probably end up with Hello Hello So what is being used behind the observables I mean service or cargo what is the funda behind the observables why it is if we don't unsubscribe the observable then it is memory leakage issue so what is being used behind the observables Okay so what's actually being used behind observable is just a function believe it or not so when you define an observable when I run workshops I usually go over this like one of the first things when you define an observable you say new observable and you pass to it this function that gives you an observer back that's got a next error and complete method on it and basically when you call subscribe with your callbacks what it does is it takes your callbacks scrubs them into that observer and provides some safety guarantees to make sure you can't call next after you call complete for example and then passes it into the body of that function that you've passed to your observable constructor and it synchronously does that and that's all the observable is and so it's this function that says hey I'm going to do something to create something that produces data and then I'm going to call next on this observer and that something could be looping over an array or it could be setting up a web socket or whatever you want and then the end of that function what you return is another function that has the tear down of what you need to tear down so if you let's say you create an interval inside of there then you would clear the interval in the tear down that's returned so really that's all that's inside of rx it's just the apparatus of rx is there to provide safety so you can't do things like call next after complete and to make sure that when you complete or error that tear down function is called so that's where you get into what I was calling deterministic memory management you're guaranteed that if you unsubscribe you error or you complete an observable that memory is cleaned up you're calling whatever you're closing web sockets or you're clearing intervals or whatever it is that you're doing xhrs whatever it is that you're doing inside of that so the guts of it is actually a lot simpler than people like people look at it and think oh there must be some magical unicorn thing that's inside of here I'm not that smart I didn't I trust me when I tell you I did not implement anything that was super hard inside of observable it's it's it's actually pretty simple it's just providing the guarantees to make things right then answer your question I have a question I have a couple of questions the first one is for a complex application there can be n numbers of features so suppose there are so many observables so how good it is from maintenance like suppose some bug came in a particular suppose a feature is subscribed at too many n numbers of subscribers how can we debug something if something goes wrong so the question is how do you debug if there's a memory leak you created a subscription you didn't unsubscribe debugging that sort of thing you're in the same boat as you would be if you add an event listener and forgot to remove it rx tries to keep things very basic the one bonus you have rx is a third party library you could hook subscription or something like that and do a count and see how many you called but rx doesn't provide anything out of the box to do anything like that you'd end up having to use Chrome debug tools just like you would if you added an event listener to a button and you forgot to remove it it's the same sort of thing so memory leaks are tricky with any library you're gonna end up needing to use Chrome dev tools and try to assess those things so is there any standard to follow to make like we're walking with too many observables so that our code will be maintainable so standards-wise I don't think there's any linters out there that cover this but I know there are some rx.js specific linters that you could go look at but standards-wise you want to make sure that when you create a subscription you're unsubscribing from it there's some exceptions to this where you don't have to be super pedantic like if you have an observable that was made from an array you go over an array synchronously so by the time the subscription returns the subscribe call returns the subscription object it's already done like calling unsubscribing it is a no off but it doesn't hurt anything either so generally this is a general rule if you create a subscription unsubscribed from it just be diligent just the same thing you would do with add event listener and remove event listener make sure that you're removing your event listeners so that's the sort of thing or if you're an Angular use pipe async a third-party library that accepts an observable and subscribes to it for you use that mechanism and then you don't have to worry about it so does this pipe and the concat do the garbage collection after the after the observable ends like the subscription ends or something like that I'm sorry I didn't catch that last one so do we need to unsubscribe if we are using pipe or combining multiple observers? if you're using pipe then it will unsubscribe for you, guaranteed so that's the go-to method so the reason you didn't see me calling too many unsubscribes in this is most of my observables were bound out with async pipe the only one that wasn't was that interval that was nexting into the subject that was causing the refrag thank you you're a disembodied voice, where is it? here oh there, sorry so do we have something like computed observables that we have in knockout j's? so computed observables as you have in did you say mobx or? basically I have a first name and a last name both are observable and I want to show a full name so what you can do is there is a method called combine latest and you can have an observable of first name and an observable of last name and you can do a combine latest on that and then map it right afterwards because that will give you an array of those and then combine latest says every time either one of these emits a value emit both of the most recent values and then from there you can map it and get what you want out of it then you have your observable of full names so and can we make observables on arrays? like in array if anything is changing can we listen to that? can I listen to which observable? I'm sorry? if there is an array in that if any value changes can we listen to that? can that also be achieved? so if you want to see if any value changes in like an object for example so you could you could do like they have an object out of there but it's the specs committee have kind of considered an anti-pattern and they're trying to remove away from that really what you want to do what's a better pattern is to just know what's updating your your event so the thing about programming is this and this is true with RX or not it's all event based really the end of the day and event fires you go through and synchronously run a bunch of code and then probably set up some other event fire and then eventually that other event fires you synchronously go through a bunch of code so you're in full control of this when you're writing the code which means that you should you should be able to find a way to know when a value is changed in case you want to hook it there and either send it through a subject or wrap the whole thing in an observable or something like that to get an observable of those value value changes otherwise you could use the object that observe I think I forget the name of it right now but object observe but again it's deprecated they thought about adding it to JavaScript and they're pulling back from that now because it doesn't seem necessary for most uses thank you Ben thanks everybody so I think many of developers can you hear me many of developers want to have cross-platform same code ways right like people try to use react and react native and stuff so they can make one code to rule them all so but recently I have read in news which which came from Airbnb they're setting like they're saying like they're sunsetting react native or something like that saying like it is very difficult to maintain one code base for multiple platforms but we have our speaker who is using multiple platforms with one code base so I will come Mr. to speak about it thought you guys had seen the last of me didn't you so I'm back and this time I'm here to talk about how to be lazy as developers or in other ways one of the hardest things to do as a developer is of course write any application write any UI or things like that and then when we end up building yet another UI so we build for web then we build for android then we build for iOS then we have to build a desktop app so on and so forth and each one ends up being this huge another platform another code base that we have to maintain that we end up having to debug having to live with for the rest of our lives this talk is how do we avoid it and this is a unicorn that we've been chasing for quite some time so let's get into it if we've seen programming languages change and evolve more time for quite some time so you have the age old cc++ java python to the world of javascript which is now kind of where we are the kind of things we were able to do with these programming languages the kind of UIs that we were able to build the kind of experiences that we were able to build with each one of these has also changed over time but what has really not changed is the ask and in fact this has increased over time if you have an application like whatsapp you of course have to have it on android on ios then because people love convenience you end up having every single browser and then you want it for the desktop as well and if you develop this using our old practices saying native is best you end up having one development team focusing on android one development team focusing on ios another set of web app web developers building out for each of the browsers ideally once nowadays thankfully by IE and then you have your desktop developers as well this doesn't scale it's hard it's annoying keeping features in sync across platforms is hard it's annoying this is something that has been a myth just like unicorns just like the part of gold at the end of the rainbow just like a lot of the rings and we actually have one code base to rule them on and this so far has really been impossible annoying or at least really really painful without using a ton of hacks but what if I told you it can be done we're actually at a point where we're finally able to do something like this where we can share most of our code base and just focus on building out different UIs different experiences for different platforms and share the base business logic the logic that says where do I fetch my data how do I massage it how do I display how do I format it all of that can actually be shared this search this name has been there for quite some time like I remember searching for this back from 2009 which is kind of where we started with Angular back as well GWT was the first thing can I use Java into when Google Web Toolkit you write everything in Java it combines down to HTMLJS never have to change your context disaster painful but it was the first node made it possible for JavaScript developers to write JavaScript for the front end JavaScript for the back end at least you could avoid the context switches of going from back end to front end and vice versa and then more recently you have things like React and React native you have Ionic which allows you to write hybrid web apps that allow you to write once and kind of deploy on different platforms problem is in most of these what you want to build is a beautiful castle and either the path there is tortuous takes you through multiple twists and turns you have a lot of different code bases or you get up with one app that looks really shitty behaves really shitty and this is something we've been struggling with for the last quite a few years just the number of platforms number of apps number of devices have changed the experience for developers really hasn't changed and finally sometime last year with native script and Angular I could kind of see the light at the end of the tunnel of course given my track record that light has usually been a train that has come and hit me later but hasn't stopped me from chasing after that every time so what is native script right native script is a platform open source kind of like a react native for the guys who have been using react native we'll talk about that in just a bit but really allows you to write your application once and have it compile build out a native ios a native android app for free right so what you end up doing and it's not really specific to angular you could use view you could use pure javascript whichever you want it's not really tied down to make angular but allows you to run native android native ios and it's native it's not a hybrid web app that's running in a web view or things like that you're actually going to give native widgets native buttons native labels so on and so forth and it's extensible tons of plugins which always make our life easier because hey we always want that barcode scanner that google maps integration so on and so forth all of those are plugins that exist now you might ask if you have developed using react native you might ask what's the difference fundamentally react native and native script are trying to solve the same problem they're both trying to allow you to develop once deploy across multiple platforms but the approach in which they do it is quite different so native script actually allows you to write native access native apis of android ios write in your code versus a bridge that react native uses for you doesn't really change much unless you have to do a lot of direct integration otherwise it's pretty much the same for the most part so this is something which could be a native script application code left is pure angular components fact almost nothing that is specific to native script or android or ios what changes is the template instead of having your html you end up having an xml that kind of translates to the right UI given that it is android given that it is ios but even this is native script and notice here that you can actually reach out and write raw android raw ios code to some extent you can actually reach out into android get the package manager do stuff which gives you that flexibility that you might not have in any other kind of solution so you get the best of both worlds you can write your proper application for the most part and when you really really have to get hacky you can hack away at it as well so what's the aim so native script out of the box gives you solution for writing android ios we don't want to stop that we want to be able to write one code base for android ios as well as well and hopefully we can get some final electronic desktop so on and so forth and when I started this last year there wasn't a ton of support for this out of the box so native script gave me android ios apps I didn't have a great solution for web so what I ended up doing was writing my own hacks around it my own build scripts and so on and so forth so the aim was simple my logic my component code which was responsible for fetching data merging, formatting it presentation layer fundamentally needed to be shared across my application and I needed to be able to write different views for different platforms got that out of the box for android ios I needed to plug in my web application into that so I wrote a lot of build scripts basically to be able to split it apart and then at build time pick up the right files pick up the right templates put it together kind of build out frankenstein of sorts it worked we were able to launch with this it was ugly even I didn't know what it did half the time but it worked but upgrading was a mess native script was going through multiple changes multiple updates angular was going through multiple updates multiple changes it was just not very easy to maintain every upgrade was a week long nightmare for us we had a great template and then I signed up for my talk saying look I've got this shit figured out let me explain it to the world and then come August the angular guys release a native script semantic which kind of said you can do this out of the box for you thankfully the approach was the same so what does it do kind of you're basically looking at your project your base things your components your navigation your services directors pipes all of these are shared across your entire code base across your web across your android across your iOS apps and the only thing that changes between the two are either your styling your templates or your modules right figuring out whether to use the native script sgtp communication or the native android sgtp communication the different modules different forms so on and so forth are the different views itself everything else is shared and just at runtime is where the magic happens you have these different template files for different experiences you have these different styles when you run it is what pulls in the right things together so when you're running your angular web application it picks up the right angular web templates the web styles the web modules or just together serves your web application and just flipping the command to run the native script which is either iOS android bundling it so on and so forth picks up the android templates or the iOS templates or the common mobile templates the mobile styles the mobile models and that's the only change you need to do the command that you use to run it is really the change the structure takes care of everything else and setting this up is now trivial none of my gulp magic none of my build scripts none of that craziness comes out of the box use the angular CLI to just say create me a new application with this native script schematic and you're off and running write the right templates write the right code and you're off and running and you have three apps for the price of one naming pattern and all I'll leave it up to that but basically what ends up happening is you have a TNS a native script template a native script style and your web HTML and your web style and the component code is shared you could have a separate one for that as well but I won't get into that everything else magic supports everything you would need so standard routing standard HTTP communications local storage all of that is available out of the box you can even lazy load make your application performant so all the features of your angular application in your Android application and iOS application out of the box so that's kind of what we did it's great for a certain set of things but few things to watch out for if application size is a problem this script adds a huge library as part of the application it's entire runtime engine so the application size is large and the startup performance which actually is now a lot better you can actually launch your application within a few seconds used to be pretty bad when we initially started but still something to watch out for but otherwise you get a native app for the price of a web app which is amazing so that's pretty much my talk feel free to ask any questions or reach out to me later as well if you want to figure out how this shit works hey thanks sham so we have one last talk it's about our Hasjika app how well he has implemented how buggy it is we'll listen it by our inner words hi guys so my talk is basically just a 5 minute addendum to sham stock how many of you would prefer to use view over angular if you could okay there are a few people and if you want to use all the features that sham just talked about all the beautiful parts about native script but prefer to use view as a framework instead of angular then there is native script please just a few things about myself I've been working with view.js a lot recently I've written a lot of view libraries so and these days like mobile apps I've been trying out native script view to build some though originally I have been a very long time 6-7 years I've been working on native mobile apps so what's native script view it takes native script use you just as a framework and creates a logo like that so native script I think you're seeing something I'll just add a few things that I felt really nice was that you can create certain layouts which are actually pretty hard creating in even native iOS or android grid layouts app layouts kind of things and this part that I think sham already talked about is that you can write code which looks like objective C or you can write code which looks like Java so and you can just directly use them JavaScript because it uses it in terms of the infection and you can use native script as with plain JavaScript and XML files or you can use with angular like you have seen now and finally you can use it with View.js the latest version of native script view allows you to use ViewCLI 2.0 components so you can't actually use with ViewCLI 3 right now but your view single file components those we have used you can put PugJ as templates if you want instead of HTML you can use TypeScript or CoffeeScript in the script part instead of JS if you want to I mean webpack is going to transpile all of that for you so I mean just go on and use whatever language you want in your view single file components so the simple project I'll be showing this is View.js but it also use TypeScript with that and your View.x for state management and View.outer for roots all of that completely works out of the box when you're using native script view and best part here is like you're creating a cross-platform thing like it works in iOS and Android one of the things I prefer is like if it's a simple project it's not too complicated I want to write zero Swift or Java files and zero bridges so native script allows you to do pretty complicated apps without understanding a lot about how the native part works I mean if it's a pretty complex app probably you need to write some bridges but if you don't need to that would be a great thing and supports of course auto reload so see takes you to the Apple Maps app right now and just change the URL from apps.uri to maps.google.com instead click on the application now it goes to maps.google.com yep so everything that you all the features that you get when you are developing a view app on a website webpack, single bundle file with auto module reload all of that stuff is there and best thing in a live app so you can use CSS animations and they translate into native animations this is a very powerful feature if you are using something like react native where to native script is that you have to create an animation object and animate just show the app once when I open the app this animation that is happening when it is running it is an actual native animation inside android interpolators but I have defined it in my code simply using CSS files so translate animation automatically converts into native animations there are things like also if you want to say open up a QR scanner it automatically asks you for permission for camera and stuff most of these libraries already exist you don't need to even understand how the native layer is working actually it is because the emulator has 90 degree orientation problem it is probably scanned so all of this I think I will just show you the scanning code just a single line of code which makes this possible you create a barcode scanner and you just do scan it asks for the permission opens the camera does the scan all of that stuff you don't need to understand how the native part works so if you are making simple apps it is a pretty good option check out the code for this or want to contribute this is where it would end up the first one has the slash file right now I am just building it on my repository and if anyone has installed the android app right now I know it is pretty buggy so it is going to improve probably by the next conference this will be the app and anybody who has iphone they would be able to use it as well and you would have all the features that the existing app has and extra features to possibly you know by the next conference if you come to ASCII conference you don't have the app you know thank you any questions build the IPA file do we need xcode or we can done in a windows system also you will have to compile it on an apple running it on iOS you will have to compile it on apple android compilation will work on any 3 operators okay xcode is mandatory to generate IPA actually it generates the IPA it cannot sign it if it is not a manual it will be there but there are some online services which provide signing as a service people are running Mac servers you send your IPA and your certificate it signs and gives you back so a lot of teams these days they use that developers are working on windows they sign it through external service I wanted to ask this question from the previous guy but you also worked on native script so the question is how do you compare the performance of native script like react native app this is native script app native script versus native or native script as a react native react native by react native the start up times for native script like general thing I will tell you during the run time the marshaling speeds are faster so data when it is converting to java to jas to java those speeds are significantly faster in native script because it uses reflection the app boot up time is going to be more in native script so okay when you use react native for using native components so I see the bridging is actually not very easy so how is it in native script using native components yeah the native components so I think the major difference with react native and native script is that react native provides basic widgets it provides very few and ask the community to build a lot of them native script has created a set of widgets which can be implemented both in iOS and Android there is a common set of widgets so for example list view you have to create separately for iOS and Android in native react native in native script all the widgets they are common like there are very few widgets which you have to create separately in iOS and Android you can use the common widgets everywhere creating widgets and all is pretty easy like I said no bridges involved in this app that I have created completely built using jas thank you Erno wow it's been two wonderful days I had a very great time I think you also had a very great time I hope you might have learned some good things and you might use some of them in your workflow and do stuff so I just want to say thank you for coming to JSFU conference and making it big success and I still have some announcements so our next events are on JSFU Pune on 10th January and react foo on march so please do come and if you are a developer who are working on some nice stuff you can submit some proposals or proposals so we may select you for the next conference so and there are couple of workshops going on tomorrow one is secure web development workshop and another one is paceup with view workshop these are happening tomorrow so you can join it so there is another nice thing bootcamp is happening on November 10th it's a two day bootcamp regarding full of GraphQL that's it thank you very much