Slide 1

Slide 1 text

NILS HARTMANN | W-JAX 2015 UI-KOMPONENTEN ENTWICKELN   REACT MIT  

Slide 2

Slide 2 text

[email protected] GitHub Twitter E-Mail

Slide 3

Slide 3 text

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES React

Slide 4

Slide 4 text

SINGLE PAGE APPLICATIONS React

Slide 5

Slide 5 text

OPEN SOURCE VON FACEBOOK HTTPS://FACEBOOK.GITHUB.IO/REACT/ React

Slide 6

Slide 6 text

0.3 0.14.1 rc beta alpha 05 | 2013 Open Source 10 | 2015 Aktuelles Release „Major“-Releases

Slide 7

Slide 7 text

BUILT WITH REACT!

Slide 8

Slide 8 text

V in MVC

Slide 9

Slide 9 text

W-JAX DEMO ANWENDUNG! Code: https://github.com/nilshartmann/react-example-app Demo: https://nilshartmann.github.io/react-example-app/

Slide 10

Slide 10 text

Wiederverwendbar Hierarchisch Logik und UI KOMPONENTEN ! ! ! ! ! ! ! ! ! ! !

Slide 11

Slide 11 text

Aus Komponenten aggregiert ANWENDUNGEN ! ! ! ! . . .! ! ! !

Slide 12

Slide 12 text

REACT Hintergrund

Slide 13

Slide 13 text

DOM OPERATIONEN Manuelle DOM-Manipulationen Umständliche API Fehleranfällig Performance-kritisch DOM DIFF DIFF DIFF MODEL

Slide 14

Slide 14 text

DATA BINDING Verbinden von Model und View Wann wird was gebunden? Wie funktioniert das Binding? Reihenfolge von Events?

Slide 15

Slide 15 text

Einfachheit REACT respond to events & render UI

Slide 16

Slide 16 text

Einfachheit respond to events & and render UI Event Zustand Rendern Mausklick Texteingabe Timer Serverantwort . . .

Slide 17

Slide 17 text

Einfachheit respond to events & and render UI Event Zustand Rendern Mausklick Texteingabe Timer Serverantwort . . . Immer ganze Komponente rendern Kein 2-Way-Databinding Kein dirty checking

Slide 18

Slide 18 text

RENDER UI Event Re-render

Slide 19

Slide 19 text

Einfachheit respond to events & and render UI Event Zustand Rendern Mausklick Texteingabe Timer Serverantwort . . . Immer ganze Komponente rendern ? Performance?

Slide 20

Slide 20 text

VIRTUELLER DOM VIRTUAL DOM MODEL DOM UPDATE UPDATE UPDATE React

Slide 21

Slide 21 text

UI AS A FUNCTION ∫ (model) à UI Model mit allen Zuständen (Textfelder, Auswahllisten etc) Immer ein Zeitpunkt Keine Dynamik render()! render(R3)! render(R3!tdemo)! render(R3)!

Slide 22

Slide 22 text

React PRAXIS

Slide 23

Slide 23 text

React SCHRITT FÜR SCHRITT

Slide 24

Slide 24 text

EINE REACT KOMPONENTE 1! HTML
! At least 8 characters long.!
!

Slide 25

Slide 25 text

EINE REACT-KOMPONENTE 2! Komponente CheckLabel Komponentenfunktion (seit 0.14) function CheckLabel() {! return
! At least 8 characters long.!
;! }! CheckLabel.js JSX: Statt Template-Sprache

Slide 26

Slide 26 text

EINE REACT-KOMPONENTE 3! Übersetzter JavaScript Code React.createElement(! "div",! { className: "CheckLabel-unchecked" },! "At least 8 characters long."! );! Erzeugt „virtuelles“ DOM-Element

Slide 27

Slide 27 text

KOMPONENTE RENDERN! import React from 'react';! import ReactDOM from 'react-dom';! ! import CheckLabel from './CheckLabel';! ! ! ReactDOM.render(, ! document.getElementById('mount'));! ! !
! ! ! ! app.js index.html Webpack

Slide 28

Slide 28 text

PROPERTIES! function CheckLabel({checked, label}) {! return
! {label}!
;! }! Properties (destrukturiert) { ! checked: false, ! label: ‘At least 8 characters long.’ ! }!

Slide 29

Slide 29 text

PROPERTIES BESCHREIBEN! function CheckLabel({checked, label}) {! // . . .! }! ! CheckLabel.propTypes = {! label: React.PropTypes.string.isRequired,! checked: React.PropTypes.bool! };! ! Beschreibung der Properties Überprüfung zur Laufzeit

Slide 30

Slide 30 text

KOMPONENTEN VERWENDEN! function CheckLabelList() {! return
! ! !
;! }! ! function CheckLabel({checked, label}) {! // . . .! }! ! CheckLabelList CheckLabel

Slide 31

Slide 31 text

LISTEN! function CheckLabelList({checks}) {! return
! {checks.map((c) => ! )}!
;! }! ES5 Array.prototype.map() [! { checked: false, label: ‘At least 8 characters long.’ },! { checked: true, label: ‘Contains uppercase letters’ }! ];! Eindeutiger Schlüssel

Slide 32

Slide 32 text

ZUSTANDSBEHAFTETE KOMPONENTEN! PasswordForm CheckLabelList Interner Zustand! CheckLabel input

Slide 33

Slide 33 text

ZUSTAND! Event Zustand Rendern Textfeld Auswahl in Liste Checkbox Serverantwort . . . KEY VALUE password REACT! state Event Handler Rendern modifiziert löst aus

Slide 34

Slide 34 text

KOMPONENTEN KLASSEN! class PasswordForm extends React.Component {! constructor(props) {! super(props);! }! ! componentDidMount() { . . . }! componentWillReceiveProps() { . . . }! shouldComponentUpdate() { . . . }! . . .! ! render() {! return
{this.props.label}
;! }! }! ! PasswordForm.propTypes = {! . . .! };! ! ECMAScript 2015 Klasse Properties über Konstruktor React Lifecycle Methoden Render Methode Properties über props-Objekt Property-Beschreibungen

Slide 35

Slide 35 text

ZUSTAND UND RENDERING! class PasswordForm extends React.Component {! checkPassword(password) { return [ . . . ]; } ! ! onPasswordChange(input) {! this.setState({password: input});! }! ! render() {! const checks = this.checkPassword(this.state.password);! ! return . . .! this.onPasswordChange(e.target.value)} ! />! ! ! }! }! 1. Event tritt ein 2. Zustand neu setzen input Zustand! 3. löst rendern der gesamten Komponente aus

Slide 36

Slide 36 text

DOM UPDATES - BIG PICTURE Anwendung React Event Event Handler Event Handler setState render Update DOM z.B. Zeichen eingegeben Minimale Änderung Fachlicher Handler Globaler React Handler

Slide 37

Slide 37 text

KOMMUNIKATION: PROPERTIES! PasswordForm CheckLabelList CheckLabel input div PasswordApp Button h1 check! enabled! value! text! checks! render! Von oben nach unten: props!

Slide 38

Slide 38 text

KOMMUNIKATION: EVENTS 1! PasswordForm CheckLabelList CheckLabel input div PasswordApp Button h1 event! R   Zeicheneingabe Von unten nach oben: events!

Slide 39

Slide 39 text

KOMMUNIKATION: EVENTS 2! PasswordForm CheckLabelList CheckLabel input div PasswordApp Button h1 Von unten nach oben: events und callbacks! event! callback!

Slide 40

Slide 40 text

KOMMUNIKATION: CALLBACK! class PasswordApp extends React.Component {! onSetPassword(password) { . . . }! ! render() {! return . . .! this.onSetPassword(p)}! />;! }! }! ! ! class PasswordForm extends React.Component {! render() {! return . . .! ! this.props.onSetPasswordHandler(this.state.password)}! />! }! }! ! PasswordForm.propTypes = {! onSetPasswordHandler: React.PropTypes.func.isRequired! }! 1. Callback übergeben 2. Callback aufrufen event! 3. Event verarbeiten (ggf. Zustand setzen)

Slide 41

Slide 41 text

UNIT-TESTS (OHNE DOM)! import TestUtils from 'react-addons-test-utils';! ! describe('CheckLabel', () => {! it('should render a "checked" label', () => {! ! const renderer = TestUtils.createRenderer();! renderer.render(! ! );! ! const tree = renderer.getRenderOutput();! expect(tree.type).to.equal('div');! expect(tree.props.className).to.equal('CheckLabel-checked');! expect(tree.props.children).to.equal('My Label');! });! });! „Shallow rendering“

Slide 42

Slide 42 text

