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

SeattleJS May 14, 2015

SeattleJS May 14, 2015

Henrik Joreteg

May 14, 2015
Tweet

More Decks by Henrik Joreteg

Other Decks in Technology

Transcript

  1. 1. WRITE SOME HTML 2. LAY IT OUT WITH FRAMES

    OR TABLES 3. FTP IT TO A SERVER! 4. BAM!
  2. 1. WRITE SOME PHP/PYTHON/ASP/COLDFUSION 2. SET UP RELATIONAL DATABASE 3.

    WRITE SOME BAD SQL 4. SHOVE DYNAMIC DATA INTO OUR HTML 5. LAY IT OUT WITH CSS (NO TABLES THIS TIME) 6. RUN IT ON SHARED HOSTING SOMEWHERE
  3. BACK-END FRONT-END ISOMORPHIC RESPONSIVE ES6(2015) BABEL TRACEUR AMD COMMONJS MVC

    MVVM FLUX RELAY GULP GRUNT API-GATEWAY CORS JSON-WEB-TOKENS NODE.JS HTTP 2.0 OFFLINE-FIRST MOBILE-FIRST WEBGL WEBRTC WEBSOCKET GRAPHQL AMPERSAND EMBER REALTIME REDIS RIAK LEVELDB RABBITMQ PUSH-NOTIFICATION ENABLED BACKBONE APP WITH POLYFILLED POLYMER WEB COMPONENTS
  4. BACK-END FRONT-END ISOMORPHIC RESPONSIVE ES6(2015) BABEL TRACEUR AMD COMMONJS MVC

    MVVM FLUX RELAY GULP GRUNT API-GATEWAY CORS JSON-WEB-TOKENS NODE.JS HTTP 2.0 OFFLINE-FIRST MOBILE-FIRST WEBGL WEBRTC WEBSOCKET GRAPHQL AMPERSAND EMBER REALTIME REDIS RIAK LEVELDB RABBITMQ PUSH-NOTIFICATION ENABLED BACKBONE APP WITH POLYFILLED POLYMER WEB COMPONENTS
  5. 1. RENDERING 2. NETWORKING 3. FILE READ/WRITE 4. STORAGE 5.

    WEB AUDIO APIS 6. WEBGL 7. VOICE/VIDEO HIGH PERFORMANCE
  6. SEO

  7. NO.

  8. <!doctype> <script src="app-1.2.7.js"></script> 1. GIVE IT A UNIQUE NAME HTTP/1.1

    200 OK Cache-Control: max-age=REALLY BIG NUMBER! Content-Encoding: gzip 2. CACHE IT FOREVER
  9. IF I’M GOING TO LEAVE APP OPEN ON MY DESKTOP

    I CARE WAY LESS ABOUT LOAD TIME
  10. USERS WILL END UP WITH A PRIMED CACHE JUST BY

    VISITING YOUR MARKETING PAGES
  11. var model = new Backbone.Model({ name: 'henrik' }); model.on('change:name', function

    () { console.log('new changed'); }); model.set({name: 'bob'}); Backbone Models
  12. var Person = AmpersandState.extend({ props: { name:'string' } }); var

    model = new Model({name: 'henrik'}); model.on('change:name', someFunc); model.name = 'bob'; // still fires event model.name = 47; // throws TypeError
  13. var Person = AmpState.extend({ props: { name:'string' }, session: {

    active:'boolean' } }); var model = new Person({ name: 'henrik', active: true }); model.active; //=> true model.toJSON(); //=> {name: 'henrik'}
  14. var Person = AmpState.extend({ props: { today: 'date' } });

    // unix timestamp coming in var henrik = new Person({today: '1418338921707'}); // getter returns Date Object henrik.today; //=> JS `Date` instance // timestamp when serializing JSON.stringify(henrik); //=> {today: 1418338921707}
  15. var Person = AmpState.extend({ props: { name: 'string' }, derived:

    { nickName: { deps: ['name'], fn: function () { return this.name.slice(0, 3); } } } });
  16. var someone = new Person({name: 'henrik'}); someone.on('change:nickName', logChange); // computed

    only once and cached someone.nickName; //=> 'hen' // not triggered if result is same someone.name = 'henry'; // only if different someone.name = 'crazy'; // logs changed nick: 'cra'
  17. 1. derive from child models 2. derive from other derived

    3. useful for relationships between models 4. cannot set directly 5. resulting model code is more readable CACHED, EVENTED, DERIVED PROPERTIES