The anatomy of an Ember application

An Ember application is composed of a set of core elements with well-defined responsibilities and properties. They are defined under the Ember and DS namespaces of the Ember API.

This diagram depicts the high-level structure of an Ember application:

The anatomy of an Ember application

Routers

A router manages the application state. It maps a set of logical routes against unique URLs as mapped in the router configuration.

Routes or route handlers

A route handler, also known as a route (defined in Ember.Route), represents the handler for an individual route transition. A route can render a template that displays a screen. A route provides a model (data) that can be consumed by its template and controller. It has a corresponding controller that can handle user actions and maintain the state. A route can handle user actions by itself.

Templates

Templates are HTML fragments, usually rendered by routes and components. The user interface of an Ember application is composed of a collection of templates. Templates use the Handlebars syntax, which looks like regular HTML with some Handlebars expressions, which are enclosed in double curly braces ({{ }}). These Handlebars expressions bind Ember resources such as properties, objects, helpers, and components.

Components

Components control the behavior of the user interface. They handle user actions and manage many attributes that are used by the templates. A component consists of two parts:

  • A JavaScript object that extends Ember.Component, where the actions and attributes are defined
  • A template that is rendered into the parent view, usually that of a router

Models

Part of the Ember Data project, models represent the state of domain data in an Ember application. An Ember application will typically have a set of models extending from DS.Model. Routes usually display model data with the help of templates and modify data from the action handlers. Models are often loaded from a store (DS.Store), while Model instances are fetched from the actual persistent storage, mostly an API endpoint on the web server. Models can be persisted to the store; usually, they are sent back to the appropriate API endpoints.

Controllers

Controllers have a limited role in modern Ember applications; they will be deprecated in future versions. Currently, their use is limited to maintaining the state for a route and handling user actions. Since routes and components can handle actions, they are the perfect places for adding action handlers instead of controllers.

Besides these core elements, there are some supporting components that help the application development be easier and more elegant.

Input helpers

These are ready-made components bundled with Ember for taking inputs from users. Most of them are Ember versions of general form controls. Examples are the {{input}} and {{textarea}} input helpers. Custom-developed components can be used similarly to input helpers.

Custom helpers

Helpers add custom functionality to an application when they are not readily available, for using inside templates. Mostly, they are used for some kind of formatting. Examples are {{format-date}} and {{format-currency}}.

Initializers

Initializers can perform certain operations on application boot. There are two types of initializers: application initializers, which are executed on application boot, and application instance initializers, which load on application instance boot.

Services

Services are objects that can hold data and functions whose scope is application-wide. They are typically used for encapsulating core business logic spanned across many routes. Services can be injected into controllers, routes, components, and so on, where their methods can be invoked.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset