As a Software as a Service (SaaS) development firm, most of work is done in the cloud, but some of our clients want an offline desktop version of their application. While HTML5 has techniques, which allow for offline use (i.e. App Cache and local Storage), these techniques have limitations and don’t always meet the need for a true offline application. This talk will discuss how to take your existing WebApp and build cross platform native desktop applications for Windows, OSX and Linux via node-webkit. We will also dive deep into node-webkit to show you how this is more than just a conversion tool; it expands application possibilities by packaging a live node.js server in every instance. A live step by step conversion of an existing WebApp will be demonstrated, insuring you understand every step needed to convert your own Web App into a native cross platform desktop application. Dr. Corey Clark (@CoreyClarkPhD) is the founder of Game Theory Labs (@GameTheoryLabs), a Software as a Service (SaaS) development and consulting firm, as well as a Professor of Game and Simulation Programming in Dallas. His current work is focused on building high performance Web Apps using HTML5, Gaming, Cluster Computing, Artificial Intelligence Modeling, Learning and Optimization. Previously he was Principal Investigator (PI) on several advanced research projects for various organizations in the DoD ranging from advanced 3D modeling and simulation of nanoscale deposition techniques to System on Chip SWARM based low power reconfigurable self-healing mesh networks. http://www.meetup.com/HTML5-User-Group/events/102310142/

1. Taking The Cloud Native
@CoreyClarkPhD
@GameTheoryLabs

2. ! Founder of Game Theory
Labs
! Professor of Game and
Simulation Programming
! Nanoscale Semiconductor
Growth Kinetics
! Flexible Embedded
Electronics for ABL
! SWARM and C4ISR
Embedded Systems
! Building HTML5 Web Apps
Utilizing:
! Cloud Cluster Computing
! Game Technology
! Artificial Intelligence
Modeling, Machine
Learning and
Optimization
What I Do:What I Did:

3. Why Native?

4. Native Applications
Expands Product Line
! Gives Desktop solution for heavy handed Apps
! Not locked to cloud
CaPTIVE: Cancer/Pathology Visualization/Characterization Tool

5. Offline Capabilities
! No Need to Support Different Browsers
! No limit to App Size
! Quicker Startup
! 40MB App
! 80% speed increase
Omega Resistance: 3D Co-Op Arcade Shooter with Dual Gamepads

6. ApplicationCache

7. New Product Types

10. AppJS…

11. Node-WebKit
“node-webkit is an app runtime based on Chromium and
node.js. You can write native apps in HTML and Javascript
with node-webkit. It also lets you call Node.js modules
directly from the DOM and enables a new way of writing
native applications with all Web technologies.
It's created and developed in the Intel Open Source
Technology Center.”

13. Node.JS

14. Chat Demo
! Node.JS
! WebSocket
! Native TCP Socket

15. Chat: Web Version

16. Chat: Lets Go Native!

17. Code Samples
! Base App JS File
! Base NodeJS File
! Node-WebKit File

18. Conversion Process
! Build *.nw File
! package.json
! Run In App Folder:
zip -r ../${PWD##*/}.nw *

19. OSX
! Copy previous node-webkit.app
into folder
! Open contents
! Copy *.nw file into:
! Contents->Resources

20. Windows
! Copy *.nw file into folder with
nw.exe
! Run In Cmd
! copy /b nw.exe+app.nw app.exe
! Zip entire contents

21. Enigma Virtual Box
! Open Enigma Virtual Box
! Copy contents of node-webkit folder
to a %DEFAULT FOLDER%
! Process
! WinXP Issues with WebGL and
Packaged DLLs

22. Gotcha!
XHR: Response 0 Not 200
Package DLLs for WebGL
File Size

23. Resources
! Game Theory Labs Blog Post
! http://blog.gametheorylabs.com/2013/06/taking-our-webgl-
html5-app-native.html
! Node-WebKit Repo
! https://github.com/rogerwang/node-webkit
! Node-WebKit Wiki
! https://github.com/rogerwang/node-webkit/wiki

24. Questions?
Twitter/Facebook:
@CoreyClarkPhD
@GameTheoryLabs
Blog: blog.gametheorylabs.com
Dev Wiki: wiki.gametheorylabs.com
Git: git.gametheorylabs.com