delivering with ember.js
TRANSCRIPT
DELIVERING WITH EMBER.JS
They used EmberJS to build a product
ABOUT ME
Market-like apps
Lots of eventsTime criticalUser interactions are not that complex
Application Suite
Occasional eventsResponsiveCRM-like featuresUser interactions are somewhat complexLarge number of development teams
Consumer apps
Rare eventsDevice tailored custom experienceFocusedUser 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-plan-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 aboutEmber?
Why should you care aboutEmber?
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 DOMIsomorphic 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.10beta
2.8.0
2.9beta
2.7.0
2.8beta
2.6.0
2.7beta
2.8LTS2.4LTS
Sep 23Aug 12Jul 1May 20
2.5.0
2.6beta
2.4.0
2.5beta
master
2.3.0
Jan 15
Canary
Beta
Release
LTS
2.4beta
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-playgroundember 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.XDATA DOWN,ACTIONS US
COMPUTEDPROPERTIES
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.
COMPUTEDPROPERTIES
COMPUTEDPROPERTIES
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
PromiseResolves
with JSON
PromiseResolves
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 withFor 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/
