Intro to EmberJS

Introduction To
Desert Code Camp
October 18, 2014
Josh Padnick

You want to build the
next great app.

Most of today’s apps
use the same paradigm.

RESTful API
Web Client Mobile Client Tablet Client

The app exposes a RESTful API.
Then we can implement many
potential clients against that API.

So what technologies
should we use?

RESTful API
For today’s talk, the API
can be a black box.
For Ember, it doesn’t even
have to be RESTful, but
we prefer that it is.

Tablet Client
Mobile Client
We could build native apps.
But an HTML5 / CSS3 / JS web
app will work, too.

Web Client
For our web
client, we have a
few choices.

When does it make
sense to choose Ember?

If you want to know what I think…
Ember works great if:
• You want to build a “desktop-app-like experience” in the
browser
• You’re dealing with moderate - high complexity in your app.
• You want architectural guidance for the long-term at the
cost of a steeper learning curve upfront.
• You’re a javascript geek and want a “powerful framework”
at your fingertips (API, great tools) and you don’t mind
digging into the framework code base.

Actually, Ember works great for simple apps, too.
But the question is:
If you don’t know Ember already, when does it
make sense to learn it?

Ember may not be worth the learning curve if:
• Building a relatively simple app
• You want to launch in less than 6 weeks from start.
• You are brand new to javascript.
• Ember works great for these use cases if you
already know it!
• Otherwise, Angular may be a better fit.

The Ember Learning Curve
Easily Justify
Your Salary!
Productivity
Key Concepts
Understood
Time for
Ember Data
Hello
World
Effort to Learn Week1 Week2 Week3 Week4 Week5 Week6 Week7 Week8 Week9
Informally based on my experience + 2 colleagues
Discover The Ember
Way for yourself…

The Ember vs. Angular
debate is ongoing.
Here are some links for viewing at home:
• http://www.benlesh.com/2014/04/embular-part-1-comparing-ember-and.html
• http://discuss.emberjs.com/t/why-i-m-leaving-ember/6361
• https://www.quora.com/Client-side-MVC/Is-Angular-js-or-Ember-js-the-better-choice-
for-JavaScript-frameworks

1. Get you excited about Ember
2. Give you a mental model that will
accelerate your process of
learning it.

• Brief overview of the Ember ecosystem
• See Ember in action
• Show you the “Ember mental model”
• Discuss The Ember Way™

About Me
Josh Padnick
josh.padnick@gmail.com
602.432.3789
http://JoshPadnick.com
• About to launch medical appointment reminders product built in Ember.
• Trained two engineers on Ember
• Earned around 500 Stack Overflow reputation points for Ember answers.
• Using Ember for a new startup project.
• Professional AWS Consultant & Professional Trainer for EmberJS.

Special Thanks to the Ember Community!
• I have had 100% of questions asked on StackOverflow and
discuss.EmberJS.com answered.
• I especially appreciate the responses of:

Three Players in the
Ember Ecosystem

Ember
Ember
Data
Ember
CLI

Ember
A framework for building ambitious web
applications.
• Helps you easily manage app state
• Handles the boilerplate of building a web app
• Gives you lots of tools to get your job done
Ember
Ember
Data
Ember
CLI

Ember Data
A library for robustly managing model data in your
Ember.js applications.
• Represents models in local browser store
• Read/write with any persistence store (most
commonly a RESTful API)
• Kind of like an ORM for Javascript
Ember
Ember
Data
Ember
CLI

Ember CLI
The command-line interface for Ember
• Instantly scaffold a new ember project
• CLI-based unit and integration tests
• One-command deployment
• ES6 transpiling
Ember
Ember
Data
Ember
CLI

Later on, we’ll deal live
with Ember code.

How We Go From…
http://MyEmberApp.com/cats
To…
http://MyEmberApp.com/cats
Trending Cat Pictures

GET http://MyEmberApp.com/cats
User makes an HTTP GET Request

