Using TypeScript with Angular
7 likes1,081 views
This document discusses using TypeScript with AngularJS. It begins with an introduction to TypeScript, covering its goals of statically identifying errors and organizing large codebases. It then reviews AngularJS's philosophy and architecture, including its use of MVVM pattern, dependency injection, and services. The document demonstrates building a sample app with TypeScript and AngularJS and notes lessons learned, such as TypeScript slowing initial development but reducing bugs. It concludes by discussing TypeScript and AngularJS's future integration.
Using TypeScript with Angular
- 1. USING TYPESCRIPT WITH ANGULARJS Jamal O’Garro NYC Camp 2015 / Front-end Camp July 16, 2015 Software Engineer + Instructor CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 2. • TypeScript Overview • AngularJS Review • Sample App • Takeaways CODE CREW | USING TYPESCRIPT WITH ANGULARJS WORKSHOP ROADMAP
- 3. CODE CREW | USING TYPESCRIPT WITH ANGULARJS MEET YOUR INSTRUCTOR • Self-taught developer • Hip-hop Head, sneakerhead, part-time A&R, painter and photographer extraordinaire • Secretly in love with Finance and Economics • True Knicks, Yankees + Giants fan!!! • Enjoys teaching + mentoring • Organizer: Code Crew, MEAN NYC, I CODE NY • Languages: JavaScript, TypeScript, Ruby, Python, C, Objective-C, Swift, Haskell
- 4. CODE CREW | USING TYPESCRIPT WITH ANGULARJS CAREER ROADMAP
- 5. INTRO TO TYPESCRIPT CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 6. WHAT IS TYPESCRIPT? • Superset of JavaScript • JavaScript w/ Strong Typing + Other features • Made by Microsoft • Will be supported in Angular 2.0 CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 7. WHAT ARE TYPESCRIPT’S GOALS? • To statically identify constructs that are most likely to cause errors • To provide a mechanism for organizing large code bases • To be a language for large scale JavaScript applications CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 8. THE PROS • Optional strong typing for a dynamically typed language • Since it compiles down to JavaScript you can easily switch from JavaScript to plain JS • Allows us to use proposed ES6/2015 features now • Has a more OOP feel (good for Java/C#/etc. devs) • Easy for JavaScript developers to migrate to • Helps us write fewer unit tests • Runs on any browser, host or operating system CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 9. ES6 FEATURES NOW • Classes • Classical-style Inheritance • Modules • Arrow functions CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 10. MORE COOL STUFF! • Interfaces • Optionals • Generics • Type Inference • Declaration Files CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 11. THE CONS • “Slower” development time • Lack of support for some third-party libraries • An extra step by compiling code before running in browser • Still vulnerable to JavaScript gotchas so you need to know JavaScript! CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 12. ALTERNATIVES • Dart • CoffeeScript • ClojureScript • Fay CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 13. WHY USE TYPESCRIPT? • Building enterprise level applications • Helps prevent bugs by enforcing code organization • Makes your JS slightly easier to read • Enforces good coding practices • Helps make your JavaScript more Object-oriented CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 14. LET’S WRITE SOME CODE! CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 15. ANGULAR REVIEW CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 16. WHAT IS ANGULARJS? • Framework for building single-page applications • Based on service based architecture, data binding and dependency injection • Open source and maintained by Google • Is often referred to as being a MV* framework CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 17. ANGULAR PHILOSOPHY • What HTML would have been if it were created today • HTML should be dynamic • Code should be modular and easy to test • Components should be reusable CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 18. WHY USE ANGULAR? • Rapid development • Code organization • Performance • Easy to test • Community CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 19. MVVM DESIGN PATTERN BROWSER VIEW VIEWMODEL MODEL CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 20. DEPENDENCY INJECTION CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 21. SERVICE BASED ARCHITECTURE CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 22. FACTORY/SERVICE CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 23. LET’S BUILD OUR APP! CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 24. LESSONS LEARNED • Though it helps make your code more bullet-proof it does take longer to write code using TypeScript • The slightly slower development comes in handy when you have less bugs to fix • Don’t fall into the “any” trap • Run into some issues with writing test coverage on compiled TypeScript • Try not to mix JS and TypeScript together • Gradually migrate to TS and then convert your JS over CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 25. WHAT’S NEXT FOR TS + ANGULAR? • Will ship with Angular by default though you can still use Vanilla JS • Some AtScript features will merge with TypeScript • TypeScript will get more ES6 and ES7 features including generators, symbols, let/const, async/await • Heavy co-development between both Google and Microsoft CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 26. RESOURCES • DefinitelyTyped • TSLint • TypeScript Playground • TypeScript Reference • TypeScript Roadmap • IDEs: Visual Studio / Webstorm (have TypeScript support) • Angular.io • r/angularjs • r/typescript CODE CREW | USING TYPESCRIPT WITH ANGULARJS
- 27. THANKS MUCH!!! Jamal O’Garro NYC Camp 2015 / Front-end Camp July 16, 2015 Software Engineer + Instructor CODE CREW | USING TYPESCRIPT WITH ANGULARJS