Workshop of TypeScript and Angular given in the XXX GUL Conferences (Linux User Group) of Carlos III University of Madrid (UC3M).

1. GUL-UC3M
TypeScript
& Angular
Workshop
30 de Marzo de 2017
Isabel Matas Rabadán & José Manuel García García

2. GUL-UC3M
TypeScript
& Angular
Workshop
30 de Marzo de 2017
Isabel Matas Rabadán & José Manuel García García

3. Who are we?
Isabel Matas
BecArquitecta JavaScript
Sema García
Arquitecto JavaScript

4. Disclaimer
• Time & Materials
• Workshop room
• Initial approach
• Tight slot time
• Not required laptop
• Github tags to train at home
• Session recorded?

5. Agenda
• TypeScript
• Angular v4.0
• The 7 key core concepts
• Angular CLI
• Our Angular app

6. TypeScript

7. TypeScript

8. Introduction to TypeScript
• Features:
• Generated code 100% compatible with browsers.
• Strongly typed.
• Compilation time errors.
• Intellisense.
• Interfaces.
• Classes.
• Method and properties modifiers (private, protected…).
• Constructors and static members.
• Getters/Setters.
• Inheritance.
• Modules.
• Imports, exports.
• Generics.
• Debugging with sourcemaps.
• Definition type files (*.d.ts).

9. Introduction to TypeScript
TYPESCRIPT… WHO ARE YOU?
Shedding light on JavaScript
to whom have lost hope…

10. Introduction to TypeScript
• Poner capturas del VC y decir sólo una frase como mica: “Ha venido
para salvarme” -> hero
• Que me avises de los errores
• Que me escribas el código
• Que te asegures que los demás se enteran (refactor)
• Que me resuelvas mis dudas (doc)
TYPESCRIPT… WHO ARE YOU?
has definetely come to…

11. Introduction to TypeScript
…Warn us the errors
during coding phase
(compilation time)…

12. Introduction to TypeScript
…Tell us what we can do…

13. Introduction to TypeScript
…Help us when we’ve forgot something…

14. Introduction to TypeScript

15. Introduction to TypeScript
• TypeScript will always transpile to
JavaScript, even when there are
warnings.
• An app could have simulateously
.ts and .js code (as usually is).
• A TypeScript project has to have a
file called tsconfig.json in its root
path folder.

16. Introduction to TypeScript
Some fields of interest:
• declaration: generates corresponding d.ts files.
• emitDecoratorMetadata: emit design-type metadata for decorated declarations in source.
• experimentalDecorators: enables experimental support for ES7 decorators.
• lib: specify library file to be included in the compilation. Requires TypeScript version 2.0 or later.
• module: specify module code generation: 'none', 'CommonJS', 'Amd', 'System', 'UMD', or 'es2015'.
• moduleResolution: specifies module resolution strategy: 'node' (Node) or 'classic' (TypeScript pre 1.6).
• outDir: redirect output structure to the directory.
• sourceMap: generates corresponding '.map' file.
• target: specify ECMAScript target version. Permitted values are 'es3', 'es5', 'es2015', 'es2016', 'es2017' or 'esnext'.
• typeRoots: specify list of directory for type definition files to be include. Requires TypeScript version 2.0 or later.
• types: type declaration files to be included in compilation. Requires TypeScript version 2.0 or later.
• strictNullChecks: enable strict null checks. Requires TypeScript version 2.0 or later.
More info: here.

17. Introduction to TypeScript
• It’s mandatory to declare the attributes.
• We can use visibility modifiers: public
(default), protected & private.
• To reduce the boilerplate, the
constructor params are consider as
attributes too:
• It will be valid while the variables
passed as arguments satisfy its
structure…

18. Introduction to TypeScript
• Writing classes, interfaces
and object types.
• An interface can be consider
like a object type, because
guarantee its structure.
• If a class does not satisfy the
interface structure, it will
throw an error…

19. Introduction to TypeScript
• Writing a subclass (inheritance)
that implements an interface
(“d” avoids the
compilation error)

20. Introduction to TypeScript
• Writing an union and type guards.
• How can control this situation?
!
!
"

