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