Download - Intro to EmberJS
![Page 1: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/1.jpg)
Introduction To
Desert Code CampOctober 18, 2014
Josh Padnick
![Page 2: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/2.jpg)
You want to build the next great app.
![Page 3: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/3.jpg)
Most of today’s apps use the same paradigm.
![Page 4: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/4.jpg)
RESTful API
Web Client Mobile Client Tablet Client
![Page 5: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/5.jpg)
The app exposes a RESTful API. Then we can implement many
potential clients against that API.
![Page 6: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/6.jpg)
So what technologies should we use?
![Page 7: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/7.jpg)
RESTful API
For today’s talk, the APIcan be a black box.
For Ember, it doesn’t even have to be RESTful, but
we prefer that it is.
![Page 8: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/8.jpg)
Mobile Client
Tablet ClientWe could build native apps.
But an HTML5 / CSS3 / JS web app will work, too.
![Page 9: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/9.jpg)
Web Client
For our web client, we have a
few choices.
![Page 10: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/10.jpg)
When does it make sense to choose Ember?
![Page 11: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/11.jpg)
![Page 12: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/12.jpg)
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.
If you want to know what I think…
![Page 13: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/13.jpg)
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?
![Page 14: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/14.jpg)
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.
![Page 15: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/15.jpg)
The Ember Learning Curve
Effort to Learn
Prod
uctiv
ity
Hello World
Key Concepts Understood
Time for Ember Data
Easily Justify Your Salary!
Informally based on my experience + 2 colleagues
Week1 Week2 Week3 Week4 Week5 Week6 Week7 Week8 Week9
Discover The Ember Way for yourself…
![Page 16: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/16.jpg)
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
![Page 17: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/17.jpg)
My Goals for Today
![Page 18: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/18.jpg)
1. Get you excited about Ember
2. Give you a mental model that will accelerate your process of learning it.
![Page 19: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/19.jpg)
What We’ll Cover Today
![Page 20: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/20.jpg)
• Brief overview of the Ember ecosystem
• See Ember in action
• Show you the “Ember mental model”
• Discuss The Ember Way™
![Page 21: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/21.jpg)
About MeJosh Padnick
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.
602.432.3789
![Page 22: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/22.jpg)
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:
![Page 23: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/23.jpg)
Overview
![Page 24: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/24.jpg)
Three Players in the Ember Ecosystem
![Page 25: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/25.jpg)
Ember EmberData
EmberCLI
![Page 26: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/26.jpg)
EmberA 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 EmberData
EmberCLI
![Page 27: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/27.jpg)
Ember DataA 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 EmberData
EmberCLI
![Page 28: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/28.jpg)
Ember CLI
The command-line interface for Ember
• Instantly scaffold a new ember project
• CLI-based unit and integration tests
• One-command deployment
• ES6 transpilingEmber Ember
DataEmber
CLI
![Page 29: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/29.jpg)
Let’s See a Real Ember App
![Page 30: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/30.jpg)
Later on, we’ll deal live with Ember code.
![Page 31: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/31.jpg)
Mental Model
![Page 32: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/32.jpg)
How We Go From…
To…http://MyEmberApp.com/cats
http://MyEmberApp.com/cats
Trending Cat Pictures
![Page 34: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/34.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Ember looks up /cats in the Ember App’s router.js
![Page 35: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/35.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Ember looks up this URL in the Ember App’s router.js
![Page 36: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/36.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Ember looks up this URL in the Ember App’s router.js
ECMAscript 6 imports!
ECMAscript 6 export
Tells the Ember router how to handle URL changes (use the browser “history”, use a “#”, etc.)
![Page 37: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/37.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Ember looks up this URL in the Ember App’s router.js
Ember uses lines 9 - 11 to map a given URL to a particular “state” in the app.
![Page 38: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/38.jpg)
For now, you can think of “state” as the value of various properties, as well as the “currently active URL.”
![Page 39: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/39.jpg)
Visualizing an Ember Routes File
SOURCE: Ember.js in Action. Chapter 3.3. Joachim Haagen Skeie.
![Page 40: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/40.jpg)
=
![Page 41: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/41.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Ember looks up /cats in the Ember App’s router.js
![Page 42: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/42.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Ember looks up this URL in the Ember App’s router.js
Ember finds a “cats” route!
![Page 43: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/43.jpg)
GET http://MyEmberApp.com/cats
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.
![Page 44: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/44.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
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!
![Page 45: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/45.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
![Page 46: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/46.jpg)
![Page 47: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/47.jpg)
![Page 48: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/48.jpg)
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.
![Page 49: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/49.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
![Page 50: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/50.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
RESTful API
Ember Data makes an HTTP GET request for “all cats”
![Page 51: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/51.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
RESTful API
The API responds. Ember Data stores the response locally as cat models.
![Page 52: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/52.jpg)
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
![Page 53: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/53.jpg)
![Page 54: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/54.jpg)
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
![Page 55: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/55.jpg)
’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.
![Page 56: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/56.jpg)
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.
![Page 57: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/57.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
![Page 58: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/58.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
Cats Controller(e.g. /controllers/cats.js)
The route sets up the cats controller
![Page 59: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/59.jpg)
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.
![Page 60: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/60.jpg)
![Page 61: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/61.jpg)
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
![Page 62: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/62.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
Cats Controller(e.g. /controllers/cats.js)
The route sets up the cats ArrayController
![Page 63: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/63.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
Cats Controller(e.g. /controllers/cats.js)
The route sets up the cats ArrayController
If Ember didn’t find a cats controller, it would use CoC to create one!
![Page 64: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/64.jpg)
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.
![Page 65: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/65.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
Cats Controller(e.g. /controllers/cats.js)
![Page 66: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/66.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
Cats Controller(e.g. /controllers/cats.js)
Cats View(e.g. /views/cats.js)
The route sets up the cats view.
![Page 67: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/67.jpg)
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.
![Page 68: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/68.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
Cats Controller(e.g. /controllers/cats.js)
Cats View(e.g. /views/cats.js)
![Page 69: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/69.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
Cats Controller(e.g. /controllers/cats.js)
Cats View(e.g. /views/cats.js)
The view renders the cats Handlebars Template
Cats Template(e.g. /templates/cats.js)
![Page 70: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/70.jpg)
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.
![Page 71: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/71.jpg)
I want to show pictures of cats, so let’s add a pictureUrl property to the cat model.
![Page 72: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/72.jpg)
![Page 73: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/73.jpg)
For demo purposes only, we’re going to fudge the
model in our route
![Page 74: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/74.jpg)
![Page 75: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/75.jpg)
And finally here’s our Handlebars template.
![Page 76: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/76.jpg)
![Page 77: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/77.jpg)
And now the cats themselves!
![Page 78: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/78.jpg)
![Page 79: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/79.jpg)
To summarize, here’s the flow we saw…
![Page 80: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/80.jpg)
GET http://MyEmberApp.com/cats
Router(router.js)
Cats Route(e.g. /routes/cats.js)
Cats Controller(e.g. /controllers/cats.js)
Cats View(e.g. /views/cats.js)
Cats Template(e.g. /templates/cats.js)
![Page 81: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/81.jpg)
What We Didn’t Cover
![Page 82: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/82.jpg)
Here’s the Ember universe of concepts.
![Page 83: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/83.jpg)
• 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
![Page 84: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/84.jpg)
And here’s what we covered today…
![Page 85: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/85.jpg)
• 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
![Page 86: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/86.jpg)
Those other concepts will be part of your learning curve.
![Page 87: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/87.jpg)
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.
![Page 88: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/88.jpg)
The Ember Way™
![Page 89: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/89.jpg)
Ember is an opinionated framework. That means that it
wants you to use a certain architecture.
![Page 90: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/90.jpg)
The various ways in which you embrace Ember’s underlying
opinions on architecture are known collectively as The Ember Way.
![Page 91: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/91.jpg)
’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.
![Page 92: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/92.jpg)
Next Steps
![Page 93: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/93.jpg)
• 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.
Learning Ember
![Page 94: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/94.jpg)
• 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
Learn How to Debug Ember!
![Page 95: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/95.jpg)
• If you’re stuck, go to StackOverflow
• If you’re curious about best practices or have a general question, use the Ember Discussion Forum.
Ramping Up on Ember
![Page 96: Intro to EmberJS](https://reader037.vdocument.in/reader037/viewer/2022110114/5476d224b4af9f933e8b4750/html5/thumbnails/96.jpg)
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/
Advanced Ember