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

CODE CREW | USING TYPESCRIPT WITH ANGULARJS

CAREER ROADMAP

INTRO TO TYPESCRIPT

CODE CREW | USING TYPESCRIPT WITH ANGULARJS

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

LET’S WRITE SOME CODE!CODE CREW | USING TYPESCRIPT WITH ANGULARJS

ANGULAR REVIEW

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

MVVM DESIGN PATTERN

BROWSER

VIEW VIEWMODEL MODEL

CODE CREW | USING TYPESCRIPT WITH ANGULARJS

DEPENDENCY INJECTIONCODE CREW | USING TYPESCRIPT WITH ANGULARJS

SERVICE BASED ARCHITECTURECODE CREW | USING TYPESCRIPT WITH ANGULARJS

FACTORY/SERVICECODE CREW | USING TYPESCRIPT WITH ANGULARJS

LET’S BUILD OUR APP!

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

THANKS MUCH!!!

Jamal O’Garro NYC Camp 2015 / Front-end Camp July 16, 2015 Software Engineer + Instructor

CODE CREW | USING TYPESCRIPT WITH ANGULARJS