Slide 1

Slide 1 text

React Everywhere How to create huge and ﬂexible application mizchi / Increments, Inc React Meetup #2 @dots

Slide 2

Slide 2 text

About ☞ @mizchi / Koutarou Chikuba ☞ Frontend SPA Specialist ☞ Game Engineer → Web Programmer ☞ node.js / frontend / ruby ☞ My English is very poor, sorry.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Products ☞ Kobito for Windows | Markdown Editor built on Electron ☞ mizchi/arda | ﬂux framework ☞ mizchi/md2react | markdown text to ReactElement ☞ mizchi/TypedCoﬀeeScript (suspended) ☞ etc...

Slide 5

Slide 5 text

Today's themes ➀ React and Universal ➁ Flux and DDD ➂ Server Side Rendering

Slide 6

Slide 6 text

React and Universal

Slide 7

Slide 7 text

Universal JavaScript ☞ Pure JavaScript World ☞ Runnable in node, browser and so on... becuase it's pure. ☞ JSON serializable to communicate with others ref. ☞ Universal JavaScript — Medium ☞ Unimorphic Isoversal JavaScript What? | getiblog

Slide 8

Slide 8 text

Compilable => Runnable in everywhere ☞ ES Modules (TypeScript / Babel) ☞ Browserify to resolve dependencies and concat ☞ Avoid native modules ☞ Emscripten? fmm... ☞ Wait for WebAssembly ☞ Avoid DOM ☞ HTML is a GUI toolkit library only for browser

Slide 9

Slide 9 text

React is universal? ☞ ReactComponent's srops/state can be universal. ☞ Virtual DOM is universal yet. ☞ Rendering to document is NOT React.render( , // <= Universal document.querySelector('.content') // <= Not Universal HTMLElement );

Slide 10

Slide 10 text

Custom Renderer on React v0.14.x var React = require('react'); var ReactDOM = require('react-dom'); var MyComponent = React.createClass({ render: function() { return

Hello World

; } }); ReactDOM.render(, node);

Slide 11

Slide 11 text

Selectable Backends ☞ react-dom ☞ react-native ☞ react-canvas ☞ react-pixi ☞ react-three ☞ react-blessed ☞ etc...

Slide 12

Slide 12 text

react-native First Impressions using React Native

Slide 13

Slide 13 text

react-blessed Yomguithereal/react-blessed

Slide 14

Slide 14 text

react-pixi Izzimach/react-pixi

Slide 15

Slide 15 text

Main Role of React Virtual Tree → Distribute Diﬀ and Patch ☞ Just the Tree. Node and Leaf. ☞ React detects previous/next tree diffirenece and patches

Slide 16

Slide 16 text

React is good enough?

Slide 17

Slide 17 text

My frontend experience says... ☞ Backbone does NOT have bone. ☞ with stickit is hasty preparation. ☞ Chaplin 's reuse/dispose rule are not intuitive. ☞ Vue is simple and great. but children management is hard. ☞ Angular is massive and not clean API and has performance issues.

Slide 18

Slide 18 text

My last one year with React Pros. ☞ Handling state transaction becomes easy. ☞ Easy to separate UI and Domain Layers. Cons. ☞ Need mirco management for platfrom optimization. ☞ Hacky componentWillUpdate and componentShouldUpdate

Slide 19

Slide 19 text

... But We have Another Choices Now ☞ React is big to adopt cheerfully ☞ VirtualDOM Implementation Size (with uglify-js) ☞ react(119kb) ☞ dekujs/deku(33kb) ☞ Matt-Esch/virtual-dom(30kb) ☞ lhorie/mithril.js(90kb) ☞ ref. jQuery(129kb) / Probably you need yet

Slide 20

Slide 20 text

Next...

Slide 21

Slide 21 text

Flux and DDD

Slide 22

Slide 22 text

What is React? ☞ Just the UI

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

What is UI? ➀ Presentation Layer ➁ User Interuction Handler

Slide 25

Slide 25 text

Let's think layers.

Slide 26

Slide 26 text

