I have a new job and now I am working at   chip.de  where I am responsible for the development of a subproject for the website.
We are a team of 5 developers and have a backoffice/sales team that outnumbers us by the factor 2. So far so good. From the technical point of view it's a interesting thing here:

• the it website with the most pi's in germany
  
• a large webfarm where our application runs in
  
• a IT department that is 50% of teh company ;)
  
• a lot of php coding people

One of my first jobs is a prototype project that should help us deciding how and if we should develop a special sub site for the whole company. So far, this time it is up to me to decide the toolbox we are using. So far, there is a lot to choose, its a high load website application that must be able to deliver a lot of pi's a day.

• PHP5
  
• Mysql 4.x with PDO
• Smarty: because were already using it
• Zend Framework, because i do not like having glued together components like PEAR
  
• Simpletest, because i still likeit more than PHP-Unit (All Objects were doing for our selfes need to be unit-tested)
  
• Moo.fx (Javascritp Framework) for Ajax/Client Interactivity

Since it will be a effort to establish PHP5, UnitTesting, modern AJAX Principles, its surely interesting for all the readers  of that blog. Illkeep you people Updated.

SCHWING .........

As i developed javascript and Ajax Applications in the last year i have use several really good tools that helped me with a fast and clean development of code. Some of them ill name here and now.

Firefox Browser
The Firefox Browser is the best browser for developers and is needed for most of the tools and plugins described here. Its standard compilant, so if youre developing for xbrowser compatible Apps, you better start with firefox comapt and the move towards InternetExplorer
get Firefox here

Fire Bug
Shipped as a Plugin for Firefox, firebug helps you look into your application, some features:

• Status bar icon shows you when there is an error in a web page
• A console that shows errors from JavaScript and CSS
• Log messages from JavaScript in your web page to the console (bye bye "alert debugging")
• An JavaScript command line (no more "javascript:" in the URL bar)
• Spy on XMLHttpRequest traffic
• Inspect HTML source, computed style, events, layout and the DOM

A Must have if you code javascript and like to know what you Application is doing NOW ;)
get Firebug Here

Web Developer Toolbar
Shares some Features with firebug, but most of them are unique. This toolbar has the following Features

• cookies, ( view, edit, delete)
  
• css (disable, inplace edit, borders around boxes)
  
• forms (copletition, show form vars, convert to get / post)
• images (disable, infos etc)
  
• informations on all elements on the page
  
• outline elements
• zoom in and out
  
  

I guess i saved miriads of time since i use that one
get the Tolbar here

Selenium IDE Webtester
Tired of doing all the same click and test workflow all the day ? Wanna concentrate on coding ? Usethe Seleium IDE to record ypour clicks on the Application and replay whenever you need them ...

Links
OpenQA
Selenium IDE
Driven selenium reference
Story about Selenium

JSeclipse by Interakt
No need to say more than the homepage stats, its simply the best js editor i have stumeled upon:

JSEclipse is the the best and most popular Javascript plugin for the Eclipse environment. Its benefits are visible from the simplest tasks like editing small sections of code for your site to the more complex ones like working with the next big AJAX library or developing plugins for a product that embeds JavaScript like Dreamweaver or Photoshop.

get JSEclipse


So have fun and get to the sun instead of using the wrong tools and waste time ;)

I have already lost all faith and hope. But what do i see from the xtech website: I am in. I still can believe it, my talk was accepted and i really look forward to grab a lot of new infos on ajax/web 2.0 and especially the semantic web.

Developing Enterprise Applications with Ajax and XUL
Sebastian Schürmann
14:45 - Duration: 45m
This talk describes the daily experience of developing an Ajax Framework and Applications for Sixt Car Rental in XUL and Javascript. It will give you an insight in the practical lessons we learned in the last 2 Years.

http://www.xtech-conference.org/2006/ajax.asp


yehaaa ;)

I have replaced the first evals in jsObjects

that code
    eval(gridName + ".element = gridTable");    //element
    eval(gridName + ".createColumn = GridPubCreateColumn");    //method
    eval(gridName + ".createCell = GridPubCreateCell");    //method
    eval(gridName + ".createRow = GridPubCreateRow"); //method
    eval(gridName + ".editRow = GridPubEditRow"); //method
    eval(gridName + ".removeRow = GridPubRemoveRow"); //method
    eval(gridName + ".moveRow = GridPubMoveRow"); //method
    eval(gridName + ".newButton = GridPubNewButton"); //method
    eval(gridName + ".getGridData = GridPvtGetGridData"); //method
    eval(gridName + ".cellClick = doNothing");    //event
    eval(gridName + ".editDone = doNothing");    //event
    eval(gridName + ".deleteDone = doNothing"); //event
    eval(gridName + ".GridParent = gridParent");    //property
    eval(gridName + ".GridRowCount = 0");    //private property
    eval(gridName + ".CurrentCell = ''");    //private property
    eval(gridName + ".currentRow = ''");    //public property
    eval(gridName + ".rootDir = rootDir");    //private property
    eval(gridName + ".id = gridName");    //private property
    eval(gridName + ".textChecker = null"); //public property
    eval(gridName + ".readOnly = false");    //private property
    eval("tbObject = " + gridName);    //assignment

