Web Development
From Ggl's wiki
Contents |
Introduction
The web brings easy access to information to more and more people. It is with some efforts cross-platform - speaking of operating system and device -, accessible, and inter-connected. Even if it had not the consideration it merits, accessibility should be one of the foundation of the web, and by extension the Internet. It helps to provide information to everyone without discrimination. The main focus of accessibility is to help people who suffer from a disability to access information. Accessibility can also help other people who can't own recent hardware. In some countries, most people own a device than runs flash or heavy graphical sites, but they are not everybody. Cross-platform means information is readable by different kind of devices. At first sight, device seems to be a computer but now it can also be a media player or a mobile phone. This kind of device brings some issues because the display and the interaction are different.
This page describes some works done with Djando + Orbited + Jquery.
Web Application Architecture
Components for performance and scalability
One of the biggest problem in a web application architecture is its scalability. One way to solve this issue is to provide loosely coupled components. That's why web architecture are commonly splitted in front-end and back-end servers.
A list of common web architecture components can be like the following:
- Caching server: it caches static files like images, css files, javascript or static html. Examples: Varnish.
- front-end server: it balances requests between several back-end servers. It also might apply some rules to modify or sanitize the requests. Exemples: Nginx, Apache, Lighttpd, Cherokee, Caudium, Yaws.
- back-end server: it actually does something (like processing or generating data). Examples: see front-end server.
- dbms server: database management system that handles db requests. Examples: MySQL, PostgreSQL, SQLite, Mnesia.
- storage: it is commonly transparent for web application people, but scalability and performance is critical here when the dbms needs to write or retrieve data.
As I currently focus my attention on web application development with Django, I'm trying the stack: varnish + apache + mod_python + stackless python + django + mysql.
Web Application development with Django framework
You can find documentation online an in the book The Definitive Guide to Django: Web Development Done Right, also available as free online. The book is well written and I like to read a first time from cover to cover to get an overview of how to use it. It helps to begin with the best practices and don't do things from scratch that are already available in framework.
Django authors did a great job to apply the DRY (Don't Repeat Yourself) and Loose Coupling and Tight Cohesion principles. I have printed the Zen of Python (>>> import this) to keep it next to me when I code. Design Philosophy is a very good resource to read before beginning to use Django.
Some projects
I want to write to projects:
- Something like a blog with more features. Django basic apps is a good start to save some time and to focus on novel things. Some apps in DjangoResources will also be useful. I currently use Dotclear for my personal blog. It is a great project, well written, but even with all the features it provides, I'm not really happy with it. That's why I decided to write something with Django.
- A funny web application for users. I'll use Django-registration and Django-openid-auth to manage user registration and Django-openid to provide OpenID identity management. The remaining parts will be custom developments.
- A news aggregator (atom and rss feeds, mailing lists, etc...) that does what I want!
The code will mostly be available at projects.stacksegment.net . I use Trac at the moment, but I may migrate to redmine as it has more features and actually does multi-project. As I use hg (mercurial SCM) it seems to be integrated better in redmine. Redmine is an agile project management system written with Ruby on Rails.
Blog
Issues
I began to write a blog application based on django-blog from basic apps. It uses django-tagging and django-comment (FreeComment for the anonymous comments). There is a real gap between providing a blog application only for me and trying to provide something more generic. As I need to have something doable I started by focusing on my needs, but I always think how to make things generic.
One way to make it generic is to find how to edit templates from the admin interface. One might want to edit what is displayed and how. For the how, that's quite the same issue, you need also to edit css files from the web admin interface.
Another issue is blog import. My current blog currently stores posts in dotclear wiki syntax. I have the following choices:
- Translate dotclear wiki syntax to xhtml with a php script (using classes from dotclear) or with a python script
- Translate dotclear wiki syntax to an intermediate markup language (I thought about YAML).
- Keep dotclear wiki syntax and write templatetags for dotclear wiki syntax
The easer and faster solution is more likely to be he first. But beyond this issue the question is how will I store posts' content?
For now, the blog application is basically working. I can add articles with categories and tags. I have customized the template and the css (I use blueprint framwork for main layout and typography) to have tag in post information and a tags cloud in the sidebar.
TODO / What's missing?
- Comments:
comment preview doesn't workDone with the help of UsingFreeComment.Need to add basic comments stats in post informationDone {% get_free_comment_count for blog.post post.id as comment_count %}<p class="post_comments">{{ comment_count }} comments</p>. I bet I'll get a bunch of spam comments if I don't add moderation or better spam filter. - Feeds: it may be quick to add it since it is provided by django-blog.
- Multi-language support: my blog is in english and in french. I need to manage multiple languages. Default model doesn't support this.
- Trackbacks (optional): I think I can use django-comments for this.
- Import script: Actually it's more a class than a script. I've written a importblog module I designed to be extended to import other blogs. I focus myself on dotclear2 as I need to migrate from this type of blog engine. However the module provides generic classes like BlogData and BlogHeader (DotclearData and DotclearType respectively inherit from them).
- Antispam: using akismet to moderate comments (I've just also discovered Defensio.
- factorize templates: there is too much redundancy in the templates! They need to be refactored to respect DRY principle!
While mapping Dotclear fields on Belog (let's call the blog that), I saw that django-blog basic app provides really basic models ;). I had already seen that while writing templates to add microformats. Then I need to change this :).
As I'm more and more making modification on the code, I need to use a SCM to manage this. There is a lot of applications for this purpose (subversion, git, darcs, hg, bazaar). Subversion might be the default choice when one migrates from CVS. But in my case, I create the repository from scratch then I'm entirely free to choose the one I prefer. I read two comparison: Better SCM Initiative : Comparison and Comparison of revision control software on Wikipedia. I've also consulted some friends. The short list is git and Hg. And the winner is... ta-da!!! Hg!
jQuery
Introduction
//This is mainly notes taken while reading the book Learning jQuery. Its authors maintain a dedicated website learningjquery.com.
jQuery is a JavaScript framework to handle Dom scripting and Ajax (as well as Comet with the ad hoc plugin).
$() is a factory method that returns a jQuery object. Every jQuery object provides the same methods which is the basic principle of factory object. Each method applies implicit iteration e.g. it is applied to every selected objects.
Selectors
jQuery eases the Dom acces and provides three types of selectors:
- CSS
$('#selected-plays > li').addClass('horizontal')
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
- XPath
$('a[@title]')
$('div[ol]')
$(document).ready(function() {
$('a[@href^="mailto:"]').addClass('mailto');
$('a[@href$=".pdf"]').addClass('pdflink');
$('a[@href*="mysite.com"]').addClass('mysite');
});
- jQuery (custom selectors)
$('div.horizontal:eq(1)')
Common methods are .parent(), .siblings(), .next()
Events
It provides event-handling methods like $(document).ready() when the page is loaded but not other medias like images. In contrary to document.OnLoad(), multiple handlers can be registered (behavior queuing). They will be executed in their registration order. Other common event-handling methods are .bind() (and related shorthand like .click()), .toggle(), .hover().
A event-handler that return false is equivalent to using .stopPropagation() and .preventDefault().
It allows to do chaining e.g. each method returns a jQuery object. Example:
$('body').removeClass('narrow').removeClass('large');
.css() edits individual CSS attributes.
- Effects on a single set of elements are:
- simultaneous when applied as multiple properties in a single .animate() method
- queued when applied in a chain of methods
- Effects on multiple sets of elements are:
- simultaneous by default
- queued when applied within the callback of an event handler
Insert something .after or .before ( $('p.article').after(permalink) inserts permalink after each <p class='article'>...</p>). .insertAfter() and .insertBefore() applies to objects that are inserted ( $(permalink).insertAfter('p.article') ). .wrap() is self-explanatory, it wraps something around an object ( $(item).wrap('<li class="item"></li>') ).
Ajax
jQuery eases the use of xmlHTTPRequest() through .get(), .post(). and their shorthand .load() methods. Then we can load:
- Plain HTML .load() method
- JSON with $.getJSON() global function
- JavaScript with $.getScript() global function
- XML with $.get() global function
Data may be passed to the server with $.get(<url>, <query_string_map>, <handler>) for GET requests or $.post(<url>, <post_data_map>, <handler>) for POST requests.
