I'm trying to see if I understand how Electron's implementation of Node.js is done and how it interacts with the app. From my understanding, the startup web page has a javascript file that runs as a "renderer" process. Code in this script can also access any of the Node.js APIs. To create new browser windows, code in renderer script uses new BrowserWindow to create new windows and each window in turn has its own renderer script.
Code in the renderer scripts run under Node.js and as such any code written in these scripts cannot communicate with script code in the browser's web page.
Is all of this true or am I wrong on something?
The Electron main process can create new windows (with Browser Window) and each of those windows has a renderer process. You can use ipc to send messages between the renderer process and the main process. To send a message from one renderer process to another, there are plugins for that, or you just have to relay the message through the main process.
The format/appearance of each window is controlled via html and css. Part of creating a window is specifying the html file to load.
More info can be found in this other SO question. The other question referenced this repo which has more info.
Lastly, the consensus seems to be to put as much in the renderer as possible.
For more clarification, by
Code in the renderer scripts run under Node.js and as such any code
written in these scripts cannot communicate with script code in the
browser's web page.
are you asking if an Electron app can interact with a separate web browser?
Related
I want to create desktop application compatible with other OS.For that I'm using electron with angular.Because both are frame work whether it will effect performance or loading time, and also whether deploying easy,can we use all the features of angular when we use with electron like routing..?
Electron uses Chromium and NodeJS which is the reason why it is compatible with other OSs. You can talk with the NodeJS process from your angular-app which opens up some possibilities. For example opening native file-dialogs to let the user choose files. Electron also already abstracts some platform specific operations like getting the user home to save some configuration files for example.
You can use routing just like in any Angular app and I think you can use most features like you would normally but dont take me for granted on this one.
I would not say it affects your loading time to combine those too. During development you have to build your angular app before electron can start up and use those files but in production Angular is already ready to be loaded so they dont hinder each other.
This is a silly question, but I could not find a clear answer on the web.
Do I need to listen to a special "dom-ready-event" if my app is running within a BrowserWindow in Electron? For instance in a Cordova/PhoneGap app I read you can start doing things after the deviceready event.
I would like to know how this is done in Electron? Is one of the following enough?
document.addEventListener("DOMContentLoaded", startApp);
window.addEventListener("load", startApp);
Thank you.
Cordova has deviceready because it has both native code and JavaScript code, and potentially JavaScript might run before the native code has finished loading.
You don't have the same problem in Electron. You have a main process (main.js) which creates your BrowserWindow, so by the time any client-side JavaScript is running, your main process has definitely already started because it was the thing that created your browser window in the first place!
Inside the browser window the same events fire as they would on a normal webpage. So if you wanted to, you could use DOMContentLoaded or load (for the difference see this article on MDN), just in the same way as you would for a regular web application. But you certainly don't need to before calling any of the Electron APIs.
Is it possible to do this in Electron:
I want to duplicate a video to a 2nd screen.
This is easyly done, by invoking the following 50 times/second:
canvas_context_2nd_screen.drawImage(video_1st_screen,0,0,width_canvas_2nd,height_canvas_2nd);
but in electron i have to communicate via IPC...
any ideas? is it possible in nw.js?
It is supported in NW.js. As DOM windows are in the same renderer process by default, and the Node.js context is shared between them:
http://docs.nwjs.io/en/latest/For%20Users/Advanced/JavaScript%20Contexts%20in%20NW.js/
This can be changed to be separate though.
Is there a way to easily distribute an electron.atom.io app as a static site?
I don't need all the functionality, I just want to allow the client to view the latest updates.
-- edit --
Perhaps a better way to ask the question is; "How do I build a web app that can be hosted online and run on electron with minimum rewriting" - similar to the Slack app that works the same way on web or electron app.
As long as your main use of Electron is to create a 'native browser wrapper' for a web-app this is entirely possible.
You will have to implement a check if your application is running inside a browser or inside Electron and wrap your electron specific code in it:
if (window && window.process && process.versions['electron']) {
const {BrowserWindow} = require('electron').remote
}
You'll probably have to step through your application and disable Electron specific functionality at multiple places.
You have other options to do a long distance demo of an Electron app
Electron is basically a shell to run node.js apps on the desktop. This means if you want to move it to the web, you have to give up all the Electron APIs that access the local system and you're left with a basic node.js app, which is most likely not desirable.
To demo your desktop app to an off-site client, you can either make a presentation with screenshots detailing the current user flow, or compile a sandboxed demo version of your app and send it over to them.
Screen presentation
This is your quickest and easiest solution if your client just wants to be kept in the loop and see some eye candy. You can just record how the app works with some example data, add some written or audio explanation to it, and let them enjoy the smooth ride.
Build a demo
If your client wants to actually have a hands-on demo with the app, you need to have some form of basic code distribution. The cleanest way to do this would be to tie up all loose ends in your current app flows, block all unfinished roads in it and compile it for whatever platform your client requested the demo for.
Take a look at the electron-packager and electron-builder docs to get an idea how to build an .exe, .dmg or whatever file from your Electron app, then send that file to them with some basic instructions.
In order to get jQuery to load and function correctly in a HTML page I was opening in Electron (formerly Atom Shell), I had to disable Node integration when creating the BrowserWindow in my main.js file.
Can someone please tell me what setting node-integration: false will keep me from being able to do that I would normally be able to do had I not disabled it?
Setting node-integration to false will disable node.js in the renderer process - i.e. your app can only do what a web browser will do. Instead of doing this, use Zepto.js which is compatible with Electron and has the same API.