News

Webinar: Using TypeScript with React

Eric Greene

6 Jan , 2017   Video

Want to learn how to combine TypeScript with React for top-notch enterprise JavaScript coding?

TypeScript makes available critical programming features from C# and Java such as strong-typing, interfaces, and generics. React has become a very popular library for building multi-platform UI components. Combine the two, and you get a powerhouse of rich functionality to code even the most complicated applications. TypeScript even supports the popular JSX language commonly used by React developers.

A new one-hour webinar from Wintellect instructor Eric Greene explores how easy it is to build React components with TypeScript. Click on the video above to view, and share your feedback in the comments.… Read more

, , ,

News

Visual Studio 2015 Update 1 Released

Paul Ballard

30 Nov , 2015  

Microsoft has dropped Visual Studio 2015 Update 1 less than two weeks after it was announced during the Connect() conference.  Included in this release are new features such as support for Android Marshmallow and iOS 9 in Apache Cordova apps, new Universal Windows apps tooling, ASP.NET RC1, and the latest .NET framework (4.6.1).

This release features hundreds of bug fixes as well as the following new features.

  • Visual Studio Tools for Apache Cordova – support for Android Marshmallow and iOS 9, new Azure AD authentication.  There’s also a new location for samples and reference material at http://taco.visualstudio.com.
  • Visual Studio Tools for Universal Windows Apps – Updated tooling for targeting the November Windows 10 release (1511) as well as improvements to XAML designer, manifest designer, and debugging.
  • Visual C# – The C# Interactive Windows is back along with a scripting execution tool called csi.exe.
  • Visual C++ – Edit and Continue for /BigObj
  • Debugging and Diagnostics – Go To Implementation added to quickly move from interface to concrete implementations, Code Analysis enhancements, and improved filtering and search in diagnostic windows.
  • .NET Framework 4.6.1 – Updates to the latest .NET Framework including numerous bug fixes.
  • ASP.NET 5 RC1 – Latest version of the ASP.NET stack that can run in any platform including Bower support and a cleaner ASP.NET Solution folder.
Read more

, , , ,

News

TypeScript 1.5 Released with More ECMAScript 6 Features

Paul Ballard

23 Jul , 2015  

Microsoft has officially released the latest iteration of TypeScript, version 1.5 which includes more support for ES6 features such as modules, destructuring, computed properties, and tagged string templates.

Kangax

In the above table, you can see our progress on the Kangax ES6 support table.  This table, originally for JS engines, also shows coverage of the features transpilers and polyfills support for ES5 output.  With TypeScript 1.5, we doubled the number of passing tests and will continue to improve over the next few releases. — TypeScript Blog

In addition to the support of ES6 modules, the TypeScript team are working to make understanding how to work with modules easier by changing internal modules to “namespaces” and external modules remain “modules” while staying close to the ES6 module syntax.

This version of TypeScript is also looking forward to ES7 with support for the proposed Decorator syntax used in Angular 2.0, Ember, and Aurelia.  The Decorators feature is considered ‘experimental’ for now as the definition goes through the approval process, but many frameworks are already taking advantage of the syntax such as this snippet of AngularJS 2.


import {Component, View, NgFor, bootstrap} from "angular2/angular2";
import {loadFile} from "audioFile";
import {displayAudioFile} from "displayAudio";

@Component({selector: 'file-list'})
@View({template: `
<select id="fileSelect" size="5">
<option *ng-for="#item of items; #i = index"
[selected]="selected === item"(click)="updateSelection()">{{ item }}</option>
</select>`,
directives: [NgFor]
})

class MyDisplay {
items: string[];
constructor() {
this.items = ["item1", "item2"];
}

updateSelection() { … }
}

For more information read the TypeScript teams Blog post.… Read more

, , ,

Wintellect Blogs

Build an Angular 2 App – Data Binding Syntax

Josh Carroll

20 Jul , 2015  

