So, I wanted to know, specially from the experts who are developing obsidian, which is the preferred way to create/render content inside a Modal. Or basically which will be an efficient way to achieve this task.
Of course, talking from the developer perspective, the Second method will be more preferred since we are familiar with that format and gives more power to create components and elements. But I want to know if there are any cons of using the second method, which might affect the performance or layout.
Also, want to know what exactly should be added in the onClose() function to clear out everything and close the Modal properly to free up the memory efficiently?
I feel, if the first method is there in the first place, (provided by either Obsidian or Electron, I am not sure) there must be some reason it has been created that way, that is it either must be helping Obsidian to make the plugin code compatible with the main codebase, or it must be helping in optimum way to rendering the content, those HTML elements and everything.
I always write code with a mentality that, my code shouldn’t just work (which will always work😎), rather my code should work efficiently, taking as much less resources as possible.
Hence, just wanted to know if there are any pros of using the first method. Personally speaking, I am comfortable with the second method, as I have good experience in developing and maintaining frontEnd components and everything using HTML code.
Ohh interesting ! I heard about Svelte long back but haven’t tried it, but since Obsidian supports it, I can try it out.
Thank you for answering the question and sharing the resources.
You can use whatever javascript approach you’d like, whether its plain javascript, or a framework like React or Svelte. I wouldn’t worry so much about optimization when you’re starting out, so focus on using the tool or tools that you’re familiar with and continue from there.
In terms of performance: your two examples are essentially equivalent. They are both constructing elements using javascript and applying them to the DOM. You can argue that React is slower because it has a higher upfront cost; It needs to do a lot more work before it can start creating elements and pushing them to the screen (setting up the React runtime, building the virtual dom, etc.) but at the end of the day, it doesn’t really matter.
Got it ! Actually I came across the first method, so just presumed that it might have been developed for some reason, or recommended over the normal approach of using plain JavaScript or using any framework. But personally I feel comfortable with React, as it’s better to understand as well as there is more freedom in terms of whatever idea you want to build with it. I’ll be also going through the Svelte and might migrate to that framework.
Anyway, thank you so much @liam for the insights, helps me to understand things better.
Okay, i thought the below two lines will just empty the content Element i had created. I guess i can use the unmount function before calling the empty function. Thank you for mentioning that.
If you are talking about a weblink, like google.com type of external link which should open in the browser, then that was working for me.
But if you are talking about opening a markdown file link, within Obsidian Vault. Then you will have to make use of MarkdownRenderer.render() function which will render the link similar to the one rendered inside Markdown file. And using this method will open the file inside Obsidian Editor.
Thanks, I was using dataview inline function to render link, like =link("Notes/myNote.md"), can`t open the linked file by clicking on the link. I will try MarkdownRenderer.render() later.