21. Introduction to TypeScript
• TypeScript supports getters and setters as a way of intercepting
accesses to a member of an object. This give us a way of having finer-
grained control over how a member is accessed on each object.

22. Introduction to TypeScript
• TypeScript also allow us to define static properties/methods besides instance
properties/methods.
• We can use it directly without an instance:
• And also we can create instance from it:

23. Introduction to TypeScript
• Access modifiers: private, protected, public, readonly
• Private: when a member is marked as private, it cannot be accessed from outside of
its containing class.
• Protected: this modifiers acts much like the private modifier with the exception that
protected elements can also be accessed by instances of deriving classes. That
element could be used from within an instance method of subclass. Even a
constructor could be marked as protected, what that means that class cannot be
instantiated outside of its containing class, but can be extended.
• Public: by default, if we don’t specify any modifier, each property and method will be
public. All public elements will be visible for anyone.
• Readonly: properties marked as readonly must be initialized at their declaration or in
the constructor. Later will be not possible.

24. Who comes from AngularJS?

25. Angular… WTH is that?
• From framework to platform
Dependency
Injection
Decorators Zones
Compile Change Render
Material Mobile Universal
CLI
Language
Services
Augury
ngUpgrade
Router
Animation
i18n

26. Angular… WTH is that?
• Full Development Stack

27. SEMVER and
Angular versions
• 2.0
• 2.1
• 2.2
• 2.3
• 2.4
• 3.0
• 4.0

28. The super-tool to the rescue: Angular CLI
• Angular CLI (Command Line Interface)
• Recom.: Node 7.x & NPM 4.x
• npm install –g @angular/cli

29. The 7 magnificent
Modules
Components
Templates
Data binding
Structural directives
Services
Dependency Injection

30. Create a new project
ng new project-name
–style=scss

31. Create a new
project

32. What things there are here?
Link
index.html
bundle.js
Link references
styles.(s)css
styles
references
src

33. The basic dependency flow
Link
import
polyfills.ts
main.ts
Vendor.js
3rd libraries
Root Component (bundle.js)
app.module.ts
app.component.ts
app.routes.ts
import

34. Application bootstrapping
• All app has, at least, one module: the root one

35. Application
bootstrapping
• The root AppModule
(convention name).
• Module marked with
@NgModule decorator.
• Angular uses decorators
to know how to compile
and launch the app.

36. Application
bootstrapping
Declarations:
• Which components will
belong to that module.
• The only declarable
elements allowed here
are components, pipes
and directives.

37. Application
bootstrapping
Imports:
• The declaration of which
other modules the
current module needs.
• We can import either
core Angular modules or
our ones.

38. Application
bootstrapping
Imports:
• Usually, we will only
have one bootstrapped
component.
• This bootstrap process
defines the components
that are instantiated.

39. Application bootstrapping
Root component

40. Modules and AppModule
• Module concept / strategy.
• The Angular modules are similar to ES6 modules.
• A module is the minimum unit of compilation and distribution of Angular
elements, defining the compilation context of their components.
• Will help us to organize our code, grouping the elements with related
features, making them more reusable.
• One component can only be declared in one module.
• Many Angular third libraries are available as NgModule’s to import them
inside of “declaration” property of one component.
• The AppModule will always declare the AppComponent by convention.

41. AppComponent
Component tree.

42. AppComponent

43. AppComponent
• @Component decorator:
• selector
• template[Url]
• style[Urls]
• providers
• animations
• …

44. Components and
WebComponents

45. Components
• Components benefits.
• Reusability.
• Complexity.
• Legibility.
• Testability.

47. Bindings
• Ways to databind

48. Adding another component
ng g component XXX

49. All our components
• App Component
• Home Component
• Series Component
• CharacterComponent

50. Angular
Services

51. Services
• The underlying concept: dependency injection (DI).
• “Don’t call you us, we will do it”.
• Benefits:
• Elements decoupled.
• Separated logic.
• Reusable.
• Testable.

52. Adding a service
ng g service XXX

53. Metadata for a service
• Add @Injectable() decorator:

54. Registering a service
• Add it to providers entry property in a module:

