NWJS. Web on desktop
- 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
- 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
- 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?