Consulting/Training

Jeremy Likness

Principal Consultant

jlikness@wintellect.com

@JeremyLikness

TypeScript and AngularJS

Consulting/Training

consultingWintellect helps you build better software, faster, tackling the tough projects and solving the software and technology questions that help you transform your business. Architecture, Analysis and Design Full lifecycle software development Debugging and Performance tuning Database design and development

trainingWintellect's courses are written and taught by some of the biggest and most respected names in the Microsoft programming industry. Learn from the best. Access the same

training Microsoft’s developers enjoy Real world knowledge and solutions

on both current and cutting edge technologies

Flexibility in training options – onsite, virtual, on demand

Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions.

who we are

About Wintellect

Consulting/Training

The ProblemHTML5

JavaScript

Browsers

A SolutionTypeScript

AngularJS

Conclusion

Agenda

Consulting/Training

Modern web apps run on the web’s Operating System (did you watch the keynote? This bullet was not added after)

That OS is HTML5 + JavaScript

Part of problem is HTML5 (I’ll explain)

The problem is JavaScript (Hang on…)

Coding web apps with a large team can be like hanging off the edge of a cliff

But let me explain …

The Problem

Consulting/Training

Yeah, saved us from “evil” plug-ins! (cough) Silverlight (cough)

Write once, run anywhere, right?

Let’s check compatibility …Oops, looks like a traffic stop

Looks like no one implements all HTML5 features consistently, and many are browser-specific

We really want to keep it as structure

Write once, suck everywhere!

The Problem: HTML5

Consulting/Training

The Problem: JavaScript

JavaScript(The Good Parts)

Consulting/Training

Also not implemented consistently between browsers (specifically DOM interaction – and if you think HTML5 will make a difference, the current standard has been there since 1999)

OK, there were a few tweaks in 2009

JavaScript: The Definitive Guide is 1,100 pages

JavaScript: The Good Parts is 127 pages

Is there something wrong with that picture?

The Problem: JavaScript

Consulting/Training

Wow! This is a lot of work and what if my UI changes to use different ids?

$(document).ready(function() {

$('#firstName').attr('data-bind','value: firstName, valueUpdate: "afterkeydown"');

$('#lastName').attr('data-bind','value: lastName, valueUpdate: "afterkeydown"');

$('#fullName').attr('data-bind', 'text: fullName');

$('#firstNameValidation')

.attr('data-bind','visible: firstName.hasError, text: firstName.validationMessage');

$('#lastNameValidation')

.attr('data-bind','visible: lastName.hasError, text: lastName.validationMessage');

$('form').attr('data-bind', 'submit: saveName');

});

jQuery Can Help ….

Consulting/Training

function NameViewModel() {

var self = this;

this.firstName = ko.observable('Jeremy');

this.lastName = ko.observable('');

this.fullName = ko.computed(function() {

if (self.lastName()) {

if (self.firstName()) {

return self.lastName() + ', ' + self.firstName();

}

return self.lastName();

}

return self.firstName();

});

}

var viewModel = new NameViewModel();

Do I really need all of this ceremony? What if I am using data I just retrieved from a web service call, do I have to do all of this?

KnockoutJS Can Help ….

Consulting/Training

Encapsulation without obfuscation

Discovery without guessing

Type safety without killing ducks

Modularity

Inheritance

Separation of concerns

Designer/developer workflow

Unit testing

Data-binding

Code reuse

Extensibility

There IS a BETTER way!

“It keeps the cold liquids cold and the hot liquids hot. How does it know?”

Consulting/Training

(In which one finds TypeScript and AngularJS with Jasmine working together)

The 6502 “Because I Can” Written in JavaScript runs on my Phone Simulator: http://apps.jeremylikness.com/t6502 Source: http://t6502.codeplex.com/

Consulting/Training

Encapsulation with classesMinimize “ritual” with inheritance Discovery with interfaces Type safety that doesn’t take away our

right to duck-typeModular code

TypeScript

Consulting/Training

Interfaces Example

Whoah IntelliSenseless! Where are my properties buried in all this mess? You’re giving me the whole universe!

Consulting/Training

Interfaces Example

That’s more like it. And IAmSomeone doesn’t appear anywhere in my JavaScript code.

Consulting/Training

Generics

Consulting/Training

Classes

Consulting/Training

Inheritance

Consulting/Training

Inheritance (cont.)

“I get by with a little help from my TypeScript compiler. It’s magic.”

Consulting/Training

“XAML” for the webDeclarative (like HTML is)Directives = “user controls” Filters = “value converters” Controllers = “view models” Teach HTML new tricks (with a lot of tricks

already in the bag)Dependency InjectionVery test-friendly

AngularJS“It’s a conspiracy by XAML developers to make the web look like Silverlight”

“Nah, Dawg. Angular was cooked up by Google.”

Consulting/Training

Example App with AngularJS and TypeScript

Consulting/Training

Subscribers Enjoy

Expert Instructors

Quality Content

Practical Application

All Devices

Wintellect’s On-DemandVideo Training Solution

Individuals | Businesses | Enterprise Organizations

http://bit.ly/angularintro

Authors Enjoy

Royalty Income

Personal Branding

Free Library Access

Cross-Sell Opportunities

Try It Free! Use Promo Code:

LIKNESS-13

Consulting/Training

Questions?

Jeremy Likness

Principal Consultant

This deck: http://sdrv.ms/1dUgIb1 jlikness@Wintellect.com

@JeremyLikness