Consulting/Training
TypeScript and AngularJS
Consulting/Training
consulting
Wintellect helps you build better software,
faster, tackling the tough projects and solving...
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 ad...
Consulting/Training
 Yeah, saved us from “evil” plug-
ins! (cough) Silverlight (cough)
 Write once, run anywhere, right?...
Consulting/Training
The Problem: JavaScript
JavaScript
Consulting/Training
 Also not implemented consistently
between browsers (specifically DOM
interaction – and if you think ...
Consulting/Training
Wow! This is a lot of work and
what if my UI changes to use
different ids?
$(document).ready(function(...
Consulting/Training
function NameViewModel() {
var self = this;
this.firstName = ko.observable('Jeremy');
this.lastName = ...
Consulting/Training
 Encapsulation without obfuscation
 Discovery without guessing
 Type safety without killing ducks
...
Consulting/Training
(In which one finds TypeScript and AngularJS with Jasmine working together)
The 6502 “Because I Can” W...
Consulting/Training
 Encapsulation with classes
 Minimize “ritual” with inheritance
 Discovery with interfaces
 Type s...
Consulting/Training
Interfaces Example
Whoah IntelliSenseless! Where
are my properties buried in all
this mess? You’re giv...
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 co...
Consulting/Training
Example App with AngularJS and TypeScript
Consulting/Training
Subscribers Enjoy
 Expert Instructors
 Quality Content
 Practical Application
 All Devices
Wintell...
Consulting/Training
Questions?
http://sdrv.ms/1dUgIb1
jlikness@Wintellect.com
Upcoming SlideShare
Loading in …5
×

AngularJS and TypeScript for Modern Web App Development

13,068 views

Published on

Although native applications continue to thrive, more and more focus is being placed on the web as a way to successfully deliver enterprise applications. The primary language of the web is JavaScript and it comes with its own challenges that make it difficult to scale large teams across large projects. The combination of TypeScript and AngularJS changes this by providing a way to design a declarative UI with a clean separation of concerns while providing strong types that make discovery and refactoring easier than ever before. Join principal consultant Jeremy Likness to learn how these two technologies combine to enable large development teams to deliver web-based applications more quickly and efficiently.

Published in: Technology
2 Comments
10 Likes
Statistics
Notes
  • Maybe it is simpler to use a framework entirely written in typescript? It is easy to find in google. Just type - typescript HTML5 framework.
    jRIAppTS framework does more than angularJs and 100% typescript
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Saving us from evil plug-ins... Flash. but not quickly enough
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,068
On SlideShare
0
From Embeds
0
Number of Embeds
460
Actions
Shares
0
Downloads
82
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide
  • Author Opportunity Passive incomeClear marketing commitments to help grow your personal brand and your coursesInternational presence & exposureCross sell opportunities – instructor led classes, consulting opportunities, and conference speaking opportunitiesOpportunity to be the subject matter expert and to carve out a niche for yourself in this new businessAssociation with Wintellect
  • AngularJS and TypeScript for Modern Web App Development

    1. 1. Consulting/Training TypeScript and AngularJS
    2. 2. 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
    3. 3. Consulting/Training  The Problem  HTML5  JavaScript  Browsers  A Solution  TypeScript  AngularJS  Conclusion Agenda
    4. 4. 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
    5. 5. 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
    6. 6. Consulting/Training The Problem: JavaScript JavaScript
    7. 7. 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
    8. 8. 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 ….
    9. 9. 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 ….
    10. 10. 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?”
    11. 11. 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/
    12. 12. 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
    13. 13. Consulting/Training Interfaces Example Whoah IntelliSenseless! Where are my properties buried in all this mess? You’re giving me the whole universe!
    14. 14. Consulting/Training Interfaces Example That’s more like it. And IAmSomeone doesn’t appear anywhere in my JavaScript code.
    15. 15. Consulting/Training Generics
    16. 16. Consulting/Training Classes
    17. 17. Consulting/Training Inheritance
    18. 18. Consulting/Training Inheritance (cont.) “I get by with a little help from my TypeScript compiler. It’s magic.”
    19. 19. 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.”
    20. 20. Consulting/Training Example App with AngularJS and TypeScript
    21. 21. 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
    22. 22. Consulting/Training Questions? http://sdrv.ms/1dUgIb1 jlikness@Wintellect.com

    ×