Kodeaften

  • React.js
  • xDebug
  • Git Workflow
  • Kodestandard
  • Promises
  • Tools

Program

React.js

View Layer

Virtual DOM

Components

JSX

Hvorfor har vi brug for det?

Nogle gange påvirker vores moduler hinanden, fx når vi henter indhold via. AJAX erstatter andet indhold. 

 

"Primer" er en måde at fixe det på, React er anden. React fixer samtidig nogle af de problemer som Primer har.

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

JSX

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

Vanilla

Fordele

  • Ved at rendere HTML i JS kan man skære et mellemled væk (PHTML)
  • Kan renderes på serveren (SEO)
  • Virtual DOM gør det snappy
  • Der ingen begrænsninger ift. template-systemer, man har alle de samme muligheder som normalt med JavaScript

Ulemper

  • Gamle konventioner ryger ud af vinduet
  • JavaScript Animationer kan være besværlige at lave
  • Serverside-rendering med PHP er måske besværligt (?)
  • Hvad hvis React ender med bare at være en ny Angular ?

xDebug

... Anders viser tips og tricks til debugging

Git Workflow

Det besluttede vi sidste gang...

Branches everywhere!

Git Deploy

Skal vi ændre på noget?

Kodestandard

- PHP (Styleguide)

- JavaScript (Styleguide)

Tools

Promises

EcmaScript 6 - Harmony 

  • Async
  • Minder om events
  • Kan kun trigger 1 gang
  • States:
    • Start: pending
    • Slut:   resolved eller rejected
    • (nogle implementationer har også en progress)
var promise = new Promise(function(resolve, reject) {});
var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

promise.then(onResolve, onReject);
var onError = function(err) { console.log(err); };

$.ajax('whatever.json', function(){
    // getting started
    $.ajax('whatever2.json', function(){
        // almost done
        $.ajax('whatever3.json', function(){
            // all done
        }, onError);
    }, onError);
}, onError);

Eksempel med jQuery

// $.ajax works Async and returns a Promise
var onError = function(err){ console.log(err); };

// ES6 Promise - sekvental
Promise.resolve()
    .then($.ajax('whatever.json'))
    .then($.ajax('whatever.json'))
    .then($.ajax('whatever.json'))
    .then(function(){
        // all resolved
    }, onError);
// ES6 Promise - serial
var foo = $.ajax('whatever.json'),
    bar = $.ajax('whatever2.json'),
    baz = $.ajax('whatever3.json');

Promise.all([foo, bar, bar]).then(function(){
    // foo, bar and baz are all resolved
}, onError);
var esPromise = Promise.resolve(
    $.ajax('/whatever.json') // returns $.deferred
);

jQuery Deferred → ES6 Promise

// jQuery
$.when(foo, bar, baz).then(function(fooArgs, barArgs, bazArgs){
    // .then() gælder både resolve & reject state
    // foo, bar AND baz were all resolved
});

// or...
$.when(foo, bar, baz).done(function(fooArgs, barArgs, bazArgs){
    // foo, bar AND baz were all resolved
}).fail(function(err){
    // foo, bar OR baz was rejected
});

jQuerys implementering - "deferred"

EcmaScript 6 - Harmony

  • Promises (duh!)
  • Classes
  • Modules
  • Arrow functions ( ()  => {} )
  • Block Scoping ( let )

Resources

  • https://github.com/jakearchibald/es6-promise
  • https://github.com/google/traceur-compiler

Tools

ngrok

Grunt vs Gulp

RequireJS

vs

Browserify

vs

Webpack

Food!

Made with Slides.com