As someone who is learning React and Electron (separately), and I’m curious as to how and what Joplin is built on, I can see in Joplin’s source code that it runs both React-Native and Electron, does it run on anything else? How would I create a project based on both of these at the same time? Would someone be kind enough to provide sources to where I can learn about combining these 2 thing together into one project?
Welcome to the forums. Are you currently using or wanting to contribute to Joplin? The reason I’m asking is the quickest answer i can give is to dive right in to the code. Each client has its own package.json that contains all of the information you’re requesting about libraries and whatnot. The devs may not always be available to help with all questions, but they are working towards Google Summer of Code this year and are very open to people contributing
Thanks, I’ve been using Joplin for about 2 months now, I am thinking about contributing. Looking at each of the package.json in root, and in the React and Electron Clients, I’m not understanding how they interact with each other. Is the UI being designed from the ground up in both React and Electron? How do you get the core components to interact with each other?
All three clients share the ReactClient/lib folder and its code. That way when its core libraries are updated, each client gets them at the same time. Then the code outside of that folder is built for their respective platforms. That’s a huge part of why this is one of the few small name note taking apps out there that has support for all major platforms simultaneously. Does that make any sense?
So, to answer your question about the UI, both mobile platforms share the same overall UI, the Dekstop has one that is shared between Windows, Mac and Linux and is mostly the same across all three, and the command line client is its own beast altogether with its own ui.
That makes sense, if both programs share the same UI, does Electron or React handle that? Or do they read from the same html, css, and js files, but Electron handles the desktop and React handles mobile?
I believe the latter is correct. And React handles Cli too
What handles the transmission of data then? (The syncing and webclipper components)
I could be wrong, but i think that’s the Sqlite backend. Joplin uses a database system to handle most of its saving and syncing between platforms
Interesting… It seems very well-designed and thought through, I just wish there was more official documentation for it. Can you tell me more about how you get Electron and React to work with each other without any conflicts?
That is a question for @laurent or someone else that is much better at the language. I just cracked down on React hooks and still have a ways to go.
Electron is like a web browser - it simply loads an HTML file, which in turns loads JavaScript files, CSS files, etc. Have a look here for more details about the architecture: https://www.electronjs.org/docs/tutorial/application-architecture
React JSX files are compiled to JavaScript JS files, and are loaded like this.
1 Like
I meant for cross-breeding React and Electron like this, but that’s ok, might there be a boilerplate for this kind of setup, so I can see how this works in a more simplified testing environment?
Just use create-react-app to create an application, compile it, then load the resulting html file in Electron. There’s nothing else to it. It’s React but it could be Angular, or plain html/js.
1 Like
Isn’t react just another abstraction of the core js to allow quicker implementation of specific features in js that you would need to write yourself otherwise? And electron is basically a container that allows web based content to be ran as a native application?
So Create the program,
compile it
Just so were clear do you mean a full compile or just running npm start?
How do you get the Electron files to run off the html that React created?
A good way to learn how electron is built and run is to follow the instructions in Building.md in the root directory of the github source.
1 Like
Yes pretty much. React is actually an abstraction over the JS DOM.
1 Like
As a test I attempted to directly clone the Joplin page and compile it for my OS (Linux Mint. Based on Ubuntu), It succeeded without any major errors however upon running the .appimage it’s an empty blank white page with the nav bar being Electrons Defaults (File, Edit, etc).
My Console Log:
https://pastebin.com/m0trc2Ur
Could I be missing any dependencies that I didn’t catch?
Try running yarn dist in ElectronClient/app. Then run ./dist/Joplin*.AppImage. I’m not seeing anything related to actually running the app
yarn dist appears to work fine however when I try to run the appimage via terminal it just sits there endlessly forever and never actually runs, and if I open my file manager gui and run the appimage, doesn’t run ether.
My Log:
https://pastebin.com/tV6vgq5d
The reason why it ends after my last command is because the terminal never responds, my only way to even get it back is to force kill it with ctrl+c.