ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript
AngularJS and TypeScript for Modern Web App Development
-
Upload
jeremy-likness -
Category
Technology
-
view
12.356 -
download
0
description
Transcript of AngularJS and TypeScript for Modern Web App Development
![Page 1: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/1.jpg)
Consulting/Training
Jeremy Likness
Principal Consultant
@JeremyLikness
TypeScript and AngularJS
![Page 2: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/2.jpg)
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
![Page 3: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/3.jpg)
Consulting/Training
The ProblemHTML5
JavaScript
Browsers
A SolutionTypeScript
AngularJS
Conclusion
Agenda
![Page 4: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/4.jpg)
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
![Page 5: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/5.jpg)
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
![Page 6: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/6.jpg)
Consulting/Training
The Problem: JavaScript
JavaScript(The Good Parts)
![Page 7: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/7.jpg)
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
![Page 8: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/8.jpg)
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 ….
![Page 9: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/9.jpg)
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 ….
![Page 10: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/10.jpg)
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?”
![Page 11: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/11.jpg)
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/
![Page 12: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/12.jpg)
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
![Page 13: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/13.jpg)
Consulting/Training
Interfaces Example
Whoah IntelliSenseless! Where are my properties buried in all this mess? You’re giving me the whole universe!
![Page 14: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/14.jpg)
Consulting/Training
Interfaces Example
That’s more like it. And IAmSomeone doesn’t appear anywhere in my JavaScript code.
![Page 15: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/15.jpg)
Consulting/Training
Generics
![Page 16: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/16.jpg)
Consulting/Training
Classes
![Page 17: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/17.jpg)
Consulting/Training
Inheritance
![Page 18: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/18.jpg)
Consulting/Training
Inheritance (cont.)
“I get by with a little help from my TypeScript compiler. It’s magic.”
![Page 19: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/19.jpg)
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.”
![Page 20: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/20.jpg)
Consulting/Training
Example App with AngularJS and TypeScript
![Page 21: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/21.jpg)
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
![Page 22: AngularJS and TypeScript for Modern Web App Development](https://reader033.fdocuments.net/reader033/viewer/2022052900/555c24fcd8b42a0b418b4c16/html5/thumbnails/22.jpg)
Consulting/Training
Questions?
Jeremy Likness
Principal Consultant
This deck: http://sdrv.ms/1dUgIb1 [email protected]
@JeremyLikness