Dmytro Kochergin Angular 2 and New Java Script Technologies

1. www.luxoft.co
m
Angular 2
+ new JavaScript technologies
Dmitriy Kochergin
21 November 2017
partially used slides from Luxoft Training Center training Angular2

2. www.luxoft.co
m
Horizon

3. www.luxoft.co
m
Contents
• Angular 2
• MEAN stack
• Node.js
• NPM
• Express
• JavaScript, EcmaScript, TypeScript
• RXJS

4. www.luxoft.co
m

5. www.luxoft.co
m

6. www.luxoft.co
m

7. www.luxoft.co
m

8. www.luxoft.co
m

9. www.luxoft.co
m
Thinking in components

10. www.luxoft.co
m
Thinking in components

11. www.luxoft.co
m
MVC

12. www.luxoft.co
m
Angular 2 features: Two-way data binding

13. www.luxoft.co
m
Angular 2 features: Dependency injection

14. www.luxoft.co
m
Angular 2 features: Directives

15. www.luxoft.co
m
Angular 2 features: Modules

16. www.luxoft.co
m
Angular 2 features: AOT

17. www.luxoft.co
m

18. www.luxoft.co
m
Angular 2 development environment

19. www.luxoft.co
m
MEAN stack

20. www.luxoft.co
m
What is Node.JS
• v8 JavaScript engine
• More performant than Java Rhino and Nashorn
• Event driven
• Non-blocking standard libraries
• Most APIs speak streams
• Provides a package manager and module
system
• JavaScript on client and server
• Code reuse

21. www.luxoft.co
m
Old school JS programming
• For example we need jquery in frontend
• Go to jquery site
• Download *.js or *.min.js
• Put it to js folder
• Add it to index.html head section
• Repeat steps for upgrade

22. www.luxoft.co
m
NPM – Node Package Manager
• Handles and resolves dependencies
• More than 475,000 modules available
• package.json – dependencies definition
• npm install
• node_modules

23. www.luxoft.co
m
Angular CLI
• ng create (component, html, scss)
• ng serve
- localhost:4200

24. www.luxoft.co
m
Routes with Express
• Respond to HTTP requests with a callback
• Supports variable placement in routes
• Easy to serve JSON
• Example
app.get("/greeting", function(req,res) {
res.send("Hello, "+req.query.name+"!");
});

25. www.luxoft.co
m
Express routing examples
app.get(’/users/:id?’, function(req,res) {
var id = req.params.id;
res.send( id ? 'user'+id : 'users’);
});
app.post(’/users/:id.:format’, function(req,res) {
var id = req.params.id;
var format = req.params.format;
res.send( 'user '+id+ ’ format : ’+format);
});

26. www.luxoft.co
m
risingstars2016.js.org/

27. www.luxoft.co
m
risingstars2016.js.org/

28. www.luxoft.co
m
JavaScript
EcmaScript
Typescript

29. www.luxoft.co
m
EcmaScript
• ECMAScript: A language standardized by ECMA International and overseen by the TC39
committee
• JavaScript: The commonly used name for implementations of the ECMAScript standard.
• ECMAScript 5 (ES5): The 5th edition of ECMAScript (2009). Current standard in modern browsers.
• ECMAScript 2015 (ES6): Partially implemented in most modern browsers.
See compatibility at kangax.github.io/compat-table/es6/
• ECMAScript 2016 (ES7): Very small release.
• ECMAScript 2017 (ES8): On the edge.
• ECMAScript 2018 (ES9): Future is near.
• Babel can transpile ES2015+ scripts to older versions of JS.

30. www.luxoft.co
m
ES 2015 new features
• let
• const
• Arrow function
• Computed Property Names
• Array matching, Object matching
• Array: new functions
• Object.assign
• String searching
• Set, Map, WeakSet/WeakMap
• String Interpolation
• New number functions
• Default Parameter Values
• Rest Parameters
• Spread Operator
• Classes
• Inheritance
• Static members
• Getters/setters
• Modules import/export
• Promises (built in), Generators

31. www.luxoft.co
m
TypeScript
• TypeScript is a free and open-source programming language
developed and maintained by Microsoft.
Anders Hejlsberg, lead architect of C# creator of
Delphi and Turbo Pascal,
author of TypeScript

32. www.luxoft.co
m
TypeScript
• TypeScript is a strict superset of JavaScript,
and adds optional static typing, any
existing JavaScript programs are also valid
TypeScript programs.

33. www.luxoft.co
m

34. www.luxoft.co
m

35. www.luxoft.co
m
Typescript features
• Data types: Boolean, Number, String, Array, Enum, Any, Void
• Interfaces (optional properties, function types, array types, class types, extending)
• Annotations
• Classes, Abstract classes
• Private/Public/Protected: Public by default
• Accessors
• Static properties
• Functions (Optional parameters, Default parameters, Rest parameters)
• Overloading
• Generics
• Decorators, Tuples, Type assertions, Async/await

36. www.luxoft.co
m
Interfaces
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
var myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

37. www.luxoft.co
m
Classes
class Animal {
private name: string;
constructor(theName: string) {
this.name = theName;
}
move(meters: number) {
alert(this.name + " moved " + meters + "m.");
}
}

38. www.luxoft.co
m
Reactive programming with
RXJS

39. www.luxoft.co
m
RXJS

40. www.luxoft.co
m
Angular 2 HTTP call
private http: Http;
…
this.http.get('http://swapi.co/api/films')
.map((response: Response) => response.json() as FilmModel[])
.do(data => console.log(JSON.stringify(data)))
.catch(this.handleError);

41. www.luxoft.co
m
Observable
Register/Unregister
(wants to watch TV or not)
can cause backpressure
1
2 Push events
(stream of pictures)
Observable
Observable
Observer
Observer

42. www.luxoft.co
m
RXJS
• Think how data should flow instead
of what you do to make it flow

43. www.luxoft.co
m
RXJS Example
productsStream
.filter(product => product.price > 30)
.map(product => product.price)
.forEach(price => console.log(`Prices higher than $30: ${price}`);
for (Product product: productsList) {
if (product.price > 30) {
console.log(`Prices higher than $30: ` + product.price;
}
}

44. www.luxoft.co
m
Reactive approach
• Clean and understandable
• Focusing on result, not on algorithm
• Complex operations natively from the box (debounce and throttle)
• Backpressure handling
• Skip or get every “n” element (e.g. trading data)
• Abort processing of not needed data (user disconnected)
• Complex debug
• Learning curve

45. www.luxoft.co
m
Reactive approach

46. www.luxoft.co
m

47. www.luxoft.co
m
THANK YOU