Router
(router.js)
Ember looks up /cats in the
Ember App’s router.js

Router
(router.js)
Ember looks up this URL in the

Router
(router.js)
ECMAscript 6 imports!
ECMAscript 6 export
Tells the Ember router how to handle
URL changes (use the browser
“history”, use a “#”, etc.)

Router
(router.js)
Ember uses lines 9 - 11 to map a given URL
to a particular “state” in the app.

For now, you can think of “state” as
the value of various properties, as
well as the “currently active URL.”

Visualizing an Ember Routes File
SOURCE: Ember.js in Action. Chapter 3.3. Joachim Haagen Skeie.

Router
(router.js)
Ember finds a “cats” route!

Router
(router.js)
Cats Route
(e.g. /routes/cats.js)
Ember looks for a file corresponding
to the cats route. It finds one, it
loads the cats route.

Router
(router.js)
Cats Route
Ember looks for a file corresponding
to the cats route. It finds one, so it
loads the cats route.
If Ember didn’t find a cats route, it would use
Convention over Configuration to create one!

Router
(router.js)
Cats Route

This shows a common use of the “model hook”.
We tell Ember Data here to make an API call to GET /cats
and then we’ll have these cats available for local use as Ember Records.

Router
(router.js)
Cats Route
Ember Data makes an HTTP GET request for “all cats”
RESTful API

Router
(router.js)
Cats Route
The API responds. Ember Data stores the
response locally as cat models.
RESTful API

What’s a model?
• A model is a class that defines the properties and
behavior of the data that you present to the user.
• Basically, a javascript object plus some Ember
fanciness.
• In Ember, models are defined by extending
DS.Model.
• An instance of a model is known as a “record” but it’s
still just an instance of a DS.Model

Ember Model Basics
• A model’s property can be a literal (as we saw
with all of cat’s properties).
• Or a model’s property can be to another model

’s Take on Ember Models
• Your Ember models are a projection of your API’s
models.
• Your Ember models should be the projection of your
“real” data model that makes sense for a local user.
• My RDBMS may have a bunch of tables which I JOIN
in a query, and I might represent that as a single
Ember model.
• Basically, think about how you want your data locally,
and model accordingly.

Ember hopes you’ll give it JSON,
but really it can handle anything.
• Ember’s default adapter is called the
DS.RESTAdapter and is based off of Ruby on
Rails conventions.
• I built an API using Play Framework (Java) and it
was easy to tweak it to speak Ember.
• If you can’t change the API, Ember provides
serializers which let you do custom transforms
between the API data that you actually get and
the data format that Ember expects.

Router
(router.js)
Cats Route
Cats Controller
(e.g. /controllers/cats.js)
The route sets up the cats
controller

Ember Controllers
• “Controller” is probably the wrong term.
• It’s really more of a view-model.
• The controller’s job is to decorate the model.
• If there’s a property that’s primarily for the UI,
model it in the controller.

Ember Controllers
• In a moment, we’re going to render our template.
• When we do, the template will look to the controller to
see what model is associated with this route.
• You could either have a single model (e.g. one cat) or
an array of models (e.g. many cats) associated with
the route’s model.
• Single cat —> Ember.ObjectController
• Many cats —> Ember.ArrayController

Router
(router.js)
Cats Route
Cats Controller
ArrayController

Router
(router.js)
Cats Route
Cats Controller
ArrayController
If Ember didn’t find a cats controller,
it would use CoC to create one!

This property only makes sense in the UI.
We wouldn’t store this in a database.
This is known as a computed property. It updates
when any property in the property() method changes.

Router
(router.js)
Cats Route
Cats Controller

Router
(router.js)
Cats Route
Cats Controller
Cats View
(e.g. /views/cats.js)
The route sets up the cats view.

Ember Views
• Ember views render a Handlebars template and
insert it into the DOM.
• I do occasionally use views to handle basic
jQuery
• But you’ll be surprised how rarely you use them.
• That’s why I show the view in gray. You should
be surprised that you’re using it.

Router
(router.js)
Cats Route
Cats Controller
Cats View

Router
(router.js)
Cats Route
Cats Controller
Cats View
The view renders the cats
Handlebars Template
Cats Template
(e.g. /templates/cats.js)

Ember Templates
• Ember uses Handlebars to render templates.
• Ember embraces the “logicless templates”
paradigm, perhaps to a fault.
• Templates are easy to learn, so I won’t spend
much time on them, but here’s a quick example.

I want to show pictures of cats,
so let’s add a pictureUrl
property to the cat model.

For demo purposes only,
we’re going to fudge the
model in our route

And finally here’s our
Handlebars template.

To summarize, here’s
the flow we saw…

Router
(router.js)
Cats Route
Cats Controller
Cats View
Cats Template
(e.g. /templates/cats.js)

Here’s the Ember
universe of concepts.

• Templates
• Components
• Views
• Naming Conventions (Resolver)
• Ember Objects
• Helpers
• Routes
• Router
• Controllers
• Models
• Testing
• Ember Data
• Local Store
• Initializers
• Dependency Injection /
Container
• Run loop
• Promises
• Adapters
• Serializers
• Mixins

And here’s what we
covered today…

• Templates
• Components
• Views
• Naming Conventions (Resolver)
• Ember Objects
• Helpers
• Routes
• Router
• Controllers
• Models
• Testing
• Ember Data
• Local Store (indirectly)
• Initializers
• Dependency Injection /
Container
• Run loop
• Promises
• Adapters (briefly)
• Serializers (briefly)
• Mixins

Those other concepts will be
part of your learning curve.

Ember makes extensive use of promises.
Once you understand them, they’re a
pleasure, but until you do, things can feel
hard.
So spend time really getting familiar with them.

Ember is an opinionated
framework. That means that it
wants you to use a certain
architecture.

The various ways in which you
embrace Ember’s underlying
opinions on architecture are known
collectively as The Ember Way.

’s Take on The Ember Way
1. It’s not authoritatively outlined anywhere. But be thinking about
The Ember Way while you learn.
2. Avoid direct DOM manipulation. Use Ember’s state management
instead. This means avoiding jQuery plugins that do DOM
manipulation.
3. Leverage Ember’s bindings, computed properties, and observers.
Update your templates by updating properties, not the DOM.
4. Ember has lots of async going on, but if you learn each of the
event hooks, it won’t bite you.
5. Use your routes to update “model state” and controllers to update
“view state”. Try to avoid handling model state in controllers.

Learning Ember
• I find the CodeSchool.com EmberJS tutorial
among the best. It’s $29/month. Stat here.
• The EmberJS.com Guide is excellent, but only
give you “the top 70% of the iceberg”. But use
this as your starting point for reference.
• The EmberJS API is indispensable. It’s
important you learn how to use it. Also, always
know what this refers to so that you can look
up available properties in Ember.

Learn How to Debug Ember!
• If you learn this skill, your ability to “fill in the
mental model gaps” will be much easier, and
your learning curve will shorten dramatically.
• Everything you need is at this outstanding 12
minute video by Robin Ward:
http://eviltrout.com/2014/08/16/debugging-ember-
js.html

Ramping Up on Ember
• If you’re stuck, go to StackOverflow
• If you’re curious about best practices or have a
general question, use the Ember Discussion
Forum.

Advanced Ember
Here are some great resources for when you’re
ready to dig in to the next level:
• http://balinterdi.com/
• http://www.toptal.com/emberjs/a-thorough-guide-
to-ember-data
• http://emberwatch.com/
• http://eviltrout.com/

Thank you,
Now go build something cool!
Josh Padnick
josh.padnick@gmail.com
602.432.3789
http://JoshPadnick.com

Intro to EmberJS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Intro to EmberJS