More Related Content

Recently uploaded(20)


AngularJS and TypeScript for Modern Web App Development

  1. Consulting/Training TypeScript and AngularJS
  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. Consulting/Training  The Problem  HTML5  JavaScript  Browsers  A Solution  TypeScript  AngularJS  Conclusion Agenda
  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. 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. Consulting/Training The Problem: JavaScript JavaScript
  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. 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. 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. 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. 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: Source:
  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. Consulting/Training Interfaces Example Whoah IntelliSenseless! Where are my properties buried in all this mess? You’re giving me the whole universe!
  14. Consulting/Training Interfaces Example That’s more like it. And IAmSomeone doesn’t appear anywhere in my JavaScript code.
  15. Consulting/Training Generics
  16. Consulting/Training Classes
  17. Consulting/Training Inheritance
  18. Consulting/Training Inheritance (cont.) “I get by with a little help from my TypeScript compiler. It’s magic.”
  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. Consulting/Training Example App with AngularJS and TypeScript
  21. Consulting/Training Subscribers Enjoy  Expert Instructors  Quality Content  Practical Application  All Devices Wintellect’s On-Demand Video Training Solution Individuals | Businesses | Enterprise Organizations Authors Enjoy  Royalty Income  Personal Branding  Free Library Access  Cross-Sell Opportunities Try It Free! Use Promo Code: LIKNESS-13
  22. Consulting/Training Questions?

Editor's Notes

  1. 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