Hacker News new | past | comments | ask | show | jobs | submit login
Ember 101: Learn Ember One Video at a Time (ember101.com)
237 points by ryanflorence on Apr 17, 2013 | hide | past | web | favorite | 65 comments

A quick note for that first tutorial (which is quite good already):

Right up front, you should really be introducing people to the idea of using get() and set() rather than accessing properties directly. From the video (and accompanying text) it's actually not clear why you did that and it's one of the most critical pieces of Ember's "magic sauce." Aside from the data binding itself, it also ties you into things like computed properties and every introduction I've seen simply glosses over these methods. To me, they warrant a reasonable explanation so they don't appear to a newcomer as needless indirection.

I'll be honest, I like it this way. Looking up documentation for get() and set() is easy. What's hard is understanding how to use it. Had the video gone over this, it would be an extra 1-2 min long, and would be less direct.

To clarify, I'm a complete newbie at Ember. But I have done quite a bit of web programming before. I'd agree with you if this video is directed to people who are _completely_ new at programming and don't understand how to read documentation and how to use it, but it doesn't seem like this video is targeted at that audience (since he assumes you know html/css/javascript)

Solid point I considered carefully. I decided to bet on people watching the second video and keeping the first as bare-bones simple as possible.

Great videos, but I agree with the OP.

When I watched the first video, I saw you set the App.name like a regular property and then later I saw you use App.get/set.

My immediate question was: So does that mean that setting App.name as a regular property won't have the same 'binding' effect?

When you introduce two notations, but one is inferior (without an explicit explanation), that is confusing.

Ah, well done then if it's included in the second video! Being at work, I didn't really have time to get that far. :)

Good job. As make more videos, will you be using ember-data or pure ajax like discourse did.

I'll use both.

Please consider posting a sentence or two and a link or two around why somebody might want to learn about the package and thus watch the videos.

In this case, adding a very brief overview of what Ember.js provides, and links to more info would seem appropriate.

Not everybody landing on that page knows what Ember is or why they might want to learn it, after all.


He should have at least a link to the Ember project page and some intro as to what it is.

Maybe he should have a episode 0 video which explains why should someone use ember instead of just jQuery or Backbone?

ryanflorence is really, really good at breaking things down and showing how powerful Ember can be with simple examples.

Good job.

Indeed, there has been so much new innovation in the client side mvc world lately. much kudos to ryan for putting this together, very useful!

Excellent, I've been trying to learn Ember over the last few days and it's kind of breaking my brain at the moment so have defaulted to backbone as the initial learning curve seems shallower.

Nice to see the Ember.js team and community reacting so swiftly to the criticisms about learnability.

<snark> Yeah, it'll be a shame to see how much effort they have to expend re-shooting all these when the API gets rewritten again next week. </snark>


There has been talk of making t-shirts that read "I survived Ember v0.9.8"

The apis used in these videos are frozen for ember 1.x, fortunately.

(I know your a bit tongue-in-cheek, but I appreciate a project that will replace difficult apis with reckless abandon as the community uses them pre 1.0)

I plan to work on a web application in the near future for a friend's small DJing business and I wanted to use Ember but heard that it was a bit obtuse to get into the first time. Definitely bookmarking this. Much appreciated.

Great stuff, thanks! I just want to point out that ember-data wasn't used in any of the tutorials and that's a good thing—please keep it that way. Or at least keep ember-data out of the picture until it's more stable.

The official guides are focused on ember-data with little information on how to use an alternative approach until it's stable for production use. This was very confusing for me (I'm in the process of rewriting an application at work in ember).

Agreed. Any episodes with ember data before its a release candidate will let people know its pretty much unstable and alpha (but with tons of promise).

Another great (and much more complete) set of Ember tutorials are on tutsplus.com:


It has 14 videos including a section that walks you through the making of a bookmark manager from scratch.

Awesome tutorials. In one of the videos you mentioned about extracting the handlebars into separate files, I'd love to see the setup for that.

Can you provide some good/recommended practices/conventions on large apps so we can organize the file structures on the first try?

I opened up the console and saw the site is built with Ember. Nice to see some dog-fooding.

Best Ember videos I've seen for clearly explaining each feature and giving alterative ways to conceptualize them. If you set up a page I'll donate a beer for your time, assuming you're not being paid to make them :)

only payment is warm fuzzies :)

Hey Ryan, watched these last night, really helpful. i look forward to the next instalment, especially for pulling/pushing data from a JSON api backend, or user authentication. Great stuff, James

Maybe I'm missing something, but how do the HTML and the JS panes relate to each other? Neither appears to refer to or include the other, but obviously they're combining somehow to produce the output.

Perhaps the answer to your question is that the code is being written inside of http://jsbin.com/ which does that combining automagically.

The javascript is what you would have on the scope of the page. It works like the Web Console in Firefox or Chrome.

I found this screencast by Tom Dale very comprehensive and extremely easy to follow http://www.youtube.com/watch?v=Ga99hMi7wfY

