a new approach to web development: request for tools and components recommendations

views:

278

answers:

+8 Q:

a new approach to web development: request for tools and components recommendations

I'm searching for the best possibility to write web applications that are heavy with JavaScript . So I'd like to present you my ideas and ask for your opinions and alternatives on this, please :)

1 year ago I started looking for possibilities for web development besides PHP. I found JSP and Django. I decided to go with Django. After starting up some projects with Django it lead me to conclude that Django, for me, doesn't provide a possibility for easy web development. I have to worry about too many features and especially the need to keep client and server code in balance.

So I started searching again and found CouchDB which provides a kind of cool back-end for Ajax applications. So my idea was to use CouchDB as database server, which only provides data-validation & storage and kept everything else to the client. Which apparently is not a new idea at all, but I haven't found any good example on this yet. Do you know any?

I'd like to have an architecture with the following components:

data-storage & validation ( CouchDB )
web server: which handles files and WebSockets or Polling ( Tornado or Eventlet )
client-side JavaScript to handle everything else ( fav: self written MooTools )
client-side templating language ( you know any cool? )

Do you have any suggestions for different software to use for those points?

Which handles requests like the following:

The initial request sends JavaScript files and basic HTML (only <body> and <head> tags) to the Client. The loaded JavaScript functions create the HTML code and insert it into the <body> tag. From now on, the entire navigation on the website only requests JSON which is provided through the Websocket and processed by the client-side JavaScript.

Pros:

The entire code is written in JavaScript on the client-side
Animation on updates can be implemented really easy
The logic of the page would be very lightweight and transparent
Probably no scaling problems on the server-side
Very fast application performance due to excellent client-side caching possibilties. For example using Webstorage

Cons:

Template Processing might be very slow on low Hardware machines?!
Application code is public to all

Questions

Do you know any available solution for this kind of web development?
Do you think writing web applications this way would be crank?

Please also look at Answer 2

+5 A:

Do you know any available solution for this kind of web development?

Take a look at at couchapps. It's written by the guys behind couchedb. It based on jquery but it would be not that hard to convert it it to work with mootools. There is also a nice JavaScript template engine called mustache. The template engine will work on both sides, browser and couchdb.

Do youthink writing web applications this way would be crank?

No. This is the way like most of googles apps (mail, docs, spreadsheet) work, there are also a bunch of frameworks work this way like sproutcore or cappuccino.

web server: which handles files and WebSockets or Polling ( Tornado or Eventlet )

I think couchdb will handle this as well

eskimoblood 2010-07-19 08:32:34

Thx for mustache link. I found http://code.google.com/intl/de-DE/closure/templates/ as alternative to mustache. Does CouchDB handle long polling? I'd love to get a Websocket support for lower latencies.

nenTi 2010-07-19 08:45:47

Yes: http://books.couchdb.org/relax/reference/change-notifications

eskimoblood 2010-07-19 09:03:26

Although eskimoblood answered most of the questions there is still one big problem on "my" described approach of developing web applications: The Template language

As above mentioned there are lots of them working on the client side with Javascript. But on my opinion there is one big feature missing for all template languages I've discovered so far: The Update function

I don't mean rerendering the entire template on updating, but I'd love to see a template language which updates just my variables changed.

Usecase example:

Imagine I'm currently reading a blog which contains 25 JSON variables and a big template for rendering those. Suddenly a brave man somewhere on the other side of the planet submits a cool comment. Now there are different possibilities of presenting a "live update" to the current readers:

Worst-Case: The entire page resets. 26 Json variables and the entire template processing has to be redone.
Bad-Case: The entire blog part of the current page refreshs. 15 Json variables and a big part of the template processing has to be redone.
Better-Case: Only the comment part of the current page refreshs. 5 Json variables and a litle templateprocessing has to be redone.
Best Practice: the new comment is inserted on top of the comment list. 1 Json variable and a very litle templateprocessing has to be redone.

Now you might think, that's no problem with a litle bit of Java scripting. But I want a template language which does that automatically. A template language which knows its current status and updates only the header when the header is changed. Or fades from the old to the new teaserimage.

That way we could save a lot of custom update scripting. Wouldn't have to worry about animations when changing the structure of the page and we could optimize network traffic due to serving only the updates and not the allready known part of the current document data.

Questions:

What do you think about such a template language approach?
Do you know any template language that provides similar processing?
Is it possible to get this to work without a lot of performance drawbacks?

nenTi 2010-07-19 12:02:09

Data-binding is what you're looking for. A JavaScript framework called SproutCore provides that.

Anurag 2010-07-19 16:34:24

Databinding isn't that difficult, especially with mootools. Just create a class with set and get methods, that holds your model as json. The class implements Options and fire an event when ever the set method was called.

eskimoblood 2010-07-20 08:31:15

Could you post some example code? Don't really get your set and get methods. Are they dynamically created out of passed JSON?

nenTi 2010-07-20 21:54:25

@eskimoblood - the difficult part in data-binding is not the firing of events, but tying up of various types of UI widgets with the data. Whenever the data value changes or a UI control value changes, the other gets updated - that's the more difficult part.

Anurag 2010-07-23 05:49:28

@Anurag I don't think that it is that difficult. Think about a global eventbus where all your presenters are listen or fire their events. The presenters controlling their views and models and fire events on the global bus when necessary.

eskimoblood 2010-07-23 07:37:22

@eskimoblood I think we are talking about two different kinds of data binding. Anurag and me are talking about generic data-binding without hardcoding it for every template. And you talk about individual data-binding.

nenTi 2010-07-25 05:43:30

I've been using Trimpath Javascript Templates for the past couple big projects and am pretty pleased with it.

A couple other pieces of my workflow which I couldn't live without now:

a build process for both javasscript and CSS. It's soooooo much better to be able to organize my js and css files however I want, breaking them apart in to as small pieces as I feel like, and have them rolled up in to one big file automatically
LessCSS -- an improvement over normal CSS syntax. You write your style sheets using the LessCSS sytax, which is like css but allows you to use things like variables, math, mixins, nested classes. The LessCSS engine then compiles it into regular CSS.

morgancodes 2010-07-19 16:41:56

What tool do you use for your JS and CSS build process?

nenTi 2010-07-19 19:06:35

I use ant to tie the whole build together. Also in there is a python script I wrote which allows me to use python-style triple-quoted, multi-line strings in my source code. That way, my templates can be part of my single giant, rolled-up js file, and I can write them without have to worry about building a js string line-by-line.

morgancodes 2010-07-20 01:03:57

ansaurus

tags:

views:

answers:

a new approach to web development: request for tools and components recommendations

Usecase example:

Questions:

related questions