AtScript in the context of an Angular 2.0

What is AtScript ?

Google revealed AtScript at ngEurope in Pari. This is a superset of Microsoft TypeScript , ES6 and ES5. TypeScript adds types to JavaScript code and AtScript extends this idea further by adding annotations and introspection.

Google team  writing Angular v2 on top of the AtScript syntax

Is it new language?

No, Its not a new language just influenced by TypeScript and Dart. Like how typescript is superset of javascript. Atscript also using similar kind of syntax but it’s a enhancement with what is lacking in previous. so it’s called superset for rest.

What is lacking in existing TypeScript?

Types are analyzed only statically, once you build the source it’s nothing but a java script you cannot check the types thereafter. Example  in run time you are receiving JSON object from the server end you cannot do the type checking, this is the limitation from typescript.

Why AtScript use a runtime type system?

it allows free mixing of existing libraries which don’t have type and new code which can take advantage of types in the run time, it overcomes  typescript limitations. So the type errors can be caught and resolved before pushing to the production and all the assertions can be removed from the production builds.

Who all working  this Concept ?

Below three top people are working together in this concept, adding type system to javascript to making as standard.

       Google AtScript.

       Microsoft TypeScript

       Facebook Flow

When will be AtScript release?

Angular team started working on AtScript over a year,most probably it may come to market 2015 starting.

Reference:

Microsoft TypeScript and Its Roadmap :  

http://blogs.msdn.com/b/typescript/archive/2014/10/22/typescript-and-the-road-to-2-0.aspx

AtScript primer doc :

https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/preview?sle=true&pli=1#

RealTime Dashboard with ASP.NET Signalr, AngularJS and D3JS

About Signalr :

Asp.NET SignalR is a library for ASP.NET developers to push the content from server to connected clients and vise versa.

Reference Link: http://signalr.net/ ,  http://www.asp.net/signalr/

About AngularJS :

AngularJS is an opensource web application client side framework, maintained by Google and community.

Reference Link: https://angularjs.org/

About D3js :

D3.js is a javascript library for manipulating document based on data. It helps in bringing data to visualization using HTML,SVG and CSS.

Reference Link: http://d3js.org/

Okay We can start now. In this article we are going to see how to build real-time dashboard application using above technologies, for sample I took scenario of available waiting calls in the call centre  (contact center) on each department. so this sample real time dashboard will be benefit for contact center manager and supervisor to monitor how many customers are waiting in the queue to get the agent transfer.

Server Side Implementation:

SignalR is an abstraction over some of the transports (WebSoket,Server Sent Event ,Forever Frame,Ajax long polling ). It will also support  fallback. For example if we take WebSocket transpor,it should meet some of the system requirement from both server and client end.

Server end: Windows Server 2012 or Windows 8

Client  end: Html5 supported browser(IE 10+, chrome,etc..)

If any one of the requirement gets failed, obviously websocket will not work. Here  Signalr will do magic, automatically it will look for alternative supported transport.(Forever or Ajax). So developer don’t want to worry  about anything.

To Learn more about SignalR please visit following link http://www.asp.net/signalr/. In below we are going to see only how these technologies makes our Job easy to build real time solution.

The Server side Hub:

This will push content to clients.

Client Side Hub connection with (angularJS) :

Reference file require in HTML page.

We having  our client connection inside angular JS service because Service are singleton and easy to take control for callback.

Controller will  receive the data from service then pass to $scope variable  to update the user interface.

angular JS is two way binding, once the data updated in the controller, view automatically re-rendered based on updated values.

Inside view we have custom directive to  draw simple bar chat based on myData value. This custom directive we build with the help of D3.JS .

Now again we can go to server end. We have to pull the real time data from  database or some back end system with some specified interval  then push the data to all our subscribed client.

Really running scheduled background work in asp.net I will not suggest, Even this example we used official recommended approach  IReggisteredObject with the ASP.NET runtime and hook it up at application start.

For more robust solution even we can host the signalR explicit windows service.

In Application_Start method simply we can start our background thread.

Here we are simply pushing the data to all the connected clients, But real time we can do lot more,  maintain active client, identifying particular user and  pushing to only logged in clients, etc…

 

Snapshot :

demo_screen

 

Angular JS – Nested array data and cascading dropdown lists binding

The Requirement is very simple.We have to display data with cascading drop down from the collection.

We have some collection of books. I took a sample of book for initial page mapping.

Nested Angular Drop down

Each row contains dropdowns for books,chapters and titles. By choosing the drop down under book(specify the name of the book), relevant chapter will be loaded. And based on the selection of the chapter, title information will be loaded for that specific book title.

 

From above example each drop down “on change event”,we are passing the current book object to our method and creating variable dynamically for the selected subsequent item.

You can write any logic inside this method like ajax call to pull out sub drop down values, here we will take from same instance.

Plunker Demo:  http://plnkr.co/edit/puDh4B?p=preview