7 ms·
Ember 101: Learn Ember One Video at a Time
- kahfei 13y agoLook 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?
- ryanflorence 13y agoYeah, this is just me doing my thing. Embercasts will be awesome.
- simonbarker87 13y agoExcellent, 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.
- jeffehobbs 13y agoThis is great! Watched a couple so far and followed along right on jsbin.
- zwily 13y agoryanflorence is really, really good at breaking things down and showing how powerful Ember can be with simple examples. Good job.
- ryankshaw 13y agoIndeed, there has been so much new innovation in the client side mvc world lately. much kudos to ryan for putting this together, very useful!
- quan 13y agoI found this screencast by Tom Dale very comprehensive and extremely easy to follow http://www.youtube.com/watch?v=Ga99hMi7wfY http://www.youtube.com/watch?v=Ga99hMi7wfY
- jahabrewer 13y agoIt'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.
- laughfactory 13y agoIt 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 rake 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.
- Joeri 13y agoAnd 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.
- tomdale 13y agoYou can always find the latest build of Ember Data here: http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest...
- marknutter 13y agoNice to see the Ember.js team and community reacting so swiftly to the criticisms about learnability.
- nateabele 13y ago<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> :-)
- ryanflorence 13y agoThere 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)
- bcrescimanno 13y agoA 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.
- ryanflorence 13y agoSolid point I considered carefully. I decided to bet on people watching the second video and keeping the first as bare-bones simple as possible.
- bcrescimanno 13y agoAh, well done then if it's included in the second video! Being at work, I didn't really have time to get that far. :)
- throwa 13y agoGood job. As make more videos, will you be using ember-data or pure ajax like discourse did.
- ryanflorence 13y agoI'll use both.
- alyx 13y agoGreat 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.
- adrianlmm 13y agoEmber.js adds to much boilerplate to the application, I like simplicity, that is why I like Angular.js more.
- ryanflorence 13y agoPlease don't turn this into an angular v. ember thread. They are both excellent frameworks.
- adrianlmm 13y agoI'm just wondering what is the appealing of Ember.js, I need some enlightenment.
- kailuowang 13y agoember.js provides an completeish set of opinions on how client side app should be built.
- ebiester 13y agoEmber 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?
- ryanflorence 13y agoThe 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 :) http://ember101.com/videos/004-master-detail-router-outlet-linkto http://ember101.com/videos/004-master-detail-router-outlet-l...
- ollysb 13y agoWow 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 :) ).
- fla 13y agoExcellent! A full-screen button on the youtube player would be nice to have.
- envex 13y agoYou can click the title on the video to go right to youtube. You can view fullscreen there.
- lobo_tuerto 13y agoYeah, 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?
- ryanflorence 13y agoIts the vanilla youtube iframe embed, the full screen button is there for me :\
- rane 13y agoThe HTML5 player doesn't have a fullscreen button in embedded videos.
- Jhsto 13y agoThanks, the videos were really insightful! How often will you be posting new videos and how many are you thinking to make?
- ryanflorence 13y agoI 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.
- jongold 13y agoReally excited about this - I think now that Ember's API has stabilised we'll be seeing lots more high quality resources :)
- Dirlewanger 13y agoI 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.
- Hoff 13y agoPlease 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.
- yoava 13y agoAgree, 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?
- josephjrobison 13y agoToo much buzz? The site's down for me...
- captain_obvious 13y agoThis is awesome! Keep up with the good work ryan!
- ryanflorence 13y agothank you, captain obvious.
- d0m 13y agoThis is awesome, thanks for sharing. Only feedback would be to bring on more video! ;-)
- jergason 13y agoI opened up the console and saw the site is built with Ember. Nice to see some dog-fooding.
- Lambent_Cactus 13y agoMaybe 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.
- fmoralesc 13y agoThe javascript is what you would have on the scope of the page. It works like the Web Console in Firefox or Chrome.
- zizee 13y agoPerhaps the answer to your question is that the code is being written inside of http://jsbin.com/ http://jsbin.com/ which does that combining automagically.
- schmrz 13y agoGreat 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).
- ryanflorence 13y agoAgreed. 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).
- zopticity 13y agoAwesome 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?
- ryanflorence 13y agoI created and use this: http://github.com/rpflorence/ember-tools http://github.com/rpflorence/ember-tools
- Paul_D_Santana 13y agoAny 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 http://imgur.com/BcyVjhg
- ryanflorence 13y agoShould be decent on tablets, didn't get to phones yet, but definitely will.
- Paul_D_Santana 13y agoThanks for responding! I hope that screenshot was useful. I just wasn't sure if I was the only one who was having trouble navigating.
- ryanflorence 13y agoDone, did it this morning. Could use a little more love, but its pretty good for 20 minutes of work :)
- Paul_D_Santana 13y agoWow, 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!
- tericho 13y agoBest 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 :)
- ryanflorence 13y agoonly payment is warm fuzzies :)
- jcbmllgn 13y agoAnother great (and much more complete) set of Ember tutorials are on tutsplus.com: https://tutsplus.com/course/lets-learn-ember/ https://tutsplus.com/course/lets-learn-ember/ It has 14 videos including a section that walks you through the making of a bookmark manager from scratch.
- webjames 13y agoHey 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