What were the most useful resources for learning Ember.js?


#1

I’m working on a project for helping people get up-to-speed with new open source projects.

If you’ve started learning Ember.js recently (let’s say in the last 2 months), what were some of the most useful resources for you? What did you think would be useful but ended up not helping as much as you thought?

I’d like you to think about more than traditional “documentation”, too—not just official guides and blog posts, but things like meetups, IRC, reading the source code, chatting with a friend, discussion forums, talks, StackOverflow answers, etc.

Let’s try to make a list of the most useful & up-to-date resources for people learning Ember.js today.

Thanks for your help!


#2

This simple chart, summarizing the architecture, helped me out a ton:

… which is from this video:

http://freecourses.tutsplus.com/lets-learn-ember/ember-architecture-explained.html


#3

I’m a hands on learner and I really liked the “Getting Started” guide on the Ember site. I also really found the PeepCode screencast very helpful.


#4

Fire Up Ember.js | PeepCode and Building an app with Ember.js were both very helpful starting out with Ember.js.


#5

Embercasts is a really great way to quickly get started.


#6

Thanks for asking. I come from an Obj-C, Java, Python world and have struggled to wrap my head around Ember. If Ember had the following, it would make my life easier:

  • More varied examples. Every example I’ve seen (*except for two, see below) uses the same rails-ish manyObjects/SingleObjectID paradigm. If your app doesn’t fit neatly into that, the examples aren’t much help. Or maybe the apps I was trying to write weren’t a fit for Ember.
  • Better documentation of Things That Ember Does For You . I’ve gotten tripped up numerous times by all of the code that you don’t need to explicitly write. The fact that some examples explicitly write out everything you need (even if it’s just a stub) and some don’t makes it tricky to learn. For anyone coming from iOS dev, this makes your head hurt.
  • Better tools. Debugging isn’t awesome. The js console throws less than useful error messages a lot of times.

*the two examples that I keep going back to as reference: http://www.adobe.com/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html http://lukaszielinski.de/blog/posts/2013/02/23/ember-dot-js-code-walkthrough-video/

That being said, I get Ember and what’s it’s trying to do. But for someone who’s not steeped in Javascript every day, the learning curve and rapid development make it tough. I think these are growing pains and am looking forward to things getting better.


#7

:heart: that chart!

It really has been helpful for me and others to better understand the differences between server-side MVC and client-side MVC.


#8

@ebryn @machty how can we help you make more embercasts?


#9
  • Bought peepcode subscription to watch ember screencast.
  • Watched almost everything on emberwatch.
  • Read and reread the official guides.
  • Scratched my head a few times trying to make sense of different version changes.
  • Tried to grok build tools with varying levels of success, worked with ember-rails
  • trawled (trolled?) the ember forum
  • peeked at discourse source code (too complex to jump into right away)
  • joined ember js meetup

General Suggestions:

Keep a a high quality index of various sample/example projects somewhere, with links, and community provided commentary (ratings, version dependencies, concepts). The examples section of emberwatch is a little sparse, there is a lot more out there when you scratch the surface.

  1. I think fairly complete and moderately complex “example” app that is
    explicitly linked to the guides would be helpful. Something between bloggr-client and discourse. Use contrived examples to show all the features of ember, and how things can be done in idiomatic
    way.

More documentation around the different data persistence layers. Seems like Ember JS should have a compare and contrast guide between different data layers. This could work in Ember Data’s favor ultimately.

I think you guys are far too sensitive about Ember Data. It is a great effort, and solves some very difficult problems. I think all the second guessing invites the trolling. Embrace it more proudly. Newbies don’t know the back story. Start with the here and now.

I would love to hear more commentary on what different persistence layers bring to the table, and what separates them specifically. How they try to solve the problem differently. This is a hard problem so let’s have a more open dialog about the challenges. Everyone benefits.

Maybe a friendly “cage match” for the different data layers would be fun. But done in good spirits.

I feel that the persistence layer feels very opaque to the novice. So having some commentary in one place would be better.

More “idiomatic” backend code examples would be very handy. I think http://jsonapi.org should be featured more prominently than it currently is.

From my perspective all the perceived “Ember Data bashing” seems like a phantasm that doesn’t really exist. I just want to hear unvarnished and fair commentary on it, strengths and weaknesses.

All this being said, I think Ember JS as a whole is executing quite well. It does seem like a lot of resources and thought has gone into representing the framework and the community to broader world.


#10

The most useful resource for me was this repo (which is now out of date): https://github.com/adammeghji/ember-static-boilerplate. I found it 4 months ago but really didn’t dive into things until last month. This repo gave me the quickest path from “what is ember.js” to “I have working code running that I can poke around in.”

The directory structure is probably a little over the top for a newbie though, with all the various concerns being in separate files. I eventually moved everything back into app.js and index.html so I could see the whole picture more easily.


#11

Number 1 by far: Ember.js RC1 introduction screencast by Toran Billups. I loved how @toranb showed all the classes and methods that Ember generates and how they are wired up together. Other videos do that to some extend but not as thoroughly as this.


#12

