Consulting/Training
TypeScript and AngularJS

Consulting/Training
consulting
Wintellect 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
training
Wintellect'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 Problem
 HTML5
 JavaScript
 Browsers
 A Solution
 TypeScript
 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

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 classes
 Minimize “ritual” with inheritance
 Discovery with interfaces
 Type safety that doesn’t take away our right
to duck-type
 Modular 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 web
 Declarative (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 Injection
 Very 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-Demand
Video 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?
http://sdrv.ms/1dUgIb1
jlikness@Wintellect.com