EINE „ANWENDUNG“ (BEISPIEL)! ! class App extends React.Component {! handleItemSelected(item) { ! this.setState({component: item.component}); ! }! ! render() {! return
! this.handleItemSelected(item)}! items={[! { label: 'Change password', component: },! { label: 'Show weather', component: }! ]}! />! ! ! {this.state.component}! !
;! }! }! Ausgewählte Komponente einfügen Navigation (Komponentenauswahl)

Slide 43

Slide 43 text

Ökosystem bootstrap   router   material-­‐design   fer4ge  Komponenten   dev  tools   flux   na4ve   graphql  &  relay   AUSBLICK

Slide 44

Slide 44 text

Mittagspause (wohlverdient!) React Router Serverzugriffe Integration von Dritt-Bibliotheken Build-Prozess Zugabe

Slide 45

Slide 45 text

ZUGRIFF AUF NATIVEN DOM 1! Beispiel: focus() auf input-Feld aufrufen focus()

Slide 46

Slide 46 text

ZUGRIFF AUF NATIVEN DOM 2! class PasswordForm extends React.Component {! ! componentDidMount() {! this.refs.passwordField.focus();! }! ! render() {! const password = this.state.password;! ! return
! ! . . .!
;! }! }! Referenz anlegen React-Callback: Komponente wurde in den nativen DOM gehängt Natives DOM-Element Virtuelles DOM-Element this.refs enthält native DOM-Elemente, die mit ref ausgezeichnet wurden

Slide 47

Slide 47 text

SERVERZUGRIFF! Interner Zustand! Löst Serverzugriff aus WeatherPanel WeatherView

Slide 48

Slide 48 text

SERVERZUGRIFF 1! import WeatherPanel from ‘./WeatherPanel’;! ! class WeatherView extends React.Component {! constructor() {! super();! }! ! fetchWeather() {! const { city } = this.state;! const fetchUrl = `http://api.w.org/${city}`;! fetch(fetchUrl)! .then( response => response.json())! .then( weather => this.setState({weather}))! ;! }! ! render() {! const { city, weather } = this.state;! ! this.fetchWeather()}! ! }! }! Geladene Daten anzeigen Daten vom Server laden Zustand neu setzen (triggert Rendering) fetch-Bibliothek: https://fetch.spec.whatwg.org/

Slide 49

Slide 49 text

SERVERZUGRIFF 2! class WeatherView extends React.Component {! constructor() {! super();! this.state = { city: ‘Hamburg’ };! }! ! componentDidMount() {! this.fetchWeather();! }! ! fetchWeather() { . . . }! ! render() { . . . }! }! Wetterdaten laden, sobald Komponente in DOM gehängt wurde State initialisieren

Slide 50

Slide 50 text

INTEGRATION THIRD-PARTY-LIBS! Beispiel: D3.js ChartView ButtonBar Interner Zustand! D3.js SVG

Slide 51

Slide 51 text

D3.JS! import d3 from ‘d3’;! ! class ChartView extends React.Component {! constructor() { this.state = { . . .}; }! ! increaseDrink(drink) { this.setState({ . . .}); }! ! componentDidMount() { this.renderChart(); }! componentDidUpdate() { this.renderChart(); }! ! renderChart() { ! d3.select(this.refs.chart)! .data(this.state.drinks)! .enter().append(. . .);! }! render() {! return . . .!
! ! { drinks.map(d => this.increaseDrink(d)} />) ! }! ! }! }! ! Diagramm (neu) zeichnen, sobald Komponente in DOM gehängt bzw dort aktualisiert wurde D3 Diagramm wird nicht in render() gezeichnet, weil hier kein natives DOM- Element Natives DOM-Element

Slide 52

Slide 52 text

Viele ECMAScript 2015 Features Compiler notwendig ES2015 Alias: ES6

Slide 53

Slide 53 text

BUILDPROZESS Babel is a JavaScript compiler Babel http://babeljs.io ES2015 „ES7“ . . . ES5 Babel

Slide 54

Slide 54 text

BUILDPROZESS Webpack https://webpack.github.io Module bundler - Erzeugt zentrales JavaScriptFile dist.js JS JS JS JS JS CSS PNG app.js Password.js Label.js Layout.js Webpack Babel Source-Files React.js

Slide 55

Slide 55 text

BUILDPROZESS webpack-dev-server JS JS JS IDE/Editor Webpack Browser process serve reload edit watch webpack-dev-server

Slide 56

Slide 56 text

[email protected] Fragen? Vielen Dank!