I had a lot of trouble with the ToDo MVC tutorial on emberjs.com/guides. I only had a day to play around with it, but I ran into problems in getting the correct version between handlebars.js and ember-data. The versioning on Ember.js itself was stable enough to not cause any problems. I spent a lot of time trying different versions, but was unable to get something working. Complicating matters further was that the stack traces were pretty difficult to follow: some of this is pretty understandable with a deep stack trace in javascript, but most often the stack trace only pointed to objects in handlebars and ember-data and never to anything in the code I was writing.

Given the volatility and rapid development of the ember-data library and that particular tutorials reliance on it, some of these issues have probably already been remedied, but it felt like an experience worth sharing.

I’m looking forward to getting some more exposure to Ember and looking into some of the other promising resources listed here.


#13

I started on a gist the other night with some links that I personally found interesting. There’s not a lot to it but here it is: https://gist.github.com/jerel/6137505

I don’t have an Ember meetup near me so I like watching the NYC meetups on Youtube for real world perspectives.


#14

Hi Tom,

When I started, I had an expectation to be able to just start and be productive. I have enough background to be able to build something without much upfront investment into learning. Trying to build an Ember.js app with the guides, API docs and screencasts proved to be more difficult than I expected. It was a humbling experience, I had to keep telling myself that its worth it, even though its difficult.

It took about 2 weeks of trying to build and research and videos to get to a point where I felt comfortable enough to sit and write code. Here are some of the things that I acquired in first 2 weeks that helped me to be productive.

  1. Learned to trust the framework - the Ember.js core is more stable than RC6 tag communicates. As the beginner, 99.99 of the time, the problem is with my code or application of the framework and not the framework itself.
  2. Models != Ember Data
    • Models are objects and array of objects
    • Ember Data being under development doesn’t mean that Ember.js is in the same state.
    • Understanding how to work with models without Ember Data helped me understand the architecture better and feel more confident about working with models
    • Robin Ward’s Ember without Ember Data was very helpful
  3. Learned how to debug Ember.js apps before starting to build the app
  4. Learned to use Yoeman Ember generator
    • Guides and tutorials all show code layout that has little to do with code layout that people use on large projects
    • I learned how to setup my project to use project layout that I would expect
  5. Joined local community
    • Its very easy to feel isolated when learning Ember
    • Being part of the community helped me when I felt stuck
    • I’m setting up a Ember Hack Night in Toronto.
  6. Heretical Guide to Ember.js
    • It connected Ember’s use of Model View Controller to traditional frameworks that use that pattern
    • It helped me understand the bigger picture and highlighted the importance of KVO
    • It provided a tutorial for building a large app with Ember

I started at the beginning of August. I’m now fairly comfortable with the framework but now I’m struggling with the persistence layer. I really like EPF’s use of sessions. I would second a comparison between persistence layers and looking forward to having a stable Ember Data that we can rely on.

In the end, it was worth it. I really like how my code looks, I’m fairly productive ( when I’m not debugging edge cases of 3rd party libraries )


#15

Few things helped me progress Ember.

  1. I bought PeepCode’s introductory tutorial for 12 bucks.
  2. I read the Ember guide on the website head to toe over and over.
  3. I read through discource’s codebase available in github (highly recommended)

What I wished for is a page (I’m thinking of doing this on my personal site somewhere), that goes on to link really good articles of different depth levels – sort of like further reading. I had no idea how to use the “needs: [ ‘controllerA’, ‘controllerB’ ]” till someone had it in an example.


#16

I technically started learning Ember back in December last year, but have not been working with it regularly until recently, so I’ve pretty much been learning over the last couple months. I’ve primarily been using the official guides and random tutorials I’ve seen linked off twitter, but recently found http://ember101.com/ which really made things click for me.

I’ve also been attending the Seattle EmberJS meetings, and learned quite a bit at one of the hack sessions trying to debug a coworker’s project that I’d brought to work on.

I also really appreciate the JSBin examples that have been floating around recently, such as the ones for the ember-component docs. Having a working example to pick apart definitely helps more than trying to imagine the context of a code snippet.


#17

I read and watched everything I could get a hold of.

peepcode fire up ember Heretical Guide To Ember JS Nettuts Ember101

Those were ok to get you started, but they don’t go much further than the official guide

What really got me over the hump into complex concepts like {{ render }} and components was

  1. lurking on the #emberjs IRC channel
  2. Adam Hawkins blog
  3. Evil Trouts blog
  4. Travis-ci source code

#18

I come from a Knockout.js background, I’ve been learning Ember for the last month, I have found the NDC Oslo videos very helpful along with the Ember watch website.

The best way for me to learn code is to download demo projects and run them. If there were a web page listing useful ‘Getting started’ Ember GitHub repo’s this would be super helpful. Maybe this exists?


#19

+1 what Greg Duncan said.


#20

I would love to see documented some explicit examples of so called "anti-patterns" used when writing ember. Specific and concrete examples of things that kind of work, but are not really advisable, along with some commentary and alternative examples.

It seems like their are some common scenarios and traps that newbies would fall into without being full cognizant of the conventions.