NWJS allows developers to create desktop applications using web technologies like HTML, CSS, and JavaScript. It works by embedding Chromium and Node.js in the app, enabling access to native system APIs and a full JavaScript environment. This allows building cross-platform desktop apps that can leverage existing frontend skills and code. NWJS apps can be run from source or compiled into distributable binaries. It provides many native features like file/argument handling, tray icons, and frameless windows. Tests can be run in Mocha and hot reloading enabled during development.

1. NWJS
CROSS PLATFORM DESKTOP APPLICATION DEVELOPMENT

2. Aigars Zeiza
• Working in “Accenture” as front end developer
• >5yrs of experience
• Author of “Zinc” navigation system

3. HTML5 on desktop

4. Why you should choose an HTML5 for desktop?
• To create difficult UI faster
• To migrate an existing web app to desktop
• You are a frontend developer

5. NW.js (node-webkit)
“NW.JS (PREVIOUSLY KNOWN AS NODE-WEBKIT) LETS YOU CALL ALL NODE.JS MODULES
DIRECTLY FROM DOM AND ENABLES A NEW WAY OF WRITING APPLICATIONS WITH ALL
WEB TECHNOLOGIES.”
NWJS.IO

7. NWJS is cross-platform

8. NWJS vs Electron
NWJS Electron
Browser runtime Chromium libchromiumcontent
Chromium version 62.0.3202.75 59.0.3071.115
Nodejs version 8.8.1 8.2.1
V8 version 6.1.534.42 5.9.211.38
Entry Point HTML or JS JS only
Bare Distribution Size 139MB (52MB zipped) 125MB (45MB zipped)
Chrome Apps Support Yes No
Support of chrome.* APIs Yes No
Source Code Protection V8 Snapshot ASAR Archive Support
Crash reporting No Yes
Stars on github 32k 52k

9. Setup our dev environment
• Any code editor (Vscode, Sublime text, Atom, Webstorm…)
• Nodejs > 4.x
• (recommend) Npm install –g nwjs
• (recommend) Npm install nwjs-builder-phoenix

10. Prepare our first app

11. Prepare our first app
OR

12. Setup of NWjs
OFFICIAL DOCS:
• Download nwjs distributive
• Use command like:
/path/to/your/app
/path/to/nw .

13. Setup of NWjs
OFFICIAL DOCS:
• Download nwjs distributive
• Use command like:
MORE OPTIMAL SOLUTION:
• Use “nwjs” npm package
• Use same scripts for all developer team
members
/path/to/your/app
/path/to/nw .

14. Distribute

15. Use of build-nwjs-phoenix
SOURCE CODE BUILT APPLICATION

16. Native UI API

17. What we can do with nw.gui
• Use file dialogs – “select folder” and “save as”
• Use windows tray
• Shell – collection of APIs that do desktop related jobs
• Handling files and arguments
• Frameless, transparent window

18. Native modules
USING OF THIRD PARTY NATIVE MODULES

19. Using of third party native modules requires
• Python 2.x
• Visual C++

20. Testing

21. NWJS uses Mocha to run tests

22. Run tests in child process with nw_test_app module
MOCHA_TEST.JS APP

23. Development features
• Chromium developer tools
• Easy to implement of Hot Reload

24. Development features
• Chromium developer tools
• Easy to implement of Hot Reload
Basic solution

25. Development features
• Chromium developer tools
• Easy to implement of Hot Reload
Gulp

26. More advanced solution with Gulp

27. Questions?