ReactJS.NETFast and ScalableSingle Page Applications

Rick Beerendonktwitter.com/rickbeerendonk

REACT

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

REACT .NET

REACT C# ♥

AND ASP.NET MVC

REACT NATIVE

A FRAMEWORK FOR BUILDING NATIVE APPS

USING REACT

What is React?

2

Made by Facebook Used by Facebook

IE8 and up All recent mobile browsers GitHub Fork for IE6 & IE7

Native apps for iOS (Android soon)• Windows already allows for native JavaScript applications.

What is React?

3

ReactJS:http://reactjs.com/

ReactJS.NET:http://reactjs.net/

React Native:https://facebook.github.io/react-native/

React is Open Source (GitHub)

4

Defies

“Best Practices”

What is React?

5

What do you use now? What are your current problems?

Why React?

6

Synchronizing state is hard=> Hence Databinding=> Chain reaction of callbacks

Small changes can lead to unprecedented reactionWhat is the effect on performance?

Updating the DOM is hard Debugging

• Where to place breakpoints?• Forward, not backward• Line by line

Problems

7

“Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively poorly developed.

For that reason we should do (as wise programmers aware of our limitations) our utmost to shorten the conceptual gap between the static program and the dynamic process, to make the correspondence between the program (spread out in text space) and the process (spread out in time) as trivial as possible”

Edsger Dijkstra

8

Rebuild instead of update Immutable instead of Mutable

• Flow: Uni-directional instead of bi-directional

Debugging• Minimum number of change locations (where to place breakpoint?)• Move from change to change instead of from line to line

Solutions

9

20th century: Old server, easy: Throw away old page and generate a new page on every request.

2004: HTML = Composed string 2007: HTML = Composed string with XSS protection 2010: Reduce server callbacks by having more JavaScript (databinding/MVC/etc.) 2013: React

History

10

Traditional:

DOM

11

App DOM

builds/modifies

events

Throw away and rebuild DOM: Losing input focus & cursos position Losing text selection Losing scroll position Losing IFrame state

DOM

12

React:

Virtual DOM

13

App Virtual DOM

builds/modifies

events

DOM

builds/modifies

events

Doom3

14

Doom3

15

Doom3 React

16

React:

Virtual DOM

17

AppNew

Virtual DOM

builds

events

DOM

modifies

events

OldVirtual DOM

Queue Differences

Minimum number of differences Fastest possible changes Minimize garbage collection Only write to the browser DOM Event handlers only attached to browser DOM root

Smart Virtual DOM

18

Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/01.%20HelloReact

React!

19

Looks like XAML in WPF Familiar for designers Compiles into JavaScript

• Online: http://facebook.github.io/react/jsx-compiler.html • Babel (ES 2015 & 2016 Transpiler): https://babeljs.io/docs/usage/jsx/• Offline:

https://github.com/rickbeerendonk/react-om-examples/tree/master/Extra%2003.%20JSX%20Compiler

Can be generated from HTML• Online: http://facebook.github.io/react/html-jsx.html• Offline: https://github.com/reactjs/react-magic/blob/master/README-htmltojsx.md

JSX

20

HTML in Javascript?

Are you nuts!?!?!?!

Separation of concerns

21

Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/02.%20Component

Components

22

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools

23

24

Synthetic, cross-browser wrapper for the browser event Identical on all browsers Same as browser event, incl. capturing/bubbling phases. Extra event property: nativeEvent

Events

25

Clipboard events• onCopy onCut onPaste

Keyboard events• onKeyDown onKeyPress onKeyUp

Focus events• onFocus onBlur

Form events• onChange onInput onSubmit

Mouse events• onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave

onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

Supported events (1)

26

Touch events• onTouchCancel onTouchEnd onTouchMove onTouchStart

UI events• onScroll

Wheel events• onWheel

Supported events (2))

27

Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/03.%20Events

Events)

28

Immutable

Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/04.%20Properties

Properties)

29

Mutable Only changeable by setState()

• Currently also by replaceState(), but that is no longer supported by ES6 classes.

Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/05.%20State

State)

30

Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/06.%20MultipleComponents

Multiple components)

31

Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/05b.%20State%20without%20XSS%20Protection

Cross-site scripting)

ASP.NET MVC• NuGet: https://www.nuget.org/packages/React.Web.Mvc4/• JSX compilation including ECMAScript 2015 + caching• JSX bundling & minification• Server side rendering

OWIN• NuGet: https://www.nuget.org/packages/React.Owin/• JSX compilation through OWIN middleware

Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/Extra%2004.%20Server%20Side%20ASP.NET%20MVC

ReactJS.NET Server Side

32

React:

Virtual DOM Server

33

App Virtual DOMbuilds/modifies

<HTML>builds/modifies

Who’s using React?

34

React component search engine (npm):http://react-components.com/

React-router:https://github.com/rackt/react-router

React Drag and Drop:https://github.com/gaearon/react-dnd

React-bootstrap:http://react-bootstrap.github.io/

Useful links

35

“Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow.”

https://facebook.github.io/flux/

Flux

36

Om:https://github.com/swannodette/om

Undo/Redo:http://swannodette.github.io/2013/12/31/time-travel/

Goya (app):http://jackschaedler.github.io/goya/

Om: Undo/Redo

37

Let’s React!

Twitter: http://twitter.com/rickbeerendonk Mail: rick@nforza.nl Slides: http://www.slideshare.net/RickBeerendonk Sources: https://github.com/rickbeerendonk/react-om-examples