Graph Theory Behind Immutable JS

98195776df79590269541395c699f816?s=47 João Moura
September 26, 2016

Graph Theory Behind Immutable JS

Talk I presented on Ruby Conf BR 2016, showing how facebook brought one great concept of functional programming to a JS through the same structure used on languages like Scala and Clojure, implementing Graphs to handle with immutability and virtual copies on JS

98195776df79590269541395c699f816?s=128

João Moura

September 26, 2016
Tweet

Transcript

  1. IMMUTABLEJS Graph Theory

  2. Concepts before implementation. Code. “ ” - A Great Software

    Engineer
  3. Good Developers know how things work. “ ” Steve Souders.

    (O’Reilly Media 2013) Great Developers know why.
  4. Franzé Júnior Restless Software Engineer. Founder of @RemoteMeetup. Playing with

    code at @KundigoPro @franzejr
  5. None
  6. João Moura Lead Engineer at Packlane @joaomdmoura

  7. IMMUTABLEJS

  8. LISTS

  9. MAPS

  10. Stacks

  11. Records

  12. Ordered SET

  13. Ordered MAP

  14. ?

  15. Functional Programming

  16. None
  17. None
  18. None
  19. None
  20. Immutability makes it Easier

  21. None
  22. Give it five minutes https://signalvnoise.com/posts/3124-give-it-five-minutes

  23. TUTORIAL

  24. None
  25. 2016

  26. 2012

  27. Lee Byron Jordan Walke

  28. XHP HTML component framework for PHP

  29. React } HTML

  30. React } HTML NO DATA STRUCTURE

  31. React } HTML NO DATA STRUCTURE Track changes

  32. pure render mixin

  33. IMMUTABLEJS

  34. shouldComponentUpdate()

  35. None
  36. None
  37. None
  38. body 1st level 2nd level

  39. Structured datA | state

  40. Track Changes

  41. reconciliation

  42. None
  43. Key value observables

  44. Ember knockout backbone meteor

  45. Dirty Checking

  46. Angular

  47. Recreate DOM

  48. None
  49. } datA | state

  50. } datA | state

  51. None
  52. Virtual DoM

  53. None
  54. None
  55. None
  56. Trigger?

  57. Model vs View

  58. Model vs View

  59. Model } Ember Meteor

  60. View } React

  61. Simplicity

  62. IMMUTABLEJS

  63. IMMUTABLE

  64. IMMUTABLE persistent

  65. IMMUTABLE persistent structural sharing

  66. Graphs math!

  67. None
  68. None
  69. None
  70. TRIEs Ordered tree data structure

  71. A A1 A11 A12

  72. Auto complete lexicography search trees

  73. a n d r e b e e a an

    and are be bee
  74. a n d r e b e e a an

    and are be bee
  75. a n d r e b e e a an

    and are be bee
  76. a n d r e b e e a an

    and are be bee
  77. a n d r e b e e a an

    and are be bee
  78. IMMUTABLEJS

  79. IMMUTABLEJS Lists import { List } from "immutable" var list

    = List([1,2,3])
  80. IMMUTABLEJS Lists import { List } from "immutable" var list

    = List([1,2,3]) var list2 = list.push(4) list // [1,2,3] list2 === list // false list2 // [1,2,3,4]
  81. IMMUTABLEJS MAP var Immutable = require("immutable"); var map1 = Immutable.Map({

    a: 1, b: 2, c: 3 }); var map2 = map1.set('b', 50); map1.get('b') // 2 map2.get('b') // 50
  82. IMMUTABLEJS Raw JS objects var map1 = Immutable.Map({a: 1}); var

    obj = {b: 2}; var map3 = map1.merge(obj); map3.get('b') // 2
  83. Copies

  84. None
  85. None
  86. Structural sharing

  87. None
  88. None
  89. None
  90. Scala & Clojure

  91. Rãby?

  92. Hamster https://github.com/hamstergem/hamster person = Hamster::Hash[name: 'Joe', gender: :male] # =>

    Hamster::Hash[:name => 'Joe', :gender => :male]
  93. Crystal? https://github.com/lucaong/immutable

  94. MORE INFO https://github.com/franzejr/awesome-immutable-data

  95. Implementation as Trie Interface as LIST | Maps

  96. ?

  97. Concurrency

  98. Concurrency simplicity

  99. Concurrency simplicity Future

  100. None
  101. Stockholm Syndrome

  102. mutability as default

  103. Inertia

  104. Review!!!

  105. Immutable data structure Immutable data structure 1

  106. Structural Sharing Structural Sharing 2

  107. reduce complexity reduce Complexity 3

  108. @joaomdmoura BuildNewThings.com @franzejr