In our previous article about building a simple application in Angular 2, we laid the foundation for moving forward and covered all the very basics about bootstrapping your application. However, it’s more or less a hello world application, and that, has been done already a number of ways.

The goal is to build a small real-ish application that you can use to gain ideas and inspiration from as you dive into Angular 2 yourself. However, we need to get some basics on the new data binding syntax out of the way.

Data Binding

Now, I cannot possibly do a better job explaining this than Victor Savkin already has in his article: Angular 2 Template Syntax, so I am not going to try. I highly encourage you to go take a look at that article to get an in-depth explanation of the new data binding and template syntax within Angular 2.

Instead, what I want to focus on is the 90% case, and the implications that has in terms of how you build your applications.

The Basics

Again, Victor’s article goes into a great amount of detail on this, but here is a condensed version of the basic data bindings you will be using everyday in your applications.… Read more

, , ,

Wintellect Blogs

Angular2 Databinding is Fast!

Josh Carroll

25 Jun , 2015  

I’ve been working with the Angular2 alpha ever since ng-conf 2015, and it has been pretty awesome to see how the framework is shaping up. I’ll be the first to admit that the bleeding edge tax is high, but it has been worth it to see just how powerful the next version of Angular is going to be.

The databinding system in Angular2 is so much better than the previous version that it is hard to talk about it in the abstract. I could go into a bunch of boring technical details, but I think seeing is believing.

The Setup

I wanted to see just how fast the new data binding system was, so I thought… why not animate a bunch of elements using nothing but databinding.

<table class="table table-striped table-condensed table-floating">
    <tbody>
        <tr *ng-for="#row of statusBoard">
            <td *ng-for="#col of row" [style.top]="col.top" [style.left]="col.left">&nbsp;</td>
        </tr>
    </tbody>
</table>

If you aren’t familiar with the syntax, don’t worry, basically I am using a nested repeater to create a bunch of rows and columns, and then data binding their position on the page.… Read more

, ,

Editorial

Top 5 AngularJS Frustrations

Paul Ballard

26 Feb , 2015  

AngularJS may be the latest JavaScript framework darling of the web world, but like all technologies it comes with its share of frustrations.

AngularJS has exploded onto the web world with no small help from Google such that its hard to imagine doing a web based application without giving it at least a passing consideration.  My first impressions of AngularJS was that it made JavaScript client side development nearly appealing, particularly if you start with TypeScript.  But after spending some time and researching the issues that others have had, I can see that it’s not quite the “One Framework to Rule Them All” I was hoping for.  Here are the top 5 frustrations I have seen so far.

  • Client Side Rendering – Being the shiny new hammer in our web toolkit it’s tempting to want to whip out AngularJS and pound out a client based SPA for any web site.  But client based rendering isn’t the best design model for websites that primarily present static content.  This is particularly true if you want your content to be discoverable as most search engines have trouble indexing content displayed as a result of client side processing.  AngularJS is a good tool for highly interactive applications, particularly when presenting significant amounts of data for viewing or editing.  
Read more

, ,

Wintellect Blogs

Enterprise Typescript

Jeremy Likness

23 May , 2014  

This past Thursday I had the pleasure of presenting for the Linked In .NET Users Group. The topic was TypeScript. My goal was to show how well TypeScript works to solve common problems in the enterprise to tackle it from the perspective of Return on Investment and how it scales teams, improves productivity, increases quality and reduces overhead. The talk is split between this discussion and hands on examples that cover the semantics while tying them back into the concept of large, parallel teams.

Here is the abstract of the talk followed by the video and deck.

TypeScript is a superset of JavaScript. Designed to enable enterprise-scale application development, TypeScript compiles to pure JavaScript. It provides important features such as classes, modules, and interfaces. TypeScript helps improve the quality of code by generating well-known and widely accepted JavaScript patterns while providing powerful development-time type-checking and discovery. TypeScript runs side-by-side with existing JavaScript and supports the concept of type definition libraries that can describe existing libraries for use by TypeScript even if they are written in pure JavaScript.

