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
    • Phonegap?

Functionality

  • Schedule (obv)
    • Save personal schedule?
  • 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:
    • 5 requests

API (cont.)

  • So: cache.
    • Memcached
  • Curl multi handle
    • Through Guzzle
  • 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
      • I can fix this on my own

    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
      • (where is room 208?)
    • Had to make one myself
      • Based on architectural drawings
      • Not pretty

    Yeoman

    • Grunt
    • Bower
    • Builds app


    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)

    Thanks.

    Made with Slides.com