The slides I used while giving an introduction to Ember.JS at Codecamp Cluj Napoca in November 2016.
It is a gist for all the things ember provide and why it enables teams to deliver products without blocking them in the past, as far as approaches and technology goes.
4. 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
5. 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
8. “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
12. 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.
15. Core philosophy: Stability without stagnation
Identify common patterns that emerge from the web
development community and roll them into a
complete front-end stack.
16. 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
17. 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
19. 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
22. Transition to 2.X
- Ember CLI
- ES6 Modules
- Revamped components
with “virtual DOM”
- API simplification
- and a lot more
23. 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
24. Ember comes with
- separation of concerns
- object model (classes,
inheritance, mixins)
- router
- observers
- computed properties
- isolated components
- container
- templating system
- run loop
28. 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
35. 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.
36. 2 groups of components
Presentational
Components render
HTML given some
object/data
37. 2 groups of components
Container
Components and
Presentational
Components
vs.
Business
Components and
Toolkit Components
39. 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.
42. 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
43. 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
44. 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.
45. 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
46. 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/
47. 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/