Building Event-Driven Javascript Applications

Transcript

1. Event Driven JS
2. Keith Bingman www.wantering.com @kbingman
3. https://github.com/kbingman/ event-driven-apps
4. Node / NPM
5. Some Notes on the Code
6. ECMAScript 6 (ES6)
7. Polyfills
8. Promises ES6 Modules
9. Why Build with Events?
10. • Scales Better • Easy Decoupled • Encourages a Modular Architecture for Easy Reuse • Easy to Test
11. Small Modules Do one thing and do it well.
12. DOM Events & Listeners
13. $(node).on('click', dosomething);
14. node.addEventListener(‘click’, dosomething);
15. $(document).on('click', dosomething);
16. $(document).on('myevent', dosomething);
17. $(document).trigger('myevent');
18. $(document).trigger('myevent', { results: […] });
19. $(document).trigger(‘helloworld', { name: ‘Keith’ });
20. $(document).on('helloworld', sayhello); function sayhello(e, data) { alert(‘Hello ‘ + data.name;); }
21. $(document).on(‘received:grams’, renderInstagrams);
22. $(document).trigger(‘received:grams’, { grams: [data from instagram] });
23. The Hardest Question in CS
24. What should I call this?
25. ‘received:grams’
26. ui data request — ui:needsData ui user action — ui:followAction ui request — ui:closeModal ui moment — ui:columnoptionsShown data — data:calculateResults
27. Exercises
28. Application State
29. Scaling jQuery Apps
30. [code]
35. [code]
36. Exercises
37. Modules and Closure
38. Browserify and NPM
40. #nodejs + #browserify + #npm is hands down the greatest tool chain front end developers have ever had. - Paolo Fragomeni (@hij1nx)
41. ./package.json
42. "scripts": { "test": "…", "build:js": "browserify src.js > app.js", "watch:js": "watchify app.js -o app.js --debug", "start": "serve public & npm run watch:js" }
43. ES6 Modules
44. import $ from 'jquery'; import Delorean from 'delorean';
45. Babel https://babeljs.io/
47. browserify source.js -t babelify > app.js
48. Exercises
49. Event Driven Testing
50. Good News, Everyone! It’s Easy
51. (Once You Have It Setup)
52. More Good News! I did it for you
53. Karma Formerly Testactular. No joke. http://karma-runner.github.io/
54. Mocha http://mochajs.org/
56. Sinon Build spies, mocks and stubs
57. beforeEach(function() { spy = sinon.spy(); $(document).on('testEvent', spy); });
58. it('should listen for an event', function() { $(document).trigger('testEvent'); expect(spy.called).to.be.true; });
59. it('should transfer a payload', function() { $(document).trigger('testEvent', { thisisfun: true }); expect(spy.args[0][1]).to.equal({ thisisfun: true }); });
60. False
61. it('should transfer a payload', function() { $(document).trigger('testEvent', { thisisfun: true }); expect(spy.args[0][1]).to.deep.equal({ thisisfun: true }); });
62. WAT https://www.destroyallsoftware.com/talks/wat
63. Exercises
64. The Flux Pattern
65. Flux Capacitor
66. Uni-Directional Flow
68. Store: A postbox Dispatcher: The postman, drops mail in the postboxes View (or Component): Box owner, checks the box for mail Action Creator: The post office, manages postmen
69. Dispatcher Pub / Sub
70. var AppDispatcher = _.extend(Dispatcher.prototype, { handleViewAction: function(action){ this.dispatch(action); } });
71. Stores
72. dispatcherIndex: Dispatcher.register(function(payload){ switch(payload.actionType) { case 'UPDATE_QUERY': _setStateQuery(payload); break; case 'UPDATE_RECORDS': _setStateRecords(payload); break; default: return true; } instagramStore.emitChange(); return true; })
73. Action Creators
74. search: function (query) { AppDispatcher.handleViewAction({ actionType: 'UPDATE_QUERY', query: query }); SearchAPI.searchInstagram(query) .done(actionCreator.receiveInstagramData) .error(actionCreator.handleAPIError); },
75. Virtual DOM
76. Basically a Small Lightweight React
77. Lets You Render the State, worrying about the changes for you
79. Event Driven Libraries
80. Flight Tiny Event Driven Modular Library
81. Separation of Concerns The Twitter Flight Pattern
82. Uses Small Reusable Components
83. Components Should be Stateless
84. UI Modules Handles User Interaction and Rendering
85. Data Modules Handles API / Server Interaction and Calculations
86. Built on DOM Events
87. NPM Event Emmiter A Basic Event Emitter from the Backend
88. Native Node module, but with a polyfill for the front end
89. npm install events import events from ‘events’
90. ReactiveJS (RX) Not to be confused with React
91. Backbone An oldie but a goodie
92. Immutable.js
93. Exercises
94. Delorean.js
95. Delorean.js Because I like the name (and it is simple)
96. http://github.com/ pathtodeloreanjs
97. import $ from 'jquery'; import Delorean from 'delorean';
98. Action Creators
99. var ActionCreator = { addItem: function () { // We'll going to call dispatcher methods. AppDispatcher.addItem({…}); } };
100. Dispatching Actions
101. var AppDispatcher = DeLorean.Flux.createDispatcher({ addItem: function (data) { this.dispatch('addItem', data); } });
102. var AppDispatcher = DeLorean.Flux.createDispatcher({ addItem: function (data) { this.dispatch('addItem', data); }, getStores: function () { return { myStore: myStore } } });
103. Stores to Manage Data
104. var AppStore = DeLorean.Flux.createStore({ list: [], actions: { // Remember the `dispatch('addItem')` 'addItem': 'addItemMethod' }, addItemMethod: function (data) { this.list.push('ITEM: ' + data.random); // You need to say your store is changed. this.emit('change'); } });
105. Exercises
106. References
107. Building Modular Applications Without a Framework https://medium.com/node-js-javascript/working-without- frameworks-part-1-b948f281f782 What is Flux https://medium.com/brigade-engineering/what-is-the-flux- application-architecture-b57ebca85b9e Boiling React Down to a Few Lines of jQuery http://hackflow.com/blog/2015/03/08/boiling-react-down-to- few-lines-in-jquery/ Event Driven Applications with Backbone https://code.mixpanel.com/2015/04/08/straightening-our- backbone-a-lesson-in-event-driven-ui-development/
108. Learn Javascript Essentials https://medium.com/javascript-scene/learn-javascript- b631a4af11f2 Architecture of ES6 Modules http://ponyfoo.com/articles/architecture-of-ecmascript-6- modules