84 lines
36 KiB
HTML
84 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta name="generator" content="Docusaurus">
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<script>
|
||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||
ga('create', 'UA-145065218-1', 'auto');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||
<script type="text/javascript">/*<![CDATA[*/window.__chunkMapping={"11792388":["/11792388.4ec10992.js"],"13948826":["/13948826.20b1f331.js"],"17896441":["/17896441.eeac3818.js"],"42891840":["/42891840.37db4d64.js"],"52178671":["/52178671.4812722d.js"],"86654962":["/86654962.746c99c2.js"],"88835996":["/88835996.c3f6f80d.js"],"92679803":["/92679803.613435d6.js"],"main":["/main.f03889ac.js"],"0001a473":["/0001a473.22c2d9a7.js"],"007e03d8":["/007e03d8.b6c6b3c4.js"],"01057faa":["/01057faa.0e79f0df.js"],"017bdfe4":["/017bdfe4.d4e4e058.js"],"01a85c17":["/01a85c17.69caca75.js"],"02b0c0b1":["/02b0c0b1.b3454633.js"],"037c9655":["/037c9655.e7cc36d6.js"],"0480b142":["/0480b142.5df82106.js"],"062d0342":["/062d0342.f5e10b4c.js"],"0880c4c8":["/0880c4c8.59297920.js"],"089cb293":["/089cb293.ed3f845f.js"],"0936d2bb":["/0936d2bb.afbaf2c6.js"],"09ff5ec7":["/09ff5ec7.d4340e04.js"],"0b0a8a39":["/0b0a8a39.5a64ae12.js"],"0b4669f6":["/0b4669f6.3f4e0c5b.js"],"0c5e58b4":["/0c5e58b4.9ecccbca.js"],"0cad5f00":["/0cad5f00.aae786c6.js"],"0d44c937":["/0d44c937.6313929b.js"],"0dba35c1":["/0dba35c1.d0457656.js"],"12f78831":["/12f78831.18baa556.js"],"1490091d":["/1490091d.dc50d8b9.js"],"149c6335":["/149c6335.53d28544.js"],"152f73ec":["/152f73ec.3db9708f.js"],"1603ce96":["/1603ce96.b27996f3.js"],"17996ea2":["/17996ea2.f2d1484b.js"],"1be78505":["/1be78505.807aa49e.js"],"1e74d529":["/1e74d529.99afa571.js"],"1ea8896b":["/1ea8896b.c4a53abd.js"],"1ec36ce2":["/1ec36ce2.ea57dfe2.js"],"1f7e6144":["/1f7e6144.ad3b2e9a.js"],"1fb6efd6":["/1fb6efd6.2dba9ec4.js"],"20ac7829":["/20ac7829.49041221.js"],"2132b76e":["/2132b76e.53ffb1e4.js"],"223f731e":["/223f731e.8a7bf94a.js"],"22a1b1cc":["/22a1b1cc.cd221f04.js"],"24b40189":["/24b40189.2466d060.js"],"24cd2b01":["/24cd2b01.314563fd.js"],"2622e4c2":["/2622e4c2.223d7f73.js"],"2627f6e3":["/2627f6e3.c4981d8b.js"],"2868cdab":["/2868cdab.abafc985.js"],"28c02e55":["/28c02e55.7eadf61e.js"],"293d2a98":["/293d2a98.3a5a3f01.js"],"2a28d0ad":["/2a28d0ad.421f1c05.js"],"2ad9a9e0":["/2ad9a9e0.ba07ec3c.js"],"2adb0cd5":["/2adb0cd5.ff73da17.js"],"2ce195d3":["/2ce195d3.bbaacaf5.js"],"2d9e3680":["/2d9e3680.09c899df.js"],"2da6cb10":["/2da6cb10.2b985616.js"],"2eb139e7":["/2eb139e7.3b9f7d9c.js"],"2f424c58":["/2f424c58.c9126519.js"],"316396c4":["/316396c4.3c5dbe06.js"],"354fe6c0":["/354fe6c0.2654f0a2.js"],"374bc769":["/374bc769.89a7a093.js"],"3a6eb64e":["/3a6eb64e.12849734.js"],"3ab0ccbe":["/3ab0ccbe.af57b757.js"],"3b5c10d3":["/3b5c10d3.01fe5c29.js"],"3d33ce06":["/3d33ce06.6092eabf.js"],"3dd90d98":["/3dd90d98.d342aaee.js"],"3ec815b7":["/3ec815b7.5c3faee4.js"],"3fa4060c":["/3fa4060c.e07de000.js"],"403d91ca":["/403d91ca.0c43561b.js"],"44a5e703":["/44a5e703.3921e6f7.js"],"45d7c4d4":["/45d7c4d4.f6048444.js"],"48e00576":["/48e00576.2f1c45bb.js"],"4c7ce01c":["/4c7ce01c.f685b80f.js"],"53445d05":["/53445d05.18950a99.js"],"54f48e4b":["/54f48e4b.c71d4328.js"],"566d9d67":["/566d9d67.af6483be.js"],"593467ca":["/593467ca.105c9725.js"],"5a35b6ef":["/5a35b6ef.5597b95e.js"],"5a516cc9":["/5a516cc9.1a0c9137.js"],"5a76f898":["/5a76f898.c661bfad.js"],"5a80dcbe":["/5a80dcbe.1ce3d197.js"],"5b6f8408":["/5b6f8408.496885fe.js"],"5c49d4a1":["/5c49d4a1.432aadbe.js"],"5cd1ab2d":["/5cd1ab2d.8430f837.js"],"5d8d2b34":["/5d8d2b34.f641f66e.js"],"5df6944c":["/5df6944c.660f592b.js"],"5e0d3b62":["/5e0d3b62.bfcd4fa8.js"],"5fef40eb":["/5fef40eb.9dbdc0a2.js"],"6008ae7d":["/6008ae7d.9012c053.js"],"63263d59":["/63263d59.17a41d7b.js"],"647d424b":["/647d424b.22f79792.js"],"66ac7865":["/66ac7865.5fc4963b.js"],"67bdd98f":["/67bdd98f.1c9731fd.js"],"6875c492":["/6875c492.7d985b92.js"],"68e84ced":["/68e84ced.6d6b5171.js"],"6ac344b5":["/6ac344b5.ffc8ecac.js"],"6c40c174":["/6c40c174.569da592.js"],"6c5ad629":["/6c5ad629.30514873.js"],"6cc6a74c":["/6cc6a74c.d8754a48.js"],"6d0f34fa":["/6d0f34fa.08a7c71c.js"],"6dbe7991":["/6dbe7991.e24e7192.js"],"6de941e1":["/6de941e1.33fec91d.js"],"6e360cd2":["/6e360cd2.1e95f0ac.js"],"6e3c7c6c":["/6e3c7c6c.0727ffd4.js"],"6e81f52a":["/6e81f52a.bf17cd69.js"],"75bd1277":["/75bd1277.fdae6312.js"],"75f3b48f":["/75f3b48f.10b24a8d.js"],"76e4d282":["/76e4d282.b55d1a4a.js"],"772b9cd8":["/772b9cd8.bd359dfa.js"],"785287ec":["/785287ec.ec5b87ea.js"],"7a220947":["/7a220947.fe6b7b3e.js"],"7ca6bf62":["/7ca6bf62.584f2e50.js"],"7cac9b17":["/7cac9b17.a0e8c128.js"],"7d47b104":["/7d47b104.099e170b.js"],"7e0e023d":["/7e0e023d.557abcd4.js"],"81d6a693":["/81d6a693.8bcd059f.js"],"83cb68a4":["/83cb68a4.b68e7d3e.js"],"840226b4":["/840226b4.ee884731.js"],"84ba09a2":["/84ba09a2.8e9da249.js"],"84d47485":["/84d47485.aca35976.js"],"85f4c856":["/85f4c856.f699e850.js"],"86dc5c7e":["/86dc5c7e.b0ec53fd.js"],"87f8b817":["/87f8b817.66502e8c.js"],"896c2a14":["/896c2a14.00ef651b.js"],"897c38f4":["/897c38f4.f1209b17.js"],"8aa88fe1":["/8aa88fe1.19582b4b.js"],"8be5b89e":["/8be5b89e.7f8c8d84.js"],"8e549720":["/8e549720.9f6905a8.js"],"8f9b060e":["/8f9b060e.320fabaa.js"],"9432834c":["/9432834c.0d35ef3c.js"],"944370a7":["/944370a7.ad9f9455.js"],"94b701fc":["/94b701fc.8ad8b72b.js"],"9657b620":["/9657b620.35ef7e9a.js"],"96f03c14":["/96f03c14.9a7d7ecd.js"],"9772735d":["/9772735d.c94c3235.js"],"9785afe1":["/9785afe1.cca22d51.js"],"991d377f":["/991d377f.9b66a73f.js"],"9b77b32e":["/9b77b32e.ab98ca0b.js"],"9bf47bfb":["/9bf47bfb.70582d03.js"],"9da16797":["/9da16797.948e3e68.js"],"9fa47e07":["/9fa47e07.6426debc.js"],"a376eff9":["/a376eff9.ffe27f63.js"],"a3e292e3":["/a3e292e3.1a2b47fa.js"],"a43ffa27":["/a43ffa27.ccf0458b.js"],"a6aa9e1f":["/a6aa9e1f.f991da45.js"],"a8e72361":["/a8e72361.0d51c20b.js"],"a9bcb9f7":["/a9bcb9f7.29c9ff2d.js"],"a9dfb127":["/a9dfb127.f742f0c9.js"],"aa47185d":["/aa47185d.b5772472.js"],"af172acd":["/af172acd.24a60ac1.js"],"b16f7101":["/b16f7101.146cedb6.js"],"b1939eb5":["/b1939eb5.555bb6a0.js"],"b1c5f98c":["/b1c5f98c.4733f779.js"],"b383c38c":["/b383c38c.8cceb438.js"],"b540f618":["/b540f618.7899824a.js"],"b5abd046":["/b5abd046.4d531846.js"],"b66d76c8":["/b66d76c8.64102b16.js"],"b69287bd":["/b69287bd.230341c5.js"],"b8761de2":["/b8761de2.29c3a5a9.js"],"bbb4ffb5":["/bbb4ffb5.efce927b.js"],"bd7838ba":["/bd7838ba.3caa3abc.js"],"bd83d1d0":["/bd83d1d0.1721728b.js"],"bea7bc0f":["/bea7bc0f.35cbbd63.js"],"bf607f9e":["/bf607f9e.cba2a221.js"],"c274876d":["/c274876d.3c5d9d48.js"],"c3e5fbf8":["/c3e5fbf8.71edf962.js"],"c4f5d8e4":["/c4f5d8e4.0b258288.js"],"c7a2671b":["/c7a2671b.9bf02a34.js"],"c9ea0dcf":["/c9ea0dcf.2240f90f.js"],"ca6b9ff5":["/ca6b9ff5.211562c5.js"],"ccc49370":["/ccc49370.71c6a22c.js"],"ce893594":["/ce893594.f99168bb.js"],"cf238e83":["/cf238e83.7a87601c.js"],"cf778529":["/cf778529.e82e7fd2.js"],"cfb7294b":["/cfb7294b.661546ac.js"],"d2ea2e18":["/d2ea2e18.646345fa.js"],"d340fdaf":["/d340fdaf.35844ae4.js"],"d4b4cd5f":["/d4b4cd5f.62127c9d.js"],"d5e63a53":["/d5e63a53.4d60dc60.js"],"d64b0c42":["/d64b0c42.aea55a47.js"],"d73dae61":["/d73dae61.b65d575b.js"],"d784af2a":["/d784af2a.f9c721ad.js"],"d7902a48":["/d7902a48.25e9fac9.js"],"d81c36aa":["/d81c36aa.236f74de.js"],"d8788ddc":["/d8788ddc.b446c14e.js"],"d87ea661":["/d87ea661.6364f620.js"],"d89dca71":["/d89dca71.8cfa65ca.js"],"d952f995":["/d952f995.96bdfbcb.js"],"dba846ff":["/dba846ff.0aeecc5f.js"],"dbbcc1c2":["/dbbcc1c2.eb09016d.js"],"dbc9718b":["/dbc9718b.20dc0ec9.js"],"dc096836":["/dc096836.0ddd699e.js"],"dce407ee":["/dce407ee.0fd0f419.js"],"de7718ad":["/de7718ad.5346ff33.js"],"df51e520":["/df51e520.87b92729.js"],"df5def62":["/df5def62.d8bdda81.js"],"e2872654":["/e2872654.e320592a.js"],"e2951a00":["/e2951a00.6da1acfe.js"],"e3d531ce":["/e3d531ce.eedfaeeb.js"],"e443650a":["/e443650a.1c2d8ee6.js"],"e4a9c19f":["/e4a9c19f.ea9b6372.js"],"e53e6ac1":["/e53e6ac1.99464ef2.js"],"e6a2ac3f":["/e6a2ac3f.4fba2ea6.js"],"e71e4b1b":["/e71e4b1b.8a38e831.js"],"e7fb9b42":["/e7fb9b42.39946f44.js"],"e8b1b4a5":["/e8b1b4a5.199fdbb4.js"],"ebfacae9":["/ebfacae9.8fd38c7a.js"],"ec8ca3b5":["/ec8ca3b5.ce8d958a.js"],"ee501839":["/ee501839.b9438192.js"],"f15638f7":["/f15638f7.aa3d8b0f.js"],"f37486e1":["/f37486e1.7565d0ab.js"],"f3f9be1d":["/f3f9be1d.6abb7463.js"],"f6bcfd73":["/f6bcfd73.c2ec6bb0.js"],"f7d024b7":["/f7d024b7.a7c34e68.js"],"f95c76fe":["/f95c76fe.d269c3e0.js"],"f9a01c6a":["/f9a01c6a.00903e20.js"],"fa39d049":["/fa39d049.69115973.js"],"fba90ec7":["/fba90ec7.0daf3a7d.js"],"fbe5889e":["/fbe5889e.d8c84fa2.js"],"fdb000f9":["/fdb000f9.3e9bb35f.js"],"fde550ef":["/fde550ef.43f9b105.js"],"fe10da09":["/fe10da09.03076caf.js"],"fe70a45e":["/fe70a45e.12a4318f.js"],"fece615a":["/fece615a.262481e8.js"],"ff5560e0":["/ff5560e0.e6ce6c61.js"],"fffa2ffc":["/fffa2ffc.1ed436e9.js"]};/*]]>*/</script>
|
||
|
||
<title data-react-helmet="true">Architecture</title>
|
||
|
||
<meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" property="og:title" content="NodeGui · Build performant, native, cross platform desktop apps with JavaScript and CSS 🚀"/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" name="description" content="By looking at how NodeGui works internally, we would get a clear picture on why the APIs are designed the way they are."/><meta data-react-helmet="true" property="og:description" content="By looking at how NodeGui works internally, we would get a clear picture on why the APIs are designed the way they are."/><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/nodegui-architecture"/>
|
||
|
||
<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"/>
|
||
|
||
|
||
<link rel="stylesheet" type="text/css" href="/styles.9a608fff.css" />
|
||
|
||
</head>
|
||
<body >
|
||
<script type="text/javascript">(function() {
|
||
function setDataThemeAttribute(theme) {
|
||
document.querySelector('html').setAttribute('data-theme', theme);
|
||
}
|
||
|
||
var preferDarkQuery = '(prefers-color-scheme: dark)';
|
||
var mql = window.matchMedia(preferDarkQuery);
|
||
var supportsColorSchemeQuery = mql.media === preferDarkQuery;
|
||
var localStorageTheme = null;
|
||
try {
|
||
localStorageTheme = localStorage.getItem('theme');
|
||
} catch (err) {}
|
||
var localStorageExists = localStorageTheme !== null;
|
||
|
||
if (localStorageExists) {
|
||
setDataThemeAttribute(localStorageTheme);
|
||
} else if (supportsColorSchemeQuery && mql.matches) {
|
||
setDataThemeAttribute('dark');
|
||
}
|
||
})();</script>
|
||
<div id="__docusaurus">
|
||
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong class="">NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/api/manual/synopsis">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" target="_blank" rel="noopener noreferrer" href="https://github.com/nodegui/nodegui">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_keGJ moon_1gwN"></span></div><div class="react-toggle-track-x"><span class="toggle_keGJ sun_3CPA"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"/></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>NodeGui</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/api/manual/synopsis">API</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" target="_blank" rel="noopener noreferrer" href="https://github.com/nodegui/nodegui">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1kjD"><div class="docSidebarContainer_1cYp"><div class="sidebar_1kLs"><div class="menu menu--responsive"><button aria-label="Open Menu" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_2vk4" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/getting-started">Getting started</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/tutorial">Learn the Basics</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/styling">Styling</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/handle-events">Handle Events</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/scroll-view">Scroll View</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/images">Images</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/networking">Networking</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/guides/nodegui-architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/debugging-in-vscode">Debugging in VSCode</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/using-native-node-modules">Native Node Modules</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/custom-nodegui-native-plugin">Custom NodeGui Plugin</a></li></ul></li></ul></div></div></div><main class="docMainContainer_FFX1"><div class="padding-vert--lg"><div class="container"><div class="row"><div class="col"><div class="docItemContainer_2cwg"><article><header><h1 class="docTitle_1vWb">Architecture</h1></header><div class="markdown"><p>By looking at how NodeGui works internally, we would get a clear picture on why the APIs are designed the way they are.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="qode"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#qode" title="Direct link to heading">#</a>Qode</h2><p>NodeGui uses Qt for creating Windows and other UI elements. Hence it exports thin wrappers of native C++ widgets from Qt into Javascript world. Now, every Qt application needs to initialize an instance of <code>QApplication</code> before creating widgets. The way we do it in C++ Qt application is (dont worry if it doesnt make sense right now):</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-cpp codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token macro property">#</span><span class="token macro property directive keyword" style="font-style:italic">include</span><span class="token macro property"> </span><span class="token macro property string" style="color:rgb(195, 232, 141)"><QApplication></span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token macro property">#</span><span class="token macro property directive keyword" style="font-style:italic">include</span><span class="token macro property"> </span><span class="token macro property string" style="color:rgb(195, 232, 141)"><QPushButton></span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">int</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="font-style:italic">int</span><span class="token plain"> argc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">char</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">argv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> QApplication </span><span class="token function" style="color:rgb(130, 170, 255)">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">argc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> argv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Important</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> QPushButton </span><span class="token function" style="color:rgb(130, 170, 255)">hello</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">"Hello world!"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> hello</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">resize</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> hello</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">show</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">exec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Important</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>Like many Gui libraries Qt uses an event/message loop to handle events from widgets. Hence, when we call <code>app.exec()</code> Qt starts its message loop and blocks on that line. This is all good when there is only one message loop in the entire app. But since we want to use Qt with NodeJS and NodeJs has its own event loop, we cannot run both Qt and NodeJs on the same thread easily.</p><p>Then following questions arise:</p><ul><li><strong>What if we run Qt on a separate thread?</strong> : No this is not possible since Qt has a requirement that it needs to run on the main thread.</li><li><strong>What if we run Node on a separate thread?</strong> : This would mean we need to build a complex bridge between Node and Qt threads to make them communicate. A strict no no.</li></ul><p>So in order to make both NodeJs and Qt work together we need to find a way to merge these two event loops into one. This is achieved by a custom NodeJs binary we call as <code>Qode</code>.</p><p>Qode is a lightly modified fork of Node.js that merges Node's event loop with Qt's event loop. The idea of merging event loops is inspired by Electron and <a href="https://github.com/yue">other</a> Gui libraries developed by <a href="https://github.com/zcbenz">zcbenz (Cheng Zhao)</a>. It has been detailed in a post here: <a href="https://electronjs.org/blog/electron-internals-node-integration">Electron internals</a>. Hence, we reused the logic from electron to achieve smooth integration between Qt and NodeJs.</p><p>The idea is to release a corresponding Qode binary for every NodeJs version that comes out after Node v12.6.
|
||
The source code of Qode can be found <a href="https://github.com/nodegui/qode">here</a>.</p><p><em>*<!-- -->PS: Qode is a fork of <a href="https://github.com/yue/yode">Yode</a></em></p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="using-nodegui-apis"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-nodegui-apis" title="Direct link to heading">#</a>Using NodeGui APIs</h2><p>NodeGui offers a number of APIs that support the development of a desktop
|
||
application. You'd access NodeGui's APIs by requiring its included module:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-javascript codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">"@nodegui/nodegui"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>A window in NodeGui is for instance created using the <code>QMainWindow</code>
|
||
class.</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-javascript codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token maybe-class-name">QMainWindow</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">"@nodegui/nodegui"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> win </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">QMainWindow</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="using-nodejs-apis"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-nodejs-apis" title="Direct link to heading">#</a>Using Nodejs APIs</h2><p>NodeGui exposes full access to Node.js. This has two important implications:</p><ol><li>All APIs available in Node.js are available in NodeGui. Calling the
|
||
following code from an NodeGui app works:</li></ol><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-javascript codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> fs </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">"fs"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> root </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> fs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">readdirSync</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">"/"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// This will print all files at the root-level of the disk,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// either '/' or 'C:\'.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 107)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">root</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><ol start="2"><li>You can use Node.js modules in your application. Pick your favorite npm
|
||
module. npm offers currently the world's biggest repository of open-source
|
||
code – the ability to use well-maintained and tested code that used to be
|
||
reserved for server applications is one of the key features of NodeGui.</li></ol><p>As an example, to use the official AWS SDK in your application, you'd first
|
||
install it as a dependency:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-sh codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">npm install --save aws-sdk</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>Then, in your NodeGui app, require and use the module as if you were
|
||
building a Node.js application:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-javascript codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// A ready-to-use S3 Client</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">S3</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">"aws-sdk/clients/s3"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>There is one important caveat: Native Node.js modules (that is, modules that
|
||
require compilation of native code before they can be used) will need to be
|
||
compiled with Qode or a compatible Node version to be used with NodeGui.</p><p>The vast majority of Node.js modules are <em>not</em> native. Only 400 out of the
|
||
~650.000 modules are native. However, if you do need native modules, please
|
||
consult <a href="/docs/guides/using-native-node-modules">this guide on how to recompile them for NodeGui</a>.</p></div></article><div class="margin-vert--lg"><nav class="pagination-nav"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/networking"><h5 class="pagination-nav__link--sublabel">Previous</h5><h4 class="pagination-nav__link--label">« <!-- -->Networking</h4></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/debugging"><h5 class="pagination-nav__link--sublabel">Next</h5><h4 class="pagination-nav__link--label">Debugging<!-- --> »</h4></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_TbNY"><ul class="contents contents__left-border"><li><a href="#qode" class="contents__link">Qode</a></li><li><a href="#using-nodegui-apis" class="contents__link">Using NodeGui APIs</a></li><li><a href="#using-nodejs-apis" class="contents__link">Using Nodejs APIs</a></li></ul></div></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://spectrum.chat/nodegui">Spectrum</a></li><li class="footer__item"><a class="footer__link-item" to="https://twitter.com/node_gui" href="https://twitter.com/node_gui">Twitter</a></li><li class="footer__item"><a class="footer__link-item" to="https://medium.com/nodegui" href="https://medium.com/nodegui">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" to="https://react.nodegui.org" href="https://react.nodegui.org">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center">Copyright © 2019 NodeGui</div></div></footer>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="/styles.f9a2d1b9.js"></script>
|
||
|
||
<script type="text/javascript" src="/runtime~main.0d6070bb.js"></script>
|
||
|
||
<script type="text/javascript" src="/main.f03889ac.js"></script>
|
||
|
||
<script type="text/javascript" src="/1.580e2aed.js"></script>
|
||
|
||
<script type="text/javascript" src="/2.0e05e822.js"></script>
|
||
|
||
<script type="text/javascript" src="/1be78505.807aa49e.js"></script>
|
||
|
||
<script type="text/javascript" src="/20ac7829.49041221.js"></script>
|
||
|
||
<script type="text/javascript" src="/17896441.eeac3818.js"></script>
|
||
|
||
<script type="text/javascript" src="/2627f6e3.c4981d8b.js"></script>
|
||
|
||
|
||
</body>
|
||
</html> |