SpiderOak
Building a modern performant app with HTML/CSS/Javascript and PhoneGap*
*Oh, and one plugin
WHO AM I?
Tommy-Carlos Williams
What IS SpiderOak?
100% Private, Zero Knowledge Online Backup, Sync & Sharing
What does 'Zero-Knowledge' privacy mean?
The server has 'zero-knowledge' of your data
Your data is 100% private and only readable to you
SpiderOak's encryption is comprehensive – even with physical access to the storage servers, SpiderOak staff cannot know even the names of your files and folders
The PAST
SpiderOak's previous
native
(Android and iOS) apps had been neglected and infrequently updated
Slow, ugly and buggy – mobile had
not
been a focus
An initial misguided
attempt at a
PhoneGap
app had been made, but had not gone well*
*Sadly, the original developer mistakenly thought jQuery Mobile would be a good choice.
*Sadly, the original developer mistakenly thought jQuery Mobile would be a good choice.
The Brief
Open Source and cross-platform
(iOS and Android to start) using PhoneGap
Performant! Cannot be sluggish, must rival native
Misfires
Started out trying to pick a UI framework
Wanted that native look on Android
and
iOS
jQTouch, ChocolateChipUI, Bootstrap,
all had to be discarded for various reasons
all had to be discarded for various reasons
Two weeks after starting iOS,
CEO decided to do Android first instead
CEO decided to do Android first instead
We Lost Our Way
Cordova / PhoneGap at its heart is web development
Web developers used to hand code EVERYTHING
When did we start thinking we needed a framework?
Make It.*
Asked for one week to see if I could pull off
hand-coding the UI
hand-coding the UI
It turned out to be a LOT easier
than I had built it up in my head
than I had built it up in my head
*This is a reference to a fantastic talk by Mike Wolfe
Cross-Platform vs. Native Look
Android's ActionBar and "left caret" / "up button"
saved the UX day
A menu button and a back button in one
Small compromises were needed
What would work with no DOM changes?
Only one ActionBar item as iOS UINavigationBars are not usually filled with buttons
The Result
Performance
DO NOT use JavaScript animations
DO use CSS Transitions
DO use CSS hardware acceleration (sparingly)
-webkit-transform: translate3d(0, 0, 0);
DO NOT use complex nested DOM structures, box shadows, heavy gradients and other performance killers
Scrolling is the Enemy*
Android 2.3 does not support:
overflow: auto; -webkit-overflow-scrolling: touch;
iScroll still cannot handle scrolling long complex lists
so we had to make more compromises
The (only) Plugin*
Considering I was brought on in part due to my involvement in the
PhoneGap plugins repo... I was remarkably reticent to add plugins
Plugins are the death of cross-platform
*So far
Demo
The Future
Moving on to iOS...
...but waiting to see the iOS 7 beta
before designing the 'look'
THANKS
Feel free to ask me any PhoneGap / Cordova questions you may have as long as they have nothing to do with jQuery Mobile.
Just kidding. *
* I'm totally not kidding.
SpiderOak
By devgeeks
SpiderOak
Building a modern performant app with HTML/CSS/JavaScript and PhoneGap
