65 lines
40 KiB
HTML
65 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<script type="text/javascript">/*<![CDATA[*/window.__chunkMapping={"main":["/main.f66713773e9ba37b90fe.css","/main.00ae184f6d3bd0eadbce.js"],"component---site-src-pages-index-jsc-4-f-f99":["/component---site-src-pages-index-jsc-4-f-f99.71bf8f44fd9ac59b6a50.css","/component---site-src-pages-index-jsc-4-f-f99.c77efb7a13d4c996d6c7.js"],"component---theme-blog-post-pageccc-cab":["/component---theme-blog-post-pageccc-cab.eaf730b8c654a212f785.js"],"content---blog-welcome-286-e55":["/content---blog-welcome-286-e55.76c213cf9ce75984ae91.js"],"metadata---blog-welcome-27-a-91f":["/metadata---blog-welcome-27-a-91f.ef07fafa6070c2acef91.js"],"component---theme-blog-list-pagea-6-a-7ba":["/component---theme-blog-list-pagea-6-a-7ba.697ec326a8cebf60b287.js"],"content---blogaf-1-856":["/content---blogaf-1-856.f79900332b57f969c09a.js"],"metadata---blog-83-c-2b0":["/metadata---blog-83-c-2b0.46c7be8f307d8da2c120.js"],"component---theme-doc-legacy-page-9-e-7-ca5":["/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css","/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"],"docsMetadata---docs-150-2d6":["/docsMetadata---docs-150-2d6.a4a03dc8ae50b1fa60b5.js"],"component---theme-doc-legacy-item-031-769":["/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css","/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"],"content---docs-doc-1-b-2-f-e80":["/content---docs-doc-1-b-2-f-e80.b11e6221286a094dd836.js"],"metadata---docs-doc-12-a-3-5a1":["/metadata---docs-doc-12-a-3-5a1.bb87820e31f222c12801.js"],"content---docs-faq-048-db5":["/content---docs-faq-048-db5.a3f7755c1443136d038e.js"],"metadata---docs-faq-59-d-2b9":["/metadata---docs-faq-59-d-2b9.985713e75ca070fdde14.js"],"content---docs-api-component-4-ef-195":["/content---docs-api-component-4-ef-195.be17a07689811b2e54a5.js"],"metadata---docs-api-component-3-e-5-43d":["/metadata---docs-api-component-3-e-5-43d.b1af807c32f3d1d45a4f.js"],"content---docs-mdxce-3-7d1":["/content---docs-mdxce-3-7d1.389cb0d1e93efb516d5d.js"],"metadata---docs-mdx-786-f56":["/metadata---docs-mdx-786-f56.e64a4ecfb244bb1efd9f.js"],"content---docs-api-event-widgetac-6-11b":["/content---docs-api-event-widgetac-6-11b.b87fa94e0cd874003d59.js"],"metadata---docs-api-event-widget-39-a-9ea":["/metadata---docs-api-event-widget-39-a-9ea.34b0ce562deb2ec0ae92.js"],"content---docs-api-flex-layout-3-dc-a16":["/content---docs-api-flex-layout-3-dc-a16.d5ab9ac7b90d9ed88203.js"],"metadata---docs-api-flex-layoutecf-540":["/metadata---docs-api-flex-layoutecf-540.7db8561c2c23b0d92b67.js"],"content---docs-api-node-layoutd-28-11a":["/content---docs-api-node-layoutd-28-11a.f1324fa8676e4bf64b44.js"],"metadata---docs-api-node-layout-1-e-9-c15":["/metadata---docs-api-node-layout-1-e-9-c15.192849fc91407c883037.js"],"content---docs-api-node-widget-080-a39":["/content---docs-api-node-widget-080-a39.e39bcda58fa051ef8f58.js"],"metadata---docs-api-node-widgeta-92-a4f":["/metadata---docs-api-node-widgeta-92-a4f.dc800d76f7062b65b2ed.js"],"content---docs-api-q-abstract-scroll-area-3-e-6-d7f":["/content---docs-api-q-abstract-scroll-area-3-e-6-d7f.ce07722700328be8dfa5.js"],"metadata---docs-api-q-abstract-scroll-area-59-d-279":["/metadata---docs-api-q-abstract-scroll-area-59-d-279.378868b047b4e7fc733c.js"],"content---docs-api-q-abstract-slider-3-e-0-54d":["/content---docs-api-q-abstract-slider-3-e-0-54d.b7e761ae58b36fe089f1.js"],"metadata---docs-api-q-abstract-sliderdfa-ab7":["/metadata---docs-api-q-abstract-sliderdfa-ab7.73efd891b1be587b529b.js"],"content---docs-api-q-applicationd-3-e-0a3":["/content---docs-api-q-applicationd-3-e-0a3.039f8c83760f87eef546.js"],"metadata---docs-api-q-applicationc-1-d-8a4":["/metadata---docs-api-q-applicationc-1-d-8a4.dba24314be49483727c4.js"],"content---docs-api-q-check-boxd-9-b-c95":["/content---docs-api-q-check-boxd-9-b-c95.54af9594d82de2f1c65c.js"],"metadata---docs-api-q-check-box-132-293":["/metadata---docs-api-q-check-box-132-293.363eb2c9b2bdc95e76bb.js"],"content---docs-api-q-clipboard-69-d-2ef":["/content---docs-api-q-clipboard-69-d-2ef.2facddd2ce7d03c7d364.js"],"metadata---docs-api-q-clipboard-486-b21":["/metadata---docs-api-q-clipboard-486-b21.5efa03bad36d45e62cbe.js"],"content---docs-api-q-cursor-362-d51":["/content---docs-api-q-cursor-362-d51.72e3b873d390560e1917.js"],"metadata---docs-api-q-cursor-887-11e":["/metadata---docs-api-q-cursor-887-11e.af1b21b104f06148557b.js"],"content---docs-api-q-dial-80-b-99a":["/content---docs-api-q-dial-80-b-99a.facd48a52570d2fd7472.js"],"metadata---docs-api-q-dialbfb-aef":["/metadata---docs-api-q-dialbfb-aef.e5ded32011b7d6927cdc.js"],"content---docs-api-q-grid-layouta-4-e-552":["/content---docs-api-q-grid-layouta-4-e-552.f8384f91986e144a1e06.js"],"metadata---docs-api-q-grid-layout-7-db-030":["/metadata---docs-api-q-grid-layout-7-db-030.f3764e551a2bc1cf18a8.js"],"content---docs-api-q-icone-5-f-b0d":["/content---docs-api-q-icone-5-f-b0d.016d00e28e5a87f3cf94.js"],"metadata---docs-api-q-icone-6-d-093":["/metadata---docs-api-q-icone-6-d-093.1c4c72d6ff116744c296.js"],"content---docs-api-q-label-2-f-9-04b":["/content---docs-api-q-label-2-f-9-04b.9f8c2e203f083cedfdf8.js"],"metadata---docs-api-q-label-165-210":["/metadata---docs-api-q-label-165-210.1dba411adf86a92ae91f.js"],"content---docs-api-q-line-editea-0-53d":["/content---docs-api-q-line-editea-0-53d.f606b13ced935ec46509.js"],"metadata---docs-api-q-line-edit-13-f-b8a":["/metadata---docs-api-q-line-edit-13-f-b8a.df4fef6cc6001cbc07a7.js"],"content---docs-api-q-main-window-0-e-7-299":["/content---docs-api-q-main-window-0-e-7-299.7a1bf20062e23ed6c510.js"],"metadata---docs-api-q-main-window-04-f-efb":["/metadata---docs-api-q-main-window-04-f-efb.699f6e2eb1ac78330311.js"],"content---docs-api-q-pixmap-8-dd-cb2":["/content---docs-api-q-pixmap-8-dd-cb2.343e5d75db3125ddfa81.js"],"metadata---docs-api-q-pixmapfdf-820":["/metadata---docs-api-q-pixmapfdf-820.087e26967d50eb06140d.js"],"content---docs-api-q-plain-text-edit-7-c-8-081":["/content---docs-api-q-plain-text-edit-7-c-8-081.f6a618e75ea9b4f15f6b.js"],"metadata---docs-api-q-plain-text-edit-161-ecc":["/metadata---docs-api-q-plain-text-edit-161-ecc.e89eb96f17b29e76629e.js"],"content---docs-api-q-progress-barc-46-afe":["/content---docs-api-q-progress-barc-46-afe.2a5c874c4e33ecb7a2b8.js"],"metadata---docs-api-q-progress-bar-43-d-07e":["/metadata---docs-api-q-progress-bar-43-d-07e.a527e07318808cde454e.js"],"content---docs-api-q-push-button-06-c-73e":["/content---docs-api-q-push-button-06-c-73e.9e1e6d8a0e7c17941efd.js"],"metadata---docs-api-q-push-button-96-d-c92":["/metadata---docs-api-q-push-button-96-d-c92.b15a45966fb25f5f9917.js"],"content---docs-api-q-radio-buttone-54-746":["/content---docs-api-q-radio-buttone-54-746.0eceb96f43e589853010.js"],"metadata---docs-api-q-radio-button-367-f7c":["/metadata---docs-api-q-radio-button-367-f7c.11484c432455585a7ef3.js"],"content---docs-api-q-scroll-area-8-c-4-3fd":["/content---docs-api-q-scroll-area-8-c-4-3fd.fd580650b1d2ac9eee33.js"],"metadata---docs-api-q-scroll-area-46-a-96e":["/metadata---docs-api-q-scroll-area-46-a-96e.a5c480374e3f8b5fcea2.js"],"content---docs-api-q-spin-box-1-ce-bfd":["/content---docs-api-q-spin-box-1-ce-bfd.fc03e9106b39d9c9e23c.js"],"metadata---docs-api-q-spin-box-809-ae0":["/metadata---docs-api-q-spin-box-809-ae0.1fcda0244eebb91ff1bf.js"],"content---docs-api-q-tab-widget-508-95e":["/content---docs-api-q-tab-widget-508-95e.b35876b3da49da08bcb5.js"],"metadata---docs-api-q-tab-widgetebc-5aa":["/metadata---docs-api-q-tab-widgetebc-5aa.558f01cb9860e9184f4f.js"],"content---docs-api-q-widget-04-a-59f":["/content---docs-api-q-widget-04-a-59f.789a0ca241a0fb6ad49d.js"],"metadata---docs-api-q-widget-287-e6c":["/metadata---docs-api-q-widget-287-e6c.1a1aa4d570d756d63bb4.js"],"content---docs-api-qt-enumsfd-7-cf3":["/content---docs-api-qt-enumsfd-7-cf3.1eed426a340d4c937b0a.js"],"metadata---docs-api-qt-enums-423-cf9":["/metadata---docs-api-qt-enums-423-cf9.fb1940e1fff15d344906.js"],"content---docs-api-yoga-widgeta-42-cc7":["/content---docs-api-yoga-widgeta-42-cc7.d048cabe40533b903ea2.js"],"metadata---docs-api-yoga-widget-95-c-f8b":["/metadata---docs-api-yoga-widget-95-c-f8b.bdbc70e8a3ba6a1d1808.js"],"content---docs-api-process-5-ec-b1e":["/content---docs-api-process-5-ec-b1e.81baa4658f7e9a835392.js"],"metadata---docs-api-process-32-d-09e":["/metadata---docs-api-process-32-d-09e.9dd820231565148c88a2.js"],"content---docs-api-synopsis-7-bb-e1c":["/content---docs-api-synopsis-7-bb-e1c.2cede4e9cd42a20dcab1.js"],"metadata---docs-api-synopsis-21-f-a62":["/metadata---docs-api-synopsis-21-f-a62.a376081207def93aa340.js"],"content---docs-development-readme-149-437":["/content---docs-development-readme-149-437.115b92599d48666d0070.js"],"metadata---docs-development-readm-ec-6-c-332":["/metadata---docs-development-readm-ec-6-c-332.49158ed40eba176b8d72.js"],"content---docs-development-common-errorsf-15-a5b":["/content---docs-development-common-errorsf-15-a5b.e038ab8ec8bf334300fb.js"],"metadata---docs-development-common-errors-402-ef4":["/metadata---docs-development-common-errors-402-ef4.7ea9ca2120cf1ce1bce9.js"],"content---docs-development-debuggingb-54-9ed":["/content---docs-development-debuggingb-54-9ed.750c6b37dab541484a83.js"],"metadata---docs-development-debuggingc-36-26a":["/metadata---docs-development-debuggingc-36-26a.3bf9d58aef0157443ea5.js"],"content---docs-development-getting-started-139-387":["/content---docs-development-getting-started-139-387.91c824c53e601bdee051.js"],"metadata---docs-development-getting-started-89-b-c7a":["/metadata---docs-development-getting-started-89-b-c7a.863d1b0e22372d87282e.js"],"content---docs-development-setting-up-28-c-666":["/content---docs-development-setting-up-28-c-666.3ed03febaee8901fd048.js"],"metadata---docs-development-setting-up-979-75f":["/metadata---docs-development-setting-up-979-75f.8f9fc5a72c685e8d0e31.js"],"content---docs-development-signal-and-event-handling-7-d-4-f3f":["/content---docs-development-signal-and-event-handling-7-d-4-f3f.ce2b82a97ac1f368a896.js"],"metadata---docs-development-signal-and-event-handling-0-b-5-692":["/metadata---docs-development-signal-and-event-handling-0-b-5-692.b16a5b795c3eef3ce5dc.js"],"content---docs-development-styling-293-cad":["/content---docs-development-styling-293-cad.b3394daf132a97f6e2c2.js"],"metadata---docs-development-styling-1-c-2-0d6":["/metadata---docs-development-styling-1-c-2-0d6.c1ae40b22fc3b93cd6fc.js"],"content---docs-development-wrapping-widgets-84-b-538":["/content---docs-development-wrapping-widgets-84-b-538.8591cd36dcfe1c65b14a.js"],"metadata---docs-development-wrapping-widgets-303-fb8":["/metadata---docs-development-wrapping-widgets-303-fb8.bfc04ad3ffc9ee24e861.js"],"content---docs-guides-custom-nodegui-native-plugin-632-9db":["/content---docs-guides-custom-nodegui-native-plugin-632-9db.ae1162899d532c588845.js"],"metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f":["/metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f.184a7a6a1f10e05c6c54.js"],"content---docs-guides-debugging-in-vscodebd-7-cec":["/content---docs-guides-debugging-in-vscodebd-7-cec.a37b675eceeff564dcc8.js"],"metadata---docs-guides-debugging-in-vscodebf-8-5b0":["/metadata---docs-guides-debugging-in-vscodebf-8-5b0.d26c0a02667ed3c9416d.js"],"content---docs-guides-debuggingf-3-f-cf5":["/content---docs-guides-debuggingf-3-f-cf5.6a9f350b152e911795d0.js"],"metadata---docs-guides-debugging-970-fb8":["/metadata---docs-guides-debugging-970-fb8.4834f7c20eceaaaee536.js"],"content---docs-guides-getting-startedc-9-e-20f":["/content---docs-guides-getting-startedc-9-e-20f.058d1e127795274285bb.js"],"metadata---docs-guides-getting-started-2-b-7-1a4":["/metadata---docs-guides-getting-started-2-b-7-1a4.cfc3dec8bc5f547dfbb8.js"],"content---docs-guides-handle-events-160-4b0":["/content---docs-guides-handle-events-160-4b0.c02ea0616d11beafddb3.js"],"metadata---docs-guides-handle-events-5-eb-540":["/metadata---docs-guides-handle-events-5-eb-540.61bb8e8da8eeda4cc040.js"],"content---docs-guides-images-991-065":["/content---docs-guides-images-991-065.914359cdc22f4b9051ef.js"],"metadata---docs-guides-images-915-5ee":["/metadata---docs-guides-images-915-5ee.175b82933d61d3e5deb4.js"],"content---docs-guides-layoutdf-5-a64":["/content---docs-guides-layoutdf-5-a64.bbcbc44e5156b817cb02.js"],"metadata---docs-guides-layoutf-65-d7d":["/metadata---docs-guides-layoutf-65-d7d.3bdf6df942a2264f480b.js"],"content---docs-guides-networking-374-03e":["/content---docs-guides-networking-374-03e.17133e9de15be6e64aff.js"],"metadata---docs-guides-networkingdfd-ce0":["/metadata---docs-guides-networkingdfd-ce0.332c039b051021fe2724.js"],"content---docs-guides-nodegui-architecture-262-19e":["/content---docs-guides-nodegui-architecture-262-19e.245edae39f1ddac01224.js"],"metadata---docs-guides-nodegui-architecture-550-b82":["/metadata---docs-guides-nodegui-architecture-550-b82.72d9e2773d4e285ca973.js"],"content---docs-guides-scroll-view-76-e-87c":["/content---docs-guides-scroll-view-76-e-87c.73c89be82bf124b2e125.js"],"metadata---docs-guides-scroll-view-9-a-9-2ac":["/metadata---docs-guides-scroll-view-9-a-9-2ac.f6039a7dd2d1fa4c6ca6.js"],"content---docs-guides-stylingfec-977":["/content---docs-guides-stylingfec-977.c0e2691c9103260d4124.js"],"metadata---docs-guides-styling-9-ea-213":["/metadata---docs-guides-styling-9-ea-213.d5570c147002ef8e6bfe.js"],"content---docs-guides-tutoriale-53-6ab":["/content---docs-guides-tutoriale-53-6ab.3001eaf77a6eeaf068aa.js"],"metadata---docs-guides-tutorial-1-f-1-23b":["/metadata---docs-guides-tutorial-1-f-1-23b.4e417b24befa6a685ab5.js"],"content---docs-guides-using-native-node-modules-3-ab-104":["/content---docs-guides-using-native-node-modules-3-ab-104.3bc40951d03693eaff7d.js"],"metadata---docs-guides-using-native-node-modules-31-f-551":["/metadata---docs-guides-using-native-node-modules-31-f-551.0accd417ae132a661bdf.js"],"component---theme-blog-tags-posts-page-687-b6c":["/component---theme-blog-tags-posts-page-687-b6c.7cbecfb8c53ab9b2f9ba.js"],"metadata---blog-tags-nodegui-632-d46":["/metadata---blog-tags-nodegui-632-d46.73df93301c6a1152b2fe.js"],"metadata---blog-tags-hellob-02-3e8":["/metadata---blog-tags-hellob-02-3e8.cdf356c9ee24382e453e.js"],"component---theme-blog-tags-list-page-01-a-d0b":["/component---theme-blog-tags-list-page-01-a-d0b.f9af53c8c6b12587c378.js"],"tags---blog-tags-8-d-7-36d":["/tags---blog-tags-8-d-7-36d.1243f2728e886299c73e.js"]};/*]]>*/</script>
|
||
|
||
<title data-react-helmet="true">Architecture</title>
|
||
|
||
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="viewport" content="width=device-width"/><meta data-react-helmet="true" property="og:title" content="Architecture"/><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"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
|
||
|
||
<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"/>
|
||
|
||
|
||
<link rel="stylesheet" type="text/css" href="/main.f66713773e9ba37b90fe.css" />
|
||
|
||
<link rel="stylesheet" type="text/css" href="/1.196ce05925ea6d776920.css" />
|
||
|
||
<link rel="stylesheet" type="text/css" href="/2.702de9bbb01fe4f46fa1.css" />
|
||
|
||
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css" />
|
||
|
||
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css" />
|
||
|
||
</head>
|
||
<body >
|
||
<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>NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" label="API" position="right" href="/docs/api/QApplication">API</a><a class="navbar__item navbar__link" label="Blog" position="right" href="/blog">Blog</a><a class="navbar__item navbar__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a><div class="react-toggle displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_16vC moon_1N64"></span></div><div class="react-toggle-track-x"><span class="toggle_16vC sun_3CZP"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" 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" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" label="API" position="right" href="/docs/api/QApplication">API</a></li><li class="menu__list-item"><a class="menu__link" label="Blog" position="right" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a></li></ul></div></div></div></nav><div class="container container--fluid"><div class="row"><div class="col col--3"><div class="sidebar_Qb2S"><div class="menu menu--responsive"><button aria-label="Open Menu" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_1uhT" 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"><a class="menu__link" 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" 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="col"><div><div class="padding-vert--lg"><div class="row"><div class="col"><div class="docItemContainer_3Gws"><header><h1 class="margin-bottom--lg">Architecture</h1></header><article><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" class="anchor" id="qode"></a><a aria-hidden="true" class="hash-link" href="#qode">#</a>Qode</h2><p>NodeGui uses Qt for creating Windows and other UI element. 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:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token macro property" style="color:rgb(128, 203, 196)">#</span><span class="token macro property directive keyword" style="color:rgb(127, 219, 202)">include</span><span class="token macro property" style="color:rgb(128, 203, 196)"> </span><span class="token macro property string" style="color:rgb(173, 219, 103)"><QApplication></span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token macro property" style="color:rgb(128, 203, 196)">#</span><span class="token macro property directive keyword" style="color:rgb(127, 219, 202)">include</span><span class="token macro property" style="color:rgb(128, 203, 196)"> </span><span class="token macro property string" style="color:rgb(173, 219, 103)"><QPushButton></span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">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="color:rgb(127, 219, 202)">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="color:rgb(127, 219, 202)">char</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">*</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:#d6deeb"><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:#d6deeb"><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(99, 119, 119);font-style:italic">// Important</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><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(173, 219, 103)">"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:#d6deeb"><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:#d6deeb"><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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">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(99, 119, 119);font-style:italic">// Important</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><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 loop 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" class="anchor" id="using-nodegui-apis"></a><a aria-hidden="true" class="hash-link" href="#using-nodegui-apis">#</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:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><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(173, 219, 103)">"@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:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token keyword" style="color:rgb(127, 219, 202)">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(127, 219, 202)">=</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(173, 219, 103)">"@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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> win </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">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" class="anchor" id="using-nodejs-apis"></a><a aria-hidden="true" class="hash-link" href="#using-nodejs-apis">#</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:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> fs </span><span class="token operator" style="color:rgb(127, 219, 202)">=</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(173, 219, 103)">"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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> root </span><span class="token operator" style="color:rgb(127, 219, 202)">=</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(173, 219, 103)">"/"</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);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:#d6deeb"><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// either '/' or 'C:\'.</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">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:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><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:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// A ready-to-use S3 Client</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">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(127, 219, 202)">=</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(173, 219, 103)">"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-top--xl margin-bottom--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_2wxO"><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>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="/runtime~main.b0186ad8ee6d73168ac3.js"></script>
|
||
|
||
<script type="text/javascript" src="/main.00ae184f6d3bd0eadbce.js"></script>
|
||
|
||
<script type="text/javascript" src="/0.821df7f17f7288aebb5e.js"></script>
|
||
|
||
<script type="text/javascript" src="/1.9b3d421a0f44576af60f.js"></script>
|
||
|
||
<script type="text/javascript" src="/2.27a81c22b5dfa23bfe9b.js"></script>
|
||
|
||
<script type="text/javascript" src="/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"></script>
|
||
|
||
<script type="text/javascript" src="/docsMetadata---docs-150-2d6.a4a03dc8ae50b1fa60b5.js"></script>
|
||
|
||
<script type="text/javascript" src="/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"></script>
|
||
|
||
<script type="text/javascript" src="/content---docs-guides-nodegui-architecture-262-19e.245edae39f1ddac01224.js"></script>
|
||
|
||
<script type="text/javascript" src="/metadata---docs-guides-nodegui-architecture-550-b82.72d9e2773d4e285ca973.js"></script>
|
||
|
||
</body>
|
||
</html> |