LightTable

react.js

getting instant feedback

Author: Viktor Lova / nsinreal

https://github.com/vlova/instantfeedback

Light Table

Introducing

Light Table

http://lighttable.com/

LightTable is nextgen code editor

Light Table

Still in development

current version is 0.7.2

Contains some uncritical bugs

Features

Light Table

Full REPL

No need to reload server/page to see your changes

Works for:

Servers writen in dynamic languages
CSS
Javascript

Watches

Just add watch

and watch

how your data changes

in real time

Inline Evaluation

IDE is your new console

Just eval your code

and get results just

in the editor

Features

Light Table

REPL doesn't works with HTTPS yet.

You'll got this error in Chrome/new Opera

Mixed Content: The page at 'https://development.instantfeedback.divshot.io/samples/chat/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:29036/socket.io/1/?t=1418266153693'.

Problem #1

Light Table

Just run Chrome/Opera with command line switch

 --allow-running-insecure-content

Light Table

Problem #2

You wrote this

(function () {
  function log(message) {
    console.log(message);
  }
})();

And just want add watch

But you have function defined in another function

Light Table

How editor must know

if he can reavaluate parent function

in order to redefine nested function?

Light Table

Note: watch isn't magic. When you add watch, Light Table just transforms your code:

1 + 2

into something like this:

sendToLtAndReturn('#w1', 1 + 2)

Light Table

After you added watch to nested function, reevaluate parent function by pressing

Ctrl + Enter

or reevaluate all file by pressing

Ctrl + Shift + Enter

Light Table

Showcase #1

Light Table

single-person chat

react.js

Just another library for building UI

https://facebook.github.io/react/

and nothing more
no dependencies on another libraries
easy integration

react.js

simplest solution to deal with dynamic interfaces
no need to use $("what").val() or another jQuery stuff
Underscore templates are ugly (strings mixed with javascript)
Angular, Backbone and another are nice, but very complex

react.js

Why?

you have state/model/data of your page (even if you don't know about it)
DOM is just visualized data
work with real DOM is slow, so we deal with virtual DOM

react.js

How?

updating of your state cause updating of virtual DOM automagickaly
updating of virtual DOM cause updating of real DOM automagickaly
just take popcorn and watch need to buy popcorn

react.js

How?

define your state
define components with JS and some React template language
render component with React

How?

react.js

How to create elements in react?

react.js

React.createElement(
    'h1', 
    { className: 'my-header' }, 
    'Hello, world!'
)

vanilla js

react.js

<h1 className='my-header'>Hello, world!</h1>

JSX

Needs compilation or including online JSXTransformer
Bad support of IDE, linters, requirejs and another stuff

In Javascript code you simply write:

react.js

And not JSX

3-6 ways to write UI without JSX

DOM.div('foo')

DOM.div({ class: 'foozle' }, 'foo')

DOM.div({ 
    data: { 
        state: 'selected' 
    }},
 'foo')

DOM.div({ 
    data: { 
        state: [
            'selected', 
            'opened'
        ]}},
 'foo')

react.js

react.dom

https://github.com/EtienneLem/react-dom

React.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

React.renderComponentToStaticMarkup(
  React.createElement(CommentBox, null),
);

Rendering

react.js

 var ComponentName = React.createClass({
      getInitialState: function() { ... },

      componentDidMount: function() { ... },

      componentWillUnmount: function() { ... },

      ... what about event handlers? add them here ...

      render: function() { ... } // this one is required
 });

Creating component

react.js

Every component has properties

Components

react.js

var Component = React.createClass({
    render: function() {
        return this.props.myattribute;
    }
});

React.createElement(Component, null, {
    myattribute: 'This is the text'
});

Every component has properties

Components

react.js

React.createElement('a', null, {
    click: function () {
    }
});

And you can event dispatch functions using properties

Every component has state

and state can be changed

Components

react.js

var Component = React.createClass({
    getInitialState: function() {
        return { counter: 5 };
    }

    render: function() {
        return this.state.counter;
    }
});

this.setState({counter: 2});

Components

react.js

Changing state

this.setState(this.state);

There are lot of ways

(currently only 11)

to store and manipulate your state better than simple js objects

React.createClass({
  mixins: [PureRenderMixin],
   
  ...
}

Mixins

react.js

Tools

react.js

https://github.com/facebook/react/wiki/Complementary-Tools

Build toos
Starter kits
Routing
Model Management
Data fetching

Tools

react.js

https://github.com/facebook/react/wiki/Complementary-Tools

Animations
UI Components
UI Framework Wrappers (bootstrap, material UI)
Form schema -> rendered forms

That is not full list

bower search react

Tools

react.js

Currently you can't use React + JSX within LightTable.

Consider using Hot module loading for this case

http://gaearon.github.io/react-hot-loader/

Tools

react.js

HTML is fully rendered on client side with javascript.
Blank page at loading
How to google over it?

react.js

Problem

Duplicate your views on backend and frontend

Ugly idea!

react.js

Solution #1

React renders to virtual DOM.

So we can use lightweight javascript engine to render React

PHP: https://github.com/reactjs/react-php-v8js

.NET: http://reactjs.net/

react.js

Solution #2

react.js

Showcase #2

https://development.instantfeedback.divshot.io/samples/react-simple/

Questions?