Date post: | 11-Aug-2015 |
Category: |
Technology |
Upload: | jamal-ogarro |
View: | 180 times |
Download: | 0 times |
USING TYPESCRIPT WITH ANGULARJSJamal O’Garro NYC Camp 2015 / Front-end Camp July 16, 2015 Software Engineer + Instructor
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
• TypeScript Overview
• AngularJS Review
• Sample App
• Takeaways
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
WORKSHOP ROADMAP
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
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
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
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
ES6 FEATURES NOW
• Classes
• Classical-style Inheritance
• Modules
• Arrow functions
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
MORE COOL STUFF!
• Interfaces
• Optionals
• Generics
• Type Inference
• Declaration Files
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
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
ALTERNATIVES
• Dart
• CoffeeScript
• ClojureScript
• Fay
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
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
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
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
WHY USE ANGULAR?
• Rapid development
• Code organization
• Performance
• Easy to test
• Community
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
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
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
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