Immutable In JavaScript

Slide 1

Slide 1 text

Immutable in JavaScript - Kevin Zhuang@funP tech sharing

Slide 2

Slide 2 text

I am Kevin Zhuang / You can find me at [email protected] Hello!

Slide 3

Slide 3 text

18 24 2015 JS

Slide 4

Slide 4 text

“ Angular JS React.js React.js Vue.js …

Slide 5

Slide 5 text

“ Framework

Slide 6

Slide 6 text

“ Immutable JavaScript Object ( Mutable/Immutable ,shallow/deep copy… )

Slide 7

Slide 7 text

JavaScript-Technically Functional

Slide 8

Slide 8 text

Agenda ◉ Part I. Immutable ◉ Comparison after Shallow copy/deep copy in JavaScript ◉ React shouldComponentUpdate ◉ Immutable in JavaScript ◉ Why Immutable.js ◉ Part II. Functional Programming

Slide 9

Slide 9 text

Shallow copy/ deep copy

Slide 10

Slide 10 text

Shallow copy/ deep copy

Slide 11

Slide 11 text

JavaScript-Technically Functional

Slide 12

Slide 12 text

Swallow copy syntax sugar https://lihi.cc/yAzFi

Slide 13

Slide 13 text

Comparison

Slide 14

Slide 14 text

Swallow copy syntax sugar ◉ JS deep copy ◉ Recursive copy ◉ JS deep compare ○ recursive

Slide 15

Slide 15 text

“ .. Deep Copy/ Deep Compare ?

Slide 16

Slide 16 text

React shouldComponentUpdate

Slide 17

Slide 17 text

React shouldComponentUpdate

Slide 18

Slide 18 text

React shouldComponentUpdate ◉ shouldComponentUpdate Deep Compare re-render

Slide 19

Slide 19 text

Agenda ◉ Shallow copy/ deep copy in JavaScript ◉ React shouldComponentUpdate ◉ Immutable in JavaScript ◉ Why Immutable.js

Slide 20

Slide 20 text

Immutable In JavaScript ◉ Immutable Data ! ( !#%' ◉ #%("' $&'(Immutable.js )

Slide 21

Slide 21 text

Mutable Data Mutable VS Immutable Immutable Data

Slide 22

Slide 22 text

Mutable Data is Dangerous ◉ https://codepen.io/kvzhuang/pen/Jpqvmr

Slide 23

Slide 23 text

Agenda ◉ Shallow copy/ deep copy in JavaScript ◉ React shouldComponentUpdate ◉ Immutable in JavaScript ◉ Why Immutable.js

Slide 24

Slide 24 text

Quick Intro of Immutable.js ◉ Facebook Lee Byron , ◉ React.js ◉ . React.js

Slide 25

Slide 25 text

Immutable.js ◉ JS /Map/Array … Mutable Immutable ◉ API deep compare / deep copy.

Slide 26

Slide 26 text

Immutable.js structure sharing

Slide 27

Slide 27 text

Recap ◉ Shallow Copy / Deep Copy, ○ Deep comparison ◉ React shouldComponentUpdate ◉ Immutable / Mutable ○ Mutable is Dangerous ◉ Immutable.js ○ Structure Sharing

Slide 28

Slide 28 text

Wiki In computer science, functional programming is a programming paradigm—a style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data In functional code, the output value of a function depends only on the arguments that are passed to the function, so calling a function f twice with the same value for an argument x produces the same result f(x) each time Part II Functional Programming

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Function Programming ◉ Avoid Mutation State ◉ Recursion ◉ Higher-Order Function ◉ Function Composition ◉ ….etc Part II Function Programming

Slide 31

Slide 31 text

◉ Function Function ○ Callback function ◉ Function ○ ( ) ( ) Higher-Order Function

Slide 32

Slide 32 text

◉ Function ◉ Currying ○ N function ○ 1 N function Function Composition

Slide 33

Slide 33 text

# JavaScript )$ mutable data JS % Functional Programming "!(# + Redux Selector pure function '*- & Function Programming Immutable !(, Part II Function Programming