Immutable In JavaScript

Transcript

1. Immutable in JavaScript - Kevin Zhuang@funP tech sharing
2. I am Kevin Zhuang / 
    You can find me at kevin@fed.tw Hello!
3.  18 24   
   2015 JS
4. “  Angular JS 
   React.js  React.js 
   Vue.js …
5. “  
      Framework
   
6. “  Immutable  JavaScript Object
    ( Mutable/Immutable ,shallow/deep copy… )
7. JavaScript-Technically Functional
8. Agenda ◉ Part I. Immutable ◉ Comparison after Shallow copy/deep copy in JavaScript ◉ React shouldComponentUpdate ◉ Immutable in JavaScript ◉ Why Immutable.js ◉ Part II. Functional Programming
9. Shallow copy/ deep copy
10. Shallow copy/ deep copy
11. JavaScript-Technically Functional
12. Swallow copy syntax sugar https://lihi.cc/yAzFi
13. Comparison
14. Swallow copy syntax sugar ◉  JS   deep copy  ◉ Recursive  copy ◉  JS deep compare   ◦  recursive  
    
15. “ ..
      Deep Copy/ Deep Compare ?
16. React shouldComponentUpdate
17. React shouldComponentUpdate
18. React shouldComponentUpdate ◉ shouldComponentUpdate  
     
    Deep Compare  re-render  
19. Agenda ◉ Shallow copy/ deep copy in JavaScript ◉ React shouldComponentUpdate ◉ Immutable in JavaScript ◉ Why Immutable.js
20. Immutable In JavaScript ◉ Immutable Data  ! (  !
    #% ' ◉ 
    #%( "
    '  $ &'(Immutable.js )
21. Mutable Data Mutable VS Immutable Immutable Data
22. Mutable Data is Dangerous ◉ https://codepen.io/kvzhuang/pen/Jpqvmr
23. Agenda ◉ Shallow copy/ deep copy in JavaScript ◉ React shouldComponentUpdate ◉ Immutable in JavaScript ◉ Why Immutable.js
24. Quick Intro of Immutable.js ◉ Facebook Lee Byron , ◉ React.js ◉ . React.js
25. Immutable.js ◉   JS /Map/Array … Mutable   Immutable 
    ◉  API   deep compare / deep copy.
26. Immutable.js structure sharing
27. Recap ◉ Shallow Copy / Deep Copy, ◦ Deep comparison ◉
     React shouldComponentUpdate ◉ Immutable / Mutable ◦ Mutable is Dangerous ◉ Immutable.js ◦ Structure Sharing
28. 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
29. 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 Function Programming
30. Function Programming 
     ◉ Avoid Mutation State ◉ Recursion ◉ Higher-Order Function ◉ Function Composition ◉ ….etc Part II Function Programming
31. ◉ Function Function ◦ Callback function ◉ Function ◦ ( ) ( ) Higher-Order Function
32. ◉    
    Function ◉  Currying ◦  N 
    function ◦  1 N  function
     Function Composition
33.  # JavaScript )$
    mutable data   JS   % Functional Programming
    "!(# + Redux 
    Selector  
    pure function
    '*- & Function Programming Immutable !(, Part II Function Programming
34. JavaScript-Technically Functional
35. Discussion Session
36. Thanks!