Embed Size (px)
DESCRIPTION
Ember.js is a new JavaScript framework for building ambitiously complex web applications. Taking lessons from the iOS development platform and other JavaScript frameworks that came before it, Ember embraces the idea that our applications are more alike than they are dissimilar. It encourages coding by convention, testing, and MVC patterns. Building an app on Parse makes your data available via the Parse REST API. Using that API, ember-cli and Ember-Data, I’ll show you how to get started porting your native app to the mobile web. The live coded demo is here: http://emberjs.jsbin.com/lizep/7/edit?html,js,output
Citation preview
Parse Apps with Ember.js
Porting native to the web
201 Created
We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
“You are not a special snowflake. You will benefit from shared tools
and abstractions.”
Yehuda Katz, co-creator of Ember.js
Unix
“Write programs that do one thing and do it well. Write programs to work together. Write
programs to handle text streams, because that is a universal interface.”
Doug McIlroy, Unix pioneer
Unix
Ember.js
“When you decide to not pick a public framework, you will end up with a framework anyway: your own.”
Ryan Florence, guy in Utah
Unix
Ember.js
Parse
“You are not a special snowflake. You will benefit from shared tools
and abstractions.”
Yehuda Katz, co-creator of Ember.js
PART 1. HISTORY
DB
WEBSITE APP
WEBSITE APP
HTML
HTML HTMLHTML
WEBSITE APP
HTML HTMLHTMLJSON
WEBSITE APP
HTML JSON (XML?)JSON
WEBSITE APP
WEBSITE APP API APP
JSON (XML?)HTMLJSON
JSON JSON JSON
WEBSITE APP API APP
HTMLJSON
JSON JSON(Different) HTML
WEBSITE APP API APP
HTML
JSON JSON(Different) HTML
WEBSITE APP API APP
HTML
StateFUL
STATELESSStateFUL
StateLESS, MAYbE?
JSON JSON(Different) HTML
WEBSITE APP API APP
HTML
StateFUL
STATELESSStateFUL
StateLESS, MAYbE?
✓
JSON
API APP
JSON
StateFUL
STATELESS
Ember allows us to move complexity and state away from the server, and into
the browser.
APIs focus on domain logic, security and speed.
PART 2. FRAMEWORK CONCEPTS
Convention over Configuration
1 <html> 2 <body> 3 4 <script type="text/x-handlebars"> 5 <h2>Welcome to Ember.js</h2> 6 </script> 7 8 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 9 <script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.0.js"></script> 10 <script src="//builds.emberjs.com/tags/v1.2.0/ember.js"></script> 11 12 <script> 13 Ember.Application.create(); 14 </script> 15 16 </body> 17 </html>
•How Do I update the URL? •What object backs the template? •What iS the template named? •Where on THE DOM IS MY APP ATTACHED?
•How Do I update the URL? HASHCHANGE •What object backs the template? application cONTROLLER •What iS the template named? APPLICATION •Where on THE DOM IS MY APP ATTACHED? BODY TAG
•How Do I update the URL? history •What object backs the template? HOME cONTROLLER •What iS the template named? welcome •Where on THE DOM IS MY APP ATTACHED? #app
1 <html> 2 <body> 3 <div id="app"></div> 4 5 <script type="text/x-handlebars" id="welcome"> 6 <h2>Welcome to {{platform}}</h2> 7 </script> 8 9 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 10 <script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.0.js"></script> 11 <script src="//builds.emberjs.com/tags/v1.2.0/ember.js"></script> 12 13 <script> 14 var App = Ember.Application.create({ 15 rootElement: '#app' 16 }); 17 App.Router.map(function(){ 18 location: 'history' 19 }); 20 App.IndexRoute = Ember.Route.extend({ 21 renderTemplate: function(){ 22 this.render('welcome', { 23 controller: 'home' 24 }); 25 } 26 }); 27 App.HomeController = Ember.Controller.extend({ 28 platform: "Ember.js" 29 }); 30 </script> 31 32 </body> 33 </html>
URL Driven Development
http://myapp.dev
application.hbs
index.hbs
http://myapp.dev
1 {{! application.hbs }} 2 3 <div class="application-wrapper"> 4 {{outlet}} 5 </div>
1 {{! index.hbs }} 2 3 <h2>Hello Ember.js world!</h2>
http://myapp.dev/about
application.hbs
about.hbs
http://myapp.dev/about
1 {{! about.hbs }} 2 3 <h2>About my app</h2>
1 App.Route = Ember.Route.extend({ 2 // "index" is implied 3 this.route('about'); 4 });
1 {{! application.hbs }} 2 3 <div class="application-wrapper"> 4 {{outlet}} 5 </div>
1 {{! index.hbs }} 2 3 <h2>Hello Ember.js world!</h2>
http://myapp.dev/project/31
application.hbs
project.hbs
1 App.Route = Ember.Route.extend({ 2 // "index" is implied 3 this.route('about'); 4 this.route('project', {path: 'project/:project_id'}); 5 });
http://myapp.dev/project/31
1 {{! project.hbs }} 2 3 <h2>Project {{name}}</h2> 4 5 <p>Created at {{createdAt}}</p>
1 {{! about.hbs }} 2 3 <h2>About my app</h2>
1 {{! application.hbs }} 2 3 <div class="application-wrapper"> 4 {{outlet}} 5 </div>
1 {{! index.hbs }} 2 3 <h2>Hello Ember.js world!</h2>
http://myapp.dev/project/31/edit
application.hbs
project.hbs
project/edit.hbs
http://myapp.dev/project/31/edit
1 App.Route = Ember.Route.extend({ 2 // "index" is implied 3 this.route('about'); 4 this.resource('project', {path: 'project/:project_id'}, function(){ 5 // "index" is implied 6 this.route('edit'); 7 }); 8 });
1 {{! project.hbs }} 2 3 <h2>Project {{name}}</h2> 4 5 {{outlet}}
1 {{! project/index.hbs }} 2 3 <p>Created at {{createdAt}}</p>
1 {{! project/edit.hbs }} 2 3 {{input type="text" value="createdAt"}}
1 {{! application.hbs }} 2 3 <div class="application-wrapper"> 4 {{outlet}} 5 </div>
Extend the Web Forward
•Soon: Ember will be module aware (no global app.) •soon: Ember will be written with es6 modules •Ember components <- Web components •primitive extensions match es6 (forEach etc.) •Where on THE DOM IS MY APP ATTACHED? •Ember promises (RSVP) are A+
Ember is built on concepts you already know.
MVC, BUT MORE LIKE than
Classes and mixins (ala RUBy)
properties have setters and getters (like Python)
If you get lost with Ember, finding a parallel concept may help.
Think about the problem before getting hung up on the API.
let’s write some code.
Quickie Todo List w/ Ember & Parse
http://emberjs.jsbin.com/lizep/3/edit
1. Parse 2. Ember.js 3. Ember-Data
1. Parse 2. Ember.js 3. Ember-Data 4. Ember-Parse Adapter
https://github.com/clintjhill/ember-parse-adapter
Why Ember-Data?
• Identity Map • Relationships • Schema-compat • Cross-API Relationships
https://github.com/clintjhill/ember-parse-adapter
NO BACKBONE.js
What does Ember-Parse Adapter support?
1. Relationships 2. CRUD 3. Authentication 4. Data-types (GeoPoint
etc.)
What does Ember-Parse Adapter not support?
1. Array Relationships 2. My Extravagant
Lifestyle 3. Push 4. Analytics 5. ACL
Thanks!
@mixonic
httP://madhatted.com
