HTML5 apps with PhoneGap and node-webkit

This time we'll get familiar with the current state of publishing HTML5 apps for multiple platforms.

We'll cover the basic workflow of using PhoneGap and node-webkit to compile web apps for mobile and desktop OSs, inspect some of the gotchas of each system and weigh the pros and cons of the whole HTML-cross-platform idea.

Transcript

1. HTML5 apps with PhoneGap + node-webkit
2. Goal Build apps with HTML+JS+CSS Share code with web projects Target multiple mobile and desktop OSs Publish in digital stores App Store & Mac App Store Google Play, Amazon Appstore Windows Phone Store, Windows Store Steam ...
3. What is “cross-platform” Same codebase can be… 1. run natively on multiple platforms 2. converted to native code of multiple platforms 3. packaged within native app projects of each platform Despite shared code, platforms have different... Screen sizes, input methods, hardware and performance UI and asset requirements Aesthetics and user expectations Stores and app distribution (with guidelines)
4. Web app accessible with a browser Various level of support for HTML5 or web apps available as it is Windows 8: native HTML5 metro apps iOS and Android: pin a web app to run without browser chrome Amazon Appstore accepts web app submissions PG/nw lump your HTML5 code together with a browser Spit out an app/project that runs on different mobile/desktop platforms Custom stack augmented with PhoneGap, node-webkit, misc. build tools etc. Custom cross-platform stack with PhoneGap + node-webkit
5. Target platforms PhoneGap iOS Android Windows Phone (Blackberry) Web Chrome Firefox IE Safari ... node-webkit Mac OS X Windows desktop Linux
6. In rapid development, less mature than PhoneGap Fairly well documented Not everything is implemented, but most things work well enough Basically a customized browser with node included Source code remains accessible when distributed No real build pipeline, only simplistic Grunt tasks Can be compiled into single binary (far from production-ready) node-webkit
7. PhoneGap Adobe’s distribution of Apache Cordova (“Cordova” used in docs) Generates Xcode/Android/Windows projects to wrap your HTML5 code Significant changes in history: beware of outdated info (currently at 3.4) Docs are decent, but could use a clean-up CLI on node Device features as plugins (laborious to work with) Does not provide node for your app Requires research and mobile knowledge. Gets the job done, despite caveats.
8. Separate service, packages PhoneGap projects into apps in the cloud Separate documentation and versioning Requires separate config entries for icons, splash screens and settings Allows downloading packaged apps Allows signing apps for App Store and Google Play Build allows building apps without build tools installed locally. Testing the builds is still up to you. PhoneGap Build
9. My projects Reposive.com: syncs local version control status to a cloud service 1. Server written with node.js 2. Web site (PHP) & web app (JS) 3. Local syncer client (node-webkit) Inversion: Git GUI for local version control, business logic as node module Ubloids: puzzle game - Mobile-first game design - Custom HTML5 “engine” - Supports mouse, keyboard, touch & swipe input
10. Ubloids JS libraries used: knockout.js (event subscriptions, DOM sync) mousetrap.js (keyboard events) hammer.js (gesture events) lowLag.js (better audio support) Custom CSS animations Stores data with stock localStorage No localization yet (no explicit localization support in PhoneGap or node- webkit) Setup for PhoneGap builds, node-webkit builds and normal browser access
11. • .gitignore, readme, docs etc. • Actual source under www/ • Apache stuff for web access ◦ .htaccess ◦ favicons • Store asses, descriptions • Marketing site • Social media sharing • … Project structure • node-webkit ◦ Manifest file (package.json) ◦ Mac assets: Credits.html, iconset & .icns ◦ Build tools: node-modules/, libraries/, Gruntfile.js ◦ Build path: build/ • PhoneGap ◦ Master config file: config.xml ◦ Locally available plugins: plugins/ ◦ Platform-specific code: merges/ ◦ Build path: platforms/ PhoneGap, node-webkit and Grunt all work on/with node.js in different ways.
12. Development and game/design testing can largely be done... - with local browser, or - web app version (e.g. testing gestures on iOS) Web version demoable and testable with no hassle Release builds need to be tested on each platform & device (Not fun) Develop & iterate for one or two platforms first. Follow best practices to avoid problems when expanding platform list as you go. Testing
13. Plugins (for platform features) Weird, badly documented workflow Bad visibility to said workflow Changed between versions Different for PhoneGap Build Icons, splash screens & configs File names & locations need to be just right Files need to be copied to built projects Some things need manifest declarations, some don’t Different again for PhoneGap Build PhoneGap gotchas
14. To avoid developing only the lowest common denominator Awful mix of feature, browser and platform detection No solution to cover all cases with the stack Phone, tablet or desktop? Keyboard, mouse or touch? iOS, Android, Windows Phone? Webkit, Gecko, Trident? node-webkit, Chrome, Safari, Opera? PhoneGap supports customized code as merges. node-webkit provides nothing. Platform customization
15. Store distribution App Store (iOS) $99 per year Mac App Store $99 per year Google Play $25 Amazon Appstore Free for first year Samsung Apps Free Windows Phone Store & Windows Store $19 or $99 per year Steam ???
16. Not so cross-platform Audio format support Animation performance Input methods Icons & splash screens Localization Screen sizes & orientation Build tools & configs Bugs -_- Platform features User accounts In-app purchases Store features & ratings Ads Cloud services Push notifications
17. Conclusion Cross-platform is not painless Design & hardware is never cross-platform Requires research, interest and time ...but not becoming an expert A project withPhoneGap and node-webkit configs can work ...but will be cluttered Performance is still an issue But not like it used to be Performance concerns are very specific to each app, platform and device