TKO - Awesomeness using TypeScript with knockout.js

24

description

Presentation for the session held on CodeCamp Macedonia 2013. Last year we saw what TypeScript promises. Now a year later, it's time to see whether it delivers. In my opinion, it does, and when used with knockout.js it does so with a punch. The TypeScript generics mesh beautifully with knockout's observables and result in a dynamic, declarative, and type-safe code base, that's easy to work with. The presentation also covers a note of the future of the C# language, based on information for proposed language features. The code shown can be seen on https://github.com/sweko/tko The presentation is live on http://monaco-swekster.azurewebsites.net/Roles.tko.html

Transcript of TKO - Awesomeness using TypeScript with knockout.js

Page 1: TKO - Awesomeness using TypeScript with knockout.js
Page 2: TKO - Awesomeness using TypeScript with knockout.js

TKO Knocking it out of the ball park with

TypeScript and knockout.js

Wekoslav StefanovskiSenior Developer, Seavus

[email protected]

Page 3: TKO - Awesomeness using TypeScript with knockout.js
Page 4: TKO - Awesomeness using TypeScript with knockout.js

Agenda

A little bit of historyA little bit of presentWhy is TypeScript needed? How is it used?Why is knockout needed? How is it used?Why are they great together?Bonus Topic: Surprise

Page 5: TKO - Awesomeness using TypeScript with knockout.js

A little bit of history

What is this thing called Javascript???

Prototype-based dynamic scripting language

Build in Netscape in 1995, initially focused on

non-professional developers.

Standardized as ECMAScript (in 1999)

Still the version most browsers / developers use.

Page 6: TKO - Awesomeness using TypeScript with knockout.js

A little bit of history, part II

What is this thing called DOM???

Even worse consistency than javascript.

Latest specification is from 2004, a.k.a. Internet Prehistory

jQuery (and friends) to the rescue

Still, it’s not a traditional programming object model

– Hard to manipulate

– Hard to automate

Page 7: TKO - Awesomeness using TypeScript with knockout.js

A little bit of present

The rise of the Single-Page Application

Heavy client logic, getting heavier

Stateless web is dead and more alive than ever

The attack of the APIs and services

Ongoing M/V separation

Page 8: TKO - Awesomeness using TypeScript with knockout.js

Why is TypeScript needed

Javascript’s got 99 problems but types ain’t one

– Variable hoisting – no implicit global variables in typescript

– Truthy and falsy values – only booleans allowed in boolean

checks

– No explicit includes – has explicit references and dependencies

– The this parameter can be actually that - lexical scoping

ECMAScript 6 standard specification is a long way off

– TypeScript type definition syntax is aligned with ECMAScript 6

Page 9: TKO - Awesomeness using TypeScript with knockout.js

Why is knockout.js needed?Declarative bindings

Automatic UI updating

Dependency tracking

Templating

No (or very little) code mixed with html

No html mixed with code

Page 10: TKO - Awesomeness using TypeScript with knockout.js

Why are they great together?

Typescript generics add strictness to knockout

Encourages correct usage

Better sense of confidence in the code

Improved readability

Improved testability

Page 11: TKO - Awesomeness using TypeScript with knockout.js
Page 12: TKO - Awesomeness using TypeScript with knockout.js
Page 13: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.0

1. Primary ConstructorsBefore Afterpublic class Point { private int x, y; public Point(int x, int y) { this.x = x; this.y = y; } }

public class Point(int x, int y) { private int x, y; }

Page 14: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.0

2. Readonly auto propertiesBefore Afterpublic readonly int x = 3;public int X { get { return x }}

public int X {get; } = 3;

Page 15: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.03. Static type using statementsBefore

After

public double A { get { return Math.Round(Math.Sqrt(Math.Abs(someValue))); } }

using System.Math;public double A { get { return Round(Sqrt(Abs(someValue))); } }

Page 16: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.04. Property ExpressionsBefore

After

public double Distance { get { return Math.Sqrt(X * X + Y * Y); } }

public double Distance => Math.Sqrt(X * X + Y * Y);

Page 17: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.05. Method ExpressionsBefore

After

public double MoveRight(int dx){ return new Point(X + dx, Y);}

public double MoveRight(int dx) => new Point(X + dx, Y);

Page 18: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.06. Params for enumerablesBefore

After

Do(someEnumerable.ToArray()); ...

public void Do(params int[] values) { ... }

Do(someEnum); ...public void Do(params IEnumerable<int> points) { ... }

Page 19: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.0

7. Inline declarations for out paramsBefore Afterint x; int.TryParse("123", out x);

int.TryParse("123", out int x);

Page 20: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.08. Monadic null checkingBefore

After

if (points == null) return -1;var next = points.FirstOrDefault(); if ((next == null) || (next.X == null)) return -1;

return next.X;

return points?.FirstOrDefault()?.X ?? -1;

Page 21: TKO - Awesomeness using TypeScript with knockout.js

The Future of C# - C# 6.09. Constructor type parameter inferenceBefore

After

var x = MyClass.Create(1, "X"); ... public static MyClass { public MyClass<T1, T2> Create<T1, T2>(T1 a, T2 b) { return new MyClass<T1, T2>(a, b); }}

var x = new MyClass(1, "X");

Page 22: TKO - Awesomeness using TypeScript with knockout.js
Page 23: TKO - Awesomeness using TypeScript with knockout.js

Complete electronic evaluation forms on the computers in the hall and enter to win!– Infragistics Ultimate– Telerik DevCraft– JetBrains .NET tools – Semos training vouchers– Pluralsight subscriptions– and many more…

Page 24: TKO - Awesomeness using TypeScript with knockout.js