(Eric Evans's) DDD Layers ☞ UI Layer ← ☞ Application Layer ☞ Domain Layer ☞ Infrastructure Layers

Slide 27

Slide 27 text

Frontend Layers ☞ UI Layer: React ☞ Application Layer: Flux ☞ Domain Layer: Your own Domain ☞ Infrastructure Layer ☞ REST Abstraction ☞ BrowserStorages(localStorage, IndexedDb, File API...)

Slide 28

Slide 28 text

Flux: backend agnostic (Something Action) => Store => (RootComponent State) ☞ Control Flow ☞ Store does not have to know where actions happen. ☞ Store does not have to know what is renderer result. Redux calls it reducer

Slide 29

Slide 29 text

Flux Essence ➀ update(previousState: State, action) => State

Slide 30

Slide 30 text

Flux Essence ➀ update(previousState: State, action) => State ➁ stateToView(state: State) => View

Slide 31

Slide 31 text

Flux Essence ➀ update(previousState: State, action) => State ➁ stateToView(state: State) => View ➂ View dispatches events! ➃ Listen events and dispatch to store.

Slide 32

Slide 32 text

Itroduction to Arda ☞ mizchi/arda ☞ One of ﬂux implementation by @mizchi ☞ Extracted from Kobito for Windows and refactored.

Slide 33

Slide 33 text

Arda: Features ☞ State management and transition by stack. ☞ EventEmitter Pub/Sub ☞ All control steps can handle Promise.

Slide 34

Slide 34 text

Arda: Overviews

Slide 35

Slide 35 text

Arda: Overviews

Slide 36

Slide 36 text

Arda : Features : Just the EventEmitter // ReactComponent mixins: [Arda.mixin], onClick() { this.dispatch('foo'); } // Context Subscriber subscribe('foo', () => {context.update(state => state)}); Context => RootComponent => Dispatcher => Context ...

Slide 37

Slide 37 text

Arda: Features: Stacked Contexts router.pushContext(MainContext, {}) # Main .then(()=> router.pushContext(SubContext, {})) # Main, Sub .then(() => router.pushContext(MainContext, {})) # Main, Sub, Main .then(() => router.popContext()) # Main, Sub .then(() => router.replaceContext(MainContext, {})) # Main, Main

Slide 38

Slide 38 text

Features of Arda: LifeCycle subscriber = (context, subscribe) => { subscribe('context:created', () => console.log('created')); subscribe('context:started', () => console.log('started')); subscribe('context:paused', () => console.log('paused')); subscribe('context:resumed', () => console.log('resumed')); subscribe('context:disposed', () => console.log('disposed')); } Referred Android Activity LifeCycle.

Slide 39

Slide 39 text

DDD on Arda ➀ EventEmitter subscribe → update ﬂow // Action to Domain ➁ Context.expandComponentProps() // Domain to View

Slide 40

Slide 40 text

Why I made Arda ☞ react-router has a strong habit. ☞ Need TypeScript friendly framework to scale. ☞ Need to separate domains from application layers Real World Virtual DOM // Speaker Deck

Slide 41

Slide 41 text

What you should think in development ☞ Domain can be universal ☞ Avoid Smart UI ☞ Doubt code you write belongs domain layer

Slide 42

Slide 42 text

Reward of DDD on Flux ☞ Removable infrustructure ☞ Runnable in everywhere ☞ Browser ☞ Electron ☞ Terminal

Slide 43

Slide 43 text

Practice - env/ - browser/ - components/ - main.js - api/ - commands/ - queries/ - application/ - router.js

Slide 44

Slide 44 text

Server Side Rendering and Take Over

Slide 45

Slide 45 text

react-rails ☞ reactjs/react-rails ☞ Render HTML string with V8 by ReactComponent <%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %>

Hello, John!

Slide 46

Slide 46 text

Take Over ☞ Can avoid refreshing in cline if you provide same component and same props ☞ react-railsͰαʔόʔαΠυϨϯμϦϯάͭͭ͠ΫϥΠΞϯτͰ setStateͰ͖ͯ࠷ߴʹͳͬͨ - Qiita

Slide 47

Slide 47 text

ReactPhoenix ☞ increments/react_phoenix ☞ for Elixir ☞ WIP ☞ same api with react_rails <%= react_component("HelloMessage", %{a: 1}, prerender: true) %> # =>

Slide 48

Slide 48 text

Why SSR? ☞ Embbed partially in application ☞ Improve initial view UX ☞ Share templates with client and server ☞ SEO

Slide 49

Slide 49 text

Conclusion ☞ Universal JavaScript runs in everywhere ☞ Universal React Virtual Tree can exists everywhere ☞ Flux leads you Universal and ﬁrst steps to DDD. ☞ Runnable in Server too

Slide 50

Slide 50 text

Thank you for listening We are hiring. ΤϯδχΞ࠾༻৘ใ - Incrementsגࣜձࣾ