Entwurf

und

skalierbare Implementierung

eines

erweiterten Facebook Messengers

gliederung

1. Motivation
2. Anforderungen
3. Technische Hürden
4. Verschlüsselung
5. React & Redux
6. Implementierung

Datendiebstähle

1,5 Milliarden

140 Millionen

76 Millionen

• Yahoo
• eBay
• J. P. Morgan

Facebook

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

Funktionale Anforderungen

• Ende-zu-Ende-Verschlüsselung
• Standardfunktionen
• Zusatzfunktionen
  • Meme-Generator, Autoresponder etc.

Nicht-funktionale Anforderungen

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

keine offizielle API

1. Browser Extension
   • eingeschränkt
   • Moving Target
2. eigene FB-API
   • ​Moving Target
3. Facebook Chat API

Hürde 1

Inoffizielle API NUR für NOde.js

1. manuelle Portierung
   • Moving Target
2. Module Bundler
   • Same Origin Policy
3. Browser Extension
   • nicht unter mobilem Chrome
4. Node.js Server

Hürde 2

IP-basierte Sperren

• weit entfernte IP → temporäre Kontosperre
• lokaler Server
  • Node.js auf Smartphones nur über Umwege
    (Termux, J2V8)
  • Intranet/Tunneling möglich

Hürde 3

Verschlüsselung

• asymmetrischer RSA-Schlüsselaustausch (2048-Bit)
• symmetrische AES-Verschlüsselung (128-Bit)

Handshake

Chat

Framework-Kandidaten

• Xamarin
  • primär für Smartphones
• Cordova
  • keine native Performance
• Titanium
  • proprietäre API
• React

React

• JavaScript-Render-Library von Facebook
  • alle Plattformen
  • Beispiele: Facebook, Instagram, Twitter,
    WhatsApp Web, Dropbox, Netflix
• native Apps mit React Native

Jobangebote

Quelle: Hacker News / Ryan Williams

Vorteil 1a

Bezahlung

Quelle: Stackoverflow Survey 2016 (Lohnvergleich Front-End)

Vorteil 1b

PerformanZ

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

• Grund: virtuelles DOM

Vorteil 2

Hot Reloading

• Components = Funktionen von Properties und State
• Injizieren von Codeänderungen zur Laufzeit

Vorteil 3

Minimale API

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

Vorteil 4

JSX

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

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

Library vs. Framework

• React: View
• Model/Controller fehlen bisher

MVC

Flux

Redux

• 1 Store
• 1 State
• n Reducer

Reducer

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

PURE FUNCTIONS

• keine Seiteneffekte
• leicht zu testen
• React Components, Reducers, Selectors,
  Action Creators, Selector Creators
• Hot Module Replacement, Hot Reloading (Beispiel)

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

Skalierbarkeit mit React/Redux

• Trennung UI - Logik
• Gliederung nach Komponenten
• Unterteilung in Components, Constants, Selectors, Actions, Reducers, Sagas, Messages

Implementierung

Fragen?