SlideShare a Scribd company logo
Introduction to Ember.js and how we used it
Andrew Grosser
Tech Guy & Entrepreneur
andrew@flowpro.io
@andrewgrosser
Paul Knittel
Front End Junkie
paul@flowpro.io
@xyz_paul
Who are we?
} Startup @ilabaccelerator
“Democratizing business
knowledge”
www.flowpro.io
FlowPro
Unique combination of business knowledge & processes
What is Ember.js?
• Javascript framework for “ambitious web applications”
• One page apps
• Similar to Angular.js and Backbone.js
• Based on model-view-controller (MVC)
• Open source, community driven
• Evolved from Sproutcore (Apple iCloud, MobileME)
Why use Ember.js?
SPEED
We built our app in under
a month.
Why use Ember.js?
• Unique features
• Pattern Based (Convention not Configuration)
• App, Routes, Models, Controllers, Views,
Components, Templates
• Creates best practices
• Think about outsourcing...
• Ember RunLoop
• Data (RestAdapter, LocalAdapter, CustomAdapter)
• Handlebars.js Templating
Why use Ember.js?
• Expected features
• Observables & Computed Properties
• Bindings
• Person.create(), Person.extend(), person._super(),
Person.reopen(), Person.reopenClass()
• Classes & Models with event boilerplate
• Templates
• MVC
• Promises
• Console in Chrome
Like what you see?
• We’ll make slides available online
• Want to get technical?
• We could do another talk on more advanced Ember.
js concepts
• To get started with Ember.js check out these:
http://emberjs.com/guides/getting-started/
http://todomvc.com/
Warning!!! next page Nerd Alert...
Whole App Example
Todos.TodoController = Ember.ObjectController.extend({
isEditing: false,
bufferedTitle: Ember.computed.oneWay('title'),
actions: {
editTodo: function () {
this.set('isEditing', true);
},
...
},
removeTodo: function () {
var todo = this.get('model');
todo.deleteRecord();
todo.save();
},
saveWhenCompleted: function () {
this.get('model').save();
}.observes('isCompleted')
});
<html>...<ul id="todo-list">
{{#each filteredTodos itemController="todo"}}
<li {{bind-attr class="isCompleted:completed"}}>
{{#if isEditing}}
{{edit-todo class="edit" value=bufferedTitle focus-out="
doneEditing" insert-newline="doneEditing" escape-press="
cancelEditing"}}
{{else}}
{{input type="checkbox" class="toggle" checked=isCompleted}}
<label {{action "editTodo" on="doubleClick"}}>{{title}}
</label>
<button {{action "removeTodo"}} class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
...</html>
App & Model Controller View (Template)
window.Todos = Ember.Application.create();
Todos.ApplicationAdapter = DS.LSAdapter.extend({
namespace: 'todos-emberjs'
});
Todos.Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});
Todos.TodosView = Ember.View.extend({
focusInput: function () {
this.$('#new-todo').focus();
}.on('didInsertElement')
});
http://todomvc.
com/architecture-
examples/emberjs/
Some examples how we used Ember
@FlowProApp #WOW #AMAZING
• Ember Data
• Rest Adapter
• Local Storage Adapter (offline PhoneGap app ;)
• Query Params
• Web Components
• Run-Loop
more details on the next slides
Ember Data
Ember Data is a library for robustly managing model data
in your Ember.js applications.
Rest Adapter
Easy conventions to communicate with REST API
Ember.RSVP.hash({
workflows: this.store.find('myWorkflow'),
processes: this.store.find('myNode')
});
Query Params
Demo: FlowPro Search with QueryParams
Components
• Intended to be close to Web Components Specification
• Great for reusable items
• TinyMCE (wysiwyg editor)
https://gist.github.com/xypaul/cb6adcfe33b409f40ab6
• EmberUI (interface toolkit)
http://emberui.com/
Run Loop
• Brings asynchronous execution and scheduling to JS
• Based on Backburner.js
• Internally used to
• sync bindings
• actions & events
• dom rendering
• destroying
• Forget callback hell, use Ember Run Loop instead
http://talks.erikbryn.com/backburner.js-and-the-ember-run-loop/
What was %$#!ed - Part 1
• Still in beta
• Only beta build has QueryParams support
• Ember Data in beta since FOREVER
• Constant API changes
• Examples from 3 months probably don’t work anymore
• Handling of Arrays & Objects
• Can’t just use person[]
• Get/set through person.get(‘firstname’)
• Solved using LinqJS
• Community pushback from our one line code
contributions (even with broken features)
What was %$#!ed - Part 2
• Breaking the RunLoop breaks the app
• Debugging is difficult due to hidden catches
• Conventions make it difficult to access low level JS &
DOM
• Ember works best with ember components
• Mixing jQuery can be messy
• Creating modals
• Array observers didn’t always do as they expected.
Deep event propagation didn’t always work.
Our Mission
Democratize all business knowledge
Thank you.
www.flowpro.io

More Related Content

What's hot (20)

PDF
Intro to React
Troy Miles
 
PDF
Containers & Dependency in Ember.js
Matthew Beale
 
ODP
CodeIgniter PHP MVC Framework
Bo-Yi Wu
 
PPTX
Amitesh Madhur - Web workers, HTML 5
Amitesh Madhur
 
PDF
Deploying a Location-Aware Ember Application
Ben Limmer
 
PDF
Scaling up task processing with Celery
Nicolas Grasset
 
PDF
Celery for internal API in SOA infrastructure
Roman Imankulov
 
PDF
MVS: An angular MVC
David Rodenas
 
PDF
Testing Ember Apps: Managing Dependency
Matthew Beale
 
PDF
Ember.js for Big Profit
CodeCore
 
PDF
Секретный доклад о React Router - OdessaJS 2014
Andrey Listochkin
 
PDF
Automated Testing in EmberJS
Ben Limmer
 
PDF
Using ArcGIS Server with Ruby on Rails
Dave Bouwman
 
PPT
Backbone js
Knoldus Inc.
 
PDF
Django Rest Framework and React and Redux, Oh My!
Eric Palakovich Carr
 
PDF
The Evolution of Airbnb's Frontend
Spike Brehm
 
PDF
Scalable web application architecture
postrational
 
PDF
Introduction to VueJS & The WordPress REST API
Caldera Labs
 
PDF
Workshop React.js
Commit University
 
PDF
Best Practice-React
Yang Yang
 
Intro to React
Troy Miles
 
Containers & Dependency in Ember.js
Matthew Beale
 
CodeIgniter PHP MVC Framework
Bo-Yi Wu
 
Amitesh Madhur - Web workers, HTML 5
Amitesh Madhur
 
Deploying a Location-Aware Ember Application
Ben Limmer
 
Scaling up task processing with Celery
Nicolas Grasset
 
Celery for internal API in SOA infrastructure
Roman Imankulov
 
MVS: An angular MVC
David Rodenas
 
Testing Ember Apps: Managing Dependency
Matthew Beale
 
Ember.js for Big Profit
CodeCore
 
Секретный доклад о React Router - OdessaJS 2014
Andrey Listochkin
 
Automated Testing in EmberJS
Ben Limmer
 
Using ArcGIS Server with Ruby on Rails
Dave Bouwman
 
Backbone js
Knoldus Inc.
 
Django Rest Framework and React and Redux, Oh My!
Eric Palakovich Carr
 
The Evolution of Airbnb's Frontend
Spike Brehm
 
Scalable web application architecture
postrational
 
Introduction to VueJS & The WordPress REST API
Caldera Labs
 
Workshop React.js
Commit University
 
Best Practice-React
Yang Yang
 

Similar to Introduction to Ember.js and how we used it at FlowPro.io (20)

PPT
Ember.js: Jump Start
Viacheslav Bukach
 
PDF
Riding the Edge with Ember.js
aortbals
 
PDF
Stackup New Languages Talk: Ember is for Everybody
Cory Forsyth
 
PDF
Parse Apps with Ember.js
Matthew Beale
 
PDF
A Beginner's Guide to Ember
Richard Martin
 
PDF
Ember presentation
Daniel N
 
PPTX
Emberjs and ASP.NET
Mike Melusky
 
ODP
Introduction to ember js
Adnan Arshad
 
PDF
Workshop 16: EmberJS Parte I
Visual Engineering
 
PDF
Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...
Pilot
 
PPTX
Intro to EmberJS
Billy Onjea
 
PDF
Delivering with ember.js
Andrei Sebastian Cîmpean
 
PDF
Intro to ember.js
Leo Hernandez
 
PDF
Modern, Scalable, Ambitious apps with Ember.js
Mike North
 
PPTX
The road to Ember.js 2.0
Codemotion
 
PDF
Create an application with ember
Chandra Sekar
 
PPTX
Full slidescr16
Lucio Grenzi
 
PPTX
Introduction to Ember.js
Vinoth Kumar
 
PPTX
Introduction to Ember.js
Jeremy Brown
 
PDF
Ember.js - Jak zatopit a neshořet!
Viliam Elischer
 
Ember.js: Jump Start
Viacheslav Bukach
 
Riding the Edge with Ember.js
aortbals
 
Stackup New Languages Talk: Ember is for Everybody
Cory Forsyth
 
Parse Apps with Ember.js
Matthew Beale
 
A Beginner's Guide to Ember
Richard Martin
 
Ember presentation
Daniel N
 
Emberjs and ASP.NET
Mike Melusky
 
Introduction to ember js
Adnan Arshad
 
Workshop 16: EmberJS Parte I
Visual Engineering
 
Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...
Pilot
 
Intro to EmberJS
Billy Onjea
 
Delivering with ember.js
Andrei Sebastian Cîmpean
 
Intro to ember.js
Leo Hernandez
 
Modern, Scalable, Ambitious apps with Ember.js
Mike North
 
The road to Ember.js 2.0
Codemotion
 
Create an application with ember
Chandra Sekar
 
Full slidescr16
Lucio Grenzi
 
Introduction to Ember.js
Vinoth Kumar
 
Introduction to Ember.js
Jeremy Brown
 
Ember.js - Jak zatopit a neshořet!
Viliam Elischer
 
Ad

Recently uploaded (20)

PPTX
Presentation3gsgsgsgsdfgadgsfgfgsfgagsfgsfgzfdgsdgs.pptx
SUB03
 
PPTX
西班牙武康大学毕业证书{UCAMOfferUCAM成绩单水印}原版制作
Taqyea
 
PDF
𝐁𝐔𝐊𝐓𝐈 𝐊𝐄𝐌𝐄𝐍𝐀𝐍𝐆𝐀𝐍 𝐊𝐈𝐏𝐄𝐑𝟒𝐃 𝐇𝐀𝐑𝐈 𝐈𝐍𝐈 𝟐𝟎𝟐𝟓
hokimamad0
 
PPT
Computer Securityyyyyyyy - Chapter 2.ppt
SolomonSB
 
PPTX
ONLINE BIRTH CERTIFICATE APPLICATION SYSYTEM PPT.pptx
ShyamasreeDutta
 
PDF
AI_MOD_1.pdf artificial intelligence notes
shreyarrce
 
PPTX
原版西班牙莱昂大学毕业证(León毕业证书)如何办理
Taqyea
 
PDF
Build Fast, Scale Faster: Milvus vs. Zilliz Cloud for Production-Ready AI
Zilliz
 
PPTX
sajflsajfljsdfljslfjslfsdfas;fdsfksadfjlsdflkjslgfs;lfjlsajfl;sajfasfd.pptx
theknightme
 
PPTX
PE introd.pptxfrgfgfdgfdgfgrtretrt44t444
nepmithibai2024
 
PPTX
L1A Season 1 ENGLISH made by A hegy fixed
toszolder91
 
PDF
Azure_DevOps introduction for CI/CD and Agile
henrymails
 
PDF
Apple_Environmental_Progress_Report_2025.pdf
yiukwong
 
PPTX
PM200.pptxghjgfhjghjghjghjghjghjghjghjghjghj
breadpaan921
 
PPT
Agilent Optoelectronic Solutions for Mobile Application
andreashenniger2
 
PPTX
Lec15_Mutability Immutability-converted.pptx
khanjahanzaib1
 
DOCX
Custom vs. Off-the-Shelf Banking Software
KristenCarter35
 
PPT
Computer Securityyyyyyyy - Chapter 1.ppt
SolomonSB
 
PPTX
04 Output 1 Instruments & Tools (3).pptx
GEDYIONGebre
 
PPTX
L1A Season 1 Guide made by A hegy Eng Grammar fixed
toszolder91
 
Presentation3gsgsgsgsdfgadgsfgfgsfgagsfgsfgzfdgsdgs.pptx
SUB03
 
西班牙武康大学毕业证书{UCAMOfferUCAM成绩单水印}原版制作
Taqyea
 
𝐁𝐔𝐊𝐓𝐈 𝐊𝐄𝐌𝐄𝐍𝐀𝐍𝐆𝐀𝐍 𝐊𝐈𝐏𝐄𝐑𝟒𝐃 𝐇𝐀𝐑𝐈 𝐈𝐍𝐈 𝟐𝟎𝟐𝟓
hokimamad0
 
Computer Securityyyyyyyy - Chapter 2.ppt
SolomonSB
 
ONLINE BIRTH CERTIFICATE APPLICATION SYSYTEM PPT.pptx
ShyamasreeDutta
 
AI_MOD_1.pdf artificial intelligence notes
shreyarrce
 
原版西班牙莱昂大学毕业证(León毕业证书)如何办理
Taqyea
 
Build Fast, Scale Faster: Milvus vs. Zilliz Cloud for Production-Ready AI
Zilliz
 
sajflsajfljsdfljslfjslfsdfas;fdsfksadfjlsdflkjslgfs;lfjlsajfl;sajfasfd.pptx
theknightme
 
PE introd.pptxfrgfgfdgfdgfgrtretrt44t444
nepmithibai2024
 
L1A Season 1 ENGLISH made by A hegy fixed
toszolder91
 
Azure_DevOps introduction for CI/CD and Agile
henrymails
 
Apple_Environmental_Progress_Report_2025.pdf
yiukwong
 
PM200.pptxghjgfhjghjghjghjghjghjghjghjghjghj
breadpaan921
 
Agilent Optoelectronic Solutions for Mobile Application
andreashenniger2
 
Lec15_Mutability Immutability-converted.pptx
khanjahanzaib1
 
Custom vs. Off-the-Shelf Banking Software
KristenCarter35
 
Computer Securityyyyyyyy - Chapter 1.ppt
SolomonSB
 
04 Output 1 Instruments & Tools (3).pptx
GEDYIONGebre
 
L1A Season 1 Guide made by A hegy Eng Grammar fixed
toszolder91
 
Ad

Introduction to Ember.js and how we used it at FlowPro.io

  • 1. Introduction to Ember.js and how we used it
  • 2. Andrew Grosser Tech Guy & Entrepreneur [email protected] @andrewgrosser Paul Knittel Front End Junkie [email protected] @xyz_paul Who are we? } Startup @ilabaccelerator “Democratizing business knowledge” www.flowpro.io
  • 3. FlowPro Unique combination of business knowledge & processes
  • 4. What is Ember.js? • Javascript framework for “ambitious web applications” • One page apps • Similar to Angular.js and Backbone.js • Based on model-view-controller (MVC) • Open source, community driven • Evolved from Sproutcore (Apple iCloud, MobileME)
  • 5. Why use Ember.js? SPEED We built our app in under a month.
  • 6. Why use Ember.js? • Unique features • Pattern Based (Convention not Configuration) • App, Routes, Models, Controllers, Views, Components, Templates • Creates best practices • Think about outsourcing... • Ember RunLoop • Data (RestAdapter, LocalAdapter, CustomAdapter) • Handlebars.js Templating
  • 7. Why use Ember.js? • Expected features • Observables & Computed Properties • Bindings • Person.create(), Person.extend(), person._super(), Person.reopen(), Person.reopenClass() • Classes & Models with event boilerplate • Templates • MVC • Promises • Console in Chrome
  • 8. Like what you see? • We’ll make slides available online • Want to get technical? • We could do another talk on more advanced Ember. js concepts • To get started with Ember.js check out these: http://emberjs.com/guides/getting-started/ http://todomvc.com/ Warning!!! next page Nerd Alert...
  • 9. Whole App Example Todos.TodoController = Ember.ObjectController.extend({ isEditing: false, bufferedTitle: Ember.computed.oneWay('title'), actions: { editTodo: function () { this.set('isEditing', true); }, ... }, removeTodo: function () { var todo = this.get('model'); todo.deleteRecord(); todo.save(); }, saveWhenCompleted: function () { this.get('model').save(); }.observes('isCompleted') }); <html>...<ul id="todo-list"> {{#each filteredTodos itemController="todo"}} <li {{bind-attr class="isCompleted:completed"}}> {{#if isEditing}} {{edit-todo class="edit" value=bufferedTitle focus-out=" doneEditing" insert-newline="doneEditing" escape-press=" cancelEditing"}} {{else}} {{input type="checkbox" class="toggle" checked=isCompleted}} <label {{action "editTodo" on="doubleClick"}}>{{title}} </label> <button {{action "removeTodo"}} class="destroy"></button> {{/if}} </li> {{/each}} </ul> ...</html> App & Model Controller View (Template) window.Todos = Ember.Application.create(); Todos.ApplicationAdapter = DS.LSAdapter.extend({ namespace: 'todos-emberjs' }); Todos.Todo = DS.Model.extend({ title: DS.attr('string'), isCompleted: DS.attr('boolean') }); Todos.TodosView = Ember.View.extend({ focusInput: function () { this.$('#new-todo').focus(); }.on('didInsertElement') }); http://todomvc. com/architecture- examples/emberjs/
  • 10. Some examples how we used Ember @FlowProApp #WOW #AMAZING • Ember Data • Rest Adapter • Local Storage Adapter (offline PhoneGap app ;) • Query Params • Web Components • Run-Loop more details on the next slides
  • 11. Ember Data Ember Data is a library for robustly managing model data in your Ember.js applications.
  • 12. Rest Adapter Easy conventions to communicate with REST API Ember.RSVP.hash({ workflows: this.store.find('myWorkflow'), processes: this.store.find('myNode') });
  • 13. Query Params Demo: FlowPro Search with QueryParams
  • 14. Components • Intended to be close to Web Components Specification • Great for reusable items • TinyMCE (wysiwyg editor) https://gist.github.com/xypaul/cb6adcfe33b409f40ab6 • EmberUI (interface toolkit) http://emberui.com/
  • 15. Run Loop • Brings asynchronous execution and scheduling to JS • Based on Backburner.js • Internally used to • sync bindings • actions & events • dom rendering • destroying • Forget callback hell, use Ember Run Loop instead http://talks.erikbryn.com/backburner.js-and-the-ember-run-loop/
  • 16. What was %$#!ed - Part 1 • Still in beta • Only beta build has QueryParams support • Ember Data in beta since FOREVER • Constant API changes • Examples from 3 months probably don’t work anymore • Handling of Arrays & Objects • Can’t just use person[] • Get/set through person.get(‘firstname’) • Solved using LinqJS • Community pushback from our one line code contributions (even with broken features)
  • 17. What was %$#!ed - Part 2 • Breaking the RunLoop breaks the app • Debugging is difficult due to hidden catches • Conventions make it difficult to access low level JS & DOM • Ember works best with ember components • Mixing jQuery can be messy • Creating modals • Array observers didn’t always do as they expected. Deep event propagation didn’t always work.
  • 18. Our Mission Democratize all business knowledge Thank you. www.flowpro.io