Downloaded 24 times
Uploaded byMatthew Beale
Parse Apps with Ember.js
The document discusses porting native applications to the web using Ember.js, highlighting its advantages and development concepts like convention over configuration. It emphasizes the benefits of shared tools and abstraction for developers, along with Ember's capabilities for managing complexity in web applications. Additionally, it covers the use of Ember components, MVC patterns, and the integration with Parse for enhanced functionality in building applications.
More Related Content
Similar to Parse Apps with Ember.js
Parse Apps with Ember.js
- 1. Parse Appswith Ember.js Portingnative to theweb
- 2.
- 3. 201 Created We buildõ-age apps with Ember.js. We take teams from £ to • in no time flat.
- 4.
- 5. “You are nota special snowflake. Youwill benefit from shared tools and abstractions.” Yehuda Katz, co-creator of Ember.js
- 6.
- 7. “Write programs thatdo 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.
- 9. “Whenyou decide tonot pick a public framework,youwill end upwith a framework anyway: your own.” Ryan Florence, guy in Utah
- 10.
- 11. “You are nota special snowflake. Youwill benefit from shared tools and abstractions.” Yehuda Katz, co-creator of Ember.js
- 12.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. WEBSITE APP APIAPP JSON (XML?)HTML JSON
- 21. JSON JSON JSON WEBSITEAPP API APP HTML JSON
- 22. JSON JSON(Different) HTML WEBSITE APPAPI APP HTML
- 23. JSON JSON(Different) HTML WEBSITE APPAPI APP HTML StateFUL STATELESSStateFUL StateLESS, MAYbE?
- 24. JSON JSON(Different) HTML WEBSITE APPAPI APP HTML StateFUL STATELESSStateFUL StateLESS, MAYbE? ✓
- 25.
- 26. Ember allows usto move complexity and state away from the server, and into the browser.
- 27. APIs focus ondomain logic, security and speed.
- 28. PART 2. FRAMEWORKCONCEPTS
- 29.
- 30. 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>
- 31. •How Do Iupdate the URL? •What object backs the template? •What iS the template named? •Where on THE DOM IS MY APP ATTACHED?
- 32. •How Do Iupdate 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
- 33. •How Do Iupdate 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
- 34. 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>
- 35.
- 36.
- 37. 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>
- 38.
- 39. 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>
- 40.
- 41. 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>
- 42.
- 43. 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>
- 44. Extend the WebForward
- 45. •Soon: Ember willbe 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+
- 46. Ember is builton concepts you already know.
- 47. MVC, BUT MORELIKE than
- 48. Classes and mixins(ala RUBy)
- 49. properties have settersand getters (like Python)
- 50. If you getlostwith Ember, finding a parallel concept may help.
- 51. Think about theproblem before getting hung up on the API.
- 52. let’s write somecode.
- 53. Quickie Todo List w/Ember & Parse http://emberjs.jsbin.com/lizep/3/edit
- 54. 1. Parse 2. Ember.js 3.Ember-Data
- 55. 1. Parse 2. Ember.js 3.Ember-Data 4. Ember-Parse Adapter https://github.com/clintjhill/ember-parse-adapter
- 56.
- 57. • Identity Map •Relationships • Schema-compat • Cross-API Relationships https://github.com/clintjhill/ember-parse-adapter
- 58.
- 59.
- 60.
- 62. What does Ember-Parse Adaptersupport?
- 63. 1. Relationships 2. CRUD 3.Authentication 4. Data-types (GeoPoint etc.)
- 64. What does Ember-Parse Adapternot support?
- 65. 1. Array Relationships 2.My Extravagant Lifestyle 3. Push 4. Analytics 5. ACL
- 66.