Building Native Web Apps

Building Native Web Apps

Are you building a native web app? This talk defines what native web apps are and shows how to use ember-cli to build them.

9d778043b9c008cf3f5c6bc52e648c53?s=128

Joe Fiorini

June 17, 2014
Tweet

Transcript

  1. Building Native Web Apps

  2. Introduction

  3. Can you add this user to our app please?

  4. Can you deploy this please?

  5. We don’t have time to automate that right now!

  6. None
  7. None
  8. None
  9. Server Side

  10. None
  11. Native iOS App

  12. Native Web App

  13. What are Native Web Apps?

  14. An app that uses the browser and its APIs as

    its only means for rendering templates & changing URLs
  15. None
  16. None
  17. Should I be building a Native Web App?

  18. None
  19. Is server-side good enough?

  20. • All data from 3rd party API • Incongruity in

    data structure/presentation • SOA (many clients connecting to multiple backend services) • Supplementing native app for another platform • Cross-platform replacement for native app(s) • High volume of frequent DOM updates
  21. Building Native Web Apps

  22. Plethora of Choices

  23. Plethora of Choices

  24. Also, these, but really?

  25. Build Tools

  26. “rails” command Xcode Visual Studio rake make AutoConf Eclipse Borland

    C++ Builder
  27. “rails” command

  28. A build tool for native web apps • Initialize project

    blueprint • Preprocess to “low-level” languages • Serve development build for easier debugging • Automatically rebuild when files change • Generators to automate necessary boilerplate
  29. Every project is different…

  30. But Ember!

  31. An Ember-specific build tool • Ready to build immediately after

    initializing • Enforce a sane directory structure • Globals suck, use modules instead • Testing-ready • Ability to configure as needed • Add-ons (coming very soon!)
  32. Example: ember init

  33. Enforce Sane Directory Structure • app for application logic; files

    that will be processed • folders under app correspond to ember conventions • config for app configuration • public for static assets • tests for tests run via testem • vendor for 3rd party code installed via bower
  34. Globals suck, use modules instead

  35. Globals App.PostRoute = Ember.Route.extend({ model: function(params) { return this.findModel(params.post_id); }

    }); type name namespace
  36. AMD (Syntax) define(“blog/routes/post”, [“ember”], function(Ember) { return Ember.Route.extend({ model: function(params)

    { return this.findModel(params.post_id); } }); });
  37. AMD (Syntax) define(“blog/routes/post”, [“ember”], function(Ember) { return Ember.Route.extend({ model: function(params)

    { return this.findModel(params.post_id); } }); }); Module M
  38. Loader.js Loader register with blog/routes/post M blog/controllers/post M blog/helpers/format-date M

    blog/app M
  39. Container/Resolver define(“blog/controllers/posts”, …, function() { return Ember.ArrayController.extend({ itemController: “post” });

    }); container.lookup(“controller:post”) container resolver do I have this already? yes no no return it find it create it return it
  40. Container/Resolver define(“blog/controllers/posts”, …, function() { return Ember.ArrayController.extend({ itemController: “post” });

    }); container.lookup(“controller:post”) resolver concat name into path require module return that result
  41. Container/Resolver define(“blog/controllers/posts”, …, function() { return Ember.ArrayController.extend({ itemController: “post” });

    }); container.lookup(“controller:post”) resolver concat name into path namespace + ‘/‘ + pluralizedType + ‘/‘ + name require module return that result
  42. Container/Resolver define(“blog/controllers/posts”, …, function() { return Ember.ArrayController.extend({ itemController: “post” });

    }); container.lookup(“controller:post”) resolver concat name into path require module require(‘blog/controllers/post’) return that result
  43. Container/Resolver define(“blog/controllers/posts”, …, function() { return Ember.ArrayController.extend({ itemController: “post” });

    }); container.lookup(“controller:post”) resolver concat name into path require module return that result
  44. Custom Resolver to Find Modules at Run Time Default Resolver

    CLI Resolver resolve(“controller:post”) return BlogApp.PostController return require(“blog/controllers/post”)
  45. Custom Resolver to Find Modules at Run Time define(“app/routes/post”, …);

    container.lookup(“route:post”); resolver.resolve(“route:post”); inject module into loader’s registry ask resolver for corresponding module require module to extract it from loader’s registry
  46. Achievement Unlocked Understand how Ember naming conventions actually work

  47. AMD Syntax Sucks, Use ES6 Modules • Part of the

    official ES6 specification • Not supported in browsers… yet • Use library to convert ES6 syntax to AMD modules
  48. AMD Syntax Sucks, Use ES6 Modules define(“blog/routes/post”, [“ember”], function(Ember) {

    return Ember.Route.extend({ model: function(params) { return this.findModel(params.post_id); } }); }); file: app/routes/post.js import Ember from “ember”; export default …
  49. AMD Syntax Sucks, Use ES6 Modules import Ember from “Ember”;

    ! export default Ember.Route.extend({ model: function(params) { return this.findModel(params.post_id); } });
  50. Testing Ready • Currently using testem to run tests at

    CLI • Uses qunit and ember-qunit by default • ember test --serve for auto running on change • Need to run development server separately
  51. Testing Example http://emberjs.com/guides/testing/

  52. Ability to configure as needed • Brocfile.js for additional imports,

    build configuration, additional preprocessors • config/environment.js for feature flags, ENV config, etc
  53. Add-ons Example

  54. In Conclusion

  55. Are you building a Native Web App?

  56. Use ember-cli