{"action":"created","comment":{"url":"https://api.github.com/repos/emberjs/guides/pulls/comments/46370363","id":46370363,"diff_hunk":"@@ -0,0 +1,262 @@\n+This guide will teach you how to build a simple app using Ember from\n+scratch.\n+\n+We'll cover these steps:\n+\n+1. Installing Ember\n+2. Creating a new application\n+3. Defining a route\n+4. Writing a UI component\n+5. Building your app to be deployed to production\n+\n+## Install Ember\n+\n+You can install Ember with a single command using npm, the Node.js package\n+manager. Type this into your terminal:\n+\n+```sh\n+npm install ember-cli -g\n+```\n+\n+Don't have npm? [Learn how to install Node.js and npm here][npm].\n+\n+[npm]: https://docs.npmjs.com/getting-started/installing-node\n+\n+## Create a New Application\n+\n+Once you've installed Ember via npm, you will have access to a new\n+`ember` command in your terminal. You can use the `ember new` command to\n+create a new application.\n+\n+```sh\n+ember new ember-quickstart\n+```\n+\n+This one command will create a new directory called `ember-quickstart`\n+and set up a new Ember application inside of it.  Out of the box, your\n+application will include:\n+\n+* A development server\n+* Template compilation\n+* CSS preprocessing\n+* JavaScript and CSS minification\n+* ES2015 features via Babel\n+\n+By providing everything you need to build production-ready web\n+applications in an integrated package, Ember makes starting new projects\n+a breeze.\n+\n+Let's make sure everything is working properly. Open the\n+`ember-quickstart` directory in your favorite editor, such as Sublime\n+Text or Vim. Once you have your editor open, `cd` into the application\n+directory and start the development server by typing:\n+\n+```sh\n+cd ember-quickstart\n+ember serve\n+```\n+\n+After a few seconds, you should see output that looks like this:\n+\n+```text\n+Livereload server on http://localhost:49152\n+Serving on http://localhost:4200/\n+```\n+\n+(To stop the server at any time, type Ctrl-C in your terminal.)\n+\n+Open [http://localhost:4200/](http://localhost:4200) in your browser of\n+choice. You should see a page that says \"Welcome to Ember\" and not much\n+else. Congratulations! You just created and booted your first Ember app.\n+\n+Switch to your editor and open `app/templates/application.hbs`. This is\n+called the `application` template and it is always on screen while the\n+user has your application loaded.\n+\n+In your editor, change the text inside the `<h1>` from `Welcome to\n+Ember` to `PeopleTracker` and save the file. Notice that Ember detects\n+the change you just made and automatically reloads the page for you in\n+the background. You should see that \"Welcome to Ember\" has been\n+replaced by \"PeopleTracker\".\n+\n+## Define a Route\n+\n+Let's build an application that shows a list of scientists. To do that,\n+the first step is to create a route. For now, you can think of routes as\n+being the different pages that make up your application.\n+\n+Ember comes with _generators_ that automate the boilerplate code for\n+common tasks. To generate a route, type this in your terminal:\n+\n+```sh\n+ember generate route scientists\n+```\n+\n+You'll see output like this:\n+\n+```text\n+installing route\n+  create app/routes/scientists.js\n+  create app/templates/scientists.hbs\n+updating router\n+  add route scientists\n+installing route-test\n+  create tests/unit/routes/scientists-test.js\n+```\n+\n+That's Ember telling you that it has created:\n+\n+1. A template to be displayed when the user visits `/scientists`\n+2. A `Route` object that fetches the model used by that template\n+3. An entry in the application's router (located in `app/router.js`)\n+4. A unit test for this route\n+\n+Open the newly-created template in `app/templates/scientists.hbs` and add\n+the following HTML:\n+\n+```app/templates/scientists.hbs\n+<h2>List of Scientists</h2>\n+```\n+\n+In your browser, open\n+[http://localhost:4200/scientists](http://localhost:4200/scientists). You should\n+see the `<h2>` you put in the `scientists.hbs` template, right below the\n+`<h1>` from our `application.hbs` template.\n+\n+Now that we've got the `scientists` template rendering, let's give it some\n+data to render. We do that by specifying a _model_ for that route, and\n+we can specify a model by editing `app/routes/scientists.js`.\n+\n+We'll take the code created for us by the generator and add a `model()`\n+method to the `Route`:\n+\n+```app/routes/scientists.js{+4,+5,+6}\n+import Ember from 'ember';\n+\n+export default Ember.Route.extend({\n+  model() {\n+    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];\n+  }\n+});\n+```\n+\n+(This code example uses the latest features in JavaScript, some of which\n+you may not be familiar with. Learn more with this [overview of the\n+newest JavaScript features][es6-bullet-points].)\n+\n+[es6-bullet-points]: https://ponyfoo.com/articles/es6\n+\n+In a route's `model()` method, you return whatever data you want to make\n+available to the template. If you need to fetch data asynchronously, the\n+`model()` method supports any library that uses [JavaScript\n+Promises][promises].\n+\n+[promises]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\n+\n+Now let's tell Ember how to turn that array of strings into HTML. Open\n+the `scientists` template and add some Handlebars code to loop through the\n+array and print it:\n+\n+```app/templates/scientists.hbs{+3,+4,+5,+6,+7}\n+<h2>List of Scientists</h2>\n+\n+<ul>\n+  {{#each model as |scientist|}}\n+    <li>{{scientist}}</li>\n+  {{/each}}\n+<ul>\n+```\n+\n+Here, we use the `each` helper to loop over each item in the array we\n+provided from the `model()` hook and print it inside an `<li>` element.\n+\n+## Create a UI Component\n+\n+As your application grows and you notice you are sharing UI elements\n+between multiple pages (or using them multiple times on the same page),\n+Ember makes it easy to refactor your templates into reusable components.\n+\n+Let's create a `people-list` component that we can use\n+in multiple places to show a list of people.\n+\n+As usual, there's a generator that makes this easy for us. Make a new\n+component by typing:\n+\n+```sh\n+ember generate component people-list\n+```\n+\n+Copy and paste the `scientists` template into the `people-list`\n+component's template and edit it to look as follows:\n+\n+```app/templates/components/people-list.hbs\n+<h2>{{title}}</h2>\n+\n+<ul>\n+  {{#each people as |person|}}\n+    <li>{{person}}</li>\n+  {{/each}}\n+<ul>\n+```\n+\n+Note that we've changed the title from a hard-coded string (\"List of\n+Scientists\") to a dynamic property (`{{title}}`). We've also renamed\n+`scientist` to the more-generic `person`, decreasing the coupling of our\n+component to where it's used.\n+\n+Save this template and switch back to the `scientists` template. Replace all\n+our old code with our new componentized version. Components look like\n+HTML tags but instead of using angle brackets (`<tag>`) they use double\n+curly braces (`{{component}}`). We're going to tell our component:\n+\n+1. What title to use, via the `title` attribute.\n+2. What array of people to use, via the `people` attribute. We'll\n+   provide this route's `model` as the list of people.\n+\n+```app/templates/people.hbs{-1,-2,-3,-4,-5,-6,-7,+8}\n+<h2>List of Scientists</h2>\n+\n+<ul>","path":"source/getting-started/quick-start.md","position":219,"original_position":219,"commit_id":"dbfe6fee6f1b5e54211f09d1ff26fd3f8b223f6a","original_commit_id":"dbfe6fee6f1b5e54211f09d1ff26fd3f8b223f6a","user":{"login":"tomdale","id":90888,"avatar_url":"https://avatars.githubusercontent.com/u/90888?v=3","gravatar_id":"","url":"https://api.github.com/users/tomdale","html_url":"https://github.com/tomdale","followers_url":"https://api.github.com/users/tomdale/followers","following_url":"https://api.github.com/users/tomdale/following{/other_user}","gists_url":"https://api.github.com/users/tomdale/gists{/gist_id}","starred_url":"https://api.github.com/users/tomdale/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tomdale/subscriptions","organizations_url":"https://api.github.com/users/tomdale/orgs","repos_url":"https://api.github.com/users/tomdale/repos","events_url":"https://api.github.com/users/tomdale/events{/privacy}","received_events_url":"https://api.github.com/users/tomdale/received_events","type":"User","site_admin":false},"body":"When rendered, it shows the previous code as \"removed\" (note the wonky diff syntax in the file name).","created_at":"2015-12-02T02:19:22Z","updated_at":"2015-12-02T02:19:22Z","html_url":"https://github.com/emberjs/guides/pull/1007#discussion_r46370363","pull_request_url":"https://api.github.com/repos/emberjs/guides/pulls/1007","_links":{"self":{"href":"https://api.github.com/repos/emberjs/guides/pulls/comments/46370363"},"html":{"href":"https://github.com/emberjs/guides/pull/1007#discussion_r46370363"},"pull_request":{"href":"https://api.github.com/repos/emberjs/guides/pulls/1007"}}},"pull_request":{"url":"https://api.github.com/repos/emberjs/guides/pulls/1007","id":52050288,"html_url":"https://github.com/emberjs/guides/pull/1007","diff_url":"https://github.com/emberjs/guides/pull/1007.diff","patch_url":"https://github.com/emberjs/guides/pull/1007.patch","issue_url":"https://api.github.com/repos/emberjs/guides/issues/1007","number":1007,"state":"open","locked":false,"title":"Quick Start Guide","user":{"login":"tomdale","id":90888,"avatar_url":"https://avatars.githubusercontent.com/u/90888?v=3","gravatar_id":"","url":"https://api.github.com/users/tomdale","html_url":"https://github.com/tomdale","followers_url":"https://api.github.com/users/tomdale/followers","following_url":"https://api.github.com/users/tomdale/following{/other_user}","gists_url":"https://api.github.com/users/tomdale/gists{/gist_id}","starred_url":"https://api.github.com/users/tomdale/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tomdale/subscriptions","organizations_url":"https://api.github.com/users/tomdale/orgs","repos_url":"https://api.github.com/users/tomdale/repos","events_url":"https://api.github.com/users/tomdale/events{/privacy}","received_events_url":"https://api.github.com/users/tomdale/received_events","type":"User","site_admin":false},"body":"After a few discussions with @wycats, we realized that the fact that there's no \"try Ember in 5 minutes\" resource was extremely harmful to adoption. This guide is my attempt to rectify that. It significantly expands on (and replaces) the old \"Your First Ember App\" section.\r\n\r\nMost other libraries and frameworks have something like this. You can compare it, for example, to [Angular 2's quickstart](https://angular.io/docs/js/latest/quickstart.html). One nice thing that Ember CLI does for us is eliminate almost all of the work happening in Angular's quickstart, so our quickstart can actually begin covering the conceptual model rather than just have the user type boilerplate code.\r\n\r\nI'd love to hear feedback, particularly from beginners. And I want to make sure this integrates well with the tutorial work @michaelrkn has been doing.","created_at":"2015-11-28T22:54:52Z","updated_at":"2015-12-02T02:19:22Z","closed_at":null,"merged_at":null,"merge_commit_sha":"3416864a738501aa89174550da0846dc28fbc65e","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/emberjs/guides/pulls/1007/commits","review_comments_url":"https://api.github.com/repos/emberjs/guides/pulls/1007/comments","review_comment_url":"https://api.github.com/repos/emberjs/guides/pulls/comments{/number}","comments_url":"https://api.github.com/repos/emberjs/guides/issues/1007/comments","statuses_url":"https://api.github.com/repos/emberjs/guides/statuses/dbfe6fee6f1b5e54211f09d1ff26fd3f8b223f6a","head":{"label":"emberjs:quickstart","ref":"quickstart","sha":"dbfe6fee6f1b5e54211f09d1ff26fd3f8b223f6a","user":{"login":"emberjs","id":1253363,"avatar_url":"https://avatars.githubusercontent.com/u/1253363?v=3","gravatar_id":"","url":"https://api.github.com/users/emberjs","html_url":"https://github.com/emberjs","followers_url":"https://api.github.com/users/emberjs/followers","following_url":"https://api.github.com/users/emberjs/following{/other_user}","gists_url":"https://api.github.com/users/emberjs/gists{/gist_id}","starred_url":"https://api.github.com/users/emberjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emberjs/subscriptions","organizations_url":"https://api.github.com/users/emberjs/orgs","repos_url":"https://api.github.com/users/emberjs/repos","events_url":"https://api.github.com/users/emberjs/events{/privacy}","received_events_url":"https://api.github.com/users/emberjs/received_events","type":"Organization","site_admin":false},"repo":{"id":22767401,"name":"guides","full_name":"emberjs/guides","owner":{"login":"emberjs","id":1253363,"avatar_url":"https://avatars.githubusercontent.com/u/1253363?v=3","gravatar_id":"","url":"https://api.github.com/users/emberjs","html_url":"https://github.com/emberjs","followers_url":"https://api.github.com/users/emberjs/followers","following_url":"https://api.github.com/users/emberjs/following{/other_user}","gists_url":"https://api.github.com/users/emberjs/gists{/gist_id}","starred_url":"https://api.github.com/users/emberjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emberjs/subscriptions","organizations_url":"https://api.github.com/users/emberjs/orgs","repos_url":"https://api.github.com/users/emberjs/repos","events_url":"https://api.github.com/users/emberjs/events{/privacy}","received_events_url":"https://api.github.com/users/emberjs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/emberjs/guides","description":"The source for http://guides.emberjs.com","fork":false,"url":"https://api.github.com/repos/emberjs/guides","forks_url":"https://api.github.com/repos/emberjs/guides/forks","keys_url":"https://api.github.com/repos/emberjs/guides/keys{/key_id}","collaborators_url":"https://api.github.com/repos/emberjs/guides/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/emberjs/guides/teams","hooks_url":"https://api.github.com/repos/emberjs/guides/hooks","issue_events_url":"https://api.github.com/repos/emberjs/guides/issues/events{/number}","events_url":"https://api.github.com/repos/emberjs/guides/events","assignees_url":"https://api.github.com/repos/emberjs/guides/assignees{/user}","branches_url":"https://api.github.com/repos/emberjs/guides/branches{/branch}","tags_url":"https://api.github.com/repos/emberjs/guides/tags","blobs_url":"https://api.github.com/repos/emberjs/guides/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/emberjs/guides/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/emberjs/guides/git/refs{/sha}","trees_url":"https://api.github.com/repos/emberjs/guides/git/trees{/sha}","statuses_url":"https://api.github.com/repos/emberjs/guides/statuses/{sha}","languages_url":"https://api.github.com/repos/emberjs/guides/languages","stargazers_url":"https://api.github.com/repos/emberjs/guides/stargazers","contributors_url":"https://api.github.com/repos/emberjs/guides/contributors","subscribers_url":"https://api.github.com/repos/emberjs/guides/subscribers","subscription_url":"https://api.github.com/repos/emberjs/guides/subscription","commits_url":"https://api.github.com/repos/emberjs/guides/commits{/sha}","git_commits_url":"https://api.github.com/repos/emberjs/guides/git/commits{/sha}","comments_url":"https://api.github.com/repos/emberjs/guides/comments{/number}","issue_comment_url":"https://api.github.com/repos/emberjs/guides/issues/comments{/number}","contents_url":"https://api.github.com/repos/emberjs/guides/contents/{+path}","compare_url":"https://api.github.com/repos/emberjs/guides/compare/{base}...{head}","merges_url":"https://api.github.com/repos/emberjs/guides/merges","archive_url":"https://api.github.com/repos/emberjs/guides/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/emberjs/guides/downloads","issues_url":"https://api.github.com/repos/emberjs/guides/issues{/number}","pulls_url":"https://api.github.com/repos/emberjs/guides/pulls{/number}","milestones_url":"https://api.github.com/repos/emberjs/guides/milestones{/number}","notifications_url":"https://api.github.com/repos/emberjs/guides/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/emberjs/guides/labels{/name}","releases_url":"https://api.github.com/repos/emberjs/guides/releases{/id}","created_at":"2014-08-08T18:25:02Z","updated_at":"2015-12-01T01:06:16Z","pushed_at":"2015-12-01T16:19:39Z","git_url":"git://github.com/emberjs/guides.git","ssh_url":"git@github.com:emberjs/guides.git","clone_url":"https://github.com/emberjs/guides.git","svn_url":"https://github.com/emberjs/guides","homepage":null,"size":27889,"stargazers_count":163,"watchers_count":163,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":468,"mirror_url":null,"open_issues_count":21,"forks":468,"open_issues":21,"watchers":163,"default_branch":"master"}},"base":{"label":"emberjs:master","ref":"master","sha":"f04ac1e02f5f7a05532bd3eac56f0f5be6fc1c5c","user":{"login":"emberjs","id":1253363,"avatar_url":"https://avatars.githubusercontent.com/u/1253363?v=3","gravatar_id":"","url":"https://api.github.com/users/emberjs","html_url":"https://github.com/emberjs","followers_url":"https://api.github.com/users/emberjs/followers","following_url":"https://api.github.com/users/emberjs/following{/other_user}","gists_url":"https://api.github.com/users/emberjs/gists{/gist_id}","starred_url":"https://api.github.com/users/emberjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emberjs/subscriptions","organizations_url":"https://api.github.com/users/emberjs/orgs","repos_url":"https://api.github.com/users/emberjs/repos","events_url":"https://api.github.com/users/emberjs/events{/privacy}","received_events_url":"https://api.github.com/users/emberjs/received_events","type":"Organization","site_admin":false},"repo":{"id":22767401,"name":"guides","full_name":"emberjs/guides","owner":{"login":"emberjs","id":1253363,"avatar_url":"https://avatars.githubusercontent.com/u/1253363?v=3","gravatar_id":"","url":"https://api.github.com/users/emberjs","html_url":"https://github.com/emberjs","followers_url":"https://api.github.com/users/emberjs/followers","following_url":"https://api.github.com/users/emberjs/following{/other_user}","gists_url":"https://api.github.com/users/emberjs/gists{/gist_id}","starred_url":"https://api.github.com/users/emberjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emberjs/subscriptions","organizations_url":"https://api.github.com/users/emberjs/orgs","repos_url":"https://api.github.com/users/emberjs/repos","events_url":"https://api.github.com/users/emberjs/events{/privacy}","received_events_url":"https://api.github.com/users/emberjs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/emberjs/guides","description":"The source for http://guides.emberjs.com","fork":false,"url":"https://api.github.com/repos/emberjs/guides","forks_url":"https://api.github.com/repos/emberjs/guides/forks","keys_url":"https://api.github.com/repos/emberjs/guides/keys{/key_id}","collaborators_url":"https://api.github.com/repos/emberjs/guides/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/emberjs/guides/teams","hooks_url":"https://api.github.com/repos/emberjs/guides/hooks","issue_events_url":"https://api.github.com/repos/emberjs/guides/issues/events{/number}","events_url":"https://api.github.com/repos/emberjs/guides/events","assignees_url":"https://api.github.com/repos/emberjs/guides/assignees{/user}","branches_url":"https://api.github.com/repos/emberjs/guides/branches{/branch}","tags_url":"https://api.github.com/repos/emberjs/guides/tags","blobs_url":"https://api.github.com/repos/emberjs/guides/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/emberjs/guides/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/emberjs/guides/git/refs{/sha}","trees_url":"https://api.github.com/repos/emberjs/guides/git/trees{/sha}","statuses_url":"https://api.github.com/repos/emberjs/guides/statuses/{sha}","languages_url":"https://api.github.com/repos/emberjs/guides/languages","stargazers_url":"https://api.github.com/repos/emberjs/guides/stargazers","contributors_url":"https://api.github.com/repos/emberjs/guides/contributors","subscribers_url":"https://api.github.com/repos/emberjs/guides/subscribers","subscription_url":"https://api.github.com/repos/emberjs/guides/subscription","commits_url":"https://api.github.com/repos/emberjs/guides/commits{/sha}","git_commits_url":"https://api.github.com/repos/emberjs/guides/git/commits{/sha}","comments_url":"https://api.github.com/repos/emberjs/guides/comments{/number}","issue_comment_url":"https://api.github.com/repos/emberjs/guides/issues/comments{/number}","contents_url":"https://api.github.com/repos/emberjs/guides/contents/{+path}","compare_url":"https://api.github.com/repos/emberjs/guides/compare/{base}...{head}","merges_url":"https://api.github.com/repos/emberjs/guides/merges","archive_url":"https://api.github.com/repos/emberjs/guides/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/emberjs/guides/downloads","issues_url":"https://api.github.com/repos/emberjs/guides/issues{/number}","pulls_url":"https://api.github.com/repos/emberjs/guides/pulls{/number}","milestones_url":"https://api.github.com/repos/emberjs/guides/milestones{/number}","notifications_url":"https://api.github.com/repos/emberjs/guides/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/emberjs/guides/labels{/name}","releases_url":"https://api.github.com/repos/emberjs/guides/releases{/id}","created_at":"2014-08-08T18:25:02Z","updated_at":"2015-12-01T01:06:16Z","pushed_at":"2015-12-01T16:19:39Z","git_url":"git://github.com/emberjs/guides.git","ssh_url":"git@github.com:emberjs/guides.git","clone_url":"https://github.com/emberjs/guides.git","svn_url":"https://github.com/emberjs/guides","homepage":null,"size":27889,"stargazers_count":163,"watchers_count":163,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":468,"mirror_url":null,"open_issues_count":21,"forks":468,"open_issues":21,"watchers":163,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/emberjs/guides/pulls/1007"},"html":{"href":"https://github.com/emberjs/guides/pull/1007"},"issue":{"href":"https://api.github.com/repos/emberjs/guides/issues/1007"},"comments":{"href":"https://api.github.com/repos/emberjs/guides/issues/1007/comments"},"review_comments":{"href":"https://api.github.com/repos/emberjs/guides/pulls/1007/comments"},"review_comment":{"href":"https://api.github.com/repos/emberjs/guides/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/emberjs/guides/pulls/1007/commits"},"statuses":{"href":"https://api.github.com/repos/emberjs/guides/statuses/dbfe6fee6f1b5e54211f09d1ff26fd3f8b223f6a"}}}}