Slide 1

Slide 1 text

Functional Ember Paul Chavard @tchak13

Slide 2

Slide 2 text

CapitaineTrain

Slide 3

Slide 3 text

What is EmberJS?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Ember 2.0

Slide 6

Slide 6 text

URLs (Router)

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Declarative UIs

Slide 9

Slide 9 text

“[…] 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

Slide 10

Slide 10 text

• Handlebars • HTMLBars • Glimmer

Slide 11

Slide 11 text

    {{#each tickets as |ticket|}}
  • {{input type="checkbox" checked=ticket.isSelected change=(action select ticket)}}
    {{ticket.origin.name}} -> {{ticket.destination.name}}
    Departure: {{moment ticket.departure}}
    Arrival: {{moment ticket.arrival}}
  • {{/each}}

Slide 12

Slide 12 text

Tooling

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

LiveReload + Errors

Slide 15

Slide 15 text

Ember Inspector

Slide 16

Slide 16 text

Tests

Slide 17

Slide 17 text

Frameworks are about Commoditization

Slide 18

Slide 18 text

“Boring”

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ES 6 / 7 / 2015

Slide 22

Slide 22 text

BabelJS

Slide 23

Slide 23 text

• Modules • Promise • @@iterator / Generators • => • …

Slide 24

Slide 24 text

Functional Relationship

Slide 25

Slide 25 text

A functional relationship is a relationship in which the value of one variable varies with changes in the values of a second variable.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

Functional Paradigms

Slide 28

Slide 28 text

"If someone says to you that JavaScript is a functional language, slap him in the face.” Garrett Smith

Slide 29

Slide 29 text

• data driven architecture • immutable data • pure functions/components • @@iterator / transducers • type systems

Slide 30

Slide 30 text

Immutable.js bower install immutable

Slide 31

Slide 31 text

// app/helpers/get-in.js import Ember from 'ember'; const { makeBoundHelper } = Ember.HTMLBars; export default makeBoundHelper(function([scope, path]) { return scope.getIn(path.split('.')); });

Slide 32

Slide 32 text

    {{#each tickets as |ticket index|}}
  • {{input type="checkbox" checked=(get-in ticket 'isSelected') change=(action select index)}}
    {{get-in ticket 'origin.name'}} -> {{get-in ticket 'destination.name'}}
    Departure: {{moment (get-in ticket 'departure')}}
    Arrival: {{moment (get-in ticket 'arrival')}}
  • {{/each}}

Slide 33

Slide 33 text

Components

Slide 34

Slide 34 text

Helpers

Slide 35

Slide 35 text

Actions

Slide 36

Slide 36 text

@@iterator

Slide 37

Slide 37 text

transducers bower install transducers-js

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

Flow npm install babel-plugin-typecheck

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

What’s next?

Slide 42

Slide 42 text

FastBoot

Slide 43

Slide 43 text

Thank You

Slide 44

Slide 44 text

Questions ? @tchak13