Building an enterprise web application with Typescript

Topics: General
Oct 16, 2013 at 5:46 AM
Edited Oct 16, 2013 at 9:00 AM
We just released VCL.JS a free open source typescript framework for building an enterprise web application.

We will appreciate your comments http://vcljs.com

These are the features that make VCL.JS a joy to use:
Visual Component Library- include Page,Grid,Input,Gauges,Charts and many more
Visual studio integration
Pure TypeScript
Single page application
.Net Backend
Data binding
Simple database query execution
Routing
Twitter bootstrap
AMD - Module loader


Code example
import V = require("VCL/VCL");

export class PageTabHome extends V.TPage {
  constructor() {
     super();
     var qur = new V.TQuery(this);
     qur.SQL = "SELECT ID,NAME FROM CUSTOMERS"
     qur.open();

     var grid=new V.TDbGrid(this,"grid");
     grid.DataSet=qur;
     var col = grid.createColumn("NAME");
     col.onClicked = ()=>{
           //do somthing
     }
   }
}
  <div class="row">
        <div id="grid" class="span9"/>
  </div>
Oct 16, 2013 at 9:39 AM
That looks very nice. Should be of interest to the banking sector.

A note on the casing: in JavaScript the preference is to only use Pascal (capitalise first letter) for constructor functions. All other identifiers (including namespaces and enum values) should be camelcase.

So instead of
        import V = require("VCL/VCL");
      // ...
        var btn1 = new V.TButton(this,"bt1", "Primary Large");
        btn1.ButtonSize = V.ButtonSize.Large;
        btn1.ButtonStyle = V.ButtonStyle.Primary;
the preference is:
        import v = require("VCL/VCL");
      // ...
        var btn1 = new v.TButton(this,"bt1", "Primary Large");
        btn1.buttonSize = v.ButtonSize.large;
        btn1.buttonStyle = v.ButtonStyle.primary;
Also are you using knockout for the binding? What about the routing? Is everything bespoke?
Oct 16, 2013 at 11:12 AM
Edited Oct 16, 2013 at 11:12 AM
Thanks nabog
  1. Since its typescript have properties (setter getters) all of them are starting with capital and all method start's with lower case (make sense?)
  2. All components are starting with Txxx, The bindable components starts with TDBxxx which mean you can set the dataset property and enjoy seamless data binding.
  3. Routing is done internally with sammy.js but i dont need to know sammy at all(see example below)
  4. What do u mean by "bespoke"?
PageHome.ts
export class PageHome extends V.TPage {
  constructor() {
        var btn = new V.TButton(this, "btn");
        btn.Text = "Hit";
        btn.onClicked = () => {
            V.Application.navigateToPage("Page2", ["firstParam"]);
        }
} 
PageHome.html
  <div id="btn"> 
Page2.ts
export class Page2 extends V.TPage {
  constructor(customer:string) {
        var btn = new V.TButton(this, "btn");
        btn.Text = customer;
} 
Page2.html
  <div id="btn"> 
Oct 16, 2013 at 8:42 PM
delphi for typescript! :)
Oct 23, 2013 at 9:36 AM
FYI running SQL statements on the client is a very bad idea, most problematic when it comes to the security.
Oct 23, 2013 at 3:19 PM
To be fair this is already acknowledged in the docs and an alternative provided:

    //this is a “bit” unasafe way to run a query
    var qur = new V.TQuery(this);
    qur.SQL = “Select * from orders”
    qur.open();
 
    //this is a better approach, the query now is located on the server, so injection is impossible
    var secureQur = new V.TQueryRemote(this);
    secureQur.QueryID = “ord100″;
    secureQur.open();

Oct 23, 2013 at 5:21 PM
Hi

Can you give us your opinion on the framework?( its still under alpha so its probably a bit buggy :) )
Do you think it’s useful for enterprise database driven application?
Did you find it intuitive to use?
What do you think we can improve?

j.
Dec 17, 2013 at 3:41 PM
VCL.js is an intersting framework to begin SPA development with TypeScript. As you say all the glue like page manipulation is transparent for the developper.
It's a good start but for enterprise application you need to provide better features for:
  • The Grid component is anemic compared to equivalent provided by Jquery.UI.
    For exemple you dont have edition in the grid
  • The integration with the backend is too simple : Juste query or what you call remote query where the query is replaced by and ID. You have also proxy to invoke remote web service passing a json object. Why not use more mature OData technology to integrate and abstract datasource and use a library like breeze.js or jaydata? With odata you have a completly open backend and you can made business logic on the server. Tuneling the query via JSON is like building 2 tear architectures replacing fat client by a browser! How you manage scalability if many user are doing query or actions on the server?
    How you manage the transaction?
At this stage you have a RAD tool to adress small business application but not enterprise applications.
You have small depedency with existing javascript UI controls , it's good because these components are compeltly developed with your typeescript framework but important component like the grid provided is poor compared with existing free grid component developped in javascript.
I think the price to pay to redevelop completly controls with typescript is heavy and would be better to have and hybrid approach using d.ts definition available in definitely typed site.

Angelo Pacifico