Gjennomføring

http://nith.studiehandbok.no/content/view/full/8378

hva skal vi gjennom?

• Webapps (React, Redux)
   
• Application Programming Interface (API)
   
• REST-paradigmet (pensum)
   
• Real-time updates (WebSockets)
   
• Cross-Origin Resource Sharing (CORS)
   
• Databaser: dokumenter (vs. relasjoner)
   
• Informasjonssikkerhet i webutvikling med API

Hvordan gjør vi det?

• 12 økter + mappe med 3 elementer
   
• Element n vektes cirka n * 20 % mot endelig karakter

1. 2 uker til løsning
2. Feedback
3. 1 uke til forbedring

Forelesninger

(plan på It's Learning, plan noe åpen for endring)

Pensum

$9.94 for å leie Kindle edition @ Amazon

(kan leses online)

Lenes tungt på litt senere

JavaScript

Gary Bernhardt: Wat

var greeting = 'Hello, world!';

alert(greeting);

console.log('greeting: ' + greeting);

var greetings = ['hello', 'hi'];

// "Hello", then "hi"
for (var i = 0; i < greetings.length; i++) {
    alert(greetings[i]);
}

FUnksjoner

// Named functions
var plus = function(a, b) {
    return a + b;
}

plus(1, 2); // 3

plus('Hello, ', 'world!'); // 'Hello, world!'


// Or lambdas!
var plus = (a, b) => a + b;

plus(1, 2); // 3

Function in a function in a function in a...

var sumFrom1ToLimit = function(limit, plusFunction) {
    var sum = 0;

    for (var i = 1; i <= limit; i++) {
        sum = plusFunction(sum, i); // !
    }

    return sum;
}

// 1 + 2 + 3 + ... + 10
sumFrom1ToLimit(10, function(a, b) { return a + b; }); // 55


// Or lambdas!

var sumFrom1ToLimit = (limit, plusFunction) {
    var sum = 0;
    // sum up
    return sum;
}

sumFrom1ToLimit(10, (a, b) => a + b); // 55

=== operator

http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons

== operator

http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons

Chrome DevTools

javascript object notation

// Java language object:
public class Language {
    private String name;

    public void setName(String name) { this.name = name; }

    public void getName() { return name; }
}

// JSON representation:
{ "name": "..." }

// JSON list: [ ... ]

[ // start simple list of strings
    "hello",
    "world"
] // end list

// JSON list of objects: [ { ... }, { ... } ]

[ // start list of languages
    { "name": "JavaScript" },     // language object comma
    { "name": "Java" },           // language object comma
    { "name": "C#" }              // language object
] // end list

(JSON: dataoverføring)

JSON er gyldig javascript

var someLanguage = { "name": "Java" };

var languages = [
    { "name": "C#" },
    someLanguage,
    { "name": "Haskell" }
];

console.log(languages);

Fordeler?

Ulemper?

AJAX / AJAJ

• Hent data fra utenfor koden
  • Filer, API-er, ...?
     
• XMLHttpRequest i plain JS

• View-bibliotek for web apps (browser)
   
• Deklarativt
  • React: Her kommer det en verdi
  • JQuery:
    • 1. Opprett denne verdien sånn her
    • 2. Vis den frem her på denne måten
    • 3. Oppdater dataen på denne måten
       
• Statisk web app!

Model-View-Controller?

• Pattern for separasjon av logikk
   
• blah blah
  
  
   
• MVP?

http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

React "Templates"

We can do better: JSX?

Returneres fra en "render"-funksjon i JS-klassen:

Krever Babel (eller tilsvarende)—jeg ordner det nå

render() {
  return (
    <div>
      <p>Hello</p>
    </div>
  );
}

Data binding med props

// ES2015 class syntax
class Greeting extends React.Component {
  render() {
    return (
      // JSX
      <p>Hello, {this.props.name}</p>
    );
  }
}

// NB: JSX
var greeting = <Greeting name="Martin" />;

// Add the element to the DOM
ReactDOM.render(
  greeting,
  document.getElementById('container')
);

https://facebook.github.io/react/docs/displaying-data.html