Ember.js – A framework for creating ambitious web applications.

View Github Repository Open presentation in a new window

mydea

See all presentation from mydea

Ember.js – A framework for creating ambitious web applications.

0 0

ember-presentation

A short, introductory presenation about Ember.js.

On Github mydea / ember-presentation

Ember.js

A framework for creating ambitious web applications.

Francesco Novy / @_fnovy

What is Ember.js?

  • Ember.js is a framework for web applications
  • It is well suited for complex applications
  • It is not well suited to implement small parts inside of a greater application

Who uses Ember.js?

Why use Ember?

  • Frequent release cycle with strict semantic versioning
  • Integrated CLI with build-step etc.
  • Convention over Configuration
  • Easy to collaborate with designers/other developers
  • Integrated data layer

Release Cycle

  • A minor release every 6 weeks
  • A major release every ~2 years
  • Minor releases can introduce new features and deprecate old features
  • It is guaranteed that all features keep working until the next major release!
  • Updating is a matter of minutes

Ember CLI

  • Integrated command line interface for Ember
  • Enables out of the box:
    • Development server 
      ember serve
    • Build with fingerprinting, minifying etc. 
      ember build
    • Testing with QUnit 
      ember test
    • Generating blueprints 
      ember generate model user

Ember CLI - Getting Started

  • Get Node & NPM
  • Install Bower 
    npm install bower -g
  • Install Ember-CLI 
    npm install ember-cli -g
  • Create a new app 
    ember new my-app

Use the JavaScript from tomorrow, today

  • ES6 is automatically transpiled with Babel.js
  • Ember-CLI is based on ES6 modules

Conventions

  • All Ember-CLI apps are built in the same way.
  • This makes it very easy to collaborate or to inspect other ember apps!

Handlebars

Easy to use - for programmers and designers!

"HTML+"


  
{{myTitle}}





  • 
  {{#each myArray as |item|}}
    
  • {{item}}
  {{/each}}



{{#if isActive}}
  This is active!
{{else}}
  This is inactive...
{{/if}}
				
Code Example

					
// app/pods/users/controller.js

import Ember from "ember";

export default Ember.Controller.extend({
  users: ["John", "Anna", "Max"]
});


					
// app/pods/users/template.hbs


All Users

{{#each users as |user|}}
  
{{user}}

{{/each}}
				
Built on Components


					

						Components should be designed to be reusable. Ember want you to use as many
						components as possible!
					


					
All Users

{{#each users as |user|}}
  {{my-user-component userName=user}}
{{/each}}
				
Example Component

					
// app/pods/components/my-user-component/component.js

import Ember from "ember";

export default Ember.Component.extend({
  isAdmin: Ember.computed("attrs.userName", function() {
      return this.getAttr("userName") === "John";
    })
});


					
// app/pods/components/my-user-component/template.hbs



  {{userName}}{{#if isAdmin}} - Admin User{{/if}}


				
Ember Data


					
No manual 
$.ajax()
 calls.


					
// app/pods/user/model.js

import DS from "ember-data";

export DS.Model.extend({
  name: DS.attr("string"),
  age: DS.attr("number")
});


					
// app/pods/user/controller.js

var user = this.store.createRecord("user");
user.set("name", "John");
user.save();


				
Addons


					
Ember-CLI provides hooks, which makes it possible to have a unified API for addons.

				
Sass instead of CSS?


					
  • 							ember install ember-cli-sass
						
    • 
						
  • Rename "app.css" into "app.scss"
    • 
					
Autoprefixer?


					
  • 							ember install ember-cli-autoprefixer
						
    • 
					
... and many more.


					
  • Fake API for development: ember-cli-mirage
    • 
						
  • moment.js: ember-moment
    • 
						
  • Authentification: ember-simple-auth
    • 
						
  • Deployment: ember-cli-deploy
    • 
						
  • ...
    • 
					
Thank you for your attention!

					
... there is a lot to learn about Ember, and the beginning can seem daunting.


					

						This presentation:http://mydea.github.io/ember-presentation/
					

				


		























































					Ember.js
					

					A framework for creating ambitious web applications.

					
						Francesco Novy / @_fnovy