Immutability is for UI, You and I

Immutability is for UI, You and I

97b6ab7f472930954c145ea8080b5742?s=128

Charles Lowell

March 30, 2016
Tweet

Transcript

  1. None
  2. None
  3. 2012

  4. Backbone The Frontside Pre-history

  5. Model-Centric Applications

  6. Reactivity via Property Observation

  7. Reactive Models

  8. Trouble in Paradise

  9. Chained Observers A.name -> B.capitalizedName -> C.fullName trouble in paradise

  10. Array Observers Do you even? trouble in paradise

  11. Shut Up With the Backbone Already!

  12. My Tools Ripe for Disruption trouble in paradise

  13. Ohai Ember.Object

  14. Ohai Ember.Object • observe(‘deeply.nested.properties’); • observe(‘array.@each.property’); • computed(‘mind.blown’);

  15. delete Backbone.Model; Backbone.Model = Ember.Object;

  16. Ember.Object was just a gateway drug

  17. gateway drug •Powerful view system (for the time) •Crazy Powerful

    Router •Layered Decoration of Models •Community with shared values
  18. I never looked back.

  19. 2015

  20. Trouble in Paradise

  21. My Tools Ripe for Disruption trouble in paradise

  22. Om and Omniscient Feeling lots of win here.

  23. Should I Stay or Should I Go?

  24. • Glimmer • Ember CLI • Addons flourishing • Evolution

    as a Platform Stay or Go
  25. Stay obvs

  26. Immutability Is for UI, You and I @cowboyd EmberConf 2016

  27. Back to the Story

  28. A Form Library

  29. A Form Library • progressive field revelation • local and

    remote validations • checklist validations (e.g. password rules) • validation dependencies • overall progress and percentage completion • dirty checking and wholistic submit button enabling • autobuffering of source objects • integrated with submission process (isSubmitting) ambitious ^ n
  30. A Complex Network of Related Objects A Form Library ambitious

    n ^
  31. I Couldn’t Even.

  32. Example

  33. Asynchrony Ate My Lunch

  34. Your Model Something Has Gone Terribly Wrong

  35. When did the Bad Happen? Your Model Time

  36. When did the Bad Happen? Your Model Time

  37. When did the Bad Happen? Your Model Time

  38. When did the Bad Happen? Your Model Time

  39. Debugging Was a Nightmare

  40. console.log(?!?)

  41. Computed Properties Were a Burden “validations.@each.rules.@each.isFulfilled”

  42. TypeError: Cannot read property '0' of null at firstKey (http://localhost:7357/assets/vendor.js:20674:35)

    at ChainNodePrototype.chain (http://localhost:7357/assets/vendor.js:20907:15) at ChainNodePrototype.chain (http://localhost:7357/assets/vendor.js:20909:14) at ChainNodePrototype.add (http://localhost:7357/assets/vendor.js:20861:12) at watchPath (http://localhost:7357/assets/vendor.js:29357:27) at watch (http://localhost:7357/assets/vendor.js:29415:9) at addDependentKeys (http://localhost:7357/assets/vendor.js:22657:9) at Descriptor.AliasedProperty.willWatch (http://localhost:7357/assets/vendor.js:19928:7) at watchKey (http://localhost:7357/assets/vendor.js:29249:44) at watch (http://localhost:7357/assets/vendor.js:29413:9) at addObserver (http://localhost:7357/assets/vendor.js:25847:7) at Object.merge.valueFn (http://localhost:7357/assets/vendor.js:49708:13) at Object.Stream.value (http://localhost:7357/assets/vendor.js:27932:36) at read (http://localhost:7357/assets/vendor.js:28171:23) at Object.merge.valueFn (http://localhost:7357/assets/vendor.js:27835:16) Et tu, CP?
  43. ambitious ^ n A Form Library That broke the camel’s

    back
  44. If You Can’t Go Through. Go Around.

  45. MVC revisited < /> < /> < /> < />

    < /> Model View
  46. V = f(M)

  47. To Change the View, Change the Model. this.set(‘someValue’, ‘totallyNewStuff’);

  48. To Change the View, Replace the Model.

  49. One Experience. Stream of States.

  50. Also Called: Movie

  51. Independent Frames

  52. None
  53. Whole Enchiladas

  54. Whole Enchilada

  55. A Fact Is Forever The Cure, 1917

  56. Content and Player a pattern emerges

  57. Player + Content = Experience

  58. http://bit.ly/1WOo1G0 http://bit.ly/1MshKKr http://bit.ly/1UO3t2C Your App The Movie Feature Presentation

  59. Password Form The Movie coming soon to an application near

    you
  60. 1. Extract The Model

  61. {{input type="password" action=(action "setPassword")}}
 <ul> 
 <li>{{input type="checkbox" checked=longEnough}} Long

    Enough?</li>
 <li>Rating: {{rating}}</li>
 </ul> {{input type="password" action=(action "setPassword")}}
 <ul> Password
 <li>{{input type="checkbox" checked=model.longEnough}} Long Enough?</li>
 <li>Rating: {{model.rating}}</li>
 </ul> Extract
  62. 2. Replace The Whole Model with Every Change

  63. actions: { 
 setPassword(text) {
 this.set('model.password', text);
 }
 } actions:

    {
 setPassword(text) {
 this.set('model', new PasswordForm({
 password: text
 }));
 }
 } Replace
  64. Ask Your Doctor If The new Keyword Is Right For

    You.
  65. { password: “”, longEnough: false, rating: “weak” } Password Form

    The Movie Opening Summer 2016 <password-form/> { password: “$$/l33t”, longEnough: true, rating: “moderate” } { password: “l33t”, longEnough: true, rating: “weak” }
  66. Small Change. Big Benefits

  67. Back to Basics unlock the power of the POJO

  68. Logging “Just Works” Back to Basics

  69. Remember Me? Back to Basics

  70. POJO: feels so good Back to Basics

  71. POJO: feels so good Back to Basics

  72. Bye-Bye Computed Properties Back to Basics

  73. Hello ES5 Getters Back to Basics

  74. POJO: feels so good Back to Basics class PasswordForm {


    get longEnough() {
 return this.text.length >= 4;
 }
 }
  75. The Stack is Back Back to Basics

  76. Harmony With The Platform Back to Basics

  77. Unambiguous Causality

  78. 1 event = 1 state Causality

  79. When did the Bad Happen? e1 e4 e3 e2 Causality

  80. When did the Bad Happen? e1 e4 e3 e2 Causality

  81. A Fact Is Forever The Bug, 2016 Causality

  82. Be an Information Creator

  83. State A State B Event 1 Preserve Information

  84. State B Event 1 Event Scope

  85. Clarity

  86. Undo/Redo that’ll be zero dollars please.

  87. { password: “”, longEnough: false, rating: “weak” } Password Form

    The Movie Opening Summer 2016 <password-form/> { password: “$$/l33t”, longEnough: true, rating: “moderate” } { password: “l33t”, longEnough: true, rating: “weak” } Undo/Redo
  88. http://bit.ly/1WOo1G0 http://bit.ly/1MshKKr http://bit.ly/1UO3t2C Your App The Movie Undo/Redo

  89. Sir, would you like a Holy Grail with your fries?

    Undo/Redo
  90. 2016

  91. Immutable Tomorrow

  92. Immutable Today

  93. Content / Player 1. Extract The Model into Its Own

    Object 2. Replace The entire model with each change Immutable Today
  94. Samples • https://github.com/thefrontside/ember-impagination • https://github.com/thefrontside/emberx-xml-http-request

  95. we’re hiring!

  96. None
  97. Thank You!