{"id":3469,"date":"2023-02-23T20:19:38","date_gmt":"2023-02-23T19:19:38","guid":{"rendered":"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/"},"modified":"2023-02-23T20:19:38","modified_gmt":"2023-02-23T19:19:38","slug":"cross-platform-software-frameworks","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2023\/02\/23\/cross-platform-software-frameworks\/","title":{"rendered":"Cross platform software frameworks"},"content":{"rendered":"\n\t\t\t<h1 id=\"cross-platform-software-frameworks\" tabindex=\"-1\">Cross Platform Software Frameworks <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#cross-platform-software-frameworks\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h1>\n<p>The other day, I came across <a href=\"https:\/\/github.com\/elk-zone\/elk-native\">Elk Native<\/a>, a native version of the rather excellent, if early-stage, Mastodon Web client <a href=\"https:\/\/elk.zone\/\">Elk<\/a>. To be honest, I wondered why they would build a native version, if the Web client works so well. I downloaded the 7.8\u00a0MB <a href=\"https:\/\/github.com\/elk-zone\/elk-native\/releases\/download\/elk-native-v0.4.0\/Elk_0.4.0_macos_x86_64.dmg\"><code>Elk_0.4.0_macos_x86_64.dmg<\/code><\/a> and immediately ran into <a href=\"https:\/\/github.com\/elk-zone\/elk-native\/issues\/74\">Issue #74<\/a>, that is, a blank screen.<\/p>\n<p>To better understand the motivation behind the Elk Native developers, I tried the same for one of my apps, with different frameworks. This <a href=\"https:\/\/github.com\/tomayac\/cross-platform-software-frameworks\">repository<\/a> contains the same PWA, <a href=\"https:\/\/svgco.de\/\">SVGcode<\/a>, wrapped five times with different cross platform software frameworks.<\/p>\n<h2 id=\"running-the-apps\" tabindex=\"-1\">Running the apps <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#running-the-apps\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<p>SVGcode is included as a git submodule in each framework folder. To run the apps, you first need to build SVGcode, and then start the wrapper app. In each subfolder, run the following commands.<\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm<\/span> run build-svgcode<br \/><span class=\"token function\">npm<\/span> start<\/code><\/pre>\n<h2 id=\"included-frameworks\" tabindex=\"-1\">Included frameworks <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#included-frameworks\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<ul>\n<li><a href=\"https:\/\/electronjs.org\/\">Electron.js<\/a> (<a href=\"https:\/\/www.electronjs.org\/docs\/latest\/tutorial\/quick-start\">&quot;Getting started&quot; guide<\/a>)<\/li>\n<li><a href=\"https:\/\/nwjs.io\/\">NW.js<\/a> (<a href=\"https:\/\/nwjs.readthedocs.io\/en\/latest\/For%20Users\/Getting%20Started\/\">&quot;Getting started&quot; guide<\/a>)<\/li>\n<li><a href=\"https:\/\/tauri.app\/\">Tauri<\/a> (<a href=\"https:\/\/tauri.app\/v1\/guides\/getting-started\/setup\/html-css-js\/\">&quot;Getting started&quot; guide<\/a>)<\/li>\n<li><a href=\"https:\/\/neutralino.js.org\/\">Neutralinojs<\/a> (<a href=\"https:\/\/neutralino.js.org\/docs\/getting-started\/your-first-neutralinojs-app\/\">&quot;Getting started&quot; guide<\/a>)<\/li>\n<li><a href=\"https:\/\/gluonjs.org\/\">Gluon<\/a> (<a href=\"https:\/\/gluonjs.org\/docs\/guide\/quick-start\/\">&quot;Getting started&quot; guide<\/a>)<\/li>\n<\/ul>\n<h2 id=\"screenshots\" tabindex=\"-1\">Screenshots <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#screenshots\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<ul>\n<li>Electron.js\n<img src=\"https:\/\/github.com\/tomayac\/cross-platform-software-frameworks\/raw\/main\/screenshots\/svgcode-electron.png\" alt=\"\" \/><\/li>\n<li>NW.js\n<img src=\"https:\/\/github.com\/tomayac\/cross-platform-software-frameworks\/raw\/main\/screenshots\/svgcode-nw_js.png\" alt=\"\" \/><\/li>\n<li>Tauri\n<img src=\"https:\/\/github.com\/tomayac\/cross-platform-software-frameworks\/raw\/main\/screenshots\/svgcode-tauri.png\" alt=\"\" \/><\/li>\n<li>Neutralinojs\n<img src=\"https:\/\/github.com\/tomayac\/cross-platform-software-frameworks\/raw\/main\/screenshots\/svgcode-neutralinojs.png\" alt=\"\" \/><\/li>\n<li>Gluon\n<img src=\"https:\/\/github.com\/tomayac\/cross-platform-software-frameworks\/raw\/main\/screenshots\/svgcode-gluon.png\" alt=\"\" \/><\/li>\n<\/ul>\n<h2 id=\"issues\" tabindex=\"-1\">Issues <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#issues\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<blockquote>\n<p>\u26a0\ufe0f I'm a Web developer, not a desktop app developer. I simply followed the &quot;Getting started&quot; guides and may well be holding the frameworks wrong.<\/p>\n<\/blockquote>\n<p>While I managed to get all apps to run, none of them worked perfectly out of the box, and there was always a strange error I could not explain. SVGcode works fine on Chrome, Safari, and Firefox when run in the standalone browsers. To see what's under the hood of the frameworks, I looked at the user agent data via DevTools.<\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">\/\/ If `navigator.userAgentData` is available, use it.<\/span><br \/><span class=\"token function\">copy<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>userAgentData<span class=\"token punctuation\">.<\/span><span class=\"token function\">getHighEntropyValues<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><br \/>  <span class=\"token string\">\"architecture\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token string\">\"bitness\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token string\">\"model\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token string\">\"platformVersion\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token string\">\"uaFullVersion\"<\/span> <span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token string\">\"fullVersionList\"<\/span><span class=\"token punctuation\">,<\/span><br \/><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/><br \/><span class=\"token comment\">\/\/ Else use the user agent.<\/span><br \/><span class=\"token function\">copy<\/span><span class=\"token punctuation\">(<\/span>navigator<span class=\"token punctuation\">.<\/span>userAgent<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<h3 id=\"electron-js\" tabindex=\"-1\">Electron.js <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#electron-js\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<p>Clicking the <strong>Copy SVG<\/strong> button causes an <code>Uncaught (in promise) ReferenceError: Cannot access 'P' before initialization.<\/code> error.<\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><br \/>  <span class=\"token property\">\"architecture\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"arm\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"bitness\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"64\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"brands\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Not A(Brand\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"24\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Chromium\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><br \/>  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"fullVersionList\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Not A(Brand\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"24.0.0.0\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Chromium\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110.0.5481.100\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><br \/>  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"mobile\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"model\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"platform\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"macOS\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"platformVersion\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"13.3.0\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"uaFullVersion\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110.0.5481.100\"<\/span><br \/><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<h3 id=\"nw-js\" tabindex=\"-1\">NW.js <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#nw-js\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<p>Clicking the <strong>Copy SVG<\/strong> button causes an <code>Uncaught (in promise) ReferenceError: Cannot access 'P' before initialization.<\/code> error.<\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><br \/>  <span class=\"token property\">\"architecture\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"arm\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"bitness\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"64\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"brands\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Not A(Brand\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"24\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Chromium\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><br \/>  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"fullVersionList\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Not A(Brand\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"24.0.0.0\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Chromium\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110.0.5481.97\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><br \/>  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"mobile\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"model\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"platform\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"macOS\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"platformVersion\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"13.3.0\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"uaFullVersion\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110.0.5481.97\"<\/span><br \/><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<h3 id=\"tauri\" tabindex=\"-1\">Tauri <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#tauri\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<p>Clicking the <strong>Save SVG<\/strong> button does nothing.<\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\">Mozilla\/5.0 <span class=\"token punctuation\">(<\/span>Macintosh<span class=\"token punctuation\">;<\/span> Intel Mac OS X 10_15_7<span class=\"token punctuation\">)<\/span> AppleWebKit\/605.1.15 <span class=\"token punctuation\">(<\/span>KHTML, like Gecko<span class=\"token punctuation\">)<\/span><\/code><\/pre>\n<h3 id=\"neutralinojs\" tabindex=\"-1\">Neutralinojs <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#neutralinojs\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<p>Clicking the <strong>Open Image<\/strong> button does nothing. Clicking the <strong>Save SVG<\/strong> button does nothing.<\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\">Mozilla\/5.0 <span class=\"token punctuation\">(<\/span>Macintosh<span class=\"token punctuation\">;<\/span> Intel Mac OS X 10_15_7<span class=\"token punctuation\">)<\/span> AppleWebKit\/605.1.15 <span class=\"token punctuation\">(<\/span>KHTML, like Gecko<span class=\"token punctuation\">)<\/span><\/code><\/pre>\n<h3 id=\"gluon\" tabindex=\"-1\">Gluon <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#gluon\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<p>Fails with a <code>RangeError Failed to execute 'createImageBitmap' on 'Window': The crop rect width is 0.<\/code>.<\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><br \/>  <span class=\"token property\">\"architecture\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"arm\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"bitness\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"64\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"brands\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Chromium\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Not A(Brand\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"24\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Google Chrome\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><br \/>  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"fullVersionList\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Chromium\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110.0.5481.177\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Not A(Brand\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"24.0.0.0\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">\"brand\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"Google Chrome\"<\/span><span class=\"token punctuation\">,<\/span><br \/>      <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110.0.5481.177\"<\/span><br \/>    <span class=\"token punctuation\">}<\/span><br \/>  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"mobile\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"model\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"platform\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"macOS\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"platformVersion\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"13.3.0\"<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token property\">\"uaFullVersion\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"110.0.5481.177\"<\/span><br \/><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<h2 id=\"building-the-apps-incomplete\" tabindex=\"-1\">Building the apps (incomplete) <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#building-the-apps-incomplete\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<p>I started looking into building the apps, but didn't get too far. Electron.js looks like it has the most developed toolchain, but when I ran <code>electron-forge make<\/code>, I ended up with a 332,1\u00a0MB executable called <code>svgcode-electron.app<\/code> that only showed a white screen, despite the <code>electron-forge start<\/code> development app working mostly fine.<\/p>\n<p><img src=\"https:\/\/github.com\/tomayac\/cross-platform-software-frameworks\/raw\/main\/screenshots\/svgcode-electron-app.png\" alt=\"\" \/><\/p>\n<p>To build the apps, run the following command in each subfolder. (So far I have only worked on Electron.js.)<\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm<\/span> run build<\/code><\/pre>\n<p>I didn't even look into the signing part, which is required for proper distribution.<\/p>\n<h2 id=\"conclusions\" tabindex=\"-1\">Conclusions <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/#conclusions\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<p>I'm not sure what to make of this. To be honest, I didn't see anything that would be more compelling than just browsing to <a href=\"https:\/\/svgco.de\/\">svgco.de<\/a>, clicking <strong>Install<\/strong>, and be good. But then I obviously didn't tap into any of the native features that cross platform frameworks allow you to do. I only noticed how features that I get for free in the Web version, like <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window_Controls_Overlay_API\">Window Controls Overlay<\/a> or <a href=\"https:\/\/developer.chrome.com\/en\/articles\/file-handling\/\">File Handling<\/a> were broken. But again, I may just be holding these frameworks wrong. For now, it was a worthwhile exercise, but I think I'll stick to the Web.<\/p>\n\n\t\t\t<p>\n\t\t\t\t<img alt=\"Thomas Steiner\" width=\"32\" height=\"32\" src=\"https:\/\/blog.tomayac.com\/feed.php?dl=https%3A%2F%2Fblog.tomayac.com%2F2023%2F02%2F23%2Fcross-platform-software-frameworks%2F&dp=%2F2023%2F02%2F23%2Fcross-platform-software-frameworks%2F&dt=Cross%20platform%20software%20frameworks\" alt=\"\">\n\t\t\t\t<br\/>This post appeared first on <a href=\"https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/\">https:\/\/blog.tomayac.com\/2023\/02\/23\/cross-platform-software-frameworks\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\t\t\tCross Platform Software Frameworks \ud83d\udd17<br \/>\nThe other day, I came across Elk Native, a native version of the rather excellent, if early-stage, Mastodon Web client Elk. To be honest, I wondered why they would build a native version, if the Web client works&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3469","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3469"}],"version-history":[{"count":3,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3469\/revisions"}],"predecessor-version":[{"id":3475,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3469\/revisions\/3475"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}