It's a good screencast, but I wasn't able to follow along using the ember starter kit I downloaded yesterday (errors). I'm sure the problem was something silly, but I'm not a js whiz like the rest of HN so I got frustrated and quit. Hopefully the glut of ember tutorials on the frontpage today will help.

It should work for you. I followed along with the screencast (Truly awesome stuff. Build a blog in under 30 minutes!? Amazing.) using the Starter Kit 1.0.0-RC.2 which is what you would've downloaded yesterday. Everything worked fine for me. Ah, except for the Ember Data component which initially caused me problems. Turns out you have to grab it from Git and build it yourself. I only found that out from the comments on the video where it was posted on YouTube. That said, once I followed the directions I found on YouTube and built Ember Data, everything worked great and went smoothly from there on out.

Here are the instructions for building Ember Data (from a random YouTube comment):

git clone git://github.com/emberjs/data.­git

cd data

bundle install


You need to have bundler installed for your version of ruby.

Then go to dist/ember-data.js and use that where it says "ember-data-master.js" in the video. Worked for me.

And if you happen to be running ubuntu 12.04, then keep in mind that apt-get install ruby-bundler will pull in the wrong version, so just install the ruby1.9.3 package, and install bundler, posix-spawn, therubyracer and execjs via 'sudo gem install'. After that the youtube comments work just fine.

Took me only 3 hours to figure it out being a total ruby noob. So easy.

You can always find the latest build of Ember Data here: http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest...

Any chance of updating the website to be more mobile friendly?

(Or at least a link to your YouTube channel.)

Here is what I see: http://imgur.com/BcyVjhg

Should be decent on tablets, didn't get to phones yet, but definitely will.

Thanks for responding!

I hope that screenshot was useful. I just wasn't sure if I was the only one who was having trouble navigating.

Done, did it this morning. Could use a little more love, but its pretty good for 20 minutes of work :)

Wow, thank you! Much better!

Your ability to make such dramatic improvements in such a small amount of time is a testament to learning Ember. You've certainly inspired me!

Look great. I like that it is not just video but with text explaining it. Thanks ryanflorence.

Just curious, is it a different effort from the embercasts?

Yeah, this is just me doing my thing. Embercasts will be awesome.

Really excited about this - I think now that Ember's API has stabilised we'll be seeing lots more high quality resources :)

Ember.js adds to much boilerplate to the application, I like simplicity, that is why I like Angular.js more.

Please don't turn this into an angular v. ember thread. They are both excellent frameworks.

I'm just wondering what is the appealing of Ember.js, I need some enlightenment.

Ember uses some of the same philosophies as rails. People who like rails seem to be attracted to ember.

That said, I think there's room for both. We currently have people working in how many languages and how many libraries for each language, just for web apps?

ember.js provides an completeish set of opinions on how client side app should be built.

The appeal is the same as angular and other frameworks with bound data. I choose ember because of its focus on urls. Watch the last video, and if that doesn't look interesting to you then ember is not for you :)


Wow that video would have made my life a lot easier 2 weeks back when I was learning the new router. I didn't know about linkTo either, very good to know about. Something that I'm having real trouble with is working out how to create bindings to parameters in the url e.g. I want a select to be bound to a url parameter(in the path, I'm aware query params aren't available at the moment). I ran into trouble because when the select changes and a route is entered into it then trys to update the select which has just been changed, triggering the transition again... Any pointers for how I might do this (links or vague ideas would be very welcome :) ).

ember.js source has a LinkView that can tell if the current link is to the current route. You could create a SelectView and maybe borrow some of that to do the same.

Not to add fuel to the fire but Ember is much easier on the eyes in my opinion. I have no doubt that Angular is a powerful, flexible, wonderful framework, but wow it just looks ugly. My two cents.

In other words,it make more sense to you, that is the kind of testimony I need to read, Angular.js is simple, I like that, but not always simplicity makes sense, if Ember.js adds more code but it makes more sense then I see your point.

To me AngularJS is beatiful. Just my 2 cents.

I am not sure what you mean by boilerplate... if you are referring to the router. It is definitely one of the most useful feature in ember

Thanks, the videos were really insightful!

How often will you be posting new videos and how many are you thinking to make?

I can't say for sure. If I don't do one per month I'll be really sad. One per week would be amazing.

Averaging that, I guess I plan on two per month.

This is awesome, thanks for sharing. Only feedback would be to bring on more video! ;-)

Excellent! A full-screen button on the youtube player would be nice to have.

You can click the title on the video to go right to youtube. You can view fullscreen there.

Yeah, but if they had the fullscreen button right there, you wouldn't need to go over youtube everytime you want to watch it on fullscreen you know?

Its the vanilla youtube iframe embed, the full screen button is there for me :\

The HTML5 player doesn't have a fullscreen button in embedded videos.

This is great! Watched a couple so far and followed along right on jsbin.

This is awesome! Keep up with the good work ryan!

thank you, captain obvious.

Too much buzz? The site's down for me...

Registration is open for Startup School 2019. Classes start July 22nd.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact