Living Immutably with Ember

From idea to action, using immutability in Ember applications.

Transcript

2. Code
3. Handwaving
4. Codewaving
5. I Said • Don’t use a component’s properties in its template • Don’t use computed properties • Don’t use Ember.Object at all
6. But the Devil is in the Details Code
7. Living Immutably @cowboyd GEMConf SF 2016
8. Why vs How
9. So What’s the Big Idea?
10. Content First
11. Content as Stream
12. Model Content as Stream
13. Independent Frames
14. One Experience
15. Going Practical Implementing a File Upload
16. UX the movie
17. UX the movie
18. UX the content
19. An Upload at Rest
20. Start State isStarted: false isEnded: false file: null progress: 0
21. UX the state { isStarted: false, isEnded: false, file: null, progress: 0 } ??? Start
22. A Wild File Object Appears { isStarted: false, isEnded: false, file: null, progress: 0 } selectFile(File) Start
23. New Target Acquired
24. Uploading State isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0
25. UX the state { isStarted: false, isEnded: false, file: null, progress: 0 } selectFile(File) Start { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0 } Uploading ???
26. Progress is Made isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0 Uploading progress(Event)
27. Uploading Pt 2 isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0.75
28. UX the state { isStarted: false, isEnded: false, file: null, progress: 0 } selectFile(File) Start { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0 } Uploading { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0.75 } Uploading ??? progress(Event)
29. Final Count Down isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0.75 Uploading loadend()
30. Success isStarted: true, isEnded: true, file: File(‘puppies.gif’), progress: 1
31. UX the state { isStarted: false, isEnded: false, file: null, progress: 0 } selectFile(File) Start { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0 } Uploading { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0.75 } Uploading progress(Event) { isStarted: true, isEnded: true, file: File(), progress: 1 } loadend() Success
32. Code Timeout (a moment for us)
33. Content First
34. UX the state { isStarted: false, isEnded: false, file: null, progress: 0 } selectFile(File) Start { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0 } Uploading { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0.75 } Uploading progress(Event) { isStarted: true, isEnded: true, file: File(), progress: 1 } loadend() Success
35. Start Uploading Success selectFile(File) progress(Event) loadend() UX the state machine
36. A Radical New Framework for describing immutable states
37. Ecma Script 6
38. Start Uploading Success selectFile(File) progress(Event) loadend() Turn this into ES6
39. Start Start at the beginning
40. Start the JavaScripts! class Start {
 constructor() {
 this.isStarted = false;
 this.isEnded = false;
 this.file = null;
 this.progress = 0;
 }
 }

41. Start State isStarted: false isEnded: false file: null progress: 0
42. JavaScript representation class Start {
 constructor() {
 this.isStarted = false;
 this.isEnded = false;
 this.file = null;
 this.progress = 0;
 }
 }

43. Start Uploading selectFile(File) Where do we go from here?
44. Transition method class Start {
 constructor() {
 this.isStarted = false;
 this.isEnded = false;
 this.file = null;
 this.progress = 0;
 }
 
 selectFile(file) {
 return new Uploading(file);
 }
 }
45. Transition method • Never updates existing state • Always returns a new state
46. Start Uploading selectFile(File) Transition to Uploading
47. Transition method class Start {
 constructor() {
 this.isStarted = false;
 this.isEnded = false;
 this.file = null;
 this.progress = 0;
 }
 
 selectFile(file) {
 return new Uploading(file);
 }
 }
48. Uploading representation class Uploading {
 constructor(file, progress = 0) {
 this.isStarted = true;
 this.isEnded = false;
 this.file = file;
 this.progress = progress;
 }
 }
49. Uploading State isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0
50. Uploading Success progress(Event) loadend() Uploading two ways out
51. Uploading representation class Uploading {
 constructor(file, progress = 0) {
 this.isStarted = true;
 this.isEnded = false;
 this.file = file;
 this.progress = progress;
 } loaded() {
 return new Success(this.file);
 }
 progress(event) {
 let ratio = event.loaded / event.total)
 return new Uploading(this.file, ratio);
 }
 }
52. That’s some Code
53. Start Uploading Success selectFile(File) progress(Event) loadend() Your JavaScript
54. Building a Player
55. A Player • tracks the current frame of content • maps events from the user into state transitions • maps events from external sources like the network
56. Playing with Ember
57. There are a lot of options right now
58. export default Ember.Component.extend({
 url: 'https://posttestserver.com',
 model: new Start(),
 actions: {
 fileChosen(file) {
 this.set('model', this.get('model').selectFile(file));
 let xhr = this.xhr = new XMLHttpRequest();
 xhr.upload.onprogress = (event)=> {
 this.set('model', this.get('model').progress(event));
 };
 xhr.onload = ()=> {
 this.set('model', this.get('model').sucess());
 };
 xhr.open('POST', this.get('url'), true);
 xhr.send(file);
 }
 }
 }); A Player Component
59. export default Ember.Component.extend({
 url: 'https://posttestserver.com',
 model: new Start(),
 actions: {
 fileChosen(file) {
 this.set('model', this.get('model').selectFile(file));
 let xhr = this.xhr = new XMLHttpRequest();
 xhr.upload.onprogress = (event)=> {
 this.set('model', this.get('model').progress(event));
 };
 xhr.onload = ()=> {
 this.set('model', this.get('model').sucess());
 };
 xhr.open('POST', this.get('url'), true);
 xhr.send(file);
 }
 }
 }); A Player Component
60. Explore Techniques
61. Content is King — Bill Gates
62. UX the movie
63. UX the movie
64. UX the state { isStarted: false, isEnded: false, file: null, progress: 0 } selectFile(File) Start { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0 } Uploading { isStarted: true, isEnded: false, file: File(‘puppies.gif’), progress: 0.75 } Uploading progress(Event) { isStarted: true, isEnded: true, file: File(), progress: 1 } loadend() Success
65. Start Uploading Success selectFile(File) progress(Event) loadend() UX the state machine
66. ES6 Classes class Uploading {
 constructor(file, progress = 0) {
 this.isStarted = true;
 this.isEnded = false;
 this.file = file;
 this.progress = progress;
 } loaded() {
 return new Success(this.file);
 }
 progress(event) {
 let ratio = event.loaded / event.total)
 return new Uploading(this.file, ratio);
 }
 }
67. Content is King — Bill Gates
68. Thanks