Is it ok to Import libraries like SortableJs directly into Renderer? or should it be done through preload as well?

[GitMurf]

As the title state, I have had this question for a long time and still haven't gotten a clear understanding of the "best practice" answer... is it ok to import third party libraries like SortableJS (https://github.com/SortableJS/Sortable) via npm install and then Import directly into my renderer (index.js)?

Or instead should we be doing all the importing of third party libraries into the preload.js and then add to the context bridge API ways to grab the imported libraries (like Sortable in my case)?

[GitMurf]

As a follow-up to this, I still do not understand why require() is not allowed in renderer (index.js) but we can still use Import to bring npm packages into the renderer process? It would seem then that using Import is just a workaround to avoid the limitation that require() cannot be used. I believe I am misunderstanding something here so feel free to correct anything I have said that may be incorrect :)

[reZach]

Hi @GitMurf. Thanks for being so patient, life has been very busy for me.

Any library/dependency that interacts with the operating system (eg. files, sounds, permissions) should be handled in the main process. This is done in order that a bad client/actor can't manipulate the front-end of your app to maliciously affect the underlying computer running the Electron app. Any UI app or framework as you mention like Sortable is okay to be in the renderer as it's just a UI component and isn't directly (or shouldn't be) referencing or manipulating data directly from the underlying computer running the Electron app.