1. Angular Typescript RequireJS By Chris van Beek and Frank Folsche Luminis Arnhem

2. About Chris Enthousiastic about technology! All kinds Software Architect at Luminis Arnhem B.V. Trainer at Luminis Arnhem B.V. Specializes in Microsoft technology:.Net, Azure, Windows, Interactive Front-ends Twitter: @cbeek Blog: http://arnhem.luminis.eu/chris-van-beekhttp://arnhem.luminis.eu/chris-van-beek Email: chris.vanbeek@luminis.eu

3. About Frank Enthousiastic about technology! All kinds Software Engineer at Luminis Arnhem B.V. Specializes in Microsoft technology:.Net, Azure, Windows, Interactive Front-ends Email: frank.folsche@luminis.eu

4. Introduction Lots of experience with Angular projects Every project we learn about new tools and better ways A lot of best practices are born from these experiences which I would like to share!

5. Contents AngularJS Basics Typescript and Angular RequireJS

6. AngularJS basics The environment, databinding and Model-View-Whatever

7. Why AngularJS? JavaScript has issues ‑ Global scope with many global functions ‑ Few language constructs for structuring code ‑ It was intended to be a scripting language ‑ Weakly typed 7

8. Why AngularJS? Other JavaScript libraries help, but aren’t suitable for large applications ‑ ‑ A fantastic tool for cross-browser compatible DOM interaction and AJAX requests ‑ No help for structuring or testing your code ‑ ‑ A great framework for data-binding ‑ It’s only one small piece of everything you need when building a large application. No help for testing your code 8

9. Why AngularJS? AngularJS to the rescue! ‑ Suitable for large applications in JavaScript ‑ Based on MVC for structuring your application ‑ Extends HTML ‑ Cross-browser compatible ‑ Testable from the ground up 9

10. Demo: Without Angular

11. AngularJS features AngularJS to the rescue! ‑ Two-way databinding through a declarative syntax ‑ Model-View-Presenter architecture ‑ Routing and deeplinking ‑ Dependency injection ‑ Everything is testable 11

12. Getting started 12 Hello Angular! 4 + 8 = {{4 + 8}} Gives AngularJS the green light AngularJS expression, result is 12 Instead of hosting this file yourself, you can also use a “Content Delivery Network”

13. Data State Glue Behavior & logic Imperative JavaScript + AngularJS User interface Declarative HTML Getting started: MVW architecture AngularJS believes in seperation of concerns 13 View Scope Controller

14. Data State Glue Behavior & logic Imperative JavaScript + AngularJS User interface Declarative HTML Getting started: MVW architecture 14 View Scope Controller var demoModule = angular.module('demoModule', []); demoModule.controller('demoController', function($scope) { $scope.name = 'world'; }); Hello {{name}}

15. Getting started: Directives (1/4) ng-repeat iterates over an array 15 {{car.make}} {{car.model}} var demoModule = angular.module('demoModule', []); demoModule.controller('demoController', function($scope) { $scope.cars = [ { make: 'Renault', model: 'Megane' }, { make: 'Audi', model: 'A4' }, { make: 'Toyota', model: 'Auris' } ]; });

16. Getting started: Directives (2/4) ng-click executes a function when clicking 16 Tells ng-click to execute the doSomething() function on our $scope This looks like JavaScript, but it’s an Angular expression that closely resembles JavaScript var demoModule = angular.module('demoModule', []); demoModule.controller('demoController', function($scope) { $scope.doSomething = function() { console.log('Hello world!'); }; });

17. Getting started: Directives (3/4) ng-model offers two-way databinding 17 Input: {{filter}} var demoModule = angular.module('demoModule', []); demoModule.controller('demoController', function($scope) { $scope.doSomething = function() { console.log('Filter: ' + $scope.filter); }; }); ng-model creates this property when typing in the input field

18. Getting started: Directives (4/4) ng-show and ng-hide to show or hide an element 18 {{name}} var demoModule = angular.module('demoModule', []); demoModule.controller('demoController', function($scope) { $scope.name = 'Socrates'; });

19. Demo time Calculator demo Courses With Angular 19

20. Questions 20

21. Contents AngularJS Typescript RequireJS

22. What is TypeScript? Alternative to Javascript because: TypeScript is EcmaScript 6 (at lease for a big part). TypeScript = Javascript. TypeScript compiles to ES 3 or ES 5 Javascript. ALL Existing libs work with TypeScript (Including Angular) Runs on the browser but also in Node..(Compiles to Javascript)

