Ember: Hey, this looks interesting...

What is Ember?

Ember.js is an open-source JavaScript application framework, based on the model-view-controller (MVC) pattern. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework.

- https://en.wikipedia.org/wiki/Ember.js

What is Ember-cli?

Ember CLI is the Ember.js command line utility that provides a fast Broccoli-powered asset pipeline, a strong conventional project structure, and a powerful addon system for extension.

What is Ember-cli?

"Broccoli?

Another build tool?"

What is Ember-cli?

Broccoli, it's used under the hood, and you're likely not to fuss with it directly.

What is Ember-cli?

  • Handlebars
  • HTMLBars
  • Emblem
  • LESS
  • Sass
  • Compass
  • Stylus
  • Coffeescript
  • Minified JS & CSS

Supports:

What is Ember-cli?

Strong conventional project structure.

Folder

Layout

Ember or Ember-cli?

  • Ember is the framwork
    • Use your own dependency loader/manager or straight <script>
    • Implement your own project structure
    • Code with ES5. ES2015 with transpiler
  • Ember-cli contains the tools built around the framework
    • Write code in ES2015
    • Pre-defined project structure
    • Built-in Depdency loader and test framework (Testem)

Learning Curve

  • Yup, there's a learning curve.
  • Tutorials helped speed up learning!
    • Bookworm App tutorial! https://github.com/Remchi/bookworm, http://remzolotykh.net/tag/ember-in-action/
  • Rock and Roll with Ember.js book has helpful info

Standout features

  • Model observers.
  • One-way and two-way data binding.
  • Data down, actions up.
  • HTMLBars and Handlebars compat.
  • Glimmer, the new rendering engine.
  • Fastboot...

HTMLBars?

The goal of HTMLBars is to have a compiler for Handlebars that builds a DOM rather than a String.

// Handlebars Template

{{#each collection as |item|}}
    <p>{{item.name}}: {{item.description}}<p>
{{/each}}

Glimmer?

Slides from EmberConf talk:

http://f.cl.ly/items/0t031v2Z3y001V1N0F3N/Virtual%20DOM.pdf

 

The whole explanation:

https://github.com/emberjs/ember.js/pull/10501

Fastboot

  • Ember's Isomorphic JS solution, rendering serverside.
  • WIP. I've tried it out for about 2-3 hours and had issues. It wasn't needed for the project so I'll revisit it again.

Why I Chose Ember?

  • Project was to implement a UI interfacing with an API, managing data and state.
  • Considered existing tech stack but... since this isn't user facing, it felt like a good opportunity to build a proof of concept (no design here).
  • Existing tech stack (Backbone + Require/catpack) would take time to setup. On the flipside, the learning curve of Ember also took time.
  • Ember-cli looked helpful, and is.
  • I didn't have to spend too much time figuring out the project structure, as opposed to spending time coming up with one.
  • Attended a few talks and learned of some speed improvements (Glimmer) that out-performed React.
    • This may/may-not still be true. It's great that developers inspire each other.

Should You Use Ember?

  • Do you have an existing MVC?
    • Ember can be used in an isolated way.
    • React can be used in an isolated way and replace the View component of the existing MVC.
  • Do you have a static page with animations?
    • You probably shouldn't be using Ember or React.
  • Do you hate Handlebars with a wrath the world has never seen?
    • Yeah, try something else. Maybe React.
  • Do you like to figure out and implement everything on your own?
    • Consider using React along with other things.

Should You Use Ember?

  • Do you like to just get going?
    • Consider using Ember-cli.
    • Consider using React if you can find a boilerplate setup/structure you like.
  • Do you need Isomorphic JS?
    • Ember's solution is WIP and works for some devs.
    • Other libs may be tried and tested. Your mileage may vary.

Questions?

Made with Slides.com