Parse Apps with Ember.js

6,663 views

Published on

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

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
6,663
On SlideShare
0
From Embeds
0
Number of Embeds
3,209
Actions
Shares
0
Downloads
24
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Parse Apps with Ember.js

  1. 1. Parse Appswith Ember.js Porting native to theweb
  2. 2. @mixonic httP://madhatted.com matt.beale@madhatted.com
  3. 3. 201 Created We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
  4. 4. https://gumroad.com/l/XlSx/
  5. 5. “You are not a special snowflake. Youwill benefit from shared tools and abstractions.” Yehuda Katz, co-creator of Ember.js
  6. 6. Unix
  7. 7. “Write programs that do one thing and do it well. Write programs towork together. Write programs to handle text streams, because that is a universal interface.” Doug McIlroy, Unix pioneer
  8. 8. Unix Ember.js
  9. 9. “Whenyou decide to not pick a public framework,youwill end upwith a framework anyway: your own.” Ryan Florence, guy in Utah
  10. 10. Unix Ember.js Parse
  11. 11. “You are not a special snowflake. Youwill benefit from shared tools and abstractions.” Yehuda Katz, co-creator of Ember.js
  12. 12. PART 1. HISTORY
  13. 13. DB WEBSITE APP
  14. 14. WEBSITE APP HTML
  15. 15. HTML HTMLHTML WEBSITE APP
  16. 16. HTML HTMLHTML JSON WEBSITE APP
  17. 17. HTML JSON (XML?) JSON WEBSITE APP
  18. 18. WEBSITE APP API APP JSON (XML?)HTML JSON
  19. 19. JSON JSON JSON WEBSITE APP API APP HTML JSON
  20. 20. JSON JSON(Different) HTML WEBSITE APP API APP HTML
  21. 21. JSON JSON(Different) HTML WEBSITE APP API APP HTML StateFUL STATELESSStateFUL StateLESS, MAYbE?
  22. 22. JSON JSON(Different) HTML WEBSITE APP API APP HTML StateFUL STATELESSStateFUL StateLESS, MAYbE? ✓
  23. 23. JSON API APP JSON StateFUL STATELESS
  24. 24. Ember allows us to move complexity and state away from the server, and into the browser.
  25. 25. APIs focus on domain logic, security and speed.
  26. 26. PART 2. FRAMEWORK CONCEPTS
  27. 27. Convention over Configuration
  28. 28. 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>
  29. 29. •How Do I update the URL? •What object backs the template? •What iS the template named? •Where on THE DOM IS MY APP ATTACHED?
  30. 30. •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
  31. 31. •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
  32. 32. 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>
  33. 33. URL Driven Development
  34. 34. http://myapp.dev application.hbs index.hbs
  35. 35. 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>
  36. 36. http://myapp.dev/about application.hbs about.hbs
  37. 37. 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>
  38. 38. http://myapp.dev/project/31 application.hbs project.hbs
  39. 39. 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>
  40. 40. http://myapp.dev/project/31/edit application.hbs project.hbs project/edit.hbs
  41. 41. 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>
  42. 42. Extend the Web Forward
  43. 43. •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+
  44. 44. Ember is built on concepts you already know.
  45. 45. MVC, BUT MORE LIKE than
  46. 46. Classes and mixins (ala RUBy)
  47. 47. properties have setters and getters (like Python)
  48. 48. If you get lostwith Ember, finding a parallel concept may help.
  49. 49. Think about the problem before getting hung up on the API.
  50. 50. let’s write some code.
  51. 51. Quickie Todo List w/ Ember & Parse http://emberjs.jsbin.com/lizep/3/edit
  52. 52. 1. Parse 2. Ember.js 3. Ember-Data

  53. 53. 1. Parse 2. Ember.js 3. Ember-Data 4. Ember-Parse Adapter https://github.com/clintjhill/ember-parse-adapter
  54. 54. Why Ember-Data?
  55. 55. • Identity Map • Relationships • Schema-compat • Cross-API Relationships https://github.com/clintjhill/ember-parse-adapter
  56. 56. NO BACKBONE.js
  57. 57. http://emberjs.jsbin.com/lizep/7/edit LIVE CODED:
  58. 58. www.turnstilelive.com m.turnstilelive.com
  59. 59. What does Ember-Parse Adapter support?
  60. 60. 1. Relationships 2. CRUD 3. Authentication 4. Data-types (GeoPoint etc.)
  61. 61. What does Ember-Parse Adapter not support?
  62. 62. 1. Array Relationships 2. My Extravagant Lifestyle 3. Push 4. Analytics 5. ACL
  63. 63. Thanks! @mixonic httP://madhatted.com matt.beale@madhatted.com

×