react.js: Ускоряем ux/ui

Download React.js: Ускоряем UX/UI

Post on 21-Feb-2017

381 views

Category:

Software

0 download

Embed Size (px)

TRANSCRIPT

  • @maxmaxmaxmax CTO GVMachines Inc.

    React.js: UX / UI

  • 12+ , 6 JavaScript, 7 Python, Clojure

    oDesk (Upwork), Helios, 42CoffeeCups.

    - PyCon Ukraine, KyivJS, KyivPy, Hotcode

    2012 CTO GVMachines Inc.

  • GVMachines Inc.

    ZAKAZ.UA (, , , ) CartFresh ()

    Python

  • React.js

  • ,

  • Python + Django

    Solr +

    Redis

    jQuery + jQuery UI + bootstrap 2

  • jQuery Bootstrap,

  • Maintainability

  • , .

    iframe Django-. .

    , js

    JS Django Templates

  • : Angular, Backbone, React.js

    ,

  • Angular

    Backbone.js , jQuery

  • React.js , ,

  • DOM

  • , , React.js O(n3) O(n)

  • ,

    common.js ..

  • 2

  • : CSP, Immutable DS, Clojure, CRDT, Haskell

    ,

  • server-side

    API

  • $.ajax React.js copy-paste-style

  • API

    API

    API Mobile app, website front-end

  • API

    API

    API

    node.js

  • Side-effects

    API

    API

  • { "meta": {"session_id": %SESSION_ID}, "request": [ { "type": "timewindows.list", "args": { "store_ids": ["00002111"], "zone_id": "02111" }, "v": "0.1" } ] }

  • MODULE: timewindows-------------------------------------------RESOURCE: timewindows.list{'count': , 'index': , 'only_available': , 'store_ids': , 'zone_id': }

  • API SERVERS

    request state

    generated state response

    RENDERING WORKER

    REACT.JS DOM RENDERER

    put html into cache

    CACHE SERVERS

    time

  • ?

  • JS (CSP)

    (Redux, Immutable)

    CRDT-

  • static state (state, channel, n=0) { // we could use CSP channels here return go(function * () { yield put(channel, title(About"));

    var talks = yield take(json({url: /api/talks.json}));

    yield put(channel, [talks", talks]);

    channel.close() }) }

    Communicating sequential processes

  • CRDT (Swarm.js)

  • .

    Thanks!

    @maxmaxmaxmax