Skip to content
This repository has been archived by the owner on May 26, 2019. It is now read-only.

Commit

Permalink
Merge pull request #75 from bsclifton/master
Browse files Browse the repository at this point in the history
Clean redo of #7
  • Loading branch information
rwjblue committed Mar 22, 2015
2 parents 2b0f466 + 67df139 commit c7b8871
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 5 deletions.
8 changes: 8 additions & 0 deletions data/guides.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@
url: ""
skip_sidebar: true

- title: "Getting Started"
url: 'ember-cli'
chapters:
- title: "Installing Ember"
url: "index"
- title: "Glossary"
url: "glossary"

- title: "Getting Ember"
url: 'getting-ember'
chapters:
Expand Down
85 changes: 85 additions & 0 deletions source/ember-cli/glossary.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
Joining a web development community can be a challenge within itself, especially when all the resources you visit assume you're familiar with other technologies that you're not familiar with.

Our goal is to help you avoid that mess and come up to speed as fast as possible; you can consider us your internet friend.

## CDN
Content Delivery Network

This is typically a paid service you can use to get great performance for your app. You start by uploading a resource (image, JavaScript file, etc) to a company like Akamai or CloudFlare. That uploaded resource will have an absolute URL which you can reference anywhere in your app. This URL will which resolves differently for folks depending on where they're browsing.

Behind the scenes, the CDN will distribute your content geographically with the goal of end-users being able to fetch your content with the lowest latency possible. For example, if a user is in India, they'd likely get content served from India faster than from the United States.


## CoffeeScript, TypeScript
These are both languages which end up compiling to JavaScript; you're able to write your code using the syntax provided and when ready you compile/transpile your TypesScript or CoffeeScript into JavaScript.

[CoffeeScript vs TypeScript](http://www.stoutsystems.com/articles/coffeescript-versus-typescript/)


## Evergreen browsers
Browsers that update themselves (without user intervention).

[Evergreen Browsers](http://tomdale.net/2013/05/evergreen-browsers/)


## ES3, ES5, ES5.1, ES6 (aka ES2015), etc
ES stands for ECMAScript, which is the specification that JavaScript is based on. The number that follows is the version of the specification.

Most browsers support at least ES5, and some even have ES6 (also known as ES2015) support. You can check each browser's support (including yours) here:

* [ES5 support](http://kangax.github.io/compat-table/es5/)
* [ES6 support](http://kangax.github.io/compat-table/es6/")

[ECMAScript](https://en.wikipedia.org/wiki/ECMAScript)


## LESS, Sass
Both LESS and Sass are types of CSS preprocessor markup intended to give you much more control over your CSS. During the build process, the LESS or Sass resources "compile" down to vanilla CSS (which is what the end-user downloads and use in their browser).

[Sass/Less Comparison](https://gist.github.com/chriseppstein/674726)


## Linter, linting, jslint, jshint
A validation tool which checks for common issues in your JavaScript. You'd usually use this in your build process to enforce quality in your codebase. A great example of something to check for: *making sure you've always got your semicolons*.

[An example of some of the options you can configure](http://jshint.com/docs/options/)


## Polyfill
This is concept that typically means providing JavaScript which tests for features that are missing (prototypes not defined, etc) and "fills" them by providing an implementation.


## Promise
Asynchronous calls typically return a promise (or deferred). This is an object which has a state: it can be given handlers for when it's fulfilled or rejected.

Ember makes use of these in places like the model hook for a route. Until the promise resolves, Ember is able to put the route into a "loading" state.

[An open standard for sound, interoperable JavaScript promises](https://promisesaplus.com/)
[emberjs.com - A word on promises](http://emberjs.com/guides/routing/asynchronous-routing/#toc_a-word-on-promises)


## SSR
Server Side Rendering

[Inside FastBoot: The Road to Server-Side Rendering](http://emberjs.com/blog/2014/12/22/inside-fastboot-the-road-to-server-side-rendering.html)


## Transpile
When related to JavaScript, this can be part of your build process which "transpiles" (converts) your ES6 syntax JavaScript to JavaScript that is supported by current browsers.

Besides ES6, you'll see a lot of content about compiling/transpiling CoffeeScript, a short-hand language which can "compile" to JavaScript.

* Ember CLI specifically uses [Babel](https://babeljs.io/) via the [ember-cli-babel](https://github.com/babel/ember-cli-babel) plugin.


## Shadow DOM
**Not to be confused with Virtual DOM**. Shadow DOM is still a work in progress, but basically a proposed way to have an "isolated" DOM encapsulated within your app's DOM.

Creating a re-usable "widget" or control might be a good use-case for this. Browsers implement some of their controls using their own version of a shadow DOM.

* [W3C Working Draft](http://www.w3.org/TR/shadow-dom/)
* [What the Heck is Shadow DOM?](http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/)


## Virtual DOM
**Not to be confused with Shadow DOM**. The concept of a virtual DOM means abstracting your code (or in our case, Ember) away from using the browser's DOM in favor of a "virtual" DOM that can easily be accessed for read/writes or even serialized.
58 changes: 58 additions & 0 deletions source/ember-cli/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
Installing Ember is *easy*! And our new install process includes *Ember CLI*, Ember's build tool

* State of the art asset management (including combining, minifying, and versioning)
* Built-in generators can help you create components, routes, and more (and their test cases!)
* A standard project layout. Working on other Ember apps is easy, they're organized similarly
* Native [JavaScript modules](http://jsmodules.io/) to keep your project organized
* A complete testing framework (unit tests, integration tests)
* Access to a growing ecosystem of [Ember Addons](http://www.emberaddons.com/). Add functionality to your app without writing a single line of code! They're already packaged up and ready to add to your app


## Installation

Installing Ember is done using [NPM](#toc_got-node-and-npm). While you're at it we recommend you to also install phantomjs (if you don't have it already). Ember CLI uses phantomjs to run tests from the command line (without the need for a browser to be open).

```bash
npm install -g ember-cli
npm install -g phantomjs
```

## Testing your installation

At this point, you should be good to go... but we can test out your install to make sure everything works great.

Let's run the generator for your project:

```bash
ember new my-app
```

This will create a new `my-app` folder and generate an application structure for you.

Once the generation process finishes, let's verify that we can launch the newly created app:

```bash
cd my-app
ember server
```

navigate to `http://localhost:4200` to see your new app in action.

## Troubleshooting

### Got Node (and NPM)?

Node Package Manager (npm) comes bundled with node.js and makes installing easy. If you're not sure if you have node.js installed, try running the following from your command line:

```bash
node --version
```

If the command works and you get back something like 0.10.x, you've already got it installed!

If you **don't** have it installed...

* Windows or Mac users [can simply download and run the installer](http://nodejs.org/download/).
* Linux users [can check out this great guide](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager) by Joyent for install instructions.

Once you've got node.js installed, re-run the above ```node --version``` to verify your install.
4 changes: 0 additions & 4 deletions source/stylesheets/shared.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,6 @@ code {
margin: 1em 1.5em;
}

#content ul {
list-style-type: none;
}

#content .highlight .scroller {
overflow: auto;
}
Expand Down
1 change: 0 additions & 1 deletion source/stylesheets/site.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,6 @@ p {
display: block;
text-transform: none;
color: #d84a32;
font-size: 13px;
&:hover {
background-color: #f2d1cb;
color: black;
Expand Down

0 comments on commit c7b8871

Please sign in to comment.