 will be a small talk about 15 minutes that's it. So I won't keep you guys waiting here for too long. You can get the t-shirts, get coffee. I think we have a coffee break after this. Yes, we have a coffee break after this as well. The official coffee break and I think it's for about half an hour. So this will be a very small talk 15 minute, the first Chris talk of JS food 2015. And I'll be talking about wall on dot JS. Has anybody heard of that before? Excellent. So that makes my task lot more easier. Thank you. So as you can see the topic, it just remotely debug and tests JavaScript using a tool called wall on. I'm sort of, I work as an evangelist at Microsoft and this is my Twitter handle if you need to get in touch with me later. Let's start actually all of us write code all of us write HTML, CSS, JavaScript in the web. And the primary thing when we go to debug and test that is F12. We go to Chrome developer tools. We go to IE F12 and we go ahead and see what what's happening out there. The web as you can imagine is adaptive, especially with the invent of bootstrap. I mean, most of the websites have started using bootstrap already using bootstrap. And you also follow a lot of standards while writing code beat with even the HTML five standards coming in now. It has become a standard now. You want to get that into your website and it it's cross platform. So you can't restrict someone to just using a browser on an Android device. A person may as well go ahead and connect to the web in a gaming console or probably in a refrigerator at home, which is an IoT powered refrigerator where you connect to the internet to see some stuff. So the web is not limited. You can just go ahead and connect everywhere you want to. And it obviously has a reach on a lot of devices. The debug we just saw if it's called F12 and all these buttons are very familiar to you right now. It's called Dom Explorer console. You can see the DOM. You can debug in your code and see the console which is coming up right in your website. You can just write a small JavaScript lines and see what's happening there. You can see the network performance was happening and all of that that is all good. But what about debug on mobile? That's still a pain right now to be honest. We have tools but and they work very well. They're excellent. It's just that they're not agnostic. They're not technology agnostic or their platform agnostic. Winere is a wonderful tool actually. Winere I think for that you need for the debug client. You need to have a webkit based browser where it should be Chrome or a Safari or any other webkit based browsers. And if you actually want to hold a mobile phone in your hand and see what's happening, see if you want to see the DOM Explorer or basically if you just want to get the debug information out of it. Based on the priority that where you're getting that view of whatever that's happening, which is called the website where you're trying to debug and the view where you're trying to see the result of that debug which you're doing that if you want to make it truly cross platform, the tool all on is just for that. It's open source and it's cross browser and cross platform. So it is a remote web debug tool. It's totally based on node socket IO node. I'm sure all of you would have worked on that or heard of that before is based on just node socket IO for the connections immediately that the transfers are taking place when you change something in the DOM that should reflect immediately in your dashboard how that happens is done by socket and it's open source. So this is a very new tool. So actually feel free to contribute to this. It is on GitHub. I'll share the links later as well, but it's just to get you started on how you can debug your website and specifically for mobile eight plugins by default. The console plugin. There is a console plugin. We'll see what some of them are based on the time we have. We have the modernizer. All of you are aware of modernizer. Excellent. So it will just tell you that if you're even on a mobile, what all features that supports, it will just give you in the dashboard itself. And with that, let's go on to the demo. So the first demo, I'll be doing myself in the second demo. I will need your help. So that may go haywire. So bear with me. But in the second demo, I just want all of you to take out your mobile and all your laptops and connect to the Internet. If you have and open a website, which I will share the link with you later. But the first demo is the demo in which I will just show you how all these things look like. It is the best when you see it in practical and I'll just get. Okay, so this is what the dashboard looks like right now. I've hosted the server on my local host for now. So I and once you I've just hosted this and now where I want the website, which I want to debug, I've just included a simple script src tag there to refer it to my local host server so that it gets the reference to my wallet or JS and I can see what's happening right there. So right now this is just showing you a simple UI at the left. It says identify a client. I will just so at the right, I have a website with the URL. You can see cdn.org. It's just hosted somewhere right now. The reference is given to local host my local server and as soon as I start connecting multiple clients to it. So right now I have only one client connected to my server. So it will in the client list, it will just show me one which says windows 0. And if I want to identify a client at the right, it just shows me number zero. So it identifies which client all of us have. And once you go ahead and connect to this, if you see right here, it's showing up say a DOM Explorer, an object Explorer, XHR for the XML request, which are coming in the network monitor, the source Explorer. So for that, if now I want to just start live debugging it, the left, it shows you as soon as I select the vector at the right, it starts shading that or as soon as I even want to change it. So say if I just want to change there, hey there at the right, it just live debug it getting all the connections are happening through socket.io. And again, all these connections at the right, if I we have some sample buttons right here called trigger dot error. So if I just click on that, it just says unable to set property or if I just go ahead and to the console log button, the left, it just starts showing me this is a simple log method. So a simple website of a dashboard live, but the only point here is that the server is local. So if you guys want to connect it right now, you won't be able to. So let's actually try with multiple devices at once and see if it actually works. So for that, if you could just either scan this URL or go to this website, it's the same thing. If you can just take out your mobiles or just open this URL right now, and this is the view I'm getting. So as soon as all of you start connecting to it, this list starts increasing at the left. It's showing me iOS, Macintosh, Android, Mac, iOS. Again, the list starts increasing. Let's give some more load to this. So now actually let's start live debugging this. So say I want to try out Android one. Did all of you get a number on your screen? Okay, all of you are getting that. So in fact, and you started clicking on it. Excellent. So who is zero? The number zero iOS? Okay, so you're right there. And I guess I can start accessing your device now. Let's just hope this works. I think you're clicking blue, blue, one after the other. So I'm just getting that information right here. So all of you, once you start clicking the color of your shirts, and if I select your device, I'll start getting your information and at the back end, it's nothing. It's just on that click, I'm getting a console log and showing it right here. So I hope this loads up. And yes, it does. So if I just select that, I hope it's got shaded in your mobile. Yeah, excellent. So this is what I just wanted to show. If I start doing that, it starts live debugging that. And if this just allows me to open it up, again, whatever information I have, just like the previous one, I can live debug that, I can change the information right there, start writing your name and all of that. So in fact, let's try one more. So that it's assured that it works and we guys didn't pre arrange this before. So who is say, number nine? Excellent. So you are wearing a red shirt, I believe. So you have been picking that number. And again, once you just start doing this, it will, it starts, yeah, it starts showing that. So again, we guys, earlier, it's, it's working fine. And now if I just write here, it should start seeing welcome is your device highlighted. So excellent. This was the demo of all I have. And now I'll just give you how you can go about doing this. I'll just probably take some of some five minutes more. And based on that, this is the architecture, actually, what's happening at the back end, where you have a server, you have the client side and based the dashboard is right here. So right now there are eight plugins. I'm just showing three here, the modernizer plugin. Again, I just went to the DOM Explorer in my view, the dashboard, which you saw that had some more things that had a modernizer. So I can see what all standards, what all divide, what all features does his device support or his device support. All that list comes up. And you have some more. So I use the DOM Explorer, I use the console plugin. And based on that using socket, I connect to the server, the server messenger. Again, it uses socket connects to the client messenger. And on the client side, that plugin is loaded. So all the, all the code I've written on that website, which you just saw, just saw. And the other one, the server which is hosted on my website, I actually hosted hosted that on cloud so that all of you are able to access that if I would have done that on my local, obviously, it wouldn't have been possible. So how to use wall on? It's a simple npm install. You just go to your node command from just type npm install globally wall on. And to start the server, you, you write wall on and it gets started the default. It has a default port on which it starts listening to connections. That is the one three three seven of the local, which I just showed you that was running on my port one three three seven, or you could just go ahead and clone or fork this GitHub link. And in my website, this was just one line of code where I wrote the script SRC, which was coming in. And based on that, if I would have wanted to host it on my cloud, I would have given the URL instead of local host slash one three three seven. And bam, that's all. So further ahead, if you just want to go ahead and see how to create a plugin, this is the link for that. So the work is still going on. There are eight plugins till now. And I mean, there are some more coming in. So one of them, which I'm aware of is where I could control all the devices at once so that right now I'm able to push some, some say a message only to one person's device. They want to access all of your device. How can I do that? So that is the thing which is work in progress. And if you have some more suggestions, just keep on giving that. And I guess, yeah, deploying wall on the JS to cloud, you can simply do that. So whatever, whatever provider you're using, you can just go ahead and use that. I published it on Azure. So it had a simple deploy to Azure button on the GitHub link, which I just showed you that directory had a simple deploy and I published my dashboard to Azure. Otherwise, you can just simply use it and use the source control deployment and directly fetch that to your cloud. And how can you contribute? So I will just, in fact, open up this maximize this link. This will redirect you to that GitHub URL. If you have some more suggestions, if you have some, you want to file some bugs, in fact, you can go ahead and do that because the team is actually actively working on this and feel free to give feedback on this with that. Thank you. And this is my question. Hi, great talk. So I was just wondering how does it exactly give us any advantage over valence or iOS, WebKit proxy, which Google open sourced? Exactly. So similar to that, it's, it's agnostic. It will, it does server, the dashboard, which you want to view it, you can do it on any, any device. And whenever you're able to run JavaScript, say, if you want to run JavaScript in a Cordova web app where you're trying to build an app, you've written some JavaScript into it and you want to live debug that. So if you just insert this code, SRC code, and you start debugging it from a separate browser, that will start happening this. So once you're talking about this specific to say Chrome, they work perfectly. I'm not saying that there's some issue with that, but it's just that you need to have Chrome for that or you need to have a Safari for that. Yeah, just one more. You're talking about a platform agnostic. So I haven't actually read about valence and how they perform in these scenarios, but how does Berlin perform when we have a container around like, for example, Tizen, the WebView when we have native, as well as web apps running all together, sharing APIs. For example, the Tizen watch API, they can actually call C codes from outside. So in that case, how does this, so you are actually injecting a JavaScript in a DOM node and it actually gets everything similarly like valence, right? So will it like still walk in those cases because those are the web apps which are going to come, right? Yeah, so if you just use simple, you use JavaScript in your code, you're using, you're making trying to make a application, be it a hosted web app, or you're building a website or any other. If you insert this, the best thing about this is there is no dependency right here. So if you want to actually just refer to this wall on dashboard and start using it, it will, it will start debugging your information. The only thing is you may want to customize your plugins for your specific use case. It will work when you have a simple HTML page or a web app. But say if you don't want to enable the modernizer plugin for that thing, you're using a app and you don't want to see the modernizer plugin for that, you can just go ahead and customize your own push which you have forked from that GitHub and actually just go ahead and change the references and just enable that to false if you just want to disable that. Thank you. Hi. This may be a like a really basic question as I'm a bit confused. It's like, let's say I have a basic website, okay, and that is hosted on some server, okay, and on separate mobile devices. Now I really want to debug it again. How I can start with Verlon like I have a website which is hosted over there. So what all things I need to do to start debugging with the Verlon just write that one line SRC code on your website that link to that server on server right? Yeah, the wall on server. So if you want to locally debug that you can simply host it on your local host and start doing that. But otherwise, if you have a team and you actually they want to so person in a different city and you just want to see access this device, you could actually just push it to cloud and write the script. So that is script is required, right? So that Verlon is, it's like, I can't do a debugging for the Gmail, which I don't have access to the code with right? For a website, which you don't have access. Let's say Gmail. It's for your own website. It's for your own website only. I can't do any debugging for the website, which I don't have access to the code base. So there is one more tool. I don't I don't know if this will be useful to you. If you want to actually scan a separate website, someone and someone else's website. So this is Oh, sorry. This is one more tool which you can use where you can run a scan on a URL and it will start showing you some information. So say for example, I entered make my trip. Now it will start showing you that whether it will give you some suggestions on the scanned areas, whether it uses legacy plugins and features. So if you actually go ahead and see in detail at the bottom, we'll tell you the cross browser experience. It does not support HTML for your inputs. If you just click on that, we'll show you what all what we're talking about right now. This is one more tool if if you're looking for this, it is available at aka.ms slash edge scan. Just just if you need this. Yeah, one more question. No, we're out of time. Officially, you can take all your questions to him offline. Yeah, and we beg for tea, which is sponsored by Walmart last