HOW THE CONCEPTS SCALE UP

HOW THE CONCEPTS SCALE UP

No content

No content

No content

Routing

No content

No content

No content

No content

No content

No content

No content

No content

The Basics

The Basics App.Router.map(function()  {
    this.resource('app',  {  path:  ':app_id'  });
 });

application.handlebars loading.handlebars http://skylight.io/app/direwolf

application.handlebars app.handlebars http://skylight.io/app/direwolf appkit/routes/app.js   export  default  Ember.Route.extend({
    model:  function(params)  {
        return  this.store.find('app',
            params.app_id);
    }
 });

application.handlebars index.handlebars application.handlebars loading.handlebars application.handlebars app.handlebars

application.handlebars index.handlebars application.handlebars loading.handlebars application.handlebars app.handlebars fetch model...

application.handlebars index.handlebars application.handlebars loading.handlebars application.handlebars app.handlebars

application.handlebars index.handlebars application.handlebars loading.handlebars application.handlebars app.handlebars

Ember Routing • Coming in from the URL should have the same code path as navigating around the application after the model is loaded.

Nested App.Router.map(function()  {
    this.resource('app',  {  path:  ':app_id'  },  function()  {
        this.resource('endpoint',  {  path:  ':endpoint_id'  );
    });
 });

application.handlebars app.handlebars http://skylight.io/app/direwolf appkit/routes/app.js   export  default  Ember.Route.extend({
    model:  function(params)  {
        return  this.store.find('app',
            params.app_id);
    }
 });   appkit/routes/app/index.js   export  default  Ember.Route.extend({
    model:  function()  {
        return  this.modelFor('app')
            .get('endpoints');
  }
 }); app/index.handlebars 
 !  {{#each}}
      {{link-­‐to  title  this}}
  {{/each}}

application.handlebars app.handlebars http://skylight.io/app/direwolf/Agent%23status appkit/routes/app.js   export  default  Ember.Route.extend({
    model:  function(params)  {
        return  this.store.find('app',
            params.app_id);
    }
 });   appkit/routes/endpoint.js   export  default  Ember.Route.extend({
    model:  function(params)  {
      return  this.store.find('app',
            params.endpoint_id);
 }
 }); endpoint.handlebars

application.handlebars app.handlebars http://skylight.io/app/direwolf/Agent%23status appkit/routes/app.js   export  default  Ember.Route.extend({
    model:  function(params)  {
        return  this.store.find('app',
            params.app_id);
    }
 });   appkit/routes/endpoint.js   export  default  Ember.Route.extend({
    model:  function(params)  {
      return  this.store.find('app',
            params.endpoint_id);
 }
 }); endpoint.handlebars nav.handlebars

Ember Routing • Coming in from the URL should have the same code path as navigating around the application after the model is loaded. • There is a single, consistent place to put setup and teardown logic for each page on the screen. • Nesting is built-in. Virtually every application has nesting, and your Week 1 code should serve you well in Week 2.

The Setup Flow

Setup Flow export  default  Ember.Route.extend({      renderTemplate:  function()  {          this.render('nav',  {  outlet:  'nav'  });      },   !    redirect:  function()  {          var  user  =  this.modelFor('application'),                  apps  =  user.get('apps');   !        if  (!apps  ||  apps.get('length')  <  1)  {              this.replaceWith('setup');          }      }
 });

Ember Routing • Coming in from the URL should have the same code path as navigating around the application after the model is loaded. • There is a single, consistent place to put setup and teardown logic for each page on the screen. Think keyboard shortcuts. • Nesting is built-in. Virtually every application has nesting, and your Week 1 code should serve you well in Week 2.

Components

Components ~ HTML Functions {{time-­‐explorer  rightMargin=152
                                brushExtent=dateRange
                                      endpoint=model
                                  timeRanges=timeRanges    
                    selectedTimeRange=selectedTimeRange}}  

Component Implementation                              
            
                                                                                                                                       !

Component Implementation

Isolation Manages Complexity

Well-Defined Boundaries

Components

No content

