Upload
lenhi
View
237
Download
0
Embed Size (px)
Citation preview
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
Dynamisches HTML im Browser
JavaScript ServerBrowser
hier, bunt!
Mach mal bunt!Mkay, Website!
Gib Website pls?
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'),
);
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.
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
SCHWIERIGER MIT MUTABLE STATE:
Nebenläu�gkeitVeränderungen bemerkenCode verstehenCode testenRefactoring
Aber: wir wollen ja auch was machen!
DIE IDEE:Allen State zusammen isolierenTransaktionen auf immutable stateClever mitbekommen, wo sich was ändert
import React from 'react';
function SimpleButton(props) {
const { label, clickHandler } = props;
return (
<button onclick="{clickHandler}">
{label}
</button>
);
}
export default SimpleButton;