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?
Ember: Hey, this looks interesting...
By Garrick Cheung
