 Hello. I guess you guys had a good tea. So, I believe every one of you will agree to what Brenda and I had to say about JavaScript here. JavaScript has evolved over the last few years and it's right now the most competitive programming language that we have. It's right on top of everything else on its domain there. We have JavaScript that's running on the client side. We have, we always have been building web applications using JavaScript. It's now running on the server side. We, tomorrow we are going to have a talk by Sharmila about you know flying, flying drones using JavaScript. So, we can, we can safely say that yes JavaScript has evolved over the years and we can you know go ahead with the whole idea that yes it's the, it's the future that we can safely look at. Right. My name is Rahul Rao. I'll be talking about building cross-platform desktop applications using web technologies with the help of Electron. I'm a senior software engineer at Intuit and I've been working with web technologies for the last four years around. My agenda for today is we'll be going through an overview of what desktop applications are, how they have evolved over time and introduction to Electron and overview into the main process, the renderer process, how the communication that happens between them and we'll be going through some sample demos and finally we'll have the Q and A. So let's see what, what is a desktop application or what makes a desktop application. So desktop applications have always been very powerful. Right. You have access to the lower level OS resources or native resources that we call them. You used to have these updates that used to come. Remember those updates would come and you'll actually have to go and install them. They were really, really irritating to me but yes that's how desktop applications used to work. Then you have, then you used to have the crash reporting. Anytime the application would crash you can actually send a report back to the, to the company that has created it. You had the native menus, the menus I'm talking about are the top bar on your OS. Right. You had notifications, your, your OS level notifications that the application could send you and you, you have the keyboard shortcuts. So the keyboard shortcuts are, you know, pretty neat when you, when you see how they actually interact with the application and gives you a shortcut to the application from going one part to the next one. Let's see how these desktop applications have evolved. Right. All these desktop applications that we see nowadays they have, they are, they have a much better UX or user experience and they are much more usable nowadays. You have applications where the data just do not sit on your client or on the desktop. Your desktop, your application's data is now getting synced automatically to the cloud. Ever notice an excellent example of this? And you have these auto updates. Now you do not need to go and update the application when you as, as soon as you get an update from the, from the company you do not have to go and install them. These applications are now getting auto updated. That's a big win for us. So what, what is Electron? So Electron, looking from, from a bird's eye view, Electron gives you a framework for creating cross-platform desktop applications using web technologies, basically using JavaScript. And it, it uses JavaScript to provide a runtime environment where using, where you can use a rich API of, of your lower level OS. It, the biggest advantage that, that Electron gives us is you just basically create your application once. You develop your application once and you can, you can run that application throughout anywhere on any of the, you know, OS platforms that you wish to. So you can actually think of it as a minimal chromium browser that is controlled by JavaScript. So let's see at the, at the applications that are already available in the market that are built on Electron. We have, we have Slack. Few of you people must be using Slack for communication, right? You have, you have Atom, the Atom editor. All right. So Atom is pretty neat, right? If you see, it's, it's got a lot of resemblance to sublime text, but it does give you a lot more advantages over that. It does. Okay. So Visual Studio Code is, is Microsoft's first code editor that they have launched with, which actually runs on, on the Mac. So if you look very closely, it's actually a hybrid application. What they have done is they've created this application using web technologies and they have packaged it together. Something similar was done by Adobe when they created the Brackets editor. And Google too had their own, you know, take on packaged hybrid applications using, by something called as Chrome package apps, but that's gone into the background. We really don't know what's going on with that right now. So let's, let's look a little deeper into what Electron's app structure is. So it's, you know, Electron is quite fun to work with because you, as a web developer, we do not need to learn anything new when we, when we are building applications on Electron. It, it uses the same old package.json. In your package.json, you just, you just provide your app name, the version of your application and your main.js. Your main.js is, or whatever you name it is, is the first or the main, or the first JavaScript file that your Electron is going to load for you. If you see this is your app structure, your app folder, you have the package.json, your main.js and your index.stml, or the HTML file that your application is going to load for you. So the main.js, when we say this is the first app, the first.js file that's going to load, that's something called as the main process. We'll be talking about the main process and the render process a little later. So this is how a sample Electron application works. You have the Electron binary that loads your main process. The main process in turn is going to render or load your multiple renderer processes. So each of these renderer processes are going to hold your HTML files that you want to load. So you can, you can load multiple HTML files, but each of these files are going to have their own renderer process, or they're going to load inside each renderer process. Think of it like, like tabs on your Chrome browser. Each of these tabs have their own processes. So look into the main process. So it's it's basically the process which is responsible for communicating with your lower level OS GUI. It communicates with your OS level GUI and creates a GUI or your application window for your desktop application that you create. It's, you know, it's, yeah, it's responsible for interacting with that. And it's the main file, it's the main process that gets loaded from the main file that you load from your package.json. Remember the main.js in your package.json. This is the file that gets loaded from there. So just loading the renderer process is not going to load the application. You need to load some sort of a web page, some sort of a view into your application. So renderer process is the one that's going to load your HTML files into your application, into the desktop application for you. It's, you know, you basically, using Electron, you get the power of using IO.js APIs, which gives you, or allows you to interact with your lower level OS APIs that we have. The next, so yeah, let's go and have a few demos. So I'm going to have a very simple demo with a very simple sample application that I built. And we are going to talk about how to, yeah, how to, how to create a sample desktop application using Electron. So remember the package.json, is it visible? Okay. So if you see, this is a very dead simple package.json that we have. This is the main file, this is the main.js file that I was talking about, the main process. And yeah, this is it. You just, if you see the index.js, what we do is you basically load the app module, and you load the browser window module. Here, or inside your ready callback, what you do is you load your browser window, you provide what the height and width of your window should be, and you load your index.html. If you see the index.html, it's actually very simple. There is nothing. It's just a hello.js foo. What it does is it loads your application window. It loads your HTML, it loads your main.js, which in turn calls this index.html and loads it inside your Electron container. So if you were, like I said, remember you can have multiple renderer processes that can be running. So you can create multiple, yeah, you can actually load multiple HTML files. What I'm going to do here is I'm going to load another, you know, a secondary HTML file inside the same container. If you see that right now we have two different renderer processes that are getting loaded inside your main process. If you see the logs, you can see that Electron provides us two different renderer process started logs that are coming up. So this is a very simple, dead simple example of how to create a desktop application. We'll not be going through the build process how to build your application or package your application so that you can send it across to be installed at different OSS. But if you need some insights or if you want to discuss on anything, I'll be sitting outside. And we can have a discussion on that. So taking forward, let me show another demo. This is a simple music player that I created. Now if you see, as soon as I load this, I get the Chrome DevTools. So Electron actually gives me, this is the package.json. It is again similar to that. You just load the main.js file. If you see the main.js file, you will see the browser window and everything that is there. I load the index file and I also open the DevTools for debugging. And so if you see the interaction with the application, let me close this, I can actually just go ahead and play any of these. So what you can do is you can even just go ahead and play any of these applications, any of these songs. And if you see on the left hand corner, I have created these sample menus for the application to control. I can go and control the volume there. I can actually go and change the track from there. So these sort of communications I can do with the menus, where Electron gives us this option of creating menus for us. If you see the index.html file here, it is a simple index.html file where I load a music.js file which controls the music for me and the menu.js. Let us see the menu.js. The menu.js actually just requires the menu module into your application and it loads or it creates the menu using a template. So the template is simple. It just takes a JavaScript object for you. It takes an array of objects inside your application and creates the menu for us. So if you see, I created a label called sound control. I created a label called sound control. Inside that I have volume. I have all the three different options that I get there. If you see, I created sound control inside volume. I have the three options that I created. Now if you see, I can create which functions or which methods you need to call once I click on these menu items. So creating menus is actually quite easy when you come to Electron's application buildup. Now I also have something called as keyboard shortcuts. We are talking about the features that desktop applications generally have and keyboard shortcuts is one of the most important parts of it. So I can control this application using keyboard shortcuts. I can change whatever I was doing with the menus. I can do it with keyboard shortcuts also. So you have to understand if you see the main.js file, I have loaded this global shortcuts module into this. So your shortcuts are getting caught at your main.js or your main process. But your sound or your music is getting controlled from your renderer process. So there has to be some sort of a communication between your main process and the renderer process. So the communication here is controlled by IPC. It's called inter-process communication. So what you do is you actually register what your shortcuts are, say alt plus u. And as soon as you press alt plus u, you are going to send this particular message to the main windows. This is the main window or the object name for your renderer process. So this message is sent to your renderer process there. Now if you go and see at music.js, I have actually used IPC module here also. And I'm catching this volume up event or the message. And as soon as I get this message, I am actually calling increase volume function. So I can increase the volume of the music that is playing. So we have talked about the main process, the renderer process. We have talked about the native menus. We have talked about the keyboard shortcuts and how do you have IPC in between them. So any questions? Right. So you can, see basically you can load one stml file, right? You can load stml files in your application. So we did, you can actually create an SP application using AngularJS. And you have multiple views that are there. Basically you create a normal Angular application and it will work seamlessly with Electron. So Electron supports almost all the frameworks. Yes, yes. It's as similar as building an application for a web browser. It's just you can package that for a desktop application. Okay, great. How does Electron compare to nw.js? Are there any significant advantages in switching existing application that I may have? I started doing this on Electron just as part of an experiment. I really do not know a lot about nw.js. So I can, I can get back to you. You can just drop me a mail. I can just get back to you on that. I was actually leading on to, sorry. Right. I was actually leading on to Node WebKit, which he mentioned. But I wanted to know what are the packaging, how do you package and build a binary out of this? Right. So Electron's packaging is, is different. You can, you can actually create exe files using what we did was we used something called as NSIS for packaging to exe files, right? Or what you can do is you can just create a simple .app application, which will just create a .app. But that's, that's actually very simple. It's all built in Electron. Yes, yes. It's all built in Electron. So you can just, you know, install the Electron's pre-built, there is a pre-built that is always available. I had one more question was you saw, you showed how to do IPC. I mean every window is a process. Yes. Or every page is a process. So you actually did send string messages. Yes. What about rich objects if you want to send? So you can also send objects or basically data to your process in between. You can send it from the main process to your render process and vice versa also. I can, I can just give you a demo on that. I'm sitting outside in the it would be. Is it a sync or a sync? Sync. It's basically sync. It's not a sync. Okay. You'll have to wait for the message to be received there for the next message to be sent. Hi. Great talk, by the way. So my question is see everything will have advantage and disadvantage, right? So what is the downside of this? And you know, my main question is while coding what we should keep in mind all those things? See basically biggest disadvantage that we saw was any, any framework or any library that you want to use that actually gets attached to the window object directly. Say for example, your jQuery framework if you see you have to see jQuery what it does is it tries to attach it. It checks whether you are running it on a window or you're running it as a module. This is actually running as a module. So you cannot directly go ahead and integrate jQuery into the application. You actually have to do a require of jQuery. So basically it's all about understanding how this application behaves. There are no downsides as to as per the coding standards because you actually start using the application. You start building the application as you will be doing for a web application. The advantages that you get out of this is there are twofold, right? One is all your resources are there in your client side or there in the box. You do not have to worry about your, you know, you go and remotely fetch all the resources that your application requires. So this is one of the biggest advantages. The second advantage is you do not have to worry about cross browser compatibility. It's like my PM coming and telling me was you can build this application and just expect everyone to run it on Chrome. That's the best thing that anybody can tell me. Hey Raul, one question. Does it support native operating system notification system? Like if it is on Windows 10 then it will handle the notification center and will it take care of the cross-platformness of the operation? Yes, so if I'm on a cocoa on a Mac then it should show the notification accordingly. Then if I'm on Windows or in Ubuntu, it should support the, so basically do I have to write platform generic code or it will handle automatically? It will handle. I mean, Electron's previous installer was not handling Windows notifications quite fine. But right now with the current version that you get for Electron, the Windows notification is working perfectly fine. You just write one code for notification and it works perfectly for all the cross-platforms. Thanks. Quick question here. Yeah. Is there a way to access system features like camera, mic and... Oh yeah, you can. Basically it gives you access to all the native resources that your OS gives you. So you can control your camera or your Bluetooth and your USB and everything. So you can definitely do that. And these are all platform specific, right? These are all platform specific. But this Electron will give you APIs so that you can utilize them without a lot of worry about how you're... So are these in the form of plugins or how do they work? Okay. I can show you an example. I have it. Basically it's... I'm sorry I'll have to cut you. Is this going to be on time? Yes. Please take all questions to Rahul of...