1. Juriy Bura

2. Glad to meet you! My name’s Juriy Bura
Solution Architect, EPAM Switzerland
Building software for 11 years
youtube.com/c/juriybura
@juriy

3. This course is for you if
You know JavaScript and web development
You have no or little knowledge about React

4. Course Plan Advanced JavaScript Concepts Introduction to React
UI Router and REST
Redux
Asynchronous models, Reactive programming
Testing React

5. Course Logistics 6 sessions, 2 hours each
Coffee and -break: 10 minutes
Video is recorded
Home assignments: about 1.5 hours per session
Face to face coding exam after the course
Questions always welcome

6. Day 1 Advanced JavaScript

7. Modern JavaScript Defined by ECMA-262 standard (ECMAScript)
Evolving standard (ES-2015, …16, …17, …18)
Created by TC-39 committee
Made of “proposals” that go through phases 0 to 4
Support can be checked here:

8. Strict Mode – converting mistakes to errors
Globals without var
No caller and callee
Assigning to unassignable (NaN, Infinity)
Setting properties on primitives
Forbids with
eval() does not introduce new variables into scope

9. Strict Mode in ES-2015: not only errors
Hoisting of block-scoped functions
Supporting tail-recursion optimisation
These behaviors can’t be (or very hard) to emulate by transpilers.

10. Overview of ES5

11. Fundamental parts Objects Functions Context (this) Prototypes
Asynchronous patterns

12. Objects

13. JavaScript Object Made of properties
Each property has a key and a value
Properties can be enumerable or not enumerable
Properties can be own or inherited from prototypes

14. Setting properties With simple assignment: user.name = 'Bob'
Via Object.defineProperty()
ES-2015: via Object.assign()

15. Object.defineProperty()
Fine grain control over property – pass property descriptor Object.defineProperty(person, 'salary', { configurable: false, enumerable: false, writable: false, value: });

16. Getters and setters
Custom accessors – rarely used in practice var sq = 0; Object.defineProperty(person, 'squares', { get: function() { return sq; }, set: function(val) { sq = val*val; }, enumerable: true, configurable: true }); person.squares = 2; console.log(person.squares); // prints 4

17. Enumerating properties
Object.keys() – own enumerable props
for .. in – own + inherited enumerable
Object.getOwnPropertyNames() – all own properties
Object.hasOwnProperty() – check if prop exists
in operator – check if prop exists on prototype chain

18. New methods in ES-2017
Object.entries() – own enumerable key-value pairs
Object.values() – own enumerable property values

19. Restricting objects
Object.preventExtensions() – new properties can’t be added
Object.seal() –no new props, existing props not configurable (can change values still)
Object.freeze() – nothing can be changed
Object.isSealed(), Object.isFrozen(), Object.isExtensible() – to check

20. Functions

21. Short overview Functions are objects
Can accept any number of arguments
Any function can be used as a constructor (new)
Have "this" keyword that is totally different from Java 
arguments, length
name (ES-2015)

22. Context (this)

23. What is ‘this’ Depends on how function is called
Can be explicitly set with apply() and call()
Can be bound with bind()
Can be very tricky to debug

24. Prototypes

25. Prototypes Getting from new Object.create()
ES-2015: Object.setPrototypeOf() – not recommended(!)
Object.getPrototypeOf()

26. ECMAScript 6 (2015)

27. Block Scoped Bindings let and const Hoisting and Temporal Dead Zone
Loop behavior
No re-declaration
const on objects – prevent modification of ref, not content
TDZ is never referred by standard explicitly. It is a convenience name invented by the community to mark the state of a variable

28. Strings Solving multilingual problems
Template strings and substitution
Tagged templates

29. Arrow Functions Clean syntax No prototype (can’t be constructor)
No own this, super, arguments
this can’t be changed
Designed as throwaway functions
Great for processing arrays

30. Functions Rest arguments Default arguments .name property
Block-scoped functions are supported
- Functions
                - default parameter values
                - explicitly passing 'undefined' to force-fill default parameter
                - default parameters support expressions as value (can call function).

31. Spread operator Used to expand the array into value list
fn.apply(null, args);  fn(…args)
Can be used inside array literals
const a = [1, …b, …c, 2]

32. Destructuring

33. Simple example

34. Can have defaults

35. Can destructure to different names

36. Can destructure complex structures

37. Also works with arrays

38. Class Syntax

39. Improved class syntax

40. Much simpler inheritance

41. Arrays

42. New array methods Array.of(1, 2); Array.from(arguments);
find() and findIndex()
Typed Arrays and Array Buffers are now part of a standard

43. Promises

44. Modules

45. Module standards in JS world
AMD
CommonJS
ES-6 (ES-2015 modules)

46. Module syntax

47. Not covered today Symbols Generators and Iterators
async .. await (ES-2017)
Collections: Sets, Maps, WeakMap
Proxies and reflection
Shared Memory

48. Transpilation and Packing

49. What is Transpilation
Converting source code of one language to the source code of another language
Converting ES-2017 to ES-5 (or ES-2015)
Example:
Most notable: Babel, TypeScript

50. Setting up Babel > npm install --save-dev babel-cli babel-core
Add npm script: "build": "babel src -d dist”
Add npm modules (plugins): babel-plugin-transform-runtime babel-plugin-transform-object-rest-spread
Add npm modules for presets: babel-preset-es babel-preset-react

51. Add .babelrc file
{ "plugins": ["transform-runtime", "transform-object-rest- spread"], "presets": ["es2015", "react"] }

52. Webpack

53. Setting up Webpack npm install --save-dev webpack babel-loader path
Add npm script: "build": "webpack"

54. Configure (minimalistic) webpack.config.js
const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve('dist'), filename: 'app-bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, };

55. Summary 1 2 3 4