Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Joe Fiorini

June 17, 2014
Tweet

Other Decks in Programming

Transcript

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

    its only means for rendering templates & changing URLs
  2. • 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
  3. 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
  4. 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!)
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. Custom Resolver to Find Modules at Run Time Default Resolver

    CLI Resolver resolve(“controller:post”) return BlogApp.PostController return require(“blog/controllers/post”)
  12. 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
  13. 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
  14. 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 …
  15. AMD Syntax Sucks, Use ES6 Modules import Ember from “Ember”;

    ! export default Ember.Route.extend({ model: function(params) { return this.findModel(params.post_id); } });
  16. 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
  17. Ability to configure as needed • Brocfile.js for additional imports,

    build configuration, additional preprocessors • config/environment.js for feature flags, ENV config, etc