55. Using a service
• Import the service.
• Add the dependency to the constructor of caller class:

56. Using core services
• And if we need more dependencies?
• Remember that if we specify some params in constructor, it will
create those attributes directly.
• Remember to add also the module (if it belongs to a differente
module).

58. Navigating / Angular Router
• App composed by different components/views

59. Navigating / Router
• Defining routes

60. Navigating / Router
• Where will be rendered my components?

61. Navigating / Router
• Now we have configuration, render area, but… how can we navigate
to another component?

62. RouterModule
• The last step is to define an special type of module for the routes, and
to make theme available for the rest of the app:

63. Navigating / Router
• To access to URL params we can do:
• Inject the service.
• Once injected the service:

64. Calling to backend

65. Calling to backend
• As recommendation (due to its asynchronous nature), all backend
calls should be encapsulated inside a service.
• The service offers us the main verbs: GET, POST, PUT, DELETE.
• The most important part is that, by default, the result is an
observable instead of a promise. So, the import needed are:

66. Calling to backend
• After that, inside the service, the implementation:
Remember: As we are using TypeScript, we should specify the return
type of the function.

67. Calling to backend
• But, that observable… How can I use it?
• Of course, we can chain more Rx operators:

68. Observables: the reactive way

69. Observables in a reactive world
• Reactive programming is programming with asynchronous data
streams: event buses or typical click events are really an async event
stream, on which we can observe and do stuff.

70. Observable example
• Gray boxes are functions that transforms one
stream into another.
• First, we accumulate clicks in lists, whenever
250ms of silence has happened (throttle).
• This result is a stream of lists, from which we
apply other operation to map each list to an
integer matching its length.
• Finally, we ignore 1 integers using the filter oper.
• Now we can suscribe (or listen) to it, and react
how we wish with those values.

71. Observable or promise?
• Why observables are better than promises?
Promises
• Handles a single event
when an async operation
completes or fails
• Returns a single value
• Supported in ES6
Observables
• Handles a stream (zero or
more than zero events)
• Offers the features
provided by promises and
more
• They are cancellable
• They have useful operators
like map, reduce, retry...

72. Observable or promise?
Pipes: transforming data

73. Adding a pipe
ng g pipe XXX

74. Pipes
• The purpose of a pipe is to transform displayed values within a
template.
• One advantage of pipes consist of a way to write display-values
transformations that we can declare in HTML templates, inside of the
interpolation expression.

75. Pipes
• The pipes can be parameterized:
• The pipes also can be chained:

76. Pipes
• Imagine you want to count the length of a string to output it to the
user.
• A pipe can be the perfect solution, because it can be reused
anywhere without be coupled to a component.

78. Testing… testing everywhere
• The testing is, sometimes, unfortunately underestimated, but it is as
important (or even more) than the proper code. Moreover, some
authors say that the testing code is another way of documentation.
• To summarize the idea of testing, it will help us in three ways:
1.They are a kind of assert that our changes don’t break the current code
(regression tests).
2.We can check the behavior of the code when it is used in a different way, or
when an error occurs, or even working under abnormal conditions.
3.If test some part of the application becomes in a very hard task, it could reflect a
mistake in design and implementation phases.

79. Testing… testing everywhere
• Testing stack:
• karma (test runner).
• Angular testing utilities.
• jasmine (behavior driven development testing framework).
• protractor (e2e testing framework).

80. Testing… testing everywhere
• npm test…
• Automatically launch a browser.
• The changes in the code recompile automatically and tests are executed
again.

81. Testing… testing everywhere
• We can debug the tests too.

82. Testing… testing everywhere
• Type of testing:
• Unit tests.
• Isolated tests.
• E2E, end-to-end, integration tests.

83. More QA (Quality Assurance)
• Static analyse: linting.
• Code coverage.

84. Repo
• GitHub: https://github.com/semagarcia
• Releases:
• Workshop demo updated to Angular 4.0.0.
• Bootstrap & FontAwesome
• Added json-server and mocked endpoint
• Created all components
• Implemented router and routes
• Updated npm start scripts
• Added character view
• Added series view
• Added unit tests

85. Dudas, preguntas, insultos…