CREATING A REAL-TIME dashboard APP FOR TWITTER USING

REACT.JS

// Erik Wendel, BEKK Consulting // Kim Joar Bekkelund, Elastic 1

Todays Agenda » Presentation an introduction to React » Coding pt 1: getting to know React through small tasks » Coding pt 2: putting together the Twitter Dashboard

2

3

State 4

Back to square one 5

Simple Declarative Interactive data Components 6

Simple

Declarative Interactive data Components

7

Simple Declarative

Interactive data Components 8

Simple Declarative Interactive data

Components 9

A component's responsibility:

Data → DOM 10

Performance?

11

Virtual DOM 1. When something could have changed, re-render everything to a new DOM-representation 2. Diff new output with previous output 3. Update only what has changed

12

render to create output

diff compare output

batch calculate minimal changeset and batch 13

He ain't heavy, he's HTML 14

var ReactDOMElement = { type : string, props : { children : ReactNodeList, className : string, etc. }, key : string | boolean | number | null, ref : string | null };

15

Components 16

var Example = React.createClass({ render: function() { return (Virtual DOM-nodes) } }); React.render(Example(), document.body);

17

Creating virtual dom nodes React.createElement('div', { className: 'ninja' }, 'Hello World!');

Hello World!


18

JSX fully optional (but you'll want it)

19

render: function() { return React.createElement('div', null, 'Hello World!'); }

is equal to render: function() { return
Hello World!
; } 20

WTF? 21

in the build pipeline converting jsx to js

22

var Example = React.createClass({ render: function() { return
Hello World!
} }); React.render(, document.getElementById('main'));

23

var Example = React.createClass({ render: function() { return React.createElement('div'); } }); React.render(, document.getElementById('main'));

24

Why won't this work?! var HelloWorld = React.createClass({ render : function() { return hello world!; } });

25

var HelloWorld = React.createClass({ render : function() { return React.createElement('span', null, 'Hello ')React.createElement('span', null, 'World!'); } });

26

Custom components var RootComponent = React.createClass({ render: function() { return
; } }); Components may consist of native HTML or custom components 27

28

Lets talk about data 29

Props & State props immutable passed down to comp from parent

state changes over time lives in a component

30

Props var Comment = React.createClass({ render: function() { return
{this.props.name} says: {this.props.text}
; } }); React.render(, document.body); 31

var Counter = React.createClass({ getInitialState: function() { return { count: 0 }; }, increment: function(event) { this.setState({ count: this.state.count + 1 }); }, render: function() { return (

You clicked this {count} times.

); } }); React.render(,document.body); 32

One-way data flow data downwards, events upwards

33

Event delegation

34

35

36

Reusability var CommentBox = React.createClass({ render: function() { return

Comments

; } });

37

Lifecycle events: function function function function function ...

componentDidMount() {...} componentWillMount() {...} componentWillUnmount() {...} componentWillUpdate() {...} componentDidUpdate() {...}

38

Lifecycle events var Program = React.createClass({ componentDidMount: function() { this.setFocusOnInputField(); }, componentWillUnmount: function() { this.removeEventListeners(); this.doCleanup(); } } 39

Perform! shouldComponentUpdate: function(nextProps, nextState) { return (whether component should render() or not) }

40

Perform! shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id; }

41

Flexibility Easy to use React on parts of an app render(, document.body);

42

Server-side rendering var app = express(); app.get('/', function (req, res) { React.renderToString(Timer(), function(markup) { res.send(markup); }); });

43

Flux 44

Summary » challenges best practices

45

Summary » challenges best practices » has awesome performance

46

Summary » challenges best practices » has awesome performance » but main goal = simplify development

47

Summary » challenges best practices » has awesome performance » but main goal = simplify development

48

Summary » challenges best practices » has awesome performance » but main goal = simplify development » small scope - just DOM-manipulation

49

Summary » challenges best practices » has awesome performance » but main goal = simplify development » small scope - just DOM-manipulation » Flux handles the rest

50

Lets get cracking 51

Clone the git repo at

is.gd/javazone15 Ask us if you're new to Git! Follow instructions in the README

52

CREATING A REAL-TIME dashboard APP FOR TWITTER USING ...

When something could have changed, re-render everything to a new DOM-representation. 2.Diff new output with previous output. 3.Update only what has ...

60MB Sizes 2 Downloads 244 Views

Recommend Documents

CREATING A REAL-TIME dashboard APP FOR TWITTER USING ...
CREATING A REAL-TIME dashboard APP FOR TWITTER USING. REACT.JS. // Erik Wendel, BEKK Consulting .... but main goal = simplify development. 48 ...

Creating a Solid Web App Architecture Using Angular 2+, ASP.NET ...
Whoops! There was a problem loading more pages. Creating ... b API.pdf. Creating ... b API.pdf. Open. Extract. Open with. Sign In. Details. Comments. General Info. Type. Dimensions. Size. Duration. Location. Modified. Created. Opened by me. Sharing.

Creating a Profitable Betting Strategy for Football by Using ... - CiteSeerX
10 required by spread betting companies due to the fact that they are governed by ...... software for fitting the multinomial ordered probit model was not generally.

Humber Elementary students creating travel app for visitors to ...
Humber Elementary students creating travel app for visitors to Corner Brook - Local - The Western Star.pdf. Humber Elementary students creating travel app for ...

Realtime Tempo Tracking using Kalman Filtering
Mar 30, 2006 - tempo is as the time interval between beats, referred to as the inter-beat interval or period. With the ... data and raw audio signal for the use of tempo tracking. We will then ...... Meter as mechanism: A neural network model.

BubbleNet: A Cyber Security Dashboard for ... - Sean McKenna
1 University of Utah. 2 MIT Lincoln ... denial of service. • to prevent these ... collection of network records that represent some recurring or abnormal behavior.

BubbleNet: A Cyber Security Dashboard for Visualizing ... - SCI Utah
task of presentation is a vital one for network analysts, as infor- mation must often be ... information disclosure, theft, and denial of service [HL98]. Cyber security ...

A Language and an Inference Engine for Twitter ...
Oct 15, 2016 - People use online social networks to share huge amount of information: maybe too much? ... Twitter Filtering Rules. October 15th, 2016. 5 / 15 ...

Geolocation Prediction in Twitter Using Location ...
location-based recommendation (Ye et al., 2010), crisis detection and management (Sakaki et al., ... Section 2 describes our proposed approach, including data ..... Using friendship (bi-directional) and following (uni-directional) links to infer the 

A Topological Approach for Detecting Twitter ... - Semantic Scholar
marketing to online social networking sites. Existing methods ... nities with common interests in large social networks [6,7]. .... publicly available [20]. We also ...

A Language and an Inference Engine for Twitter ...
proposal experimentally on a real Twitter dataset and the results are highly promising. I. INTRODUCTION. Filtering of short text messages is becoming more and ...

Finding Twitter Communities with Common Interests using Following ...
Jun 25, 2012 - Twitter is a popular micro-blogging service that allows messages of up to 140 characters (called tweets) to be posted and received by registered users. Tweets form the basis of social interactions in Twitter where a user is kept update

A Language and an Inference Engine for Twitter ...
Oct 15, 2016 - People use online social networks to share huge amount of information: .... Data: from a large (≥ 2 · 106) set of tweets, after cleaning.