Open Source Resources for Web Application Developers

It has long been common practise to use recurring solutions to solve common problems. Such solutions are also called design patterns. Collections of software design patterns are standard reference points for the experienced user interface designer. This website seeks to better the situation for the UI designer, who struggles with the same problems as many other UI designers have struggled with before him.

UI-Patterns.com are not the first to create a UI design library. While other pattern collections are useful, they are far from coherent and complete. The purpose of this site is over time to fill some of the gaps – especially by providing code examples as to how how the different patterns can be implemented: to join theory with practice.

Requirements: No Requirements
Demo: http://ui-patterns.com
License: License Free

• 5 Comments

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Developed and used over two years by a fast-moving online-news operation, Django was designed to handle two challenges: the intensive deadlines of a newsroom and the stringent requirements of the experienced Web developers who wrote it. It lets you build high-performing, elegant Web applications quickly. Django focuses on automating as much as possible and adhering to the DRY principle. It has the following main features.

Object-relational mapper
Define your data models entirely in Python. You get a rich, dynamic database-access API for free — but you can still write SQL if needed.

Automatic admin interface
Save yourself the tedious work of creating interfaces for people to add and update content. Django does that automatically, and it’s production-ready.

Elegant URL design
Design pretty, cruft-free URLs with no framework-specific limitations. Be as flexible as you like.

Template system
Use Django’s powerful, extensible and designer-friendly template language to separate design, content and Python code.

Cache system
Hook into memcached or other cache frameworks for super performance — caching is as granular as you need.

Internationalization
Django has full support for multi-language applications, letting you specify translation strings and providing hooks for language-specific functionality.

Requirements: No Requirements
Demo: http://www.djangoproject.com/
License: BSD License

• 3 Comments

Mocha is a MooTools user interface class made with canvas tag graphics. It is really impressive that it requires no images. The windows, including their controls, gradients and shadows, are drawn with the canvas tag. The rounded corner radius are adjustable. Windows can be focused, dragged, resized, maximized, restored down and closed. You are able to create new windows dynamically as well. And also, it is being tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9, so you are safe to use it on your web application.

The author is planning to add the following additional features as well. I really can’t wait to see these features being implemented.

• Create custom canvas scrollbars.
• Add a modal window.
• Create more class options.
• Add minimize to windows.
• Add a sortable dock.
• Make shadows easier to adjust.

Requirements: Mootools Framework
Demo: http://greghoustondesign.com/demos/mocha/
License: MIT License

• 8 Comments

JSLoader is a dead-simple, non-intrusive “Javascript-on-demand” packaging convention which helps developers and the internet community rapidly develop and prototype applications without the headache of figuring out the witches’ brew of files that need to be copied, included, etc. You do not need to download anything to use all the Javascript frameworks. it is because multiple sites will share this code the browser and proxy caches will help make things more efficient.

All Javascript Libraries are already installed on their server, so all you need to do is create a <script></script> tag with inside <noautolink> of your page and you should be able to load any of the available modules. Once you’ve loaded them, close the script tag out, and use a separate script block for using the API.

JSLoader supports many Javascript Framewroks. The following the an example of how to load a particular Javascript Library on your website / web application.

// Ext.js
JSLoader.load(”ria”,”ext”,”1.1.1″);
JSLoader.load(”ria”,”ext”,”2.0-beta1″);

// JQuery (no plugins yet…)
JSLoader.load(”ria”,”jquery”,”1.2.1″);

// Lightbox (for prototype/scriptaculous)
JSLoader.load(”ria”,”lightbox”,”2.03″);

// Prototype.js
JSLoader.load(”ria”,”prototype”,”1.5.1″);
JSLoader.load(”ria”,”prototype”,”1.6.0-rc0″);// Scriptaculous
JSLoader.load(”ria”,”scriptaculous”,”1.7.1-beta3″);
JSLoader.load(”ria”,”scriptaculous”,”1.8.0-pre1″);

Requirements: No Requirements
Demo: http://www.jsloader.com/
License: LGPL License

