1 of 22

Developing in MapStore 2

​

ES6 Functionalities

React

Redux

MapStore 2

2 of 22

FRONT END EVOLVES

3 of 22

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

4 of 22

MapStore 2

  • Uses modern technologies and programming paradigms to:
    • Simplify programming / (unit) testing /debugging
    • Faster development / Maintainability
    • Less error prone / reproducible errors, when present
  • ECMAScript 6
  • React
  • Redux
  • RxJS

Let’s see all of them:

5 of 22

ES6 - Arrow Function

( ) => { /* some code */} // function without arguments

argument => value // one argument don’t need (), implicit return

argument => ({object: “to return”}) // return an object - use ({}) (not function body)

(arg1, arg2) => { return arg1 + arg2; } // more

() => this.fun() // this is the one in the definition scope

​

6 of 22

ES6 Variable declaration

const a = “MY_CONST”; // cannot be re-assigned new content, static check

let a = “myvar” // block scoped var (var was function scope)

7 of 22

ES6 spread operator

var params = [3,4]

var other = [ 1, 2, ...params ] // Spread operator for arrays, result ->[1,2,3,4]

const obj = { a: “a”, b: “b”}; const d=”d”;

const newObj = { ...obj, c: “c”, d}; // Spread operator for objects

// newObj = { a: “a”, b: “b”,c: “c”, d: “d”}

8 of 22

ES6 Destructuring

var other = [1,2,3,4]

var [a, ,b] = other; // array destructuring a =1, b=3

-----

var object = { A: “A”, B: “B”, C:”C”};

var {A, B} = object; // object destructuring. A= “A” , B= ”B”

9 of 22

ES6 Default Value - Rest operators

(x = 42) => x // default values for function parameter

obj = { a: “a”, b: “b”, c: “c”}

var {a, ...other} = obj; // rest operator for objects other= {b:”b”, c:”c”}, a=”a”

//… for functions

fun = function(a, ...b) {return b;} // rest parameter (array of last parameters)

  • fun(1,2,3,4); // return [2,3,4]

​

​

10 of 22

ES6 Array map reduce filter

[1,2,3].map(a => a +1) // [2,3,4]

[1,2,3].filter(a => a > 1) // [2,3]

reduce( (accumulator, current) => nextAccumulatorValue, initialAccValue)

  • [1,2,3].reduce( (a,b) => a+b, 0) // 6
    • (0 + 1)
    • (1 + 2)
    • (3 + 3)

Composition: [1,2,3].map( a => a + 1 ).filter(a => a > 1 ).reduce( (a,b) => a+b, 0)

11 of 22

ES6 - Promises

Pipeline of callbacks

  • Limitations
    • no cancellation
    • single value
    • complex flows of async actions still nested

12 of 22

React

A javascript library for building user interfaces

  • Declarative
  • Component based
  • JSX
  • functional in core
  • Optional state
  • Virtual Dom

​

​

13 of 22

Flux

APPLICATION ARCHITECTURE FOR BUILDING USER INTERFACES

​

14 of 22

Redux

Predictable state container for JavaScript apps.

  • Single source of truth
  • Read only immutable state
  • Pure functional state changes
  • Flux compatible, but less complex ( 1 store, no dispatcher)
  • Useful features: Time travel/live editing/debugger

​

15 of 22

React-Redux

Official React bindings for Redux:

  • connect function can map state and actionCreators to react properties
  • UI = f(state) - 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.

16 of 22

Example

​

17 of 22

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

18 of 22

Redux Middlewares - Redux Observable

Compose and cancel async actions to create side effects and more.

  • Pros:
    • less code
    • declarative
    • allow easy cancellation with rollback
    • complex flows becomes easy
  • Cons:
    • Need to learn RxJS

19 of 22

MapStore 2

  • Developed in ES6, using babel for compatibility with all browsers
  • Provides a plugin system to define pluggable components with their logic
  • Provide StandardApp and StandardStore to build your custom application with the plugin system in minutes
  • Provides the home and the map pages to render plugins
  • Autoload of plugins configuration

​

20 of 22

MapStore 2

Project Structure

web/client contains front-end (javascript)

  • components, actions, reducers, epics
  • plugins, that connect all together

​

Pages (managed by react-router) + some plugins are also plugins containers

​

Most of the times you don’t care about it.

You have only to develop your own plugins

21 of 22

MapStore 2 - Develop a plugin

  • Bind components to state and actions
  • declare used epics and reducers

If you want to use other plugin containers (Toolbar), configure it properly. (Each container has its own props to configure)

​

Then you have to :

  • declare the plugin in your plugins.js file
  • configure it in localConfig.js

​

22 of 22

Resources