In this talk, Jeremy Likness will explore the use of TypeScript in enterprise-scale applications. He’ll discuss not only the technological benefits of TypeScript but also explore the impact to the software development lifecycle overall.… Read more

, ,

Wintellect Blogs

Angular: The Modern HTML5 Answer to Silverlight’s MVVM

Jeremy Likness

30 Mar , 2014  

First, let me say that I realize Silverlight in no way “owns” the Model-View-View Model pattern. I’ve written on this extensively in my article “MVVM Explained.” However, I believe it gained the most public exposure through various implementations on that platform and this is what led to its adoption on the web. In fact, you might think its strange to think that Microsoft could have possibly influenced the sacred land of open source JavaScript, but if you trace the history of view models you’ll find not only did they segue from WinForms to XAML technologies, but they initially made their way to the web via early data-binding implementations like KnockoutJS.

I have to admit I was extremely skeptical when I first saw the concept of creating a view model in a browser. As much as I loved XAML’s data-binding it felt like a square peg and a round hole. What really concerned me the most was the extra work involved to take an ordinary JavaScript object (JSON) and turn it into a view model using things like ko.observable. This has been vastly improved and simplified, and as I began to adopt the strategy for the web I realized quickly it made sense.… Read more

, , , , , , , ,

Wintellect Blogs

Understanding Providers, Services, and Factories in Angular

Jeremy Likness

10 Jan , 2014  

I’ve read quite a few posts (as well as questions posed) about the differences between services and factories in Angular. I’ve seen just as many attempts to explain it and even fell victim to trying to force an explanation for the difference myself. The answer is more simple than you may think and is evident if you browse the Angular source code and then re-read the documentation. When this clicked for me I had to share it because so many people seem to make more out of it than it is.

The biggest misconception I see is the idea that factories and services have anything to do with being a singleton. The reality is that both methods create singletons (unless you game them to generate new instances).

So here it is. I’m going to summarize then follow up with some examples;

  • Use a service when you want to pass a constructor function. The function will be invoked w

    ith the “new” operator and the result stored.

  • Use a factory when you want to return the object from a function (i.e. factory pattern). The function will be called and the result stored.
  • Use a provider when you want to be able to provide module-wide configuration for your object before making it available.
Read more

, , ,

Wintellect Blogs

Synergy between Services and Directives in AngularJS

Jeremy Likness

10 Sep , 2013  

You’ve probably heard it a thousand times now. “AngularJS teaches HTML new tricks.” The way it does that is through directives. In my last related post I covered how to build a testable filter. Directives can be tested in a similar fashion, but what happens when they have to interact with the rest of your application? Instead of teaching your controllers how to talk to UI components, or overloading the $scope object, look to services as the mortar to hold pieces of your app together.

The console in my 6502 simulator is rendered with a single directive:

<div class="column"><console></console></div>

Instead of walking you through the directive, however, I’d like to start with the specs for the console. Here are the relevant specs:

consoletests

The size of the buffer is taken from a set of global constants that are configurable and will automatically update the tests. That’s it – that’s all I want from my console service. Notice that I don’t care how it is rendered yet, I’m just concerned about how the rest of my app will interface with it.

From the tests I was able to determine an interface for the service:

export interface IConsoleService {
    lines:
string[];
    log(message:
string);
}

And from the interface I could then easily implement a class that would pass the tests:

export class ConsoleService implements IConsoleService {
    
   
public lines: string[];

   
constructor() {
       
this.lines = [];
    }

   
public log(message: string) {
       
this.lines.push(message);

       
if (this.lines.length > Constants.Display.ConsoleLines) {
           
this.lines.splice(0, 1);
        }            
    }
}

Now any other component that needs to write to the console can simply have the service injected and log a message like this:

this.consoleService.log("CPU has been successfully reset.");

What’s nice about AngularJS is that we now have a fully functional app even though we haven’t even considered the UI yet.… Read more

, , ,