JAVASCRIPT EVOLVES WITH IT ● Need for a more expressive language ○ do more with less (lines of code) ○ simpler structures (for async) ● Web Applications more complex than ever ○ Mobile/Desktop ○ High Reliability ○ Soft Failing ○ Caching ○ Offline ○ Notification ○ ... ● → Need for libraries that allow to manage complexity
MapStore ● Uses modern technologies and programming paradigms to: ○ Simplify programming / (unit) testing /debugging ○ Faster development / Maintainability ○ Less error prone / reproducible errors, when present ● ECMAScript (Official name of JavaScript) ● React ● Redux ● RxJS Let’s see them in the next slides !
ES6 - Class A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method. class Polygon { constructor (height, width) { this .h = height; this .w = width; } test() { console.log ("The height of the polygon: " , this.h) console.log ("The width of the polygon: " , this.w) } } //creating an instance var polygon = new Polygon(10, 20); polygon.test();
ES6 - Arrow Function Concise syntax for writing function expressions. Arrow functions are anonymous and change the way this binds in functions. // function without arguments () => { /* some code */ } // one argument don’t need parenthesis (), implicit return argument => value // return an object - use ({}) (not function body) argument => ({ object: “to return” })(arg1, arg2) => { return arg1 + arg2; } // this is the this at the definition scope () => this.fun()
ES6 Variable declaration Other than classical var, you can declare variables using const and let // cannot be re-assigned new content, static check const a = “MY_CONST”; // block scoped var (var was function scope) let a = “myvar”
ES11 Optional Chaining Shortener for null or undefined (nullish) checks, returning `undefined` if something is nullish in the chain. // if `obj.attr1` doesn’t have `attr2`, you have an error const a = obj.attr1.attr2.attr3; // to prevent issues you usually needed to do do something like this... const a = obj.attr1 && attr1.attr2 && attr1.attr2.attr3; // with optional chaining const a = obj?.attr1?.attr2?.attr3; // it can be used for: obj?.prop // object props obj?.["expr"] // object props accessed with [] operator arr?.[1] // arrays func?.(args) // functions, prevents errors if function is undefined on function call. const obj = { attr1: { attr2: { attr3: "hello" } } }
ES11 - Nullish cohelish Returns default values in case of nullish. Is more secure than the usual && || checks, because it works also in case of values 0 or empty strings (that are false) const a = null; const foo = a ?? 'default string'; console.log(foo); // expected output: "default string" const baz = 0 ?? 42; console.log(baz); // expected output: 0
ES6 spread operator Spread operator allows an iterable to expand in places where 0+ arguments are expected. Is mostly used for array or objects. var array = [3, 4] // Spread operator for arrays var newArray = [1, 2, ...array] // result ->[1,2,3,4] (new Array) const obj = { a: “a”, b: “b” }; const d =”d”; // Spread operator for objects const newObj = { ...obj, c: “c”, d }; // newObj = { a: “a”, b: “b”,c: “c”, d: “d”}
ES6 Destructuring Destructuring assignment allows us to “unpack” arrays or objects into a bunch of variables. Is mostly used for array or objects. var array = [1, 2, 3, 4] // array destructuring var [a, ,b] = array; // same of var a = array[0]; var b = array[2] // a =1, b=3 // ------ // object destructuring var object = { A: “A”, B: “B”, C: ”C” }; var { A, B } = object; // same of var A = object.A; var B = object.B // A= “A” , B= ”B”
ES6 Array map/filter/reduce map create a new array, same length, with result of function filter creates a new array with only the elements that reduce( (accumulator, current) => nextAccumulatorValue, initialAccumulatorValue) ○ (acc: 0 + next: 1) 1st Iteration ○ (acc: 1 + next: 2) 2nd Iteration ○ (acc: 3 + next: 3) 3rd Iteration Composition: [1, 2, 3].filter(a => a > 1) // [2,3] [1, 2, 3].reduce((a, b) => a + b, 0) // 6 [1, 2, 3].map(a => a + 1).filter(a => a > 1).reduce((a, b) => a + b, 0) // result ?? [1, 2, 3].map(a => a + 1) // [2,3,4]
ES6 - Promise Create a Promise (native) Axios (library used in MapStore) Chaining Promise: Pattern to represent and handle incomplete operations. var promise = new Promise(function (resolve, reject) { resolve(42); // here you can imagine ajax requests, setTimeout ... }); promise.then((function (result) { console.log(result); // 42 })); var ajaxCall = axios.get(“URL”); // axios.get returns a new Promise ajaxCall.then((function (result) { console.log(result); // ajax response object })); axios.get(“URL_1”) .then((function (result_1) { return axios.get(“URL_2”); // if return a Promise, you can chain then calls }).then((function (result_2) { console.log(result_2); }).catch(function (error) { … }); // handle errors from the chain
Implementation of Flux. Predictable state container for JavaScript apps. ● Single source of truth ● Read only immutable state ● Pure functional state changes ● Flux compatible, less complex ● Useful features ○ Time travel ○ Live Editing ○ debugger ○ middlewares Redux
React-Redux Official React bindings for Redux: ● connect function can map: ○ state to props to React properties (mapping function, mapStateToProps, is a state “selector”) ○ action dispatch to React properties (as function handlers) ● - UI is a pure function of the state ● When the state changes, if properties changed, a new rendering (of the virtual dom) is performed updating the view. CMP is an enhanced component (Container) that will re-render when props change. const CMP = connect(mapStateToProps, mapDispatchToProps)(Component);
Redux Middlewares - Thunk Write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters. ● Pros: ○ simple ● Cons: ○ no cancellation (if you use promises) ○ no easy composition ○ can not intercept actions ○ complex async flows becomes hard to write and maintain Example 1: // action type export const INCREMENT_COUNTER = "INCREMENT_COUNTER" ; // action creator export function increment() { return { type: INCREMENT_COUNTER }; } // thunk export function delayIncrement () { return (dispatch) => { setTimeout(() => { dispatch(increment); // dispatches the action }, 1000); // after 1 second }; } // then the thunk function will be binded to the store, for instance with connect’s mapDispatchToProp, and called, for instance after a mouse click on some component.
Redux Middlewares - Thunk Write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters. ● Pros: ○ simple ● Cons: ○ no cancellation (if you use promises) ○ no easy composition ○ can not intercept actions ○ complex async flows becomes hard to write and maintain Example 2: // action type export const RESULTS_RECEIVED = "RESULTS_RECEIVED" ; // action creator export function resultReceived (data) { return { type: RESULTS_RECEIVED , data }; } // thunk export function doRequest(url) { return (dispatch) => { axios .get(url).then((data) => { dispatch(resultReceived (data)); }); }; } // then the thunk function will be binded to the store, for insance with connect mapDispatchToProp, and called, for instance after a mouse click on some component.
simboss
tatsuru
cheng_wei_chen
10xinc
linedevth
.png){kind=icon}
pharma_x_tech
yamasatimi
caddi_eng
bengo4com
terahide
mashiike
autifyhq
k_koheyi
jonrohan
bluesmoon
zakiyama
productmarketing
holman
lynnandtonic
csswizardry
gr2m
addyosmani
akosma
kevinliebholz
colly