Functional Ember

1. Functional Ember Paul Chavard @tchak13
2. CapitaineTrain
3. What is EmberJS?
5. Ember 2.0
6. URLs (Router)
8. Declarative UIs
9. “[…] The reason I built Handlebars in the first place wasn't an attempt to create a "logicless" template engine. I build Handlebars so that I could start from zero and build up syntactic structures that would support data binding from the get-go.” Yehuda Katz
10. • Handlebars • HTMLBars • Glimmer
11. <ul> {{#each tickets as |ticket|}} <li> {{input type="checkbox" checked=ticket.isSelected change=(action select ticket)}} <div class="od"> {{ticket.origin.name}} -> {{ticket.destination.name}} </div> <div class="departure"> Departure: {{moment ticket.departure}} </div> <div class="arrival"> Arrival: {{moment ticket.arrival}} </div> </li> {{/each}} </ul>
12. Tooling
13. ember new my-beautiful-app cd my-beautiful-app ember install ember-moment ember generate route index ember generate component my-stuff ember test ember build ember deploy ember-cli
14. LiveReload + Errors
15. Ember Inspector
16. Tests
17. Frameworks are about Commoditization
18. “Boring”
21. ES 6 / 7 / 2015
22. BabelJS
23. • Modules • Promise • @@iterator / Generators • => • …
24. Functional Relationship
25. A functional relationship is a relationship in which the value of one variable varies with changes in the values of a second variable.
26. A relationship is considered functional when there is respect, accountability and resilience. A functional relationship offers an emotionally safe environment for the people involved and respects privacy of space.
27. Functional Paradigms
28. "If someone says to you that JavaScript is a functional language, slap him in the face.” Garrett Smith
29. • data driven architecture • immutable data • pure functions/components • @@iterator / transducers • type systems
30. Immutable.js bower install immutable
31. // app/helpers/get-in.js import Ember from 'ember'; const { makeBoundHelper } = Ember.HTMLBars; export default makeBoundHelper(function([scope, path]) { return scope.getIn(path.split('.')); });
32. <ul> {{#each tickets as |ticket index|}} <li> {{input type="checkbox" checked=(get-in ticket 'isSelected') change=(action select index)}} <div> {{get-in ticket 'origin.name'}} -> {{get-in ticket 'destination.name'}} </div> <div> Departure: {{moment (get-in ticket 'departure')}} </div> <div> Arrival: {{moment (get-in ticket 'arrival')}} </div> </li> {{/each}} </ul>
33. Components
34. Helpers
35. Actions
36. @@iterator
37. transducers bower install transducers-js
38. Transducers are composable algorithmic transformations. They are independent from the context of their input and output sources and specify only the essence of the transformation in terms of an individual element.
39. Flow npm install babel-plugin-typecheck
41. What’s next?
42. FastBoot
43. Thank You
44. Questions ? @tchak13