Develop Reference

How to implement plugins into Electron app?

I'm looking for a way to implement "Plugins" for my Electron tool.
Below is a pseudo example of how I'm thinking it would work
Supply .js/.zip/plugin file
File would contain name of plugin, and it's category (Global, Team centric, Misc)
File would contain HTML for the GUI, which get's placed in a div designated for tool space. This name would be added as an option to the necessary Select, as well as logic added to pull in the HTML to the same div
In the tool, select the plugin file:
page will load the JavaScript script, and add option to select along with logic to switch to the plugin
The hope is to automate my current process.
Currently I'm manually updating the index page to reference the new JavaScript script, and to add the option on the select
The JavaScript Script has logic in it looking at the Select, and looking to see if the option was selected
which then pulls in it's own HTML via a function within
Is there anything I can reference/utilize to make this work?

After 4+ months of working on this, I've managed to get this to work. I will try to outline my approach.
Each "plugin" or "tool" will need it's own .js file
the js file should contain an exports.html function that will return the html for the tool
the js file should contain an exports.Events function that adds all relevant event listeners
create a json file cataloging each tool, along with information needed i.e. a description, image path, .js file path, etc.
require the .js file when selected, load the html and the events
parse the json to figure out which tool to load along with needed info
all i need to do is update the json file and upload the .js file to add a new plugin.

I developed an electron app using vue as the front-end.
My idea was to develop plugins as vue plugins and publish via npm.
I used live-plugin-manager to install and uninstall plugins.
The dependencies were automatically removed by making use of a counter
The only problem I faced was how to load these installed plugins into my main app.
The workaround I found was posted as answer to my own question at How to use electron to load the vue plugins installed dynamically into a plugins folder
Hope it helps

I know I'm a little late to the party but I encountered the same problem. To solve it I have built a plugin framework for Electron called Pluggable Electron and it is available on npm.
The framework handles the lifecycle of plugins, provides as npm packages, like installation, activation, removal, etc. The plugins can then be called on at any time to exend the core app functionality.
The framework is still under development but you can find a 1st version here: pluggable-electron.
I expect it is too late for Marker but still answering here for anyone else that might have this question.

how to resolve defineAlreadyDefined issue in dgrid?

we are working on a one page website project which wad already build in jquery and javascript at client side and cake php at service side but one for grid we want to use DGRID of dojo framework and for that when we try to integrate dgrid with our project we are getting this error
defineAlreadyDefined
In case we try to open another module because the content coming from AJAX and updated in same page.
We had included dojo.js in main page which loads only once and module included with require in each individual file.
Any help will be appreciated.

Well, this happens when we use two or more different libraries which expose same define method to create new widgets.
solution:
in our project we modified the name of exposed value like instead of define we replaced the customDefine in other widget so if we need define of first library we use define (as it was earlier) and if we need define of second library basically we used customDefine.
Note:- Before making above changed just verify that you are not adding same or similar libraries more than once in your project. In our project we were using dojo and d3 libraries.
This is how we resolved in our project.
Problem with almost similar solution - Trouble adding search widget to ArcGIS Shortlist Story App
hoping this will help you:)

Is there a way to provide multiple JS scripts within a single <script> tag?

I am building an app in JQM that has multiple instances but the same core of scripts.
Summarizing, every instance will have its own index.html initializing that particular instance with files both taken from the central repository (the common scripts/interface) and from the particular instance (files specific to that instance only).
Since I am adding more capabilities to the application, I need to constantly update the core of scripts with new addons (both 3rd party or custom scripts), but I don't want to go and update all the single instances with the new scripts I'm adding.
My question is: is there a method to include a <script> tag inside the index.html of every instance (say <script src="commonurl/commonscripts.js"></script>) and on my common repository, in the commonscript.js use structures like the java import, to import all the scripts I'm using?
I know it's not how js works, but the core of the question is: do you have any suggestion on how to keep the client unvaried and work just on the server side modifying just the included file, or anyway not having to manually modify the client index.html? Is js minification/merging my only option?
Same question applies to CSS files included in the client index.html.
Hope this makes sense, thanks for the answers!

You can do this with requirejs
RequireJS is a JavaScript file and module loader. It is optimized for
in-browser use, but it can be used in other JavaScript environments,
like Rhino and Node. Using a modular script loader like RequireJS will
improve the speed and quality of your code.
http://requirejs.org/docs/start.html

Organizing Javascript w/ jQuery

I am tinkering around with jQuery and am finding it very useful and almost exciting.
As of now, I am referencing the jQuery script via Google's CDN and I store plugins I use locally in a static/scripts directory.
Naturally, each page has its own individual implementation of components that are required for the features it currently offers. I.E. the main page has the Twitter plugin whereas the login page has form validation logic and password strength metering. However, certain components (navigation bar) for example use the same script across multiple pages.
Admittedly so, I am not a fan of putting javascript code in the header of a page, but I rather prefer to have it in an external file (for caching, re-usability, and optimization purposes).
My question is, what is the preferred route for organizing the external files. I wanted to try and keep it to one javascript file for the entire site to reduce IO requests. However, I am not sure how to implement document ready functions on a conditional per page bases.
$(document).ready(function () { ... }
Is there some way to reference a page by some method (preferably id based and not a url conditional).
Thank you in advance for your time!

You should try REQUIRE JS.
This will allow you to load only those plugins the pages where you need them, and unload them again if they are not needed anymore.
Then again, it might be overkill. It really depends on the size of your project.

Paul Irish:
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
This will allow you to block your scripts by body class/ID and execute them automatically.

First you might want to use YUI Compressor or some other JS compressing tool. Then perhaps creating a resource file (resx) for your JavaScript is the way to go. Then just reference the resource within your code. This is the approach Telerik took for their RadControl ASP.NET AJAX control framework.

structuring javascript in an .net MVC application

I’m looking for some guidance on structuring JS code in an .net MVC application.
I have JavaScript at the bottom of each page which is loaded, I want to apply a name-spacing / modular pattern to my JavaScript, removing it from inline code to separate JS files and load them on demand based on what page is being accessed.
When I google around, I tend to only find MVC patterns for javascript (this for example http://addyosmani.com/largescalejavascript/) which is great but I’m struggling to understand how I can implement this into an MVC application.
Any advice is welcome.
thanks

I use a technique that is similar to the one described here by Paul Irish. However rather than using hardcoded id's or classname's in order to know what scripts need loading and initialising I use the urls that are requested (full requests and ajax reqs)
For instance say I have a customer edit view that is served in response to a request to a url like myapp\customer\12\edit I would have a customer namespace in my js that had an inner edit namespace.
The customer namespace would have an init func likewise the edit. All customer pages when loaded would invoke the customer init event then any action level namespace if it exists. This would have an init func that would be auto called when the page was loaded (I have some magic that parses the url so that we know which js to initialise). So parsing the url would first invoke the customer init fund then the customer.edit init func. There is also common init functions that get fired everytime for app wide logic (to create a sidebar page widget for example).
I do not load the js on demand. I find it is better from a latency point of view to combine+minify all js files and serve them under gzip obviously.