Empty Help us keep the lights on. Enter your credit card information below, and we'll continue helping you make your Rails app the fastest it can be. Credit Card Card Number MM / YY CVC Save Credit Card We stole this graphic from GitHub for the wireframes; don't use in production! Credit Card Invalid This red glow is a placeholder until the final design is completed in Photoshop. Help us keep the lights on. Enter your credit card information below, and we'll continue helping you make your Rails app the fastest it can be. Credit Card 9999 9999 9999 9999 06 / 09 123 Save Credit Card The credit card you entered was invalid. When we can detect invalid information on the client (such as the Luhn checksum or expiry dates in the past), we should highlight the invalid field and display the error to the right of the Save button. Incomplete The Save button is dimmed until the entire form is filled out. Help us keep the lights on. Enter your credit card information below, and we'll continue helping you make your Rails app the fastest it can be. Credit Card MM / YY CVC Save Credit Card 4242 4242 4242 4242 Only one error should be displayed at a time. If there is more than one error, just show the first. {{billing-credit-card-form}} Component States Saved Clicking transitions to the Update Credit Card state. Update Thank you for being a Skylight customer. Credit Card Card Number MM / YY CVC Update Credit Card Cancel 4••• •••• •••• 4242 Expires 04/15 Update Credit Card Thank you for being a Skylight customer. Credit Card Saving Help us keep the lights on. Enter your credit card information below, and we'll continue helping you make your Rails app the fastest it can be. Credit Card 4242 4242 4242 4242 06 / 17 123 Saving… Error Saving Help us keep the lights on. Enter your credit card information below, and we'll continue helping you make your Rails app the fastest it can be. Credit Card 9999 9999 9999 9999 06 / 09 123 Save Credit Card The CVC you provided was incorrect. Because the server must validate any changes, the red glow should be removed and Save button enabled as soon as any changes to the field occur.

Feature Flags

Feature Flag Template {{#if  featureEnabled}}{{yield}}{{/if}}

Feature Flag JS export  default  Ember.Component.extend({      flag:  null,      inverse:  false,   !    init:  function()  {          this._super();          var  flag  =  this.get('flag');   !        Ember.defineProperty(this,  'featureEnabled',  Ember.computed(function()  {              var  value  =  this.get('config.flags.'+flag);              if  (this.get('inverse'))  {  value  =  !value;  }              return  value;          }).property('config.flags.'+flag,  'inverse'));      }   });

Injections

config/initializers/config.js.es6 /*      This  initializer  injections  global  configuration  options  onto  object  instances,  so  they  do  not
    need  to  rely  on  accessing  globals.   !    Currently  all  of  the  config  options  are  defined  in  config/environment.js,  but  this  may  change  over  time.   !    To  access  a  config  option  on,  e.g.,  a  model,  do:   !        this.config.flags.keyRequests;  //=>  false          this.config.defaultRanges  =  [  {  },  {  },  ...  ];   */   export  default  {      name:  "config",      initialize:  function(container,  application)  {          container.register('config:main',  Ember.Object.extend(CONF));   !        ['model',  'view',  'controller',  'route',  'component'].forEach(function(type)  {              container.injection(type,  'config',  'config:main');          });      }   };

environment.js var  FEATURE_FLAGS  =  {      keyRequests:  false,      appDashboard:  false   };   ! window.CONF  =  {    zeroClipboard:  {          moviePath:  "/assets/zeroclipboard/ZeroClipboard.swf",          trustedDomains:  ['*'],          allowScriptAccess:  "always"      },      trialDays:  30,      flags:  FEATURE_FLAGS,      defaultTimeRanges:  [          {  name:  'Last  6  hours',  timestamp:  'recent',  duration:  21600  },          {  name:  'Last  30  minutes',  timestamp:  'recent',  duration:  1800  },          {  name:  'Last  5  minutes',  timestamp:  'recent',  duration:  300  }      ]   };

ES6 Modules

ES6 Module import  $  from  'jquery';
 import  {  config  }  from  'app/config';
 
 var  viewA  =  Ember.Object.extend({
    //  ...
 });
 
 var  viewB  =  Ember.Object.extend({
    //  ...
 });
 
 export  viewA;
 export  viewB; define(['jquery',  'app/config',  'exports'],
    function($,  appConfig,  exports)  {
        var  config  =  appConfig.config;
 
        var  viewA  =  Ember.Object.extend({
            //  ...
        });
 
        var  viewB  =  Ember.Object.extend({
            //  ...
        });
 
        exports.viewA  =  viewA;
        exports.viewB  =  viewB;
    }); AMD Module

Improvements • Cyclic Dependencies • Named and Default exports together (including cycles!) • Much, much prettier syntax, with familiar semantics • Why not?

ES6 Module Transpiler • Maintained by Square • Supports almost all of ES6 modules • Emits AMD-, Node- or Globals-based output • Compatibility with existing AMD and Node modules (including default exports) • Ships out of the box with Ember App Kit

Ember's Concepts Grow With You

Ember's Concepts Grow With Your App

Week 1 ➡️ Week 2 ➡️ Week 50

SCALABLE CONCEPTS FOR AMBITIOUS WEB APPS

Thank You! @wycats plus.google.com/+YehudaKatz yehudakatz.com @tomdale plus.google.com/+TomDale tomdale.com