TSFacade in action!

Create your data transfer objects

Create your DTOs, decorated with the DataContract and DataMember attributes:

Objects.png

Create your services

Create your ASP.NET web services, decorated with the ScriptService and ScriptMethod attributes:

Services.png

Get TSFacade to create your TypeScript service façade

Compile your assembly and (as a post-build step for now) run the console application, specifying the assembly for which the façade should be created and the output path for your TypeScript façade:

Muel.TypeScriptFacade.Console.exe -Assemblies "C:\Dev\Muel.TypeScriptFacade.TestPlatform\bin\Muel.TypeScriptFacade.TestPlatform.dll" -ServiceUrl Services -OutputPath C:\Dev\tsservicefacade\Scripts\ServiceFacade.ts


This will create a file, ServiceFacade.ts in this case, containing your services within the ServiceFacade namespace, and your DTOs namespaced according to the namespace in your server-side code:

Facade.png

All the benefits of strong typing, but in a front-end JavaScript environment - go TypeScript!

TSFacade creates methods to allow you to take snapshots of the data and check for changes since the last snapshot - this means you can push to the server only the objects that have changed since the last fetch or the last push. The service methods will not automatically snapshot data, so it is good practice to run returnVal.snapshot(); on the returned object at the start of the service method callback if you expect the objects to be subject to change.

Write TypeScript to interface with the façade

You can then reference the service facade file (/// <reference path="servicefacade.ts" />) in your other TypeScript files and interact asynchronously and seamlessly with the service layer:

TypeScript.png

Drop links to the JavaScript files into your web pages

This functionality requires jQuery to run, so you'll need jquery.min.js and ServiceFacade.js to get it all working:

Html.png

Run the application and debug!

Using TypeScript's fantastic integration with the VS debugger you can inspect your objects at runtime to see that everything is as you'd expect!

Debug.png

Limitations

There are a few limitations at the moment, which I'll be working to lift in the future:
  • jQuery is required. UPDATE: the jQuery dependency is no longer there.
  • Your services (.asmx) must all be in the same directory in a given project. UPDATE: now this is a Visual Studio add-in TSFacade can work out the URLs of services based on the location of the .asmx files.
  • Inheritance in your DTOs likely won't fly - I haven't even tried to get this working (yet). UPDATE: polymorphism is now catered for.
  • Arrays are handled, but generic collections have not (yet). UPDATE: Generic lists (List<>) and dictionaries (Dictionary<,>) can now be used.
  • Since TSFacade only runs as part of a console application on a compiled assembly, you will have to run a double-build to ensure the generated service façade is included in the output - the first build creates the assembly, TSFacade creates the TypeScript file, the second build compiles the TypeScript into JavaScript for your application. This is not ideal, but it works for now - with full VS integration this restriction will not apply. UPDATE: TSFacade currently runs as a Custom Tool (single-file generator) - the next step is to integrate it with MSBuild...

Last edited Mar 9, 2015 at 12:24 AM by samdv, version 8