JAVASCRIPT SINGLE-PAGE APPLIKATIONEN

Slides:

Demo code:

github.com/runjak/nook2017

github.com/runjak/simpleChess

ÜBERSICHTIntro (prelude to tragedy)Bisherige AnsätzeReactKram zu ReactDas Problem mit dem StateDie Flux-ArchitekturCode und Tooling begucken

HTML → BROWSER…aber wie?

Statisches HTML vom Server

ServerClient

Mkay, Website!

Gib Website pls?

Dynamisches HTML vom Server

PHPHttpServerClient

Hier ist

Hier ist!

Ich brauch da mal!

Website pls?

Dynamisches HTML im Browser

JavaScript ServerBrowser

hier, bunt!

Mach mal bunt!Mkay, Website!

Gib Website pls?

BISHERIGE ANSÄTZE

…also zum Rendern im Browser

Vanilla JS

var body = document.querySelector('body');

body.innerHtml = '<h1>Hello World!</h1>';

jQuery

$('body').html('<h1>Hello World!</h1>');

handlebars / mustache

<div class="entry"> <h1>{{ title }}</h1> <div class="entryContent"> {{ content }} </div> </div>

React

import React from 'react';

import { render } from 'react-dom';

render(

<h2>'Hello World!'</h2>,

document.getElementById('root'),

);

REACTDamit kann man user interfaces bauen

reactjs.org

REACTWas macht es, und wie?Es rendert ein UserInterfaceEs soll möglichst nur Änderungen rendern - das aber schnellEs soll aus Komponenten aufgebaut sein…die stecken wir dann zusammen.

REACTWas macht es nicht?Mit APIs sprechenCSS / stylingDen Techstack kleiner

DIE PROBLEME UM REACT HERUM

MODULE

…in grauer Vorzeit:

CommonJS:

AMD:

ES6:

<script />

const modul = require('modul');

require(['modul'], (modul) => {…});

import Mainthing, { otherThing } from 'module';

BIBLIOTHEKENBibliothek Zweck

State management

An den State kommen

Gewürz für Redux

Styling/CSS

Taschenmesser

Redux

Reselect

redux-thunk

styled-components

lodash

TOOLING

Tool Zweck

zusammenbauen

linter

tests

typechecking

Hilfe beim Setup:

webpack

eslint

jest

�ow

create-react-app

MUTABLE STATE…gar nicht mal so geil.

SCHWIERIGER MIT MUTABLE STATE:

Nebenläu�gkeitVeränderungen bemerkenCode verstehenCode testenRefactoring

Aber: wir wollen ja auch was machen!

DIE FLUX-ARCHITEKTUR

…Facebook hat da mal was 'neu' erfunden.

DIE IDEE:Allen State zusammen isolierenTransaktionen auf immutable stateClever mitbekommen, wo sich was ändert

State

Reducer

Actions

Selectors

Container

Components

Utils/Services

Wie sieht sowas aus?

import React from 'react';

function SimpleButton(props) {

const { label, clickHandler } = props;

return (

<button onclick="{clickHandler}">

{label}

</button>

);

}

export default SimpleButton;

FRAGEN?Slides:

Demo code:

Es war mir ein inneres Blumenessen ���������

github.com/runjak/nook2017

github.com/runjak/simpleChess