Entwurf

und

skalierbare Implementierung

eines

erweiterten Facebook Messengers

gliederung

1. Motivation
2. Anforderungen
3. Entwurf
4. React
5. Demonstration

Datendiebstähle

1,5 Milliarden

140 Millionen

76 Millionen

• Yahoo
• eBay
• J. P. Morgan

Facebook

• Daten unverschlüsselt auf Server
  • schwer zu löschen
• Verschlüsselung nur zwischen zwei Handys

Funktionale Anforderungen

1. Standardfunktionen
2. Ende-zu-Ende-Verschlüsselung
3. Zusatzfunktionen

Nicht-funktionale Anforderungen

• Plattformunabhängigkeit
  • zeitlich bedingt nur Desktop-UI
• Skalierbarkeit

Skalierbarkeit

• Server
  • CPU, RAM, Traffic etc. proportional zur
    Anzahl der Nutzer - O(N)
• Client
  • Effizienz unabhängig von Anzahl der
    Programmierer und Codezeilen
  • Performanz auch bei komplexerem
    Front-End gewährleistet

keine offizielle API

1. Browser Extension
2. inoffizielle API
   • Facebook Chat API

IP-basierte Sperren

• lokaler Node.js Server
  • auf Smartphones nur über Umwege
    • Termux, J2V8
    • Intranet, Tunneling

Schlüsselaustausch

Chat

Front-End-Framework

• Xamarin, Titanium, Cordova
  • primär für Smartphones
• React
  • alle Plattformen
  • native Apps mit React Native
  • Nutzer: Facebook, Instagram, WhatsApp Web,
    Twitter, Dropbox, Netflix, ...

PerformanZ

​Quelle: http://chrisharrington.github.io/demos/performance/

• Grund: virtuelles DOM

Hot Reloading

• Injizieren von Codeänderungen zur Laufzeit
• erfordert Pure Functions
  • keine Seiteneffekte
    • Component = Funktion von Properties und State (React)
    • Reducer = Funktion von Action und State (Redux)
• leicht zu testen

Minimale API

• nur 2 essentielle Methoden
  • ReactDOM.render(...), React.createElement(...)
• this.props, propTypes, defaultProps
• this.state, this.setState
• Lifecycle-Methoden
  • componentWillUpdate, componentDidUpdate, ...​​​

JSX

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  "h1",
  {className: "greeting"},
  "Hello, world!"
);

MVC

Flux

Redux

Reducer

function reducer(state, action) {
    switch (action.type) {
        case EXAMPLE_ACTION:
            return state.set("example", action.payload);
        default:
            return state;
    }
}