dejaVu

dejavu

## The idea
The idea was to have a frontend for a streaming data of json documents and a way to notify of any updates/deletes. So technically we want the browser to do just one thing - update the frontend as new document comes in or if something changes and we wanted it to be good at just that.

## React ? Seriously ?
We chose react to build this since it deals well with one thing in particular - How to update the DOM from state A to state B in the most optimal way(less read/writes). You can control the DOM without exactly telling how to reach there, but just by telling what it should look like in an object-oriented fashion. Plus its a perfect library for frontend. Other options like angular and JQuery fall into the category of frameworks which let you manipulate the DOM "easily". This is sometimes bad since we just want the template to render the data in a particular fashion once we let it know what the data is. Refer to "Why so much code?" section for more detail.

## Ohh but ..
Note : that I am not talking about templating engines here, even they expect you to specify "How" to manipulate the data. We don't even want to specify the how part, just take my data and STFU(Show Tweak Focus Update).

Note Note : Don't take my acronyms seriously !

## It looks like..... well nevermind !
We gave it very minimal styling and functionality so that you can tweak/modify this to your needs. Don't worry we won't sue you, its MIT licenced. A sneak peak into what it looks like and what it does:

## Why so much code ?
Two main reasons :

 1. We had to build the whole table functionality ourselves
 The problem with most data tables out there is the amount of flexibility you get with respect to CSS transitions. For example take the case of http://griddlegriddle.github.io/Griddle/index.html.
 We felt it was a great tool but we couldn't show CSS transitions on new elements, because we don't have access to a particular cell in html, so that we can change the color. Secondly we couldn't properly customise the layout of the elements("settings" for example). They simply break down when there are too many columns.
 
 2. Because its react ..
You have to create a component for every small thing, like for dropdownn, checkboxes etc. For example see this piece of code that does just this
<PICTURE>
```
var Expire = React.createClass({
  getDefaultProps: function(){
    return {delay: 1000};
  },
  getInitialState: function(){
    return {visible: true};
  },
  componentWillReceiveProps: function(nextProps){
    // reset the timer if children are changed
    if (nextProps.children !== this.props.children) {
      this.setTimer();
      this.setState({visible: true});
    }
  },
  handleClick: function(){
    this.setTimer();
    var apply = document.getElementById('for-copy');
    execCommandOnElement(apply, "copy");

  },
  setTimer: function(){
    // clear any existing timer
    this._timer != null ? clearTimeout(this._timer) : null;

    // hide for `delay` milliseconds
    this.setState({visible: false});
    this._timer = setTimeout(function(){
      this.setState({visible: true});
      this._timer = null;
    }.bind(this), this.props.delay);
  },
  render: function(){
    return this.state.visible 
           ? <div>
                <a>
                    <i 
                    onClick={this.handleClick}
                    className='fa copy-board text-center fa-clipboard' 
                    id='normal-clipboard-before'/>
                </a>
             </div>
           : <i 
              className='fa fa-check' 
              id='normal-clipboard-after'/>;
  }
});
```
 
 3. It's on the frontend
 
##Implementation
I will cover only the very important ones especially explaining why React is the new black in the front-end ecosystem.
### Basic Structure
The way this app is structured is :
<PICTURE>
So the data flows from the main parent component `HomePage` to its children components and so on. So who gives it the data ?
<PICTURE>
The feed.js has get functions that fetch data using an `elasticsearch` client from an endpoint of streaming data and is used by `HomePage` Component.
```
feed.getData(typeName, function(update){
  var update = this.flatten(update, this.injectLink),
      key = rowKeyGen(update);
```
Then it's passed to the table. This is the render method of `Table`
```
    render: function() {
        if(this.props.renderRows.length <= 1){
            return(
                    <div id='table-container' className="waiting">
                        <i className="fa fa-spinner fa-pulse fa-5x centered"></i>
                    </div>
                )
        }
        return (
            <div id='table-container' className="table-container">
                <table id="data-table"
                className="table table-striped table-bordered">
                    <thead id='columns'>
                        <tr>
                            {this.props.renderColumns}
                        </tr>
                    </thead>
                    <tbody className='exp-scrollable'>
                            {this.props.renderRows}
                    </tbody>
                </table>
            </div>
        );
    }
```
If you observe carefully you can see `this.props.<something>`. This is basically the React's way of passing arguments to components (Remember components are just like objects). Every time you call the `Table` object i.e. every time change in data takes place, you don't have to tweak the html, React will take care of it automatically and update your DOM in the most efficient way.
The working of the rest of the code is documented in-line on [my github repo](https://github.com/kaushik94/dejaVu).

##If you have read this far ...
why not as well just use it and let us know what you think? Its as easy as 

`bower install dejavu-databrowser`

open the `config.json` file and update your credentials.
Completely on the frontend and depends only on 
`elasticsearch` and `react-bootstrap`.
You can also check out the version we use at appbase to know how to configure this to your needs.