<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:base="http://www.deck.cc">
  <title>deck.cc</title>
  <subtitle>full content feed</subtitle>
  <updated>2010-05-24T00:00:00Z</updated>
  <author>
    <name>deckbot</name>
  </author>
  <id>http://deck.cc/articles.atom</id>
  
  <entry>
    <id>http://www.deck.cc/django_1.2_on_google_app_engine.html</id>
    <title>Django 1.2 on Google App Engine</title>
    <updated>2010-05-24T00:00:00Z</updated>
    <author>
      <name>deckbot</name>
    </author>
    <content type="html"><p>If you want a solid python web framework on neat hosting infrastructure, Django and Google App Engine form a good match.</p>
<h2 id="brequirements"><a class="toclink" href="#brequirements">Requirements</a></h2>
<p>Please make sure you already have installed the latest <a href="http://code.google.com/appengine/downloads.html">App Engine Python SDK</a>. Being familiar with Django and App Engine is not a must but certainly won't hurt.</p>
<h2 id="bdjango-12"><a class="toclink" href="#bdjango-12">Django 1.2</a></h2>
<p>Django can be used on Google App Engine and quite some people do, but how-to information is a bit scarce and often outdated. Since Django 1.2 was released just a few days ago we thought it would be nice to document the setup process.</p>
<p>Google App Engine currently has a limit of <a href="http://code.google.com/p/googleappengine/issues/detail?id=161">3000 files</a> per project. That might sound quite generous, but Django is a large framework (over 1200 files). In combination with a nontrivial project and some static assets like images and JavaScript libraries this limit could get nasty. Luckily with Python you can <a href="http://docs.python.org/library/zipimport.html">zipimport</a> modules and we are going to take advantage of that later on.</p>
<p>The following steps will create a file named <code>django.zip</code> which contains the Django 1.2 source code. These instructions should work on Ubuntu Lucid Lynx and Mac OS X Snow Leopard but will probably also run on similar systems.</p>
<pre><code># we create a directory to work with
mkdir django-on-appengine
cd django-on-appengine

# grab and extract the current django release tarball
curl -L http://www.djangoproject.com/download/1.2.1/tarball/ -o Django-1.2.1.tar.gz
tar xzvf Django-1.2.1.tar.gz

# zip the current django source
cd Django-1.2.1
zip -r ../django.zip django/
cd ..

# remove everything except django.zip
rm -rf Django-1.2*
</code></pre>
<h2 id="bdjango-app-engine-helper-from-google"><a class="toclink" href="#bdjango-app-engine-helper-from-google">Django App Engine Helper from Google</a></h2>
<p>There are two popular projects which aid in Django deployment on App Engine:</p>
<ul>
<li><a href="http://code.google.com/p/google-app-engine-django/">google-app-engine-django</a></li>
<li><a href="http://www.allbuttonspressed.com/projects/djangoappengine">djangoappengine</a> the successor of <a href="http://code.google.com/p/app-engine-patch/">app-engine-patch</a></li>
</ul>
<p>We mainly use google-app-engine-django at deck.cc as the project is supported by many Googlers and only does what is necessary to get Django up and running on App Engine.</p>
<p>If you are interested in additional features like tighter ORM integration you might also want to take a look at djangoappengine. We consider NoSQL/NonRel support for Django as too experimental at the moment and therefore prefer no datastore abstractions at all meanwhile.</p>
<p>Now we are going to set up a bare project to start with.</p>
<pre><code># grab and extract the google-app-engine-django project
curl -L http://github.com/clones/google-app-engine-django/tarball/master -o google-app-engine-django.tar.gz
tar --strip-components=1 -xzvf google-app-engine-django.tar.gz

# remove the tarball
rm google-app-engine-django.tar.gz