23. Why? Better tooling support because it has static typing (like Java and C#). Has ECMA 6 Syntax. Unlike Javascript, Typescript is object oriented. Has language support for modules. Object Oriented Javascript is hard!

24. Object Oriented JavaScript

25. Object Prototype Objects can have a prototype, it can also be null sometimes. Objects that share a prototype All inherit the same data But they cannot directly alter them, setting a prop with the name will hide the prototypes property Adding properties to the prototype of a function, causes these properties to inherit to objects created with this function as constructor, not to the function itself. Thus, setting the prototype, does not always causes inheritance. In other words, the prototype of the constructor function, becomes the prototype of the object. Javascript will look up in the prototype chain (prototype of prototype so on) until it finds a property. JavaScript25

26. Using prototypes JavaScript26

27. When invoking a functions with the new operator, the this pointer inside a function will point to a newly created object Functions that make use of this are called Constructor functions and usually written capitalized The newly created object’s prototype will be set to the prototype of the constructor function JavaScript27 Constructor Functions //Person revisited function Person(name, age) { this.name = name; this.age = age; this.sayHello = function () { console.log(this.name); }; } var person = new Person('Chris', 31); person.sayHello();

28. Better to use prototype for methods. This way we can mimic object orientation and the function implementation does not get copied to every object. Method that use private vars (closures) or parameters from the constructor function should be defined on the object itself. JavaScript28 Constructor Functions and prototypes //Person revisited function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function () { console.log(this.name); }; var person = new Person('Chris', 31); person.sayHello();

29. Uses an immediately executed anonymous function to keep everything together Makes sure we don’t pollute the global scope JavaScript29 Problem: Object oriented Javascript var Person = (function () { function Person(name, age) { this._name = name; this._age = age; } Person.prototype.sayHello = function () { }; return Person; })(); var person = new Person("chris", 31);

30. Uses local vars and closures to create private variables JavaScript30 Create a proper class var Person = (function () { function Person(name, age) { var _name = name; var _age = age; this.setName = function (name) { _name = name; }; this.getName = function () { return _name }; } Person.prototype.sayHello = function () { }; return Person; })();

31. Create an OO inheritance sub class JavaScript31 var Teacher=(function(){ function Teacher(name, age, courses) { Person.call(this, name, age); this.courses = courses; } Teacher.prototype = Object.create(Person.prototype); Teacher.prototype.constructor = Employee; Teacher.prototype.sayHello = function () { var result = Person.prototype.sayHello.call(this); result += ‘ from a cool teacher’; return result; } return Teacher })();

32. Demo: Object Oriented Courses Revisited

33. Enter TypeScript

34. Types: String: string Number: number Boolean: boolean “var”: any important! Array: number[] of Array Enum: enum Color {Blue,Red,Green} : var c : Color = Color.Blue; Any, bypasses type checking

35. Any Opts out type checking You can also cast to any using to opt out type checking var notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // okay, definitely a boolean

36. OO in Javascript var Person = (function () { function Person(name, age) { this._name = name; this._age = age; } Person.prototype.sayHello = function () { }; return Person; })(); var person = new Person("chris", 31);

37. OO in TypeScript Has a structural type system. Does not compare types, but compares the structure of the different types If walks like a duck, sounds like a duck, it propably is..

38. Classes Very familiar if you are used to C# or Java Allows us to build object oriented applications class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } var greeter = new Greeter("world");

39. Inheritance class Animal { name: string; constructor(theName: string) { this.name = theName; } move(meters: number = 0) { alert(this.name + " moved " + meters + "m."); } } class Snake extends Animal { constructor(name: string) { super(name); } move(meters = 5) { alert("Slithering..."); super.move(meters); } }

40. Interfaces Ducktyping! A type does not have to explicitly implement an interface to be compatible. Can contain almost everything Optional properties with ? Hybrid types Function type Static type vs instance type

41. Simple interfaces Performs ducktyping Can have optional properties interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" } ; printLabel(myObj); interface SquareConfig { color?: string; width?: number; }

42. Implementing interfaces Interfaces describe the public side of a class Interfaces can also extend eachother, just like in Java and C# interface SearchFunc { (source: string, subString: string): boolean; } interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; }

43. Demo TypeScript Playground and Courses with TypeScript Types Code completion Generated Code

44. Modules Internal modules External modules

45. Module pattern Javascript var eu; (function(ns) { var privateVar = 37; function privateFunction() { }; ns.publicVar = 3.141592; ns.publicFunction = function (){ }; }((eu = eu|| {}, eu.luminis = eu.luminis || {})));

46. Internal modules TypeScript Use reference path to order these files Uses the Module keyword to create Modules. You must tell the compiler if you want internal or external modules, default is no module system, which means internal Test.Greetr

47. Demo: Internal modules TypeScript Use Modules with the courses app See the starting script tag hell This does not solve the dependency hell

48. Questions 48

49. Contents AngularJS Basics Typescript and Angular RequireJS

50. External Modules Support for CommonJS (for Node.js) en AMD/Require (for web apps). Module keyword not needed. Every file is a module “import someModule=require(‘path’)” to specify dependencies. AMD needs an AMD compliant loader like require.js. You need to bootstrap this yourself Use this when you want dependency management or lazy loading (RequireJS)

51. Module Loaders Javascript has no module system Script tags in your browser in the right order are a lot of hassle RequireJS or Browserify Typescript supports RequireJS!

52. RequireJS Requires a specific structure in your javascript files Can also handle libraries that know nothing about Require (like Angular) Offers fysical modules (files) instead of logical modules that Angular offers

53. RequireJS Demo RequireJS and Typescript Typescript code Look at the compiled typescript code Look at the combination of typescript and Angular, Controller and Service

54. Front-end build We are used to MSBuild or Jenkins Front-end build tools support more and typical web build tasks Typescript compile SSAS compile Uglyify and concat Angular tweaks (like TemplateCache!) All runs on NodeJS plugins

55. Front-end build Gulp ‑ Faster(in mem streams vs copy and open/closing files) ‑ Code instead of config ‑ Is about streams that get sent from one task to another. Mix and match tasks that work on streams Grunt ‑ Config over code ‑ A lot of tasks executed in a certain order ‑ Copies a lot of files

56. RequireJS Demo Sample from real world project (anonymised) Look at the Html without require Demo with Require Config for RequireJS

57. Demo gulp Look at gulp file and look at best practices Typescript compile RequireJs Concat Mangling Angular template caching

58. Using existing frameworks Every Javascript framework is a typescript framework Usable because of the any type and the declare keyword To really benefit of typescript, use.d files Zie: https://github.com/borisyankov/DefinitelyTypedhttps://github.com/borisyankov/DefinitelyTyped

59. Questions 59