NodeGui & React NodeGui

Atul R

@masteratul94

Software Engineer

Agenda

• What is NodeGui ?
• Demo and code samples
• What is React NodeGui?
• Demo and code samples
• Interesting feature demos
  -  styling, events, text.
• Debugging with Chrome.
• How does it work?
  
• Q&A
  
  

NodeGui

A library to build cross platform, native  desktop applications with Node.js and CSS

+

https://nodegui.org

Goals of NodeGui

• Render native widgets and windows but have the flexibility of web. 🏋️‍♀️
   
• Styling with CSS. 💅
   
• Be CPU and memory efficient.  🏎️
   
• Could be used as a standalone library or serve as a base for other frameworks like React, Angular, Vue etc.  🏗️
   
• Have good documentation 📖

NodeGui - Code Sample

Getting started: docs.nodegui.org

*Requirements: CMake and Node.js

Basic example

Hello world with a button

Comparison with DOM api

NodeGui

Dom

React NodeGui

A library to build cross platform, native  desktop applications with React and CSS

+

https://react.nodegui.org

+

React NodeGui - Code Sample

Getting started: react.nodegui.org

*Requirements: CMake and Node.js

Basic Example

Styling

Inline styles &  Stylesheets

Inline styles

Stylesheet

pseudo-selectors

Some more examples