SubscribeFollow on twitterLike on facebook
 

 

What is fluid?

An all-JavaScript application framework that allows crafting 100% client-side, platform and browser independent, HTML 5 based applications, which can run from USB drive, from server (online/offline), on mobile devices (as apps or on browser) and as Windows 8 apps.
fluid is written in plain JavaScript leveraging several HTML 5 capabilities. Unlike other JavaScript libraries which are mostly plug & play in context of a web page, the philosophy of fluid is entirely different. It is an application development framework that provides environment and infrastructure for writing 100% client-side JavaScript based applications. In sharp contrast to other frameworks where JavaScript, style sheets, etc. are linked in a web page markup, fluid does it the other way round. Here markup, style sheets, scripts, etc. are linked to a JavaScript page component.

Having built over HTML 5 and JavaScript, a fluid application has inherent support for cross-platform (Mac OS, Windows, Linux, Android, iOS, etc.) and cross-browser (IE, Firefox, Chrome, Safari, etc.) execution.

With intelligently written core of the framework, multiple deployment options are transparently possible without any conditional codebase for this. In addition to regular server based deployment, fluid offers a very lucrative portable deployment approach, which allows carrying application and database files on a portable media (e.g., USB drive). Such applications can be executed anywhere a web browser exists – Desktop PC, MacBook, Tablet, PDA, and alike. No installation is required whatsoever. Matching to the apps-everywhere trend, possibilities to deploy as iOS, Android, and Windows 8 app also exists.

NOTE: fluid and fluidjs are synonymous for all the discussions in context of this framework.

Features

  • Free, Open-source (MIT License)
  • Pure JavaScript, HTML and CSS
  • Highly customizable (even core inbuilt plugins can be replaced with custom versions)
  • Support all mainstream browsers (Internet Explorer, Firefox, Chrome, Safari, etc.)
  • Optional dependencies (e.g., Any version of jQuery can be used)
  • Fully documented

Framework Capabilities (and Vision)

  • Application development framework
  • Multi-deployment options, online, offline, chrome app, portable and wrapped-in-native-host apps (such as iPhone/iPad/iPod, Android or Windows 8), from same codebase
  • Provides boilerplate code, structure and templates for rapid application development
  • Single webpage yet multi-layered pure JavaScript applications
  • 100% plugin based model, even core framework is built using plugins
  • Even plugins are extensible using multi-targetable (can attach to multiple plugins) features
  • Master pages, to keep common UI and codebase at one place
  • Widgets, to replicate similar functionality across pages
  • Static data binding with html nuggets (<%?: … %>)
  • Declarative data binding and templating (knockout being default engine)
  • MVx (MVC/MVVM/MVP) support (depending on how you utilize Page, Layout and Module concepts)
  • No-code required declarative data validation
  • Modules, to keep business logic, data access and integration with external services separate
  • JavaScript based Page model
  • Adaptive layout support for Desktop, Tablets and Phones
  • Built-in Phone and Tablet UI emulator
  • Seamless navigation between pages using either a JavaScript call or a simple href link in HTML
  • Browser back/forward is completely integrated in navigation engine
  • Smart application protocol (fluid://) for simple navigation and much more (e.g., JavaScript command execution)
  • Supports clean AOP (Aspects oriented programming)
  • Built-in cross-cutting support (e.g., Exception handling, Logging, Tracing, Configuration, etc.)
  • Authentication, Authorization and Licensing capabilities
  • In-browser, scheduled jobs support (client-side)
  • Workflow engine to perform complex async operations in expected sync manner
  • Encryption using industry standard AES algorithm (CryptoJS being default engine)
  • Multiple transient data stores (Session, Cache, State, etc.)
  • Events publishing and subscription
  • Local (client-side) database (TaffyDb being default engine)
  • Internationalization support
  • Transparent server connectivity with AJAX based Service engine
  • Built-in Dev Console to facilitate rapid development
  • Full support for automated testing using inbuilt Test engine and scripts
  • Continuous integration using provided intelligent build scripts
  • Transparent JavaScript and CSS minification (AjaxMinifier being default engine)
  • Support for debug and release builds

Releases

  • Releases are numbered using <major>.<minor>.<build> format for transparency and insight into release cycle.
    • A breaking change or a real major capability bumps the major and resets minor and build numbers.
    • New additions without breaking change bumps the minor and resets build numbers.
    • Bug fixes and miscellaneous changes bumps the build number.
  • To download latest and historical pre-packed builds, explore releases.
  • Not all the above mentioned features/capabilities might exists in latest build. Check out consolidated Release Notes to know what all is available so far and in which release.
  • Release Roadmap shows a consolidated plan ahead for upcoming releases.

Hmm! Show me some code

Here is a quick peek on what a sample fluid plugin looks like. This does not tell you much though, yet give an idea that this is all plain JavaScript - nothing more nothing less.

(function($f) {	$f.extend.custom("MyPlugin", function(self) {

    "use strict";
	
    // basic plugin info
    this.info = {
	title: "My Plugin",
	version: "0.0.1", // major.minor.build
	author: "Your Name",
	copyright: "Your Copyright"
    };

    // load handler
    // returns: (void)
    this.onLoad = function() { 
    };

    // plugin entries in session
    this.session = { 
	mySessionVariable1: 10,
	mySessionVariable2: "Value1"
    };

    // external files which are to be loaded during initialization in specified order
    this.include = [
	{name: "MyJS1", file: "%APP%/files/js/myjs1.js", cond: function() { return true; } },
	{name: "MyJS2", file: "%APP%/files/js/myjs2.js"}
    ];
	
    // custom function 1
    this.myFunction1 = function() {
	// do something
        var abc = self.session.mySessionVariable1.get();
    };
	
    // ... anything else
}); }(fluid));

Note: $f is the root object for the fluid framework. Everything holds on to $f at run time.

News

Keep track of development.
  • Follow @fluidjs on twitter, for some quick updates.
  • Subscribe to project feed to keep track of what's happening here.
  • Check out #news for announcements.
  • To know about the upcoming features and plans explore Release Roadmap.

Support

Looking for more?

About Developer

fluid is developed and maintained by Vikas Burman.

Extending fluid

Contribute to fluid community.
  • Beyond what fluid offers, as a developer you can write your own plugins and can even write core plugin replacements, if required.
  • Other developers can then use these plugins in their work depending on your licensing terms.
  • In order to help community to find all plugins at one place, you are requested to inform Vikas about your plugins at fluidjs@vikasburman.com and he will publish its availability and other details at #plugins.
  • As the project progresses, more information and guidelines about extending possibilities would be shared.

"crafted on fluid"

Did you build something using fluid?

Last edited Apr 15, 2013 at 5:18 PM by vikasburman, version 91