 Okay, cool. So this will be an open house. So that's why I'm asking you to be louder. What's open house about? How many of you have been at an open house before? Okay, good. So I could go and say whatever I want about open house. So basically it's about you guys asking questions and there will be one guy moderating that's me here today and I'll be introducing these folks and I'll start off with some icebreakers, ask you questions for them and then you can start asking questions from whatever aspects of web. May it be server side rendering, node, react, angular, webpack, you name it and we'll try to answer them. We have Siddharth, Pratik and Lakshya. Siddharth is from Prakto, Pratik is from Google, Lakshya is from Trebo and I'm Hemant, I'm from PayPal. So let's get started. Let's start with Pratik first. So I heard you have been working on Workbox lately. Can you speak a bit of Workbox, what it is and how is it better to compare to the other libraries we have? I need to hold it closer. Okay, cool. So Workbox is basically a JavaScript library, a service worker framework. If you guys would have already used SWP cache or SW tool box these are like high helper libraries for your service worker code. Like you have DOM helper libraries that these are helpful libraries for service workers. So Workbox is the successor of this thing. Workbox allows you to pre-cache your content, allows you to install runtime strategies, few of which I talked in my talk and it brings a plug and play kind of architecture. So you can write your module. For example, there's a module for background saying there's a module for offline analytics. You just have to plug that module in. For example, new offline analytics into Workbox and give it a route and it will start working. So SW tool box and pre-cache came with like predefined functionalities and they were not really great in extending that functionality. So Workbox with Workbox we are trying to fix that and we are trying to make the entire helper library in such a way that you can plug in more modules, you can write more modules and then they work with way more ease than it was earlier. Thanks for the short description and we have runners running around. That's why they are called runners I guess. They have mics with them. So if you have any questions, you want to interrupt us, feel free. That's why it's called an open house. There's no format. It's not like questions at the last. You can't interrupt nothing like that. You can interrupt anytime. You can just grab a mic and ask whatever you want. Feel free to do that. Now let's talk to Siddharth. Siddharth, I heard like you have started a channel of yours on YouTube where you talk a lot of funny stuff. What's it all about? I wouldn't say it's funny but I try to stay updated with what's going on in JavaScript and then I just record myself and put it on YouTube. What's it called? It's called the Siddharth KP show. I didn't really think it through but it's just me. That was an opportunity for you to market yourself. I think I've done that enough yesterday at the ReactCon. Pass it on to the Trebo guy. Most of us have read the Medium post about Trebo and what are the challenges they face. Could we just hear about one challenge that didn't let you sleep for a week or something? Maybe a server side rendering spike on the CPU or something like that? That's a really good question. I'm sure I think not a lot of people. How many of you do server side rendering here in your application? How many of you are actually React or React? That's fair enough. I'm sure it's pretty hard. Can you scream it out? What really happened was we initially actually tried to do an App Shell model and we tried to get that past our product manager and he was like, no, we need SEO. I'm sorry. We were like, okay, fine let us figure this out. Basically what we tried to do was we did render to string which is the documented way of doing it and what we figured out was when we tried to go to prod, we can't handle scale because render to string as Siddharth told yesterday at React is that it's synchronous. No matter how many instances you spin up, it's still synchronous. It's like all your requests are waiting in a queue. Trying to work around that you actually want to do async rendering and we actually use Rapscalion which is not part of the blog post actually because I'm going to write an entirely different thing about that soon. We actually went ahead and did async rendering to solve that. So what it actually does is it pushes it to the background thread in a sense. I guess I could be wrong but it lets you scale up really easily. So that was actually one of one of the trickiest thing that actually I didn't sleep her to be honest, to get it solved. Quick questions from audience of any questions. Hi, I'm Narendra since this is the first question I'll probably start off with the most controversial one which is react licensing. I'd like to hear what's the first about and do we need to use it? Why when we should not use it? And things around it. Thank you. I love this question. I wasted a week over this question. So React's license is not your traditional open source license. It's not MIT, it's not Apache. It's their own custom BSD license which is tricky but essentially like the layman version or more like what I understood version was that if you ever get into a patent war with Facebook, right? So if your startup grows big enough and you have excellent patents that Facebook wants but it does not buy you out instead illegally uses your patents you cannot sue them because you have been benefiting from using React which is something that they created. So you can use it for free as much as you want until you want to sue them for a patent war then you have to basically spend some time refactor react out and then you can sue them again. So a lot of people have put their own expensive lawyers on this like PayPal and what they found is that PayPal is pretty cool whether they can use it because Facebook is not stealing their patents so it's cool and if they do they have the money to sue them and that's fine. That's what Twitter, Google do everyone uses it so I guess we can use it. I'm not suing Facebook so it's all chill. One quick addition to that, if at that day I pull in React with React Compact does that still work? React Compact no because you still have React you're just kind of replacing it on build but if you run a code mod and replace React with Priyaat then you're cool then yeah go ahead. My question is to Lakshya. So Tribo the website the first visit times and metrics are really important right? So could you tell us something about you know what challenges you face to get to those metrics and like what is the most impactful solution you had for that? Hey man good question. So one of the things that we actually had a really difficult time doing was trying to get time to interactive kind of to a reasonable rate because the accepted rate is below 5 seconds on a slow 3G network. Even when you do things like code splitting and things like that you have to be really careful of how much you actually split because if you split so much that everything is asynchronous then you're practically wasting time trying to get all your async code in. One thing that actually helped us was HTML streaming where you basically push the head tag in first with all your preload scripts for all your tags for all your main vendor and things like that and then so that when the rest of the server-side ender thing for us it was server-side ender so that when the rest of the server-side ender request came in most of your scripts are kind of already in the cache so when the requests are made you're kind of benefit from that. That keeps your time to interactivity down. Apart from that first paint and meaningful paint is another important metric most of that was kind of solved during CSS chunking because it's not just code splitting on your JS right if you just split your JS and be like okay I'm going to serve a massive CSS bundle your CSS is going to be the bottleneck and if you all know CSS is actually render blocking right so you're going to block your render completely and the user is not going to see anything what you want to do is try to split JavaScript and CSS based on your chunks if you actually are doing splitting based on chunk one challenge you actually faced that Kana spoke about yesterday was trying to make a different entry point so that extract text plugin kind of brings out the CSS. There's a different plugin called extract CSS chunks so if you just do import calls in your JavaScript it'll kind of split your JS and CSS for it so that's really helpful so you don't have like a bloated and T file and things like that so what you want to do is during server-side rendering get your route throw in the critical inline styles for that particular route so you're not render blocking at all and that'll actually help your first meaningful pain. For us one important kind of like a hack I guess was trying we have like a big image right on top in our viewport we pre-load that as well so there are multiple things you can do it but don't pre-load everything right there's this quote from the Incredibles that says if everyone's a superhero no one is so it's the same thing if you pre-load everything that means you're saying yeah import everything's important whereas nothing is at that point be careful it's kind of more on situational basis based on your app try to read more is what is actually been helpful for me so more questions or some experiences you want to share while working on PWAs some interesting situation you got into or something interesting some library you found out yeah no okay so I see a few folks from Flipkart here who have already built the Flipkart light revolution of PWA probably they could add in something so how is the streaming working for you I mean so when I throw some 400 or 500 how do you tell to SEO sure that's a good question so the first thing we went with because we were kind of in a rush was hey we don't care because that's what everyone does right you kind of care about it after the fact but no what we try to do is we kind of do the route matching beforehand before we even send the streamed head part the matching does take some time so you kind of know what's happening at that point itself but in between if the stream breaks up I don't have like a good solution for that right now so that should be kind of something that we should tackle as well I don't have like a perfect solution for it because once the yeah so I mean streaming doesn't really work I mean this is the talk last year we gave on the same stage where we tried with the streaming it added a lot of goodness in terms of the rendering performance and everything but it failed measurably at SEO so Google started in indexing all the 500 pages so we had to turn off and we had to put as a SEO completely on server so it doesn't work we're still figuring out so that's one piece of advice like you need to take care of SEO if you're really looking to build on a desktop but on a mobile I don't think we need to do any server side rendering so it's still not clear kind of like on a on the same base but there is kind of a new approach that you could try Google actually released a project called Render Tron so what they basically do is it's a rendering service and they have middleware so if you have Express or CoA or something like that they have a middleware that kind of if all your search bots if the requests are from search bots it kind of sends it off to Render Tron so Render Tron can render your pages beforehand or keep it or render it right then and then serve server side render pages to your search bots specifically but to users you can kind of send it to your stream so that way you can kind of work around that if that helps no comments yeah so I just wanted to ask this question that React 16 or React Fiber has this new Fiber Reca Insiler so we have seen the shift changing from watchers in Angular to the virtual diffing in React and now this is so how will it be pan out and will it be like adopted now by other frameworks or is it good enough this prioritization of tasks request new ideal callback and stuff like that some of the comments from you sure yeah so to answer your question that will this become a trend and other frameworks will adopt it I think they already have so Vue.js even Angular's new thing which kind of depends on Angular 4 which depends on components all of these guys try to do their own implementation of the virtual DOM so they might not have the same reconciler as React but everyone has a fake virtual DOM and the real DOM and all of the manipulations have been to the virtual DOM first and then to the real I think Polymer also does the same thing now it has a shadow DOM or a... so for what it's worth like every other solution out there is trying its best to like use request ideal callback to its match because that is one API that gives you windows of free CPU cycles and tells you that hey you can do your extra work here so like I am not completely sure about Polymer but yes Vue is exactly what is working on on this particular thing. What happens with Polymer there is we have a shadow DOM concept not really like a virtual DOM do you think it's basically a DOM which is as the name says it is shadowing which is all the properties of the DOM but until you attach and render it it will show up there because almost like virtual DOM but there is no different happening as such. I guess web components also depends on shadow DOM and if web component if and when it picks up and that uses shadow DOM I think that will be the standard way we built for like browsers that would be the only thing we do and frameworks wouldn't even do it frameworks would be an abstraction on top of it there was a saying that said like all the programmers are the first of 21st century you know so we will all be dead with something which is much better all this race will be a kind of obsolete very strong. Vinci. I had a question on have you guys experimented I know a couple of people have been Flipkart and housing were trying AMP to PWA so how successful have those experiments been and even from an SEO standpoint have they been good enough for you guys. Do we have someone from Flipkart who can answer that? Yeah who have implemented it so first things first AMP and SEO are not related this is something all the SEO folks says but these two are not related again personally I don't like AMP it's still there in PWA if you reverse it but yeah that's a different debate but it's a pain in terms of like you need to build a different version of your website so we personally have like two versions of the website where one is for PWA one is for non PWA like you see all that on top of that adding one more is a complex so we kind of posit it for now but anyone have any success stories would like to hear from that. Sir there's an interesting addition that I'll say right you say you maintain two versions right what I've been doing in the past is when I server render my react components like whole HTML string right I just serve that and then there are just tiny modifications between the AMP semantics and HTML semantic and that becomes my AMP version and then it's just like uninteractive version which goes to AMP and then when I serve it to users like non AMP version I like react DOM come into the client and then rehydrate it so we maintain one version and get to do both to contradict your first thing when you say all the marketing people say that AMP is for SEO right you're right it's not really for SEO but it is for traffic right like Google clearly cheats and prioritizes AMP content and then that's what marketers want right they want traffic so maybe like you don't get SEO points but you get money like that's what people want oh definitely yeah yeah you're essentially saying everything I will keep a rendered static copy and serve that to everyone yeah it's definitely a pain but traffic is it like you have a react renderer which takes in react components and like output AMP components which you have mapping for every component or every tag of yours is it okay so it's the same react render to string and but instead of an image tag I just create an image component and depending on the context it either spits out an image or spits out an AMP-image right and then we do so basically in your component library you created for both context specific and then use the same thing to render everywhere there's a debate of free and open web versus AMP consuming it all together and probably WordPress has AMP enabled by default to get the content rendered faster at least make it feel it's fast so it's still debatable yeah it's pretty open for all the controversy I guess ghost also started giving AMP out of the box so many frameworks are there hello yeah I had a query about this thing shadow DOM so what I read about shadow DOM slightly was that it's something that's already inbuilt into the browser it's a power that was unlocked by polymer or web components so is it something like that it's not like the power that was unlocked by polymer or somebody it's more of a spec so with web components you version 1.0 the spec reads about what shadow DOM is it's part of that so for a web component there is custom elements there is shadow DOM all together paired up to form the spec so it is not like it was already there and unlocked it is part of the process like when it started polymer it feels more like a trend which was like a fallback till we have custom elements on the components on the web but now it's becoming more of a good library as spec is stabilizing right hi I had a service worker question I had a service worker question the gentleman there had asked in the previous session about accesses vulnerabilities with service worker did you want to add anything on that and if we could do anything to prevent that from happening so I heard that my colleague Douglas Crawford said that I say it's my colleague just because he works at PayPal but I didn't really read any specific article saying that what are the vulnerabilities that a service worker has if you see what could be the possible entry points we are already on HTTPS so you can't really put some network request and get in I don't really see possible entry points probably it might be so since like the very first baseline of getting a service worker to work is HTTPS that has a lot of you know biometric vulnerabilities but then service worker again is a proxy that sits like outside your code and you pretty much have the part like code it up screw it up and if you are modifying your request inside service workers there that is one of the major things that come into my mind that you have to be careful with if you are modifying your outgoing request there or like incoming response as is that is one thing that you might be careful with. Yes, up here. So before a year if anyone of you remember there was this interesting incident happened so one of the developer actually because of some brand imprimangement or some of the legal issues he actually unpublished many of the modules. Left pad. So actually I couldn't follow that article much so after that has NPM changed its policies or marriage strict or something so if you can answer my question. We miss you left pad. So what happened was NPM when it was a younger registry when it was not as mature as the other language ecosystems it had a pretty open unpublished policy so what happened this guy who created left pad also created another package called KIK and KIK is also like a huge company so they said we want this package we own the rights to it so you shouldn't use it and so those guys talked to the developer they told him that please don't use this name because we own the copyright he said but this is open source and if you don't have it already if I took it it's mine and then so KIK people got NPM involved and NPM kind of had to make a decision right who do we support in this case they supported KIK the company right and they took the rights from the developer and gave it to this guy the developer got paced which is fair and he unpublished all of his packages right. Left pad was one of the packages that he had which I think like which big project used it. Babel used to use it right and everyone uses Babel and which just meant that anytime you do NPM install Babel it wouldn't work because one dependency just disappeared. Left pad was just a one liner basically but yeah that's the power of free and open source. But now NPM's policy has changed. It changed like immediately after that I think you get like a 24 hour window to force unpublish your packages after that even if like one single person starts using your package as a dependency you can unpublish it you can deprecate stuff release new versions but you can't go back on what you've already created. So in retrospect like all the other packages managers already had it like PIP and like JEM already do this stuff NPM didn't do it but then now they do it now they're like much more mature. One of the funny incidents on that is when you have two registries we have a private registry in the public and if you have not pointed it properly and you sometimes end up publishing your private modules to the public repo and then you have to write NPM saying hey this is a private repo please deprecate it and like you say deprecate it and probably take out everything all the code out of it and just add a packages and say nothing here go on kind of a thing right. Yeah guys up here I have a question we are talking a lot about progressive web apps and Pw everything. This one still question which lingers to all of us we are talking a lot about B2C application but in B2B still many things a lot of companies traditional companies like life sciences manufacturing runs on internet explorer. So what are your strategies to get things going on internet explorer say for I10, I11 I mean what you think would be the fallbacks to see these things working in that environment also. Fallback would be edge probably just a moment I have an announcement to make people who are interested in the app security clinic it's starting downstairs at 4 o'clock which is 2 minutes from now and we have 4 minutes left on this session. Yes make a choice. So to be honest what you said right just tell them to install chrome or edge or something right and this problem is going away slowly because windows does not support I anymore like if you buy a new windows machine it doesn't come with I it comes with edge but that is my best option. So one thing is like one way is like you can obviously go and say that please download chrome though I would like suggest you to like defer it as much as possible you can have a baseline that hey these browsers we support all browsers because web because that's how we have we have been known for something like looks best in chrome. Or at least like give us like okay last three versions that's most what most companies do but like just saying and closing I know there will be some shade thrown on me on this because Google comes up every now and then and do this but yeah like just completely blocking the browser all together and not doing anything should be like your last minus one resort unless it's up to your neck but you can always like does a pretty fine job with maybe not with all the APIs and which is what progressive enhancement is about but yeah like you can still support fewer version of it. So this one scenario we have one just to add to this because other people are waiting for their questions and this is one last question by this gentleman you can talk to them offline to add on whatever fun we make about IE but we need to owe Microsoft for XHR because Microsoft was a company which gave us XHR but still we call it as XML HTTP request it wasn't really XML anymore like probably we have fetched now but still that idea was great and there was something called as HTA if someone remembers what HTA was so it's called as like HTML applications like you could still do it today you could rename your HTML file to HTA and open it on a Windows machine to open up like an Elecron app that was done long back. It was PWA's of 1980's and Edge was the first browser to implement class and trial and trial recursions so it's doing a good stuff let's not have a war against ourselves every browser had something good and bad let's take the good parts so my question is a bit different like in our company we don't deploy application on public domains so we have the application on client side deployed over there and they're using as internal apps and we have large data which gets downloaded on the browser and we need to display that so the problem we face that we used angular and knockout and it took a lot of time to render the screens so many a time we used to render the HTML data on the server and then render it on the browser so what approaches would you suggest that we don't care of SEO or something because it's inside the application and it's not in public domain so is it better to render on server because it still takes time and if we use the angular or the knockout it's still taking longer time to render and we can't go away with showing the data we need all the data on the browser I would kind of vote for a mixture of both like you could have your initial rendering in a push from the server and then the rest takes care on the client so that the perceived performance will be better so are there any tweaks with the browser or any other service workers or something like that which can be done streams so A you can obviously use streams which are not really there for all the browsers at this point of time but this streams is something you should definitely definitely check in check in it is made for this kind of scenarios and a lot more B you can always do like server renders some portion of your data may be like first fold of your stream and then just send that data to be client render on the client side correct me if I'm wrong the flip card pips Nagraju yeah we still do first fold server side render for flip card and then the rest of it on client is it so maybe something you can do like that thank you awesome thank you guys hope you like the open house and if you have any queries you can just we tweeted us and like we have our twitter handle on hash you can find there and we'll try to answer if not we'll get in touch with the right people who can solve it