DELIVERING WITH
EMBER.JS
They used EmberJS to
build a product
ABOUT ME
Market-like apps
Lots of events
Time critical
User interactions are
not that complex
Application Suite
Occasional events
Responsive
CRM-like features
User interactions
are somewhat
complex
Large number of
development teams
Consumer apps
Rare events
Device tailored
custom experience
Focused
User interactions
are very complex
Instead of working on my
app, I
▸ Hooked a Router
▸ Configured Webpack /
Whatever
▸ Set up a testing
solution
▸ Put together the best
environment
▸ Tweaked that
environment
aka REINVENTING THE WHEEL
EXCITEMENT
React
A problem
React
“I probably had my
personal moment of truth
around the beginning of
Doom 3's development,
when it became clear that it
is no longer possible to
deeply understand every
single part of a modern
application. There is just
too much...”
https://raw.githubusercontent.com/ESWAT/john-carmack-pl
an-archive/master/by_year/johnc_plan_2007.txt
WANT GOOD
APPS?
Have good
teams.
TODAY’S
AGENDA
Ember.js from a business perspective
Ember.js from a developer’s perspective
TechnoMagicDemo
Why should you care about
Ember?
Why should you care about
Ember?
Because getting the latest and greatest
often means rewriting parts of your apps
once a year, as the community abandons
existing solutions in search of
improvements.
INITIAL RELEASES
MV* Frameworks
Ember’s biggest strength
COMMUNITY
Core philosophy: Stability without stagnation
Identify common patterns that emerge from the web
development community and roll them into a
complete front-end stack.
The Ember community works hard to introduce new
ideas with an eye towards migration.
This makes it easy to get started on new projects
and jump into existing ones.
Core philosophy: Stability without stagnation
The direction in which the framework is taken does
not depend on a particular business choice.
No Angular 2 fiasco.
Not driven by a company
AN INDUSTRY SHIFT
Components
“Unidirectional data flow”
Virtual DOM
Isomorphic apps
The request for
comments process is
intended to provide a
consistent and
controlled path for new
features to enter the
framework.
Changes done via RFC
Explosion of innovation
React’s true innovation
COMPONENTS*
* Predictable unidirectional data flow, explicit
mutation, component boundaries, lack of
two-way binding
Transition to 2.X
- Ember CLI
- ES6 Modules
- Revamped components
with “virtual DOM”
- API simplification
- and a lot more
Transition to 2.X
“Hopefully, this plan demonstrates that staying on
the cutting-edge can be done without rewriting your
app.
There are a huge number of Ember apps in
production today, and we're looking forward to a
time in the very near future where they can start to
take advantage these new features.”
https://github.com/emberjs/rfcs/pull/15
Ember comes with
- separation of concerns
- object model (classes,
inheritance, mixins)
- router
- observers
- computed properties
- isolated components
- container
- templating system
- run loop
Explosion of innovation
JavaScript Fatigue(?)
2.9.0
2.10­beta
2.8.0
2.9­beta
2.7.0
2.8­beta
2.6.0
2.7­beta
2.8­LTS2.4­LTS
Sep 23Aug 12Jul 1May 20
2.5.0
2.6­beta
2.4.0
2.5­beta
master
2.3.0
Jan 15
Canary
Beta
Release
LTS
2.4­beta
Feb 26 Apr 8
LTS releases will receive critical bugfixes for 6 release cycles (36 weeks).
LTS releases will receive security patches for 10 release cycles (60 weeks).
Ember’s release channels
Ember-cli provides
- Package manager
- Directory structure and file
naming conventions
- Build system (broccoli)
- jsHint on every run
- Livereload
- Module system
- ES6 transpilation
- Generators
- Test Framework
- Addon system
CONVENTION
OVER
CONFIGURATION
Decrease the number of
decisions that developers need
to make, gaining simplicity, but
not necessarily losing
flexibility.
CONVENTION
OVER
CONFIGURATION
A developer only needs to
specify unconventional
aspects of the application.
CONVENTION
OVER
CONFIGURATION
The combination of
conventions over configuration,
Glimmer, and DDAU means that
Ember developers can easily
find the sweet spot of having
both productivity and
performance.
npm install -g ember-cli
ember new demo-playground
ember s
let’s start a business
Recap
▸ We wrote some code
2 groups of components
Container
Components act like
the “backend of the
frontend” in a way.
They are “connected”
to the datasource and
delegate to other
components for any
html that is rendered
on the page.
2 groups of components
Presentational
Components render
HTML given some
object/data
2 groups of components
Container
Components and
Presentational
Components
vs.
Business
Components and
Toolkit Components
EMBER 2.X
DATA DOWN,
ACTIONS US
COMPUTED
PROPERTIES
Computed properties let you
declare functions as properties.
It takes one or more normal
properties and creates a new
value.
They observe any changes
made to the properties they
depend on and are dynamically
updated when they're called
They can be chained.
COMPUTED
PROPERTIES
COMPUTED
PROPERTIES
Ember Data
Ember Data is a library for
managing model data in Ember.
It’s 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.
ember install ember-data
Ember Data
Ember Data is a library for
managing model data in Ember.
It’s 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.
XHR XHR
returns
Promise
Resolves
with JSON
Promise
Resolves
with Record
find()
find()
Application
Store
Adapter
Network
Ember Data
Ember Data is a library for
managing model data in Ember.
It’s 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.
Ember FastBoot
Convention over config
isomorphic apps.
FastBoot works by running your
Ember application in Node.js.
When a user visits your site, the
initial HTML is rendered and
served to the user.
ember install ember-cli-fastboot
Ember Redux
You can use Redux together
with React, or with any other
view library.
ember install ember-redux
http://www.ember-redux.com/ddau/
Ember comes with
For a heavy RESTful front-
end apps, Ember is the best
framework.
It cuts out almost all boiler
plate and makes many
convention based
decisions for you.
http://emberjs.com/
THANKS!
Any questions?
You can find me at @Andrei_Cimpean

Delivering with ember.js