Ember.js at Molecule – why we switched and how it helped us – Components

View Github Repository Open presentation in a new window

iterion

See all presentation from iterion

Ember.js at Molecule – why we switched and how it helped us – Components

0 0

molecule-ember

Molecule Ember presentation for houston.js

On Github iterion / molecule-ember

Ember.js at Molecule

why we switched and how it helped us

Adam Sunderland / @iterion

http://iterion.github.io/molecule-ember

warn that I'm unabashedly using some rubyisms throughout

Who we are

Issues/Limitations (for us)

  • Hard to split up into smaller pieces
  • Limited control of computed properties
  • No support for routing or urls
  • Server interaction is completely on us
Knockout really isn't great for a SPA - it's great if you want to add sprinkles of UI interactivity Sharind data between components was hard.

Enter

Components

  • Similar to Angular directives or Knockout bindingHandlers
  • Isolated
  • Reusable
  • Model complex user interactions
more general 95% use case of directives less messy than bindingHandlers

Example

Simple Note Component

Component

Molecule.NotesFieldComponent = Em.Component.extend
  actions:
    toggleNotes: ->
      @toggleProperty('showNotes')

Component Template

<div class="notes-label" {{action toggleNotes}}>
  {{yield}}
</div>
{{#if showNotes}}
<div class="notes-body">
  {{textarea value=notes}}
</div>
{{/if}}

Using the component

{{#notes-field notes=trade.notes}}
  <i class="icon-file-text"></i>
  <span>Notes</span>
{{/notes-field}}

Component

Molecule.NotesFieldComponent = Em.Component.extend
  actions:
    toggleNotes: ->
      @toggleProperty('showNotes')

Component Template

<div class="notes-label" {{action toggleNotes}}>
  {{yield}}
</div>
{{#if showNotes}}
<div class="notes-body">
  {{textarea value=notes}}
</div>
{{/if}}

Using the component

{{#notes-field notes=trade.notes}}
  <i class="icon-file-text"></i>
  <span>Notes</span>
{{/notes-field}}

Better code reuse throughout our app (we used the above in 3 different places and on two different models)

seems simple, but it's something we really just didn't have a easy way to accomplish in knockout knockout has binding handlers, but they didn't work well

Computed Properties

This...

self.productName = ko.computed(function () {
  if (self.product()) {
    return self.product().name;
  }
});
always null checking - mixing functions and properties

Became:

productName: function () {
  return this.get('product.name');
}.property('product.name')

Or, even more concise:

productName: Ember.computed.alias 'product.name'
verbosity trade off - more consistency - 'method missing' support - fine-grained computed property update

Knockout

<span data-bind="text: productName"><span>

Ember

{{productName}}
better template support - ember translates that to spans in your html but that should be resolved through a updated version of handlebars

Ember Routing

Turns this:

http://molecule.io/trades

into

  • loading of assets
  • rendering of ui
Being able to link to things is really important

Routes are hierarchical

ApplicationRoute > TradesRoute > TradesIndexRoute

we can load things at each level of the route application route loads products & entities

Usability win for SPA

allows our users to link directly to screens in our app

Reduced asset loading

we're not loading data unless we need to display it

Ember Data

wow

much conventions

so confuse

?

?

?

ActiveModelSerializer in Ruby

DS.ActiveModelSerializer in Ember-Data

It just works

DS.ActiveModelSerializer is pretty new, previously we had to write our own serializers embedded document support is pretty new

Find all trades

@store.find('trade')

trade by id

@store.find('trade', 1)

arbitrary query

@store.find('trade', {product: "Ethane"})

promises

@store.find('trade', 1).then (trade) ->
  #called after ajax finishes and model is created
  trade.get('price')

updates

trade.set('price', 25);
trade.get('isDirty'); #true
trade.save();

Ember is omakase

convention over configuration

opinionated

Gotchas

Testing

It was hard, but now it's much easier with ember-testing

Third-Party Libraries

No Ember "gems"

Limited libraries/components to use

Sometimes hard to integrate with existing stuff (bootstrap in particular is a pain)

ember routes with link-to sets an active class doesn't play well with dropdowns in bootstrap

Good Resources

Thanks

Adam Sunderland / @iterion

doge language consultant: Hana Wang / @hahahanahaha

this presentation on github