Intro toEmberJS

8 Lessons in Ember

by Sean Goresht

Things I wish I knew when I started learning

(Use your arrow keys or swipe to navigate the slides)

Overview

  1. What is EmberJS?
    1. EmberJS, vs. other libraries
    2. When to use EmberJS
    3. Architecture, structuring an application
      1. Routes
      2. Models
      3. Controllers
      4. Components
  2. 8 Lessons Learned
  3. Questions

About Me

Me
Twitter GitHub Email 

Disclaimer

The Problem

  • 'Divitus'
  • 'Classitus'
  • Heavier AJAX-based apps, more client-focused
  • Lack of structure
  • Abundance of frameworks

So You're Starting a New Project

Your Options

Introducing EmberJS

The Ember logo

Emberjs is ahigh-level javascript library for "ambitious applications"

EmberJS is a framework for ambitious applicationsThe EmberJS website

When to Use Ember?

Content-heavy applications:

  • Client-heavy applications: ex. job boards, forums, time tracking software, real-time data visualization, dashboards
  • Blogs
  • E-Commerce Sites
  • CMS

Don't use ember if you're building a:

  • Game
  • Traditional website
  • (an) upgrade to an existing website
  • Complex server-side application (comparing data)

In general:

"Do it any other way, or goall the ember way

EmberJS is MVC

Model-view-controller diagram
EmberJS is dubbed "MVC"

What Makes Ember

A Sample Ember App

View the sample app on the official emberjs website

8 Useful Ember Tips I wish I'd Known

Documentation is for Pussies

  • If you have to look it up,you're probably doing it wrong
    • Don't access a parent controller's property from a component
    • Don't perform a transition from a component's controller
  • As a general rule, if it was easy, you did it right

Sharing Can Be Easier

  • You should probably not use needs: []
  • instead, put all shared logic in the implicitly-shared controllers: ex. indexor ApplicationController
Controller Dependencies
Emberjs controllers, and how dependencies can be shared

More on stackoverflow

Bubbling up Actions

4 Simple steps...

  1. Wire up action normally under actions hash
  2. Put in @sendAction("{passedInAction}")
  3. Pass in the action, to the component (hbs) – make sure to include quotes!
  4. Code in the actions hash of your controller
Demo - EmberJS fiddle

Authenticated Routes

All you need to do is use beforeModel: function(){}

Authenticated Route Gist

@route() vs. @resource()

  • @resource was depreciated in 1.7+
  • difference:@route preserves scope;@resource 'resets' scope

Keeping Components Dumb

Ask yourself these three questions:

  1. Are components as “dumb” as possible? Are they read-only, and encapsulated?
  2. Have you created more than 1 route for a given functionality? If so, have you grouped them together, using template partials?
  3. Are shared functionalities and properties created under shared controllers and routes? For example, application controller and application route. (See checking for admin access)

Engaging the Community

  1. Follow emberjs on twitter
  2. Join the IRC:#emberjs
  3. Post onstackoverflowandEmber Discuss
  4. Surround yourself with ember people (hard), or check out services like codementor
  5. Find yourself an ember guru

Working with Ember Data

  • Ember Data is tricky!
  • Be prepared to look at source code
  • Must have access to API specification
  • Be prepared to write serializers (either way!)
  • Embedded records: natively work, but with caveats
  • In general: ember data works, but use at your own risk

Questions?