Servoy and Electron Native browser apps

Hello and welcome to another Servoy webinar. My name is Steven Portoy and I’m with Professional Services at Servoy with me as always is Sean Devlin, Arion John, and Steve, and this is the 39th webinar in our Tech webinar series. And I just want to thank Sean for all the effort that he puts into this webinar series. It’s really amazing that, you know, every couple of weeks were able to get a demonstration of another amazing feature. And today is no exception. Today, Sean is going to teach us about using a tool called Electron in order to create integrate the NG client, the Servoy NG client, into desktop application. So that’s always been a challenge with HTML, you know, based, or web based solutions being able to access things like printers and barcode scanners and the hard drives and being able to save files and retrieve files. And today, Sean is going to show us some pretty incredible tools to allow us to do just that. So as always, if you have questions, there’s a questions panel. Feel free to type in your questions and we will do our best to answer them at the end of the webinar. And with that, I hand it over to Sean. Thank you, Steve. And that was a very sweet introduction. And at least 75% of those words. So honest. Well, yeah, I mean, every now and then we have announcements to make, new stuff coming out, some of these topics are how to’s best practices. And every now and then I like to do one. I’m calling this from the Servoy Labs because this is stuff that’s, you know, we are in our D company. We are always looking at what challenges our customers are facing and what’s changing the technology landscape. And we want to try to be, it’s difficult to be a step ahead of all the new stuff that’s coming up. At least want to be sort of a step ahead or in step with our customers and what sort of needs they’re facing. And this is one of those all time dilemmas that we’re seeing. And we actually did a webinar about this a few months back doing desktop integrations. And we mentioned in that webinar that we’re working on stuff where we think we can improve the architecture of this using some tools that are available. So this is kind of the fruits of that work. This is not a new thing. This is something we started looking into many months ago. And so today a colleague of mine has spent a lot of time working on this and today I’m happy to be able to really play with it. I was playing with it just minutes before the webinar and I actually added a new electron feature about 10 minutes ago and I got it working about one minute before the webinar started. So it was kind of exciting for me to see that this is not only possible but actually pretty easy and to see things come together. So that said, always as the tradition with these webinars we’re going to show you some demos first and then we’ll talk about what you’ve seen so you get to actually see stuff up front. I’m going to do two or three demos here. First of all we’re going to just show you how to integrate with the file system right inside the NG client. So typically a browser would never have access to look and browse through your file system. We’re going to take a look at integrating with printers and then also a bit about native operating system dialogues too just to give you a flavor about the kinds of things you can do. So let’s jump into this. You can see that I am running what looks like a normal NG client application, HTML5, Servoy application. However, you can see that I am in a native window here. I have regular window controls up here. I also have an icon in the system tray. So this is not sort of a browser application. This is an electron application. And you can see that already I’ve started to look at my file system. I built a simple little file explorer here. I can click on one of these and drill down into it. So I’m actually, as I’m clicking through, I’m getting information about what’s on the file system. I have a small bug in my tree control where it’s collapsing when I update it. But every click I’m going back and I’m reading from the file system. So that’s one example and we can not only just see what’s on the file system, but everything that you can normally do for IO operations. We can write files, read files, move files, watch files, get notifications when a file changes. All of the things that you would get, say, from Servoy smart client, for example, or any other rich desktop client we can do with the file system. Another example would be printers. Now if I print something, you guys can’t see it anyway. So I didn’t really really would do that for demo. What I did do is show what printers I’m connected to. So I could select one of my printers and say send a file to it and print it that way. So we can see printers. We have a lot of customers that have scanner requirements and that’s a big challenge for them to move to browser based applications. If they need to have document scanners, that sort of thing. Any other hardware as well talking to COMP ports, zero ports, talking to pieces of hardware, like cash drawers, barcode scanners, that sort of falls in line with this type of example. Finally, this is the one I got working literally one minute before the webinar. I added a little feature to show some native OS dialog. So we’ll put a title and a message and we can show that as an error. Now you can’t hear this, but it also made the little Windows native jingle sound to let me know that there was an error. And I could also do this as a dialog. I didn’t actually push the text in there. It’s just as a generic information here. But then you can actually capture the feedback. So of course, Servoy has the dialogs plugin built in so you can show this sort of little browser dialogs. But if you want to go for that native operating native OS feel, you can do that as well. That’s just one small example of what’s available. Let me dive into a few slides. We’ll really give you an overview about what this technology is. First of all, the reason we’re looking into this, there’s many use cases that it could solve. So it’s a very generic kind of tool. And it’s really up to you guys how you want to use it and where you want to take this. Access to the file system, reading and writing files, doing things like talking to other applications. Let’s say I want to open a file and Microsoft Word and watch it and then be notified when there’s a change. We’ve looked at that use case already. Using multiple native windows, we get asked this sometimes when people are first evaluating a browser application, they say I want to open up a customer order in one tab in the browser and then open up another tab in the browser or something like that because they’re used to doing that on a desktop application in Windows. Well, now we could do that with native windows too. So you could have multiple Windows as well going on. Typically in a browser application, if you open up two Windows, they can’t talk to each other. Of course, we get around some of those limitations when we get into something like electron. Accessing the network, as I said before, any kind of hardware that’s connected to ports, you can put an icon in the system tray. The end result of this is really an executable. So all the things that you couldn’t do in a browser application. The reason that we can do this is we built a sort of a Servoy client in electron. So this is really the two primary technologies that work here. A bit more about electron. It’s an open source framework. I’m showing you Windows right now, but it is cross-platform so we can do this on Mac and Linux as well. It’s really meant to take HTML applications like Servoy applications and run them in with native access. And the way that works is it’s really running the Chromium browser engine underneath it. And that is sort of running on top of Node.js, which is just a generic JavaScript runtime that gives you access to everything. It’s just a framework for doing all sorts of generic things on a machine. So the architecture looks kind of like this. You have the Servoy client. It’s sort of running inside electron, which is really this browser engine. And it gets access to native things through the Node.js APIs. At the end of it, you get an executable. It’s so instead of bringing up a URL in your browser, you get a .exe or a Mac OS executable. And so the way that we do this is that we take the electron client project and there’s some build scripts and we basically modify some of the configurations and we run it and it spits out an .exe or some other executable. And then you can go and give that to your customers and they can run it. Now a part from just running the ng client inside of electron, you can take advantage of what’s available in the underlying libraries. So to do that, you’d want to implement a native function in electron, which is really Node.js. I didn’t really have any experience with Node.js and I didn’t really have any problem to do some of the things that I just did. It’s just a pure JavaScript API. It’s pretty easy, kind of like Servoy. And so what you do is you might say, well, I want to do the show native OS dialog and then what we need is some way to call that from the Servoy client. And that’s where these ng services come in. These are already in probably the applications that you’re using today. Anything that’s interacting directly with the browser, we expose these to what we call ng services. So these are available to sort of hook into the client side. Once you do this, then any Servoy solution can call this. It’s not really specific to your application. It’s more like a framework that your application runs on. So I know that probably doesn’t sound real easy. And it’s not for everyone. And that’s kind of why Servoy exists. We understand that most developers aren’t going to do this. They want something out of the box. And that’s kind of our whole philosophy. So probably going forward, it’ll be Servoy who’s going to provide you guys the hook. So we want to look at use cases and we want to understand what kinds of native integrations to people need. And then we can extend the project around that. The part about generating the executable, when I look at the work that I went through, I’m going to show you kind of how the build works. When I went look at the work that I went through, I’m thinking, you know, all this really is is a URL for the ng client. So to generate the executable, we could probably come up with some kind of builder service to auto generate, similar how we have the phone gap exporters. But we really need your help in order to do this. So we want you guys to help us to grow this project and send us your use cases and give us your feedback. I’m going to do a small demonstration also of sort of how this is built by actually building an executable in front of you. So what I’m going to do is go over to my build XML file, which is where things are configured. And I’m actually going to change the application that’s being wrapped here just by sort of commenting out and commenting a couple of lines here. So you could see that the URL parameter in this build file is pointing to just my local local host, 8080, just really the debug client from Servoy developer. And what I’m going to do here is actually recompile this to point to demo.servoy.com, which is where we have sample galleries. So I’m going to save that. I’m actually going to close the executable here. And I have a command prompt here and I’m going to rerun the build. Now it’s going to take a minute, but just by changing that one parameter, we’re really telling that browser, that chromium browser engine to go and load a different resource. And we can generate an executable for, we just have to specify what operating system and what architecture. This is Windows 64. And this then I could distribute to anyone to wrap this. Okay, it’s finishing up. And so what it’s done is it’s created this project here and it has a bunch of libraries, but at the end of the day it has my exe with my logo on it. And so I’m going to double click that. And it opens up with a debug stuff open. So this, if you haven’t visited demo.servoy.com, you can and you get this web application. But here you can see that it’s running in a native application here with a system tray icon and all of the features that worked there, they work the same, you know, in this application. Plus you get the added benefit that this application could do things that the regular browser application couldn’t. So what we’re going to do is we’re going to put some of the samples that I showed you actually on demo.servoy.com so that if you run this executable and will distribute this executable, you run this executable, then you be able to see some of the native examples as well. We’ll be doing that here when we share all the information about this webinar. So I’m going to flip back to the slides and just put up some of the useful links. The project is available on github.com slashservoy slash electron. You can have this today. It’s available today. It’s not, you know, it’s not super easy. It took me about half a day to get everything set up and to build my first executable. Once I got going, then I can rebuild these really quickly and make small changes. So it’s not for everyone. If you want this today, you can go there and do it. Otherwise we’re going to be working to make some sort of builder service to make this a bit easier for people that just want to plug in their URL to their server and generate the executable. Steve, do we have any questions? Oddly enough. No, just a comment from the attendees saying how that’s a brilliant webinar. Looks like everyone is just sort of dumbfounded at how exciting this is. Do you, are you able to show a little bit of the solution and how the code behind calling things like the file system and things like that? Or is that still? Yeah, no, thanks for reminding me. I usually show the code after the demo and I kind of bypass that. So let’s go in here. So in the file example, the part where I was actually reading the file name is, give me one second here. I think it was child does the other one. Right here. So the part that I mentioned about to expose this stuff now into the programming environment, we have this, we just create a plug in and exposes one-off function. So here I have the things that I can do, like showing the error dialog, showing the info dialog, and then listing the printers. For example, listing the files. So here I was listing the files and I passed in the parent ID. Every time that’s one of those nodes was clicked, I went and I fetched the child files just for that node and passed back some information. The methods that would be in this plugin are still kind of wide open. Like I said, I added the method for the dialog just this morning when I was playing with this. So it’s this part that I think most developers won’t build that stuff themselves. They’ll come to us and say, hey, we need to be able to watch files and be notified if a file changes. We need to be able to get an image from a scanner, that sort of thing. And then we can probably come up with some generic plugins like this that we’ll call down to Electron and get access to the native resource. Great. So now there’s questions. So the first question, do you need to generate a new executable when you update your Servoy application? Oh, that’s a good question. Okay. Do you need to make a new executable? So if I were to go in and say, I want to change one small thing here in my application, now what happens to everyone that I’ve already given this executable to, is it broken? The answer is no. Just because it’s a native application does not mean that you have to redistribute it every time there’s an update, it’s really the same processes before your application is always up to date because it’s a web application. And what you deploy to your app server is what counts. The executable is really just saying to chromium and to Electron, go here to get the web app plus whatever extra stuff we need. So this doesn’t take the place of a web deployed solution. You still need the Servoy server and the solution needs to be running on a server somewhere that the executable can have access to. Correct. Correct. Yeah, absolutely. It’s just like a container in which you know, you know, web application can run. And I think you mentioned this, but it does it do all the operating systems, Mac, Windows, Linux. Yes. Yeah. Only built in EXE for my example, but you can make binaries for, you know, 32-bit Windows, 64-bit Windows, Mac OS, et cetera, Linux. All right. There’s a question. Is that a way that Servoy can work with Node.js? Yes. So underneath it all, the native code here that is, you know, doing things like getting a list of printers is actually using Node.js APIs. So for me, it was, you know, it was really easy to write the feature that showed the dialogue because I just went in and looked at the Node.js APIs and figured out how to do that and I sort of hooked it up and exposed it in that plugin. You know, and I don’t have any Node.js experience really at all or electronic experience. So it’s fairly straightforward. There’s a question. If you build in more features for the executable container, would you have to redistribute that? Yes. So that’s one example where you would rebuild it. So if you wanted to add a new hook into the desktop, then you would have to redistribute the binary for that. Okay. And Thomas asks if you could please explain more about the Electron setup. Now, quite sure how to answer that question. Perhaps you could put another comment in, be more specific. I think maybe how does one get access to that, the plugin, the Electron in your Servoy as far? Okay. Right. Well, so the plugin is something that we would distribute. I mean, if you really brave, you can write it yourself, but that’s like an Angular.js service. So that would just be something that we will distribute, just like we distribute the other web packages. That’s a standard Servoy web package. So the Electron setup, you don’t really have to do anything. There’s a builder that builds the executable and includes Electron with it. It’s not like you have to go. And there’s nothing else that the end user has to install. They get an executable that contains everything or a package that contains everything, including the executable. Okay. I would use an Electron via good way to convert from Smart Plant to NG Client gradually. Well, I don’t know. I mean, it certainly is. If you look at the Electron Client, it’s definitely positioned to sort of replace the Smart Client in terms of the Smart Client is a desktop application. It already has these things, you know, this sort of access, but it’s a true desktop application. It’s not a web application. So if you wanted to move to the latest, you know, the latest offering from Servoy and an upgraded NG Client, you could. And then you could also do that without the limitations that you would have had, you know, because you may have a Smart Client application that already has, you know, file access and you know, network access and things like that. So, yeah, I mean, the answer is yes. Although you still have to rebuild your solution for the NG Client. So what I’m saying. Another question from Thomas, can I run both NG and Electron at the same time? Yeah, the answer is if you have that, if you distribute an executable or a solution, can they also access that solution just in a web browser? Yeah, totally. Some examples of applications that already use Electron. I don’t know if you guys use Slack Messenger or Skype. Those are running inside Electron. And for Slack, we use Slack as a messaging service and you can run the executable or you can just log in through your web browser and do it there. And if you’re running your web browser and you try to attach a file or something by, I forget what it is. It’ll tell you you need to run the native desktop app to be able to do that and it tells you the limitation. So you could do both, but you have to just have that caveat with your users where if they try to do something, you know, like get a list of printers and they’re running the browser, you need to say to them, you’re not running in the desktop app, you need to switch. So there’s another question. Could you give us a webinar to show us how to avoid communicating with node-to-date node-js, especially calling the node-js functions? Well, I would ask you what your use case is. The, you know, in the example I showed you here, the communication with node-js happens in that plugin. And I don’t know if it’s worth looking at the source code for that plugin. It’s mainly Angular, JS code, but the electron API and the node-js APIs are at hand when you’re running inside electron. All right. What is the mechanism that permits Sufoy and electron slash node-js to communicate? Again, another sort of low-level architecture question. The mechanism is the fact that this executable is compiled with all of those dependencies at hand. And so that, again, the plugin is what allows them to communicate in that plugin code, which is just an energy service like the other energy services that we distribute in there is where any code that you write that you want to talk to electron or node, you can do it right there. Okay. Will there be a way programmatically to detect whether the user is using electron or a browser? Yeah. Yeah. We have an application of client to think of client type. Yeah. Well, you know, at this point it’s still the client type is still the ng client, right? Because it is still a browser client. Electron itself is a browser. But the same way we can tell which browsers are being used, we can tell that it’s the electron browser because that has a, you know, a different signature than the other browsers. So the answer, the short answer is yes. And you said to what’s the roadmap as far as what’s available now? Right. So, again, this is coming from the labs, as I say. So this is something that, you know, we’re cooking up, but we felt that it was ready enough to announce and to show you guys. The roadmap is kind of determined by you and what your needs are. So we’re really looking for, you know, we’re really looking for use cases and the types of the types of desktop integrations people want. This is available today. However, you’d have to generate the executable yourself. So there’s, there’s all the instructions are here on the electron project site on GitHub. There’s a read me there with, with step by step instructions on how to build your first executable. It’s not, it’s not terribly difficult, but it’s also not trivial. So going forward though, what Servoy wants to do is provide a builder that will actually generate the executable for you so that you don’t have to go through that step. Because the most simple version of it is really, you saw when I changed the URL from the local host debug client to demo.servoy.com, you know, in that just that one parameter change, we, we wrap a whole, a whole application. So at the very minimum, we could, we could generate, you know, pick your operating system and architecture and, you know, put in the URL for your application and it will generate an executable for you. Now going forward, it might be something like, you know, what, what features do you need? And these would be standard features that were able to include. So I think that the goal from our point of view is, is to not have people building electron features and writing code for no JS, except for those that want to go ahead and do that and get started today, they can. But we’re really, I really encourage you to contact me and, and let us know your, your use cases. There’s my email address there and, you know, let us work with you and, and, you know, try to do this together because we see this as, as not just, this isn’t just a, like, a simple point solution. This is a broad sort of technology category that’s going to be important going forward. So we want to hear, we want to hear from you. Chip, time for one last question. There’s a question asking if the NG client is able to call the electron client on the local machine. Yes, that’s, this whole thing is predicated on that. The NG client can talk to the electron and no JS. But if somebody is running or something with the solution within their browser, just within the NG client on a browser, is it possible for that instance to then call and launch the electron client on their, on their local machine? No, no, a browser can never do that. That’s the whole, that’s the whole reason for a project like this is a browser is sandbox, doesn’t have that kind of access. Okay, any information about our next webinar? Yes, so we are, we launched a ServoyA3 a little more than a month ago, a month and a half ago. And we’re, we’re getting ready here for A31 coming up pretty soon by the, by the end of the month, we’ll probably have a release candidate out. And then, so we’d like to celebrate that with a webinar about the A31 launch in coinciding with that with the AG grid release. So that will be an important webinar. We should have more cool stuff to show you. And that’s three weeks, not two weeks, correct? 2011 July 11th. Yes, that is three weeks. Right. Well, thank you everyone for attending. We will see you in three weeks. Thank you again, Sean, and have a great day.

Close