TouTouJS - Javascript Framework

Web sites and applications are becoming ever more user-friendly and interactive. Javascript and DHTML are the technologies that naturally come to mind as soon as menus, tabs or dynamic drop-down lists are to be developped. But we also believe that more ambitious web applications can be developped with Javascript, with features and look-and-feel that we usually only find on desktop applications.

 

TouTouJS thus aims two distinct user populations : HTML integrators and Javascript programmers. You will find more informations about that below.

 

By the way, TouTouJS is a free and open source software licenced under the terms of the LGPL. Any help, feadback, and contributions are welcome! Feel free to contact us.

 

 

HTML Integrators have a good knowledge of DHTML and CSS styles. They usually don't know much about Javascript although they often copy and paste some pieces of Javascript code. One goal of TouTouJS is to give the HTML integrators a chance of using advanced GUI objects without manipulating complex Javascript.

 

Our philosophy is to enrich HTML with a few custom tag attributes. As much as possible, these attributes contain descriptors in the same manner as CSS styles.

 

E.g., to add a drag-and-drop functionnality to a HTML element, just add the tt_dnd_style attribute. If you want to limit the movements to the Y axis, just add disable-x:true in the tt_dnd_style attribute :

 

 

In order to activate the custom TouTouJS attributes, the only thing neaded is to load the correct TouTouJS module. The followind lines can be placed anywhere in the HTML document (usually in the header) and will activate drag-and-drop functionnality to all the elements containing drag-and-drop descriptors :

 

 

HTML integrators often struggle with cross-browser compatibilty. Naturally, TouTouJS works equally well with all major and recent web browsers. It is also compatible with the usual document types (DocTypes as effects on object positioning) or even without (quirks mode).

 

TouTouJS offers many other features : navigation menus, additional browser events, graphic effects, modal dialog windows, etc. Have a look at the feature list.

 

To learn more about TouTouJS, a good start is to browse through the demos.

 

 

As application developpers, our experience with Javascript has been a nightmare for many years. Debugging is not always simple, browsers behave in different and sometimes surprising ways, code reusability is difficult to obtain without degrading performance, and more generally, it is not straightforward to build a robust and evolutive code architecture.

 

Our first objective was to settle a clear namespace and garantee code reusability. The TouTouJS modules are organised in a hierarchical way and are loaded on demand using the require function :

 

 

As you can see in this example, once a module is loaded, new functions are available through the global toutou object.

 

Our next goal was to offer a complete set of basic functions : HTML element handling (positionning, styles, DOM structure, etc.), string manipulation, enhanced js functions and objects (function closures, hash objects, etc.) and other useful feature for the developpers' everyday use (debug logs, variable dump, etc.).

 

Once these two steps were made, we already had a decent Javascript toolkit. We could at last focus on our main objective wich is to build a real Javascript framework. We believe that the future web sites and applications will contain a lot of client side code. We thus started developping more ambitious features : an event manager to enabled the development of event-driven applications, core classes to ease the development of custom graphic effects and browser events, advanced Ajax functionalities, etc.

 

TouTouJS offers many other features : application event manager, graphic effect interface, implementation of custom browser events, Ajax functionnalities, string manipulation functions, etc. Have a look at the feature list.

 

To learn more about TouTouJS, a good start is to browse through the demos.