Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Functional Ember

Functional Ember

Paul Chavard

July 04, 2015

More Decks by Paul Chavard

Other Decks in Programming


  1. “[…] 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
  2. <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>
  3. 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
  4. A functional relationship is a relationship in which the value

    of one variable varies with changes in the values of a second variable.
  5. 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.
  6. "If someone says to you that JavaScript is a functional

    language, slap him in the face.” Garrett Smith
  7. // app/helpers/get-in.js import Ember from 'ember'; const { makeBoundHelper }

    = Ember.HTMLBars; export default makeBoundHelper(function([scope, path]) { return scope.getIn(path.split('.')); });
  8. <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>
  9. 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.