became


    var tbObject = {
        element:         gridTable,
        createColumn:    GridPubCreateColumn,
        createCell:        GridPubCreateCell,
        createRow:        GridPubCreateRow,
        removeRow:         GridPubRemoveRow,
        moveRow:         GridPubMoveRow,
        newButton:         GridPubNewButton,
        getGridData:    GridPvtGetGridData,
        cellClick:         doNothing,
        editDone:         doNothing,
        deleteDone:     doNothing,
        GridParent:        gridParent,
        GridRowCount:    0,
        CurrentCell:    '',
        currentRell:    '',
        rootDir:        rootDir,
        id:                gridName,
        textChecker:    null,
        readOnly:        false
    };

;))))

I guess i will have to replace a lot of the code, just for optimization issues ;)

Different kinds of serialization of data are possible.

AHAH

Return prerdendered HTML from server:

• less effort in client +
  
• data not really reusable in client -
• data to serialization overhead great -
• no parsing needed +

Json

return a javascript object noted as javascript and eval it.

• using eval in client -
• data to serialization overhead small +
• data optimal reusable ++
• no parsing needed +

Xml

Generate a XML Format and use a clientside logic to use the data via dom operations.

• dom parsing of data slow -
  
• data to serialization overhead great -
• data good reusable +
• xml parsing needed -

WDDX

Wddx has its origins in Xold Fusion and is a XML Format to serialize and deserialize Data and Objects. PHP has wddx support.

• wddx in js slow & not usable for large datasets --
  
• data to serialization overhead great -
• data good reusable +
• xml parsing needed -
• ease of use +

Soap

Even webservices can be used. Objects are invoked from webservices.

• data to serialization overhead great -
• data optimal reusable ++
• xml parsing needed -

No Serialization

Data comes unserialized from server as text and is passed into a string.

• fast data -> js ++
• no serilalization +
• data reusable +
• no xml parsing needed +
• only one result and value can be used --

What is happening ona Ajax request and how we have to react on that what happens:

Pre Request
Previous to the request we need to instanciate the ajax framework and load all classes.

Firing the request
We need to tell the gui NOT to handle additional clicks for specific parts of the gui, since it could be possible taht a dom id is missing that is needed by the later dom wirte stuff that happens when you server has performed the action and returned a result. Since you can not be sure that the gui is in the same state and you can not make a

var result = myajaxfunc();

just because of the asyncronous nature of the whole thing. There is need for the information what part of teh gui should be blocked, aka event-cancelled

Working with the results data
OK its starting to get a bit tricky, now were in the real events of that ajax request. Since we are doing Async (the A in Ajax) data retrieval, its not possible to do (cant stress this enough)

var result = myajaxfunc();

So you have to use the abillity of javascript to tell it which function name it should use, or which anonymous function i pass. So (simple) the above example gets

var func_result = function (return) {
// domesomething withmyresult
}

myajaxfunc(func_result);

Oops a error occured
Various errors can happen:

- postnuke function does return errormsg
- request status is not 200
- malformed data
- unknown postnuke function called

The first 3 need to be handeled, for the fourth pnAjax will have a re-written pnmodapifunc method, that will NOT return a error page when you call a unknown function (are we java or what ?, who did this .. i dont get it till today, i guess ill need to get my german sheppards on this guy ... wot kind of system design is tis ?) .... anyway .. in a stack of 10 funcs all these errors can occur and need to be handeled ....

Finalizing the thing
If you called 10 Postnuke functions you might need som post processing, that takes polace in the on finalize handler ;) You can gather the results here (like for example getting the products of categorie dogs and birds), match the together and stick them into the pn datagrid ;)

With a little help from e-voc i made the json serializer work.
No well go soon to be async and the all will be much better.

Besides i started work hard on the integration of jsobjects. I guess ill have to rewrite some of the code to make it work w.o. evil eval.
The grid example is still simple, dropping notices etc .. but the api is growing. I dont have this much time, bus as ill make pnAjax a important component on the pncommerce project, reusing the grid and the tree for basic gui layout, it will get a lot of commits anyway.

The big Ajax discussion has come in place to postnuke. Again it looks like writing down things, instead of write code in the first blink of an idea is considered to be a bad thing there. Markwest requested a unified ajax Project for the postnukeworld, but i guess that will not take place .. why ?

The Approaches are too different

Chestnuts Ajax example is
- not using serialization
- relies on handcoded servers
- has no framework components
- has no event model catching errors from the serverside

Frank Schummertz pnForum Stuff:
- is using AHAH data (returning HTML instead of XML or serialized data
- relies on handcoded servers
- has no framework components
- has no event model catching errors from the serverside

pnAjax
- uses json data serialization
- has a tested gui kit / framework
- relies on no handcoded server to use ajax funcs on the client
- has a event model catching errors from the serverside

Anyway, i am really opposing doing 3 times the same work, but as i see from the mailing list postings, there is a request for a lot of functionality that is already in pnAJax. So i guess it was worth the time to sit down and thing of a framework that can totally integrate with postnuke instead of building stuff on top, that might be sexy, but is ugly code.

You migth call me a thread , but if there is no movement twoards a performant approach for the data stuff and nothing more that, hey, integrate scriptacolous into postnuke, Ill not be the one to jump in and make the lead on such a project .. ill guess it takes a year to explain to others what they need to develop .... pnAjax is rather complex on the code side of the project development ... but easy to use for the final developer, implementing his own apps with just a buch of loc.