# create a symlink to the google app engine sdk (only necessary on linux)
ln -s /usr/local/google_appengine .google_appengine
</code></pre>
<p>You should now be able to start the development server as usual, though it will use the development server of the App Engine SDK instead of Django's.</p>
<pre><code>python2.5 manage.py runserver
</code></pre>
<h2 id="berror-logging"><a class="toclink" href="#berror-logging">Error Logging</a></h2>
<p>Django's development server outputs informative error messages including stack traces to the console. While Django renders helpful error pages in development mode, this can be very useful for debugging Ajax requests, cron jobs and the taskqueue. Since we use the development server of the App Engine SDK we need to make some small adjustments to get the same effect.</p>
<p>Adding the following lines to main.py will do. Here we adapted the code from the <a href="http://code.google.com/appengine/articles/django.html">Django on App Engine tutorial</a> for Django 1.2 Signals.</p>
<pre><code>import logging
import django.core.signals
import django.dispatch.dispatcher

def log_exception(*args, **kwds):
    logging.exception('Exception in request:')

# Log errors.
django.dispatch.Signal.connect(
    django.core.signals.got_request_exception, log_exception)

# Unregister the rollback event handler.
django.dispatch.Signal.disconnect(
    django.core.signals.got_request_exception,
    django.db._rollback_on_exception)
</code></pre>
<p>Additionally we will also be able to benefit from these logs in production as they will be browsable and searchable in the App Engine Console Dashboard for your project.</p>
<p><img alt="Error Logging in App Engine Console Dashboard on an Application in Production" src="/media/2010-05-24/logging.png" title="App Engine Error Logging on a deployed Application" /></p>
<h2 id="bperformance-metrics-with-appstats"><a class="toclink" href="#bperformance-metrics-with-appstats">Performance Metrics with Appstats</a></h2>
<p>Google recently released <a href="http://code.google.com/appengine/docs/python/tools/appstats.html">Appstats</a>, which is an application performance measuring tool combined with a web based analytics-like web interface for browsing statistics about certain events. It was written by <a href="http://en.wikipedia.org/wiki/Guido_van_Rossum">Guido van Rossum</a> and hooks into the <abbr title="Remote Procedure Call">RPC</abbr> framework of App Engine which is used to communicate with various services. This causes some (rather negligible) overhead but is especially useful for measuring things like memcache, image processing, datastore query performance et al.</p>
<p><img alt="Appstats Web Interface" src="/media/2010-05-24/appstats.png" title="Appstats Web Interface" /></p>
<p>Using Appstats is fairly easy because App Engine offers a Django middleware which integrates it into the request handling cycle of our application. Therefore we just need to edit <code>settings.py</code> and prepend the following middleware to MIDDLEWARE_CLASSES.</p>
<pre><code>MIDDLEWARE_CLASSES = (
    'google.appengine.ext.appstats.recording.AppStatsDjangoMiddleware',

    # ...
)
</code></pre>
<p>Finally we add another route to our app.yaml configuration file. This will enable us to browse the analytics web interface.</p>
<pre><code>- url: /stats.*
  script: $PYTHON_LIB/google/appengine/ext/appstats/ui.py
</code></pre>
<p>If you used the route pattern of the example above, you will be able to browse the performance statistics at /stats. They will be locked down to admins only even if you don't restrict its access explicitly.</p>
<h2 id="benjoy"><a class="toclink" href="#benjoy">Enjoy</a></h2>
<p>Congratulations, you are ready to start hacking on your Django App Engine project. All of Django's features that don't rely on the existance of a <abbr title="Relational Database Management System">RDBMS</abbr> should work without a hitch and some things like the User model is patched by google-app-engine-django. It certainly will help to look into the documentation of each of the projects.</p>
<h2 id="bfurther-reading"><a class="toclink" href="#bfurther-reading">Further Reading</a></h2>
<ul>
<li><a href="http://code.google.com/p/google-app-engine-django/">Google Code project page of google-app-engine-django</a></li>
<li><a href="http://code.google.com/appengine/docs/python/overview.html">App Engine Python Documentation</a></li>
<li><a href="http://docs.djangoproject.com/en/1.2/">Django 1.2 Documentation</a></li>
</ul></content>
  </entry>
  
  <entry>
    <id>http://www.deck.cc/native_vs_html5_mobile_applications.html</id>
    <title>Native vs Html5 Mobile Applications</title>
    <updated>2010-06-24T00:00:00Z</updated>
    <author>
      <name>deckbot</name>
    </author>
    <content type="html"><p>It seems like everyone is doing native apps now. Many people I know ponder about whether to learn Objective-C on the one hand or dive into the Android platform on the other hand.</p>
<p>A tough choice as both of them already gained a significant smartphone market share and are growing fast. Clients actually demand native apps even while most of them could easily be implemented using html5.</p>
<h2 id="bhtml5-to-the-rescue"><a class="toclink" href="#bhtml5-to-the-rescue">Html5 to the Rescue</a></h2>
<p>As my background is in web application engineering, this breaks my heart. We've got more advanced browsers than ever before. They support offline asset caching using manifests, a relational database, key-value storage, fancy CSS effects, geolocation, touch events, web workers et al.</p>
<p>This is not only an amazing development environment but also a set of cross platform standards backed by several highly commited companies. All of which compete on things like JavaScript performance, implementation quality and developer relations (documentation, tools, libraries).</p>
<p>I think the choice to invest time into web application engineering in general and especially for mobile devices is a no-brainer.</p>
<p>Take a look at the recent Google I/O session <a href="http://code.google.com/events/io/2010/sessions/html5-status-chrome.html">"html5 status update"</a> to see what is coming in the near future (camera access, voice recognition, microphone access, positional audio, WebGL, …).</p>
<p>While there are quite some remarkable native apps (especially on iOS), well executed html5 mobile apps are somewhat rare. Still there are some good examples that I would like to show you.</p>
<h2 id="bfacebook"><a class="toclink" href="#bfacebook">Facebook</a></h2>
<p>Facebook's native iPhone and Android apps often are cited as the best applications on the platform but lately I find myself preferring their mobile web app more and more.</p>
<p>It feels more responsive because of the loading indicator. You don't have to take annyoing roundtrips to the dashboard as it offers a global navigation. Since it is running in the browser it allows copy and pasting of text anywhere and opens external links in another tab rather than in a dumbed-down in-app-browser. I also like the consistent experience when I switch between iPhone and Android as the web based version works on both. Did I mention that you don't have to worry about app updates at all?</p>
<p>Interestingly it uses almost none of the html5 specific features like geolocation or the relational database for offline storage so I wouldn't be surprised if it improves even further.</p>
<p><img alt="Facebook Touch" src="/media/2010-06-24/facebook.png" title="Facebook Touch" /></p>
<h2 id="bgmail"><a class="toclink" href="#bgmail">Gmail</a></h2>
<p>Gmail is a great web-based desktop email client but Google also managed to create an impressive <a href="http://www.google.com/mobile/mail/">mobile version</a>. Search is much faster compared to search through Microsoft Exchange or IMAP in iPhone's mail app. Labels are a great way to organize your mail in a non-hierarchical manner. It supported threaded conversations months before iOS 4 was even on the horizon and in my opinion Gmail's implementation is still more usable because you can fold and unfold messages instead of having to navigate back and forth. Offline support (try it in Airplane Mode), smart address autocompletion and integration with <a href="http://mail.google.com/mail/help/tasks/">Google Tasks</a> provide the icing on the cake. Well executed.</p>
<p>Of course many other Google Apps also come with good mobile support such as Reader, Buzz, Translate and Calendar just to name a few.</p>
<p><img alt="Gmail Mobile" src="/media/2010-06-24/gmail.png" title="Gmail Mobile" /></p>
<h2 id="bglyphboard-harmony"><a class="toclink" href="#bglyphboard-harmony">Glyphboard &amp; Harmony</a></h2>
<p>A rather simple but useful app is <a href="http://mrgan.com/gb/">Glyphboard</a>. It provides a palette of Unicode glyphs like arrows, an umbrella and the famous snowman for easy copy and pasting so you don't have to miss them while typing on the iPhone.</p>
<p><a href="http://mrdoob.com/projects/harmony/">Harmony</a> is an html5 drawing tool that supports several interesting brushes like "web", "fur", "ribbon" and a fancy colour wheel. It uses the <a href="http://en.wikipedia.org/wiki/Canvas_element">canvas element</a> and supports exporting to image files.</p>
<p><img alt="Glyphboard and Harmony" src="/media/2010-06-24/glyphboard_harmony.png" title="Glyphboard and Harmony" /></p>
<h2 id="bnextstop"><a class="toclink" href="#bnextstop">Nextstop</a></h2>
<p>Nextstop is a crowd sourced travel guide which also comes with a great <a href="http://nextstop.com/m2">mobile web app</a>. It uses the geolocation <abbr title="Application Programming Interface">API</abbr> and caches assets like JavaScript, stylesheets and some images using a manifest file. To avoid network latency they use the key-value store and do aggressive content prefetching. Back in december Robert Scoble <a href="http://www.youtube.com/watch?v=Jks-idxVrCs">interviewed</a> them about why they opted to build an html5 app instead of going native. They blog about their experiences on <a href="http://inside.nextstop.com">inside.nextstop.com</a>.</p>
<p><img alt="Nextstop" src="/media/2010-06-24/nextstop.png" title="Nextstop" /></p>
<h2 id="bpie-guy"><a class="toclink" href="#bpie-guy">Pie Guy</a></h2>
<p>Neven Mrgan from <a href="http://panic.com">Panic Inc</a> created a Pac-Man inspired game called <a href="http://mrgan.tumblr.com/post/257187093/pie-guy">Pie Guy</a>. Pie Guy supports highscores, swipe gestures and works offline. Neven also collects interesting html5 examples on <a href="http://html5watch.tumblr.com/">HTML5 Watch</a> which you might want to subscribe to.</p>
<p><img alt="Pie Guy" src="/media/2010-06-24/pieguy.png" title="Pie Guy" /></p>
<h2 id="beverytimezone"><a class="toclink" href="#beverytimezone">Everytimezone</a></h2>
<p>Ever cursed because timezone calculations made your head explode and websites that claimed to help you made it even worse? It appears like <a href="http://slash7.com/">Amy Hoy</a> was not only in a similar situation but she even built something to make our lives easier. <a href="http://everytimezone.com">Everytimezone</a> is a slick html5 iPad app that makes it dead-simple to figure out when the upcoming Steve Jobs keynote will start or when to call your friends overseas. It comes with offline support and since it is web based it also works with your desktop browser. Wouldn't it be great if we could say that about more applications?</p>
<p><img alt="Everytimezone" src="/media/2010-06-24/everytimezone.png" title="Everytimezone" /></p>
<h2 id="btrade-offs"><a class="toclink" href="#btrade-offs">Trade-Offs</a></h2>
<p>Of course right now it is not possible to write every native app as an html5 app, but a very high percentage already is. With more performant devices, faster JavaScript engines and hardware accelerated graphics it is just a matter of time until virtually all of them could be created as cross platform html5 applications. Tight integration with the app stores is definitely an advantage of native apps but there are frameworks like <a href="http://www.phonegap.com/">PhoneGap</a> which help in building hybrid apps. This way you can have the best of both worlds.</p>
<h2 id="bframeworks"><a class="toclink" href="#bframeworks">Frameworks</a></h2>
<p>Unfortunately there aren't that many html5 mobile frameworks yet but the creator of jQTouch recently announced Sencha Touch which looks quite promising and wrote a <a href="http://9-bits.com/post/723711597/jqtouch-and-sencha-touch">blog post</a> in which he compares these two.</p>
<h2 id="bmore-to-come"><a class="toclink" href="#bmore-to-come">More to come</a></h2>
<p>I hope these apps are just the beginning and we will see more and even better ones in the near future. I think we can learn quite something by studying them and I plan to write about some of their design decisions in more detail. If you don't want to miss that you can subscribe to our <a href="http://feeds.feedburner.com/deckcc">newsfeed</a>. Last but not least, thanks to the following people who submitted app recommendations for this article:</p>
<ul>
<li><a href="http://twitter.com/cypher">Markus Prinz</a> (glyphboard and harmony)</li>
<li><a href="http://www.facebook.com/jheborto">Zweite Hälfte</a> (harmony)</li>
<li><a href="http://twitter.com/0xx0">Siegmund Führinger</a> (google apps)</li>
<li><a href="http://twitter.com/thedeftone">Jan Monschke</a> (sencha)</li>
</ul></content>
  </entry>
  
</feed>