{"id":117612,"date":"2020-11-22T17:00:23","date_gmt":"2020-11-22T14:00:23","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-use-electron-to-build-responsive-desktop-apps\/"},"modified":"2020-11-22T17:00:23","modified_gmt":"2020-11-22T14:00:23","slug":"how-to-use-electron-to-build-responsive-desktop-apps","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/","title":{"rendered":"#How to use Electron to build responsive desktop apps"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a28ffa538b6d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a28ffa538b6d\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#How_does_Electron_work\" >How does Electron work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Must-have_section_Hello_World\" >Must-have section: Hello World!<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Setting_up_Electron\" >Setting up Electron<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Building_the_screen\" >Building the screen<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Isnt_there_an_easier_way\" >Isn\u2019t there an easier way?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Building_smooth_applications\" >Building smooth applications<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Never_ever_block_the_main_process\" >Never, ever, block the main process<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Is_it_ok_to_block_the_renderer_process\" >Is it ok to block the renderer process?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#You_dont_need_cross-browser_compatibility\" >You don\u2019t need cross-browser compatibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Bundle_all_of_your_code\" >Bundle all of your code<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-electron-to-build-responsive-desktop-apps\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p>&#8220;<strong>#How to use Electron to build responsive desktop <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>s<\/strong>&#8221;<\/p>\n<div>\n                            If you are like me, you love JavaScript and its ecosystem, and you have been building amazing web applications using frameworks like React or <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/post\/2020-05-27-when-you-should-and-should-not-use-nodejs-for-your-project\/\">performant web servers with NodeJS<\/a> . Now you want to develop a desktop application, and you don\u2019t want to learn a new programming language, or perhaps you want to re-use as much as you can from existing web projects. Here is when Electron enters the picture to save the day.<\/p>\n<p>Electron allows you to build desktop applications using HTML, CSS, and JavaScript. There are many arguments on the internet against Electron, one of them being its performance and many times low-quality apps, but don\u2019t blame the framework; Electron is powerful and can be performant. Today, many popular applications run on top of Electron, such as VS Code, Slack, Skype, Discord, and more.<\/p>\n<p>But why is it then that many people argue so poorly against it? The problem starts with the apps and the way people use Electron. For many, porting a web application to an Electron means taking your existing code as-is and embedding it into an Electron container. Is this a terrible thing to do? Maybe not, but you are not taking advantage of the power of Electron to its fullest. You are merely changing a browser tab for an independent application.<\/p>\n<p>What can we improve? In this article, we will explore the basics of Electron, and we will build a sample application to show some of the Electron ways.<\/p>\n<p><em>[Read: <span class=\"c-message_attachment__title\"><span dir=\"auto\">Neural\u2019s market outlook for artificial intelligence in 2021 and beyond<\/span>]<\/span><\/em><\/p>\n<h2 id=\"how-does-electron-work\"><span class=\"ez-toc-section\" id=\"How_does_Electron_work\"><\/span>How does Electron work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Electron is built on top of 3 main components:<\/p>\n<ul>\n<li>Chromium: responsible for the web content<\/li>\n<li>NodeJS: for interacting with the OS<\/li>\n<li>Custom APIs: to solve for common issues when dealing with the OS<\/li>\n<\/ul>\n<p>Each of these components interacts on a different level on the Electron architecture layer, as shown in the architecture diagram.<\/p>\n<figure class=\"\" data-src=\"https:\/\/thenextweb.com\/post\/2020-11-15-how-to-build-desktop-applications-using-electron-the-right-way\/electron_hu671a878111382acc2856c7fe5fe81547_1317120_700x0_resize_box_2.png\">\n<figure class=\"post-image post-mediaBleed aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"lazy loaded lazy\" alt=\"\" width=\"592\" height=\"444\" src=\"https:\/\/livecodestream.dev\/post\/2020-11-15-how-to-build-desktop-applications-using-electron-the-right-way\/electron_hu671a878111382acc2856c7fe5fe81547_1317120_700x0_resize_box_2.png\" data-lazy=\"true\"\/><figcaption><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/11\/22\/how-to-use-electron-to-build-responsive-desktop-apps\/#\" data-url=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fthenextweb.com%2Fsyndication%2F2020%2F11%2F22%2Fhow-to-use-electron-to-build-responsive-desktop-apps%2F&amp;via=thenextweb&amp;related=thenextweb&amp;text=Check out this picture on: Electron Architecture\" data-title=\"Share Electron Architecture on Twitter\" data-width=\"685\" data-height=\"500\" class=\"post-image-share popitup\" title=\"Share Electron Architecture on Twitter\"><i class=\"icon icon--inline icon--twitter--dark\"\/><\/a>Electron Architecture<\/figcaption><\/figure>\n<\/p>\n<\/figure>\n<p>Electron works with two types of processes.<\/p>\n<ul>\n<li>Main Process: responsible for window management and all interactions with the OS. It\u2019s where it all starts, and it can create and manage multiple renderer processes<\/li>\n<li>Renderer Process: There could be one or more, each of which will host a chromium instance and be responsible for the web contents.<\/li>\n<\/ul>\n<p>It\u2019s important to note that the renderer processes cannot access OS features directly. Instead, they communicate with the <strong>Main Process<\/strong> through IPC to achieve these tasks.<\/p>\n<p>Many typical Electron applications would use the main process to create one renderer process and load their web application. Today we are going to take that a step forward.<\/p>\n<h2 id=\"must-have-section-hello-world\"><span class=\"ez-toc-section\" id=\"Must-have_section_Hello_World\"><\/span>Must-have section: Hello World!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Next, we are going to build a \u201chello world!\u201d application. We will not use any framework or libraries that are not necessary to stay focused on the Electron code.<\/p>\n<p>Let\u2019s get started.<\/p>\n<h3 id=\"setting-up-electron\"><span class=\"ez-toc-section\" id=\"Setting_up_Electron\"><\/span>Setting up Electron<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The first step into building an application is to create a project and install the electron library, so start with the project creation using NPM:<\/p>\n<p>And set up your application details. As the starting point for the application, I like to use main.js, but you can use any file name you want.<\/p>\n<p>Next, install Electron.<\/p>\n<h3 id=\"building-the-screen\"><span class=\"ez-toc-section\" id=\"Building_the_screen\"><\/span>Building the screen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For our micro hello world example, we need two files, <code>main.js<\/code> and <code>hello-world.html<\/code>. <code>main.js<\/code> is our main process; we will create the first renderer process that will load our <code>hello-world.html<\/code>.<\/p>\n<p>Here is the starter code for <code>main.js<\/code><\/p>\n<div class=\"highlight\">\n<pre><figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1328717 lazy\" alt=\"\" width=\"661\" height=\"1059\" sizes=\"auto, (max-width: 661px) 100vw, 661px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.43.56.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.43.56.png 730w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.43.56-131x210.png 131w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.43.56-168x270.png 168w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.43.56-84x135.png 84w\"\/><\/figure><\/pre>\n<\/div>\n<p>The starter kit will handle the minimum operations to run the application, creating the first renderer with <code>new BrowserWindow<\/code> and loading <code>main.html<\/code> on it. It will also address some scenarios to exit the application and to re-launch the main window when needed.<\/p>\n<p>As to our <code>main.html<\/code> we will use the following:<\/p>\n<div class=\"highlight\">\n<pre><figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1328718 lazy\" alt=\"\" width=\"643\" height=\"483\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.56.02.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.56.02.png 706w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.56.02-280x210.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.56.02-360x270.png 360w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.56.02-180x135.png 180w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.56.02-368x276.png 368w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.56.02-632x474.png 632w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-09.56.02-536x402.png 536w\"\/><\/figure><\/pre>\n<\/div>\n<p>It is just a simple HTML exposing the current versions of node, chrome, and Electron our app uses.<\/p>\n<p>Finally, we need to run our application; first, you need to change the <code>package.json<\/code> and add the start script.<code class=\"language-text\" data-lang=\"text\"\/><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1328725 lazy\" alt=\"\" width=\"680\" height=\"386\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-10.06.19.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-10.06.19.png 712w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-10.06.19-280x159.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-10.06.19-476x270.png 476w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/Schermata-2020-11-19-alle-10.06.19-238x135.png 238w\"\/><\/figure>\n<p>If everything worked out well, you should see a window like this:<\/p>\n<figure class=\"\" data-src=\"https:\/\/thenextweb.com\/post\/2020-11-15-how-to-build-desktop-applications-using-electron-the-right-way\/hello-world_hub5b7ca3f77725502623569e9b8edc720_179381_700x0_resize_box_2.png\">\n<figure class=\"post-image post-mediaBleed aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"lazy loaded lazy\" alt=\"\" width=\"700\" height=\"558\" src=\"https:\/\/livecodestream.dev\/post\/2020-11-15-how-to-build-desktop-applications-using-electron-the-right-way\/hello-world_hub5b7ca3f77725502623569e9b8edc720_179381_700x0_resize_box_2.png\" data-lazy=\"true\"\/><figcaption><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/11\/22\/how-to-use-electron-to-build-responsive-desktop-apps\/#\" data-url=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fthenextweb.com%2Fsyndication%2F2020%2F11%2F22%2Fhow-to-use-electron-to-build-responsive-desktop-apps%2F&amp;via=thenextweb&amp;related=thenextweb&amp;text=Check out this picture on: Hello World app made with Electron\" data-title=\"Share Hello World app made with Electron on Twitter\" data-width=\"685\" data-height=\"500\" class=\"post-image-share popitup\" title=\"Share Hello World app made with Electron on Twitter\"><i class=\"icon icon--inline icon--twitter--dark\"\/><\/a>Hello World app made with Electron<\/figcaption><\/figure>\n<\/p>\n<\/figure>\n<h2 id=\"isnt-there-an-easier-way\"><span class=\"ez-toc-section\" id=\"Isnt_there_an_easier_way\"><\/span>Isn\u2019t there an easier way?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The short answer is YES! Though it comes at a cost. Many boilerplates provide a starting point for building Electron applications, some of them using vanilla JS, others directly integrated with some of the most popular frameworks like React and Vue.<\/p>\n<p>I\u2019m not a big fan of these boilerplates as they often come with many libraries and additions I don\u2019t need. But they are a great place to get you started.<\/p>\n<p>Here are some popular ones:<\/p>\n<h2 id=\"building-smooth-applications\"><span class=\"ez-toc-section\" id=\"Building_smooth_applications\"><\/span>Building smooth applications<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We already saw in the architecture of Electron how things work. And if you are like me, you are probably worried about all those instances of Chromium and Node running, and you should be. We all know how Chromium (or Chrome) can devour our memory and affect our performance, so what can we do to avoid our Chromium-based application to do exactly that? How do we keep them performant?<\/p>\n<p>Here are a few tips:<\/p>\n<h3 id=\"never-ever-block-the-main-process\"><span class=\"ez-toc-section\" id=\"Never_ever_block_the_main_process\"><\/span>Never, ever, block the main process<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The main process is where it all starts. It is the parent process for all the processes of the application. It is the one that primarily communicates with the operating system, handles all the windows and communications between them, and it runs the UI thread.<\/p>\n<p>Blocking this process means that the application will stop responding until the operation finishes. Under no circumstances run code that is CPU intensive here and takes a long time to complete.<\/p>\n<p>Here are some recommendations:<\/p>\n<ul>\n<li>For CPU intensive operations, delegate those functions to either a worker thread, a renderer process, or even spawn a dedicated process to perform that task (though make sure you know what you are doing for this last one).<\/li>\n<li>Avoid the use of the <code>remote<\/code> module as much as possible. It is far too easy to unknowingly block the UI thread using the <code>remote<\/code> module.<\/li>\n<li>Avoid using blocking I\/O operations on the main thread; if needed, use the asynchronous equivalents provided by NodeJS.<\/li>\n<\/ul>\n<h3 id=\"is-it-ok-to-block-the-renderer-process\"><span class=\"ez-toc-section\" id=\"Is_it_ok_to_block_the_renderer_process\"><\/span>Is it ok to block the renderer process?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Not really. Perhaps the consequences won\u2019t be as harmful as blocking the main process, but blocking the renderers come at a price. Your windows may become sluggish or unresponsive, and the overall user experience will be terrible.<\/p>\n<p>When we use the web, we are used to some web apps suddenly going slow, not being smooth, and we are ok with it; However, when it comes to desktop applications, our standards are higher. Be aware of this, as user expectations matter.<\/p>\n<p>What can I do to make my apps more responsive? Pretty much the same things we could do on our web apps; after all, on the renderer process, we are just talking about Chromium.<\/p>\n<ul>\n<li>requestIdleCallback: API allowing the execution of JavaScript to be queued to run in idle browser time, either at the end of a frame or when the user is inactive.<\/li>\n<li>Web workers: the best tool to run expensive computations on web browsers by assigning them to a new thread.<\/li>\n<\/ul>\n<h3 id=\"you-dont-need-cross-browser-compatibility\"><span class=\"ez-toc-section\" id=\"You_dont_need_cross-browser_compatibility\"><\/span>You don\u2019t need cross-browser compatibility<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>During web development, it is very typical to use polyfills to support different browsers. When building Electron applications, you don\u2019t need any of that. If it runs on Chromium, it runs on Electron, and there\u2019s no need to support any other browser. Reduce your bundles, and make everything faster by not loading these extra modules.<\/p>\n<h3 id=\"bundle-all-of-your-code\"><span class=\"ez-toc-section\" id=\"Bundle_all_of_your_code\"><\/span>Bundle all of your code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In web development, we sometimes load scripts or pages from servers, like CDNs, which are served separately from our application, and that\u2019s fine. After all, for the web, we always need to download these assets to run the application.<\/p>\n<p>For desktop applications, this is different. Avoid any unnecessary network requests by bundling all your static assets, scripts, and contents in your application. This will enable your app to do two things, work offline, and speed up the load process as reading the disk is cheaper than going to the internet.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Next time you need to build a cross-platform desktop application, I recommend you to try Electron, especially if you are coming from JavaScript, and you already have some code you may be able to re-use.<\/p>\n<p>Just be aware, Electron can be great if used right. Keep in mind that though it looks like a web, it is not precisely a web, and thus you will need to make some special considerations to make it work.<\/p>\n<p><i><span>This <\/span><\/i><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/post\/2020-11-15-how-to-build-desktop-applications-using-electron-the-right-way\/\"><i><span>article<\/span><\/i><\/a><i><span> was originally published on <\/span><\/i><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/\"><i><span>Live Code Stream<\/span><\/i><\/a><i><span> by <\/span><\/i><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/bajcmartinez\/\"><i><span>Juan Cruz Martinez<\/span><\/i><\/a><i><span> (<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">twitter<\/a>: <\/span><\/i><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/bajcmartinez\"><i><span>@bajcmartinez<\/span><\/i><\/a><i><span>), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.<\/span><\/i><\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/subscribe\"><i><span>Live Code Stream<\/span><\/i><\/a><i><span> is also available as a free weekly <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">news<\/a>letter. Sign up for updates on everything related to programming, AI, and computer <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/sciencee\/\" data-internallinksmanager029f6b8e52c=\"5\" title=\"Science\" target=\"_blank\" rel=\"noopener\">science<\/a> in <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a>.<\/span><\/i><\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong>\n<\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener noreferrer\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/11\/22\/how-to-use-electron-to-build-responsive-desktop-apps\/\" target=\"_blank\" rel=\"noopener noreferrer\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to use Electron to build responsive desktop apps&#8221; If you are like me, you love JavaScript and its ecosystem, and you have been building amazing web applications using frameworks like React or performant web servers with NodeJS . Now you want to develop a desktop application, and you don\u2019t want to learn a new&#8230;<\/p>\n","protected":false},"author":1,"featured_media":117613,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/img-cdn.tnwcdn.com\/image\/tnw?filter_last=1&fit=1280,640&url=https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/1-copy.jpg&signature=bdf9ea87e4f5d2a36e2915b62b7e896b","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[76769,76768,70759,81026,73504],"class_list":["post-117612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-html","tag-javascript","tag-tech","tag-web-application","tag-web-content"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/117612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=117612"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/117612\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/117613"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=117612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=117612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=117612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}