Ember.js

Overview

Ember.js 내용 정리.

개인 프로젝트로 Ember.js 를 사용하려 했으나... ember.js 에서의 zeromq 사용은 아직 많이 불편해서 express 를 사용하기로 함.

ember.js 에서 node.js(npm) 모듈을 사용하는 여러가지 방법들(bower, Ember-browserify, ...)이 있으나, 그렇게 잘 작동하지는 않는 것 같다. 하지만 다른 프로젝트가 있다면 ember.js 를 한번쯤은 사용해 보고 싶을 정도로 매력인 플랫폼이다.

Basic

Directory structure

• app

This is where folders and files for models, components, routes, templates and styles are stored. The majority of your coding on an Ember project happens in this folder.

• config

The config directory contains the environment.js where you can configure settings for your app.

• node_modules / package.json

This directory and file are from npm. npm is the package manager for Node.js. Ember is build with Node and uses a variety of Node.js modules for operation. The package.json file maintains the list of current pm dependencies for the app. Any Ember CLI addons you install will also show up here. Packages listed in package.json are installed in the node_modules directory.

• public

This directory contains assets such as images and fonts.

• vendeor

This directory is where front-end dependencies(such as JavaScript or CSS) that are not managed by Bower go.

• tests / testem.js

Automated tests for our app go in the tests folder, and Ember CLI's test runner testem is configured in testem.js.

• ember-cli-build.js

This file describes how Ember CLI should build our app.

ES6 Modules

<source lang=javascript> import EmberRouter from '@ember/routing/router'; import config from './config/environment';

const Router = EmberRouter.extend({

 location: config.locationType,
 rootURL: config.rootURL

});

Router.map(function() { });

export default Router; </source> Ember CLI uses ECMAScript 2015(ES2015 for short or previously known as ES6) modules to organize application code. For example, the line import EmberRouter from '@ember/routing/router'; gives us access to Ember's Router class as the variable EmberRouter. And the import config from './config/environment'; line gives us access to our configuration data as the variable config. const is a way to declare a read-only variable to make sure it is not accidentally reaasigned elsewhere. At the end of the file, export default Router; makes the Router variable defined in this file available to other parts of the app.

Ember data

Ember data is a library for robustly managing model data in your Ember.js applications.

Ember Data is designed to be agnostic to the underlying persistence mechanism, so it works just as well with JSON APIs over HTTP as it does with streaming WebSockets or local IndexedDB storage.

It provides many of the facilities you'd find in server-side ORMs like ActiveRecord, but is designed specifically for the unique environment of JavaScript in the browser.

In paticular, Ember Data uses Promises/A+-compatible promises from the ground up to manage loading and saving records, so intergrating with other JavaScript APIs is easy.

Instantiating the Store

In Ember Data, the *store* is responsible for managing the lifecycle of your models. Every time you need a model or a collection of models, you'll ask the store for it.

To create a store, you don't need to do anything. Just by loading the Ember Data library, all of the routes and controllers in your application will get a new store property. This property is an instance of *DS.Store* that will be shared across all of the routes and controllers in your app.

Adatper

Ember Data uses an object called an adapter to know how to talk to your server.

And adapter is just an object that knows how to translate requests from Ember Data into requests on your server. For example, if I ask the Ember Data store for a record of type person with an ID of 123, the adapter translates that into an XHR request to (for example) api.example.com/v3/person/123.json.

In Ember Data, the Adapter determines how data is persisted to a backend data store, such as the URL format and headers for a REST API. (The format of the data itself is determined by the serializer.) Ember Data's default Adapter has some built-in assumptions of how a REST API should look. If your backend conventions differ from these assumptions Ember Data makes it easy to change its functionality by swapping out or extending the default Adapter.

Some reasons for customizing an Adapter include using *underscored_case* in your urls, using a medium other than REST to communicate with your backend API or even using alocal storage backend.

Example

Defining your model

First things first: tell Ember Data about the models in your application. For example, imagine we're writing a blog reader app. Here's what your model definition would look like if you're using ES6 modules. <source lang=javascript> // app/models/blog-post.js import DS from 'ember-data';

const {attr, hasMany} = DS;

export default DS.Model.exten({

 title: attr('string'),
 createAt: attr('date'),

 comments: hasMany('comment')

});

// app/models/comment.js import DS from 'ember-data';

const { attr, belongsTo } = DS;

export default DS.Model.extend({

 body: attr('string'),
 username: attr('string'),

 post: belongsTo('blog-post')

}); </source>

Tutorials

• https://github.com/emberjs/data - Ember.js data github
• https://www.toptal.com/javascript/a-step-by-step-guide-to-building-your-first-ember-js-app - A Guide to Building Your First Ember.js App
• http://yoember.com/