EmberJS 2018: Ember as a Component-Service Framework

In the Beginning, There Was MVC

  • Angle Bracket Invocation
  • Custom Components/Glimmer Components
  • Routable Components
  • Code Splitting/Packaging
  • Native Classes
  • First class NPM support
  • Module Unification
  • Fixing the Runloop
  • Ember Data RecordData (and unlocking new data patterns in general)


  • MVC?
  • MVP?
  • MVVM?
  • Model-Controller-Route-Component-Service? MCRCS?


  • Stateful/Stateless Components
  • Container/Presentational Components
  • Higher Order Components
  • Contextual Components
  • Yielding (and defining a public API for your component with yields)


  • Routes — Managed by the Router Service under the hood, and theoretically optional. Ember alumnus Alex Matchneer has been working on a new constraint based routing service recently, which shows there is definitely room for growth and potentially even alternative implementations here.
  • Models — Created and managed by the Ember Data store service, which is automatically injected in many places but fully optional. Alternative data services exist, such as Ember Apollo, Ember Redux, etc.
  • Controllers — These are one concept which does not neatly fit into either Component or Service, because Controllers are also tied to a template, and Services in general do not have a template. That said, Controllers may eventually be removed from the framework altogether, but you can think of them for now as “a service that is associated with a route”.

What are Services?

Standard Ember Services

Tying it All Together

Getting Started
Building a Todolist
What are Components?
Defining Components
Arguments & Actions
Component Patterns

What are Services?
Defining Services

The Router Service
Defining Routes
Defining Controllers
The Data Service
Defining Models
Finding Records
Creating, Updating, and Deleting
Other Services
The Object Model
Application Concerns




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Render Optimization Few Tips

Javascript ES6 features, scope and hoisting

JavaScript Promises: Understanding Promise.allSettled()

RxJS Declarative Pattern in Angular

RxJS is a JavaScript library for reactive programming

Integrating Redux With a Finished React App

Drupal 8, React, i18n and TypeScript

Program to swap two numbers without using the third variable

Angular vs VueJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


More from Medium

Cost of P2P App Development?

Why doesn’t the Living Worlds app use the wide images?

Creating Minecraft Plugin GUIs

Insiders’ Guide to Finding the Best Developer: Concise version