Web-Development 2010:Server-side or Client-side?

Lightning Talk @ PyCologne 2010

Köln, 17.April 2010

#python #javascript #pybar

Thomas Koch (@tomy_koch)

(a short) Web Development History

• 199x: Common Gateway Interfaceimport cgi

form = cgi.FieldStorage()

print “content-type: text/html”

print “<H1>Hello %s</H1>“ % form["name"].value

• 200x: Web Tools & Frameworks (in Python)– Libraries (e.g. Templates & Form handling!)

• Cheetah, Kid, Genshi, Bottle, …s. http://wiki.python.de/Template-Engines

– Frameworks: Django, TurboGears, Zope, etc.• s. http://wiki.python.org/moin/WebFrameworks

• 2005+ Ajax Technology (XmlHttpRequest+JavaScript)

– Lots of JavaScript Tools,Libs,Frameworks coming up …• Prototype, Scriptacolous, MooTools etc.• YUI, jQuery, Dojo, ExtJS …

• 2010 ???

Server-Side Coding

Client-Side Coding

???

Server-side or Client-side?

• Wrong question! Must do both (somehow)…

How to efficiently develop Server- and Client-side?

Assumption: We‘re coding in Python on the server ,-)

(using at least some framework …)

Option1: Become JavaScript-Expert (no way!)

Option2: Use JavaScript-Framework (even better)

Option3: seek for holy grail…

Some Attempts …

• GWT: Google Web Toolkit– Army of Java Developers don‘t wanna code JS– Provide Java-based framwork and generate JS

• Python: PyJamas http://pyjs.org/– Pyjamas is a port of Google Web Toolkit to Python

You can write web applications in python

– pyjamas involves the translation of the application and libraries(including UI widgets and DOMclasses) to Javascript.

– version: Pyjamas 0.6 / 08-2009

Dajax: Django+Ajax

• a powerfull tool to easily and super-fastly develop asynchronous presentation logic in web applications using python …… and almost no lines of JS source code.

• supports up to four of the most popular JS frameworks: Prototype, jQuery, Dojo and mootols

Dajax maps client-side JS callto server-side python method!

• Version: 0.8.4 – 03-22010• autor: @jorgebastida• Web: http://dajaxproject.com/

Dajax: Example

Python Code

from dajax.core import Dajax

def multiply(request, a, b):dajax = Dajax()result = int(a) * int(b)dajax.assign('#result','value',str(result))return dajax.json()

JavaScript Code

<script src="/dajaxice/dajaxice.core.js" type="text/javascript" />

function calculate() {Dajaxice.examples.multiply('Dajax.process',{'a':$('a').value,'b':$('b').value})

Dojango = Dojo + Django

• What? – Dojango is a reusable django application that helps

you to use the client-sideframework dojo within your django project

– … makes the development of rich internet applications in combination with dojo more comfortable

• Version: 0.4.6 / 11-2009

• Autor: @tklipstein

• Web: http://code.google.com/p/dojango/

About Dojo

• Dojo = Ajax Development Framework– open-source JavaScript toolkit for frontend development – allows to shorten the timespan between idea and implementation– cut-down development costs, achieve great results

• Features– Supports development of highly interactive web applications– Various basic widgets like Trees, Menus, ListViews, Popups etc.– Business-ready components like Grids and Charts– Lots of add-ons for different purposes like Image Lightbox, animations etc.

• Community– Large user community– Used / Supported by Key Players (SUN, IBM etc.)

• Version: 1.4• Website: http://dojotoolkit.org/

Dojango Features

• Form-Integration : django.forms dojango.forms– maps django.forms.fields to dojo enhanced widgets

(i.e. dojango.forms.fields extends django formfields)

• flexible dojo release configuration– aol, google cdn, dojo release 1.0/1.1/1.2/1.3 …

• Django ModelStore – using dojo.data.* with dojango.data.modelstore

• Dojango Datagrid– Integrate dojo data grid in django

• AppEngine support: – get dojango up on Google AppEngine.

Your Experience?

• Best Practices?

– Server-Side Framework: self-written, django, gears … ?

– Client-Side Framework:

Simple prototype.js or Dojo, ExtJS,… ?

• Combination offrontend & backend

what is the perfect couple?(especially for web-devel in python)