According to the tutorial, there are two parts of an electron app - the entry main.js file and index.html.
Do I have to include main.js as a script in the html file
How do I trigger events in the view html file to affect the state of the js app and vice versa ? How do they both communicate basically ?
You are mixing up a couple of things.
main.js is the first file called when your run your application. Before everything else. It does not run any front-end code.
Usually, in it, you create with the BrowserWindow API a chromium window, then load an .html file in it. (index.html for example).
Then, your index.html, you can call for every front JS code you want, or CSS or whatever. For example you can add there a <script src="myapp.js"></script>, which will run front-end code.
It is important to understand the difference between the main process (back-end) and the render process (front-end).
See the quick start guide that explains that very well.
Related
Currently, I have fresh installation of vuejs app with some test pages and components. All my routes and components are using dynamic imports to load js chunks only when user goes to a particular route or a component is rendered and it is working fine in SPA and SSR mode. The problem occurs in PWA mode when it prefetches all chunks at start.
I have tried 'exclude' function but it still pre-fetched the file.
Is there a way to exclude complete routes e.g. /admin to be pre-fetched? As this is only for internal use and not needed for offline usage.
We are using webpack + workbox bundler.
Any help would be highly appreciated.
I edited your question's title to match what you're actually asking. I hope I got it right :)
Yes, that's possible. You can exclude a lazy loaded chunk ("route" or "page" or whatever) from the asset list to be precached.
I assume you're using Vue CLI based project. Look for the PWA config options here https://cli.vuejs.org/config/#pwa. It will lead you to whole config of the Vue CLI PWA plugin here https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa. That will tell you how to pass any options to the underlying workbox-webpack-plugin. What you need is the excludeChunks option, described here https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config.
I know there are several questions concerning this, but I still think that it's there are a few areas that could use some clarification since the Turbolinks way of doing it (1 js file to rule them all) apparently goes straight out the window when starting to include content that is dynamically loaded via Ajax.
So, regarding content that is dynamically loaded via Ajax inside _partial.html.erb's and thus not initially recognised by the DOM and unable bind any JS to new elements that are loaded;
I have a sneaky suspicion that the "Rails way" of dynamically binding JavaScript events to new elements is to put any JavaScript inside the js.erb file that dynamically renders the partial (?) But it somehow feels unintuitive to split all the javascript into so many different small files. I am currently including most of my JS inline each _partial.html.erb file which is giving me a massive headache when it comes to binding and unbinding events (which also btw feels really messy not to mention unintuitive).
Also, are js.erb files that are NOT in the asset pipeline, minified in production? Or are you supposed to put each js.erb file inside the Asset Pipeline for it to be minified?
-- Or am I missing/misunderstanding something?
I am struggling to get some performance in my MVC application.I am loading a partial page (popup) which is taking hardly 500ms. But each time the popup loads it also downloads 2 jQuery files as well.
is it possible to use the jQuery from cache or from parent page?
I have attached the image in red which shows 2 additional request to server.
In order to improve the performance you can try with the following approaches:
see if your application server supports GZip and configure the application/server to return the responses always archived in Gzip
Use minified version of JQuery
there are also Packing libraries where you can pack all the imported resources, such as CSS files and JS files, and the browser will do only 1 request per resource type. For instance, in Java we have a library called packtag.
In general, I recommend you using Google Chrome browser and its performance analyzer. It will give you good hints.
In the Bundle config use this code
BundleTable.EnableOptimizations = true;
and also indclude both files in single bundle.
Does the popup use an iframe or does it's content just get added to the DOM of the current page?
If it gets added to the current page you could try just adding the script references to the parent page instead. It might not always be the best idea if the parent page has no need for those two files, but if the parent page also uses the jQuery validation then the popup will be able to use the parent's reference to the script file.
For an iframe I'd suggest looking at Gzip and minification to make the scripts load faster.
I have 2 scripts. One is in a Folder called ItemMenu in the root and the other is in the Scripts folder that is also in the root.
The script in the Scripts folder is never loaded, but the ItemMenu one it. They are both included in a script tag the same way on the client.
Here is the HTML render of the scripts.
<script src="/Scripts/article_layout1.js"></script>
<script src="/ItemMenu/itemMenu.js"></script>
If, I use the full URL it will work - but this won't work long term.
It's not making any sense to me.
I have confirmed the locations of these and "/Scripts/article_layout1.js" can be accessed by navigating directly to the URL. I have confirmed the spelling and folder names.
Does anyone have any idea here? This is going to make me crazy maybe.
I don't understand how to navigate through an app with multiple .html files. All the examples that I've found have only one html file.
I have two files in my app :
index.html
artist.html
In my index.html, I use a Text, which works but does not add a state in the history.
From what I have read in the documentation, I should use a link like spotify:app:$APPNAME:arg. But I can't manage to make a link like this works to navigate from an html file to another. And because I can only find apps with one html, I'm wondering if all the existing apps only show and hide parts of an html file to simulate the navigation.
You can link internal with:
sp://appname/filename.ext
link to spotify:app:appname:test.
At this point in index.html you can redirect to the page you want (I.e. test.html) using:
location.href=sp.core.getArguments() + '.html'
The initial call to spotify:app:appname:test will be in the history.