• 6 Comments

When developing PHP applications a great deal of time and effort is wasted writing tedious SQL queries to create, read, update, and delete (CRUD) entities. This situation is exacerbated when working with objects because relational database management systems, with which most persistent storage is maintained, can only store scalar values organized into tables. The developer is responsible for translating objects into a series of scalar values. This translation process is often very time consuming.

Junction maps an object’s state to a database, letting application developers concentrate on application level details. It is the glue between your application and its database, and it is easy to use and extensible.

Requirements: PHP 5+
Demo: http://junctionphp.com/
License: MIT License

• 1 Comment

Microsoft® Silverlight™ is a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web.

Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. Silverlight supports fast, cost-effective delivery of high-quality video to all major browsers running on the Mac OS or Windows.

You can see the power of Silverlight from the Showcase.

Requirements: Microsoft Silverlight Runtimes 1.0
Demo: http://silverlight.net/Showcase/
License: License Information

• 3 Comments

We have got an official User Interface Library of jQuery eventually… It is called jQuery UI, is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.The core of the library revolves around different mouse interactions, namely drag and dropping, sorting, selecting, and resizing.

On top of the core interactions are built a number of reusable widgets, including accordions, date pickers, dialogs, sliders, table sorters, and tabs. Finally, the library is finished off with a few effects that you can use to liven up your site, specifically magnifier and shadow. The photo gallery and the speed testing application is particular impressive which shows you the power of the UI.

Requirements: jQuery Javascript Framework
Demo: http://ui.jquery.com/
License: MIT License / GPL License

• 5 Comments

RichFaces is a rich component library for JavaServer Faces built on an advanced open source framework (Ajax4jsf). It allows easy integration of AJAX capabilities into enterprise-level business application development. RichFaces enriches the Ajax4jsf framework in two important ways. First, it expands the number of visual ready-to-use components. Secondly, it fully implements the skinability feature of the Ajax4jsf framework including a large number of predefined skins. Using skinability, it is much easier to manage the look-and-feel of an application.

This demo Web application showcases the most important functionality available in RichFaces components. For each component or component set selected in the left-hand sidebar, you can see it in action. Also, you can instantly see the effect of predefined skins on the application whole look-and-feel. I really like the “Drag Indicator” one.

Requirements: No Requirements
Demo: http://livedemo.exadel.com/richfaces-demo/
License: LGPL License

• 2 Comments

Jitsu contains an integrated set of tools to enable developers to build and deploy sophisticated user interfaces for web applications. These include an Xml markup language, page compiler, data binding engine, JavaScript runtime, control library, runtime inspector, animation engine, cross-platform library, Ajax, and back button support. Jitsu applications use DHTML and run in most modern web browsers.

As a startup with a consumer focus, their budget for software is minimal. They like free and open-source technologies like Apache, Linux, MySql. They couldn’t find any open source Ajax frameworks that supported compiled Xml and data binding. So they built their own, and released Jitsu under an open source license.

Jitsu is still in its infancy and the code provided is intended for evaluation and feedback only. They don’t feel that Jitsu today is suitable for use in a large-scale project. In the near future, they will release a Beta version of Jitsu that will be much more suitable as a building base.

Requirements: Any Modern Browsers
Demo: http://www.jitsu.org/jitsu/quicktours/index.html
License: MIT License

• 0 Comments

Akelos is a PHP4 and PHP5 port of Ruby on Rails PHP framework for developing database-backed web applications according to the Model-View-Controller pattern. From the Ajax in the view, to the request and response in the controller, to the domain model wrapping the database the Akelos PHP Framework gives you a pure-PHP development environment built upon programming best practices. To go live, all you need to add is a database and a web server. Akelos PHP Framework is designed for PHP developers who want to enjoy writing web applications and Ruby on Rails developers who need to code in PHP. It allows developers to write multilingual web applications easily as well. It lets you write beautiful PHP Code by favoring convention over configuration.

Requirements: Web Server and Database
Demo: http://www.akelos.org/screencasts
License: LGPL License

• 1 Comment