How I won the zendcon app contest
Moi
- Espen Hovlandsdal
- From Norway
- PHP developer for X years
The contest
- "Here's our API"
- "Make an app"
Early decisions
- API-first
- Thin backend
- Offline
- Web
Functionality
- Schedule (obv)
- Speaker overview
- Conference map
- Twitter stream
- Uncon schedule
- Photos from Instagram/Flickr
Design
- Yikes, I have to design something :x
- I did my best. I'm no designer.
- Icons: font-awesome
- Background: subtlepattern.com
API
- Confex API...
- No cache headers
- Sloooooow
- For schedule data:
API (cont.)
- So: cache.
- Curl multi handle
- Cronjob updates data
API (cont.)
Silex
Sends cache headers
Compresses response
Only send data we need
Frontend ♥
Angular looks awesome!
This is going to be a perfect match!
- Me
This is terrible - I don't like Angular at all!
I should just use Backbone for this.
- Me, a day later
Dear lord, backbone.dualStorage is horrible! Maybe I just didn't "get" Angular?
- Me, two days later
Angular, huh?
- ~10 days later:
- This is working really well!
- Lets test on some older devices!
- Ouch. Responsiveness?
- Profiling revealed: Angular.
-
- OK: Plain old javascript
MicroJS
- RequireJS
- Page.js (routing)
- PubSubJS
- Moment.js (dates)
- Handlebars (templates)
- jQuery
- Magnific Popup
Conference map
- Been to Zendcon before
- Wish I had a map
- Had to make one myself
- Based on architectural drawings
- Not pretty
Autoreload, compiling...
Imagemin, reving, manifest...
Testing
Offline!
-
HTML5 Appcache Manifest
-
Localstorage
- Syncing in the background
The cloud
Contest rule.
EC2
nginx
Varnish
Cloudflare
Yay, winner is me
"Can you send us the code"
Building/Deploying
- Git + Bitbucket
- npm install
- bower install
- grunt build
- Done!
Zend people: Yeah, no.
Takeaways
- Think outside the box
- Don't play Skyrim if you have a deadline
- Iterations are OK
- Attention to detail!
- Print stylesheets
- (Should) work on all platforms
- Don't be "one of many" (default UI)
