JavaScript (TypeScript actually) HTML5 RIA framework for creating data centric applications
JavaScript TypeScript C# HTML PowerShell CSS
Latest commit af0016b Jul 15, 2016 @BBGONE datagrid improvements
added a new option to datagrid
Failed to load latest commit information.
DEMODB initial files commit May 23, 2016
DEMOS datagrid improvements Jul 15, 2016
DOCS initial files commit May 23, 2016
FRAMEWORK datagrid improvements Jul 15, 2016
.gitignore gitignore May 30, 2016
LICENSE initial files commit May 23, 2016 readme update May 25, 2016


JavaScript (TypeScript actually) HTML5 RIA framework for creating data centric applications

jRIApp – is an application framework for developing rich internet applications - RIA’s. It consists of two parts – the client and the server (optional and has a respective optional db module in the client part) parts. The client part was written in typescript language. The server part was written in C# and the demo application was implemented using ASP.NET MVC project.
( In order to use the Demo you need Microsoft SQL Server (Express edition will suffice) installed and Microsoft's Adventure Works (the Lite version) database is attached How to attach AdventureWorksLT. )
The Server part implements a Data Service which resembles the Microsoft's WCF RIA services. The Client part resembles Microsoft Silverlight client development, only it is based on HTML, and uses typescript language for coding. The framework was designed primarily for creating data centric Line of Business (LOB) applications which will work natively in browsers without the need for plugins. (But it can be used for other types of applications too.)

I wrote this framework because everything i searched through was not suitable for LOB applications (even now, i can not choose any new framework - Angular2, React, Breeze and Aurelia included).
They all offer very much what i don't need and very little of what i need to develop desktoplike applications in HTML5.
(P.S. - the framework depends only on JQuery, Moment and QTip. The Moment and the QTip are easily replaceable, but JQuery is more widely used in the framework. ).
The framework's concept is to be as versatile as it can be, and to have enough features to implement any kind of applications.

  • It is written in typescript that can be compiled to ES5, ES6 or possibly to any future EcmaScript standards - just recompile it with new settings.
  • It can work with (data bind) to any existing HTML Element or Web Component directly and subscribe to its events, declaratively.
  • It has built-in ability to work with data stores on the server (no need for a separate third party framework and its adaptation).
  • It has very good components like Data Grid and others (and be used declaratively). It's easy to add custom ones.
  • It can load modules, CSS and HTML templates on demand (a template can load CSS and JavaScript modules)
  • It has the ability to wrap any existing UI Control from any framework - like JQuery UI, Bootstrapp, Kendo or anything else.
  • It has superb performance because it does not use polling for any property changes and does not use intermixed HTML and Scripts inside template (the code is 100% separated from HTML- if you choose to do it).
  • And the Javascript code does not know (agnostic) about HTML structure (in the React framework it is built in the code).
  • The framework internally is much more simple than major frameworks, it uses HTML5 features implemented now in most of the browsers and does not need Polyfills. The code is not bloated.
It can be used to work with NOSQL and relational databases because it can work with complex properties of unlimited depth. The entities and DbContext is strongly typed because the clent domain model (entities, lists, dictionaries, dbsets, dbcontext) is generated in typescript language by data service methods and there's no need to write them manually or to use untyped ones. The data service (unlike thirdparty counterparts) can work with data managers for each entity (optionally). This feature allows to separate the CRUD and query methods for each entity into its own class.
Databinding uses classic property change tracking pattern like it is done in Silverlight and there's a BaseObject class in the framework which supports change notification and events. It is the most performant type of change tracking. The Events implemented to allow to provide a namespace when subscribing to them, which helps to unsubscribe from a bunch of them very easily - by just providing the namespace.

The framework is based on (Model-View-ViewModel) MVVM architecture:

MVVM is targeted at UI development platforms which support event-driven programming such as HTML5, Windows Presentation Foundation (WPF), Silverlight and the ZK framework. MVVM facilitates a clear separation of the development of the graphical user interface (either as markup language or GUI code) from the development of the business logic or back-end logic known as the model (also known as the data model to distinguish it from the view model).
The view-model acts as a model for the view. This means, the view-model holds data for the view. This is established through data-binding.
The view is completely unaware of the changes made to the data that it is bound to, and the view-model is completely unaware of view structure.

I chose not to implement features which can be easily borrowed from third party libs.
For example, there's no dependency injection feature because the Inversify.js library can be used for that. It has no Router implementation because switching the views using the framework is done by changing the property value (the current name of the template displaying inside the dynacontent). In the framework's SPA demo it is done by binding an anchor to a command on the view model. But nothing prevents from using any existing Routers implementations like Router.js and changing that view model's property value in the Router's callback function.
Also the framework does not use handlebars style templates. The templates in the framework are simple HTML snippets in which data binding can be used. What makes them very functional is that they can use element views (aka directives) which are data bound to the data context of the template's instance. It can implement sophisticated scenarios much simpler than by using the handlebars (look at the treeview demo, for example) and don't mix the code with HTML at the same time.
The framework does not use Reactive Extensions (RX.js) because they are heavyweight and not really needed for internal implementation.
The framework's data binding resembles Microsoft Silverlight data bindings style.

The framework is protected from overposting attacks out of the box because it uses metadata on the server which checks what is posted and it uses special tabular format to transfer queries data to and from the server. Protection from XSRF attacks is handled by allowing to add headers to all requests to the server. This feature can be used to attach anti XSRF tokens to the requests.
The full framework minified size is 377KB.

The framework contains the docs which at present for the old version of the framework, but i will update it later to reflect the new usage of the framework.

The Demos include:

The RIAppDemo is the demo project which uses this framework and it also includes server side components of this framework - The Data Service.
The NancySelfHost is another demo project which shows how to use the jriapp framework with NancyFX framework ( in self hosting environment.
The demoTS contains typescript projects which contain code for client side part of the demo projects (the RIAppDemo and the NancySelfHost).
On compilation those project produce a set of javascript files which are referenced in the demo projects HTML pages
The WebsocketServer is a demo implementation of a websocket service which supplies quotes of the day. It is used in the DataGrid Demo example. It is created using websocket-sharp implementation.

By using the data service you can generate strongly typed client side domain model in typescript language. See the demoTS project for an example. (the DEMODB.ts file contains the generated code.) The documentation explains how you can use the framework in more details.


P.S. There are videos on my youtube channel (for the old version of the framework)
You can watch an old video of the SPA demo on YouTube SPA Demo. I made some improvements to the demos since that time. In addition there are more demo pages than the SPA demo in the video. (DataGrid Demo, Master Details Demo, Many To Many Demo, Files Explorer Demo, DataBinding Demo, Collections Demo, TreeView Demo) So it is better to use the real demo to see how it works in real life.
I don't want to publish online demo because it needs to pay for that on my part, and the demos use a real database instead of per session only data. The Demos are more real worldish than simple TO DO demos many framework makers publish, because i tried to test every feature in the framework using the demos, but the TO DO application is too simple for this.