in 60 minutes
An ambitious timeframe for an ambitious framework
1
This presentation is unaffiliated with the Ember project. Ember is a trademark of Tilde Inc.
CC0 1.0 Universal
https://creativecommons.org/publicdomain/zero/1.0/
Released by Jen Weber under CC0 1.0 Universal, except for restrictions placed on logos/branding of Ember by Tilde.io and logos of other organizations
2
Objective - remember 10%
What can it do?
What are all these files?
How are they connected?
Where does MY code go?
https://tinyurl.com/emberin60
3
Helpful knowledge
4
> command line
What is Ember?
EmberJS is a free, open source framework.
It helps you build your web applications quickly and guides you towards writing scalable, maintainable code.
5
History
2007 - SproutCore
2011 - EmberJS beta
2015 - Release of 2.0
2018 - Release of 3.0
6
Who uses Ember?
7
What is Ember not?
Ember is not a back end/API/database
Ember is not like WordPress
Ember is not controlled by any one company
Ember is not wildly different than some things you may already do/know
8
It’s all just JavaScript
let someEmberThing = {
name: "Douglas Adams",
isTheBest: function() {
return true
}
}
9
Separation of Concerns
What the user sees
User interactions
Routing (urls)
Fetching/changing data
Query parameters
Managing shared state
Styling
Local data caching
Testing
Build Steps
Third party libraries
Dev tools
10
Separation of Concerns
What the user sees Template
User interactions Component
Routing (urls) Routes & Router
Fetching/changing data Ember Data
Query parameters Controller
Managing shared state Service
Styling CSS/LESS/SASS
Local data caching Ember Data Store
Testing Tests
Build Steps Ember CLI
Third party libraries Ember Addons
Dev tools Ember Inspector
11
Configuration over convention
12
Convention over configuration
13
Let’s build something!
14
Getting Started
npm install -g ember-cli
ember -version
ember new app-name
cd app-name
ember serve
15
Introducing the Ember CLI
A command line tool that helps you:
16
Contents of your average app directory
adapters/
components/
controllers/
helpers/
models/
routes/
serializers/
templates/
17
Contents of your average app directory
adapters / conference.js
components / single-conf.js
controllers / conference.js
helpers / format-conf-date.js
models / conference.js
routes / conferences.js
serializers / conference.js
templates / conferences.hbs
18
Learning Curves
19
How much you need to teach yourself
Time/App Maturity
adapters/
components/
controllers/
helpers/
models/
routes/
serializers/
templates/
services/
20
Adapters
&
Serializers
(Ember Data)
Adapter - the home of request URLs
ember g adapter application
21
Adapter - the home of request URLs
// app/adapters/application.js�
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
});
22
Adapter - the home of request URLs
// app/adapters/application.js�
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
host: 'http://my-back-end-server.com'
});
23
Serializer - formatting requests/responses
{
hero_id: 5,
first_name: “Super”,
last_name: “Woman”
};
{
id: 5,
firstName: “Super”,
lastName: “Woman”
};
24
Back End
Front End
Types of Adapters/Serializers
JSONAPI
REST
JSON
Community: ActiveRecord, GraphQL, Django, and more
25
*Can be configured to work with almost any kind of back end architecture
But wait…. :C
26
You don’t have to use Ember Data
27
adapters/
components/
controllers/
helpers/
models/
routes/
serializers/
templates/
services/
28
Models
(Ember Data)
Think about your database….
29
id | name | location |
534 | Boston Code Camp | Greater Boston, MA |
535 | EmberConf | Portland, OR |
Models - what the data looks like
ember g model conference
30
Model - what the data looks like
import DS from 'ember-data';
�export default DS.Model.extend({
name: DS.attr('string'),
date: DS.attr('date'),
attendees: DS.attr('number'),
registrationOpen: DS.attr('boolean'),
someArrayOrNestedObject: DS.attr(),
});
31
A sneak peek...
let bcc = {
name: "Boston Code Camp",
registrationOpen: false
}
this.store.createRecord('conference', bcc).save()
32
// POST to http://my-back-end.com/api/conferences
adapters/
components/
controllers/
helpers/
models/
routes/
serializers/
templates/
services/
33
Routes
Routing - what the user sees in the url
“Don’t break the internet”
34
Route - a place to GET & share records
ember g route conferences
35
2 files get created...
36
HBS
templates/routes/conferences.hbs
a handlebars template where html markup goes and data is passed
JS
routes/conferences.js
a javascript file where data is loaded
Route JS - a place to GET data
import Route from '@ember/routing/route';
export default Route.extend({
model() {
return this.store.findAll('conference')
}
});
GET request to http://your-app/api/conferences
37
// GET to http://my-back-end.com/api/conferences
Routes Template- a place to share data
{{!-- templates/conferences.hbs --}}
<h1>Conferences Route</h1>
{{conferences-list conferences=model}}
38
39
http://my-ember-app.com/route-name
route-name
component-name
component-name
component-name
component-name
Route
Component
Component
Component
Component
40
HBS
JS
HBS
JS
HBS
JS
HBS
JS
HBS
JS
Routes Template- a place to share data
{{navbar-top}}
{{conferences-list conferences=model}}
{{footer-info}}
41
*Only one of these components has access to the model!
adapters/
components/
controllers/
helpers/
models/
routes/
serializers/
templates/
services/
42
Components
Component - interface & interaction
ember g component conferences-list
43
2 files get created...
44
HBS
templates/components/conferences-list.hbs
a handlebars template where html markup goes and data is passed or displayed to the user
JS
components/conferences-list.js
a javascript file that handles user interactions
45
http://my-ember-app.com/conferences
Conferences Route
conferences-list component
Static html markup
<ul>
<li>Boston Code Camp</li>
<li>EmberConf</li>
<li>EmberCamp London</li>
</ul>
46
Component Template - display
{{!-- conferences-list.hbs --}}
<ul>
</ul>
47
{{#each conferences as |conference|}}
<li>{{conference.name}}</li>
{{/each}}
Component HBS and JS are linked
48
HBS
JS
Anything passed into the template is available in the JS
Anything defined in the JS is available in the template
Component HBS + JS
<h3>{{heading}}</h3>
<button class={{btnClass}}>
Submit
</button>
49
export default Component.extend({
heading: "Request Sloths",
btnClass: "sloth-btn"
});
Component JS - interaction
jQuery
50
Ember actions
&
events
Introducing the actions helper
<button {{action "slothsPlz" "thanks"}}>
Submit
</button>
51
Receiving action data
import Component from '@ember/component';
export default Component.extend({
actions: {
slothsPlz(message) {
console.log(message)
}
}
});
52
Core Concept:
Passing Data
53
Passing variables
{{con-card conference=conference}}
{{con-favorite conference=conference}}
{{con-form conference=conference}}
54
Passing actions
{{con-card doIt=(action ‘slothsPlz’)}}
{{con-favorite slothsPlz=slothsPlz}}
{{con-form slothsPlz=slothsPlz}}
55
Core Concept:
Computed Properties
56
Automatically updating variables
57
Jen
JW
Weber
First Name:
Last Name:
Component JS
initials: Ember.Computed('firstName', 'lastName', function() {
let firstName = this.get('firstName')
let lastName = this.get('lastName')
return firstName[0] + lastName[0]
})
58
Component template
<div class=”nav”>{{initials}}</div>
{{input value=firstName}}
{{input value=lastName}}
59
adapters/
components/
controllers/
helpers/
models/
routes/
serializers/
templates/
services/
60
Services
Service - JS for shared state/functions
61
some-service.js
component
controller
route
another service
Addons & dependencies
62
Plan A: Ember Observer
https://emberobserver.com/
63
Installing an Ember addon
ember install liquid-fire
64
Plan B: npm using ember-browserify
npm install --save-dev ember-browserify
npm install some-npm-package
65
Tests
66
Testing
ember g acceptance test submitting-a-form
ember test --server or visit http://localhost:4200/tests
67
Learning Resources
68
EmberJS Super Rentals Tutorial
https://guides.emberjs.com
69
The Guides
https://emberjs.com/api/
70
The API Docs
https://guides.emberjs.com
71
Ember CLI Docs
https://ember-cli.com/
72
Community
https://emberjs.com/community
73
https://ember-community-slackin.herokuapp.com/
https://www.meetup.com/Boston-Ember-js
...and more! https://discuss.emberjs.com/, IRC, StackOverflow
(A sample of) Community Tutorials
74
News
EmberJS Times https://the-emberjs-times.ongoodbits.com/
Ember Weekly
http://www.emberweekly.com/
Ember Weekend Podcast
https://emberweekend.com/episodes
75
One small request...
https://tinyurl.com/emberbcc
76
Raffle Time!
77
Special thanks...
Boston Code Camp
Braden Lawrence
Aaron Sikes (aka courajs)
Ricardo Mendes (aka locks)
EmberJS Learning team & contributors
78
Presented by:
Jen Weber
Twitter: @jwwweber
GitHub: jenweber
Ember Slack: jenweber
Email: weberj10@gmail.com
79
https://biobright.com/careers