A Little Confused On Electron Structure


#1

Hey Guys, New to electron, but have been working with the web for quite a while, using html5, css3, php, and a little javascript. I find electron to be quite interesting and have started to create my first app, but have run in to a few snags which i hope you guys can help.
I did the research on how to find a javascript alternative to php includes, which worked, but everytime i click on lets say an image and it links to the include, my app flashes white for about 1 second before bringing up the new page…(Possibly i am doing something wrong here in structure wise.)
My Question is: How to and where to put code properly, like i know electron has a main process and a renderer process, but after going thru all the documentation, it doesn’t really explain much in the way of doing things… eg: lets say i have a nav area with links, but i wanted the links when clicked to show an external html file which only holds a div with content in it, to come up in a div on the main index page( similar for how you would do things with php)… I know from experience you can use jquery… if i was to use jquery how and where would i put it, as i have tried several ways just to do this simple thing, but does not work, and i think i may be missing something important. like doing the same in the html code that you would do on a website, and possibly setting some code in the main.js of electron… So Yeah a little confused on how to do this simple function… Hope someone can elighten me on what i may be doing wrong.


#2

Electron works best, in my opinion, the way single-page web applications work. The web originally was about documents. You click a link and load a document. Then you click another link and load another document. The way a SPA (single-page application) works is you load a web page and rather than clicking a link and loading a new web page, you interact with the page and it transforms itself into something else without going out and loading a whole new page.

So rather than clicking on something and making a web request to a distant server, just write the code locally to calculate what should be in that div and put it in the right place. Atom can do a huge amount of work with no Internet connection at all … and this is what Electron is designed for … allowing you to use web technologies for completely (or almost completely) local applications.

Does that help?


Navigation in multi-pages application
#3

thanks Lee, thats exactly what i was referring to… So what you are saying is basically have all the html code in the one page and use an external js script to do the functions in the html page?? i hope that is what you are saying… do you know if jquery can work this way? also do you know if we are using certain scripting will it work or do i need to add some more code in the main.js for the interaction with the renderer?

thanks in advance…


#4

Yes, jQuery can work this way but you can also use regular DOM APIs too (they’ve gotten a lot more capable in recent years). You don’t even need very much HTML code. Here’s the entirety of the HTML Atom loads (as of this writing):

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self'; style-src 'self' 'unsafe-inline';">
  <script src="index.js"></script>
</head>
<body tabindex="-1">
</body>
</html>

Everything else is built by CoffeeScript/JavaScript.