muon

μ

“the muon is not believed to have any sub-structure” (Wikipedia)

Description

Muon uses Node, Express, Backbone, and React to allow data-driven applications in the browser to read data from and save data to a static file on the server while keeping track of changes between saves with local storage.

When the app initializes, it first checks for data in local storage in case there was a refresh or there were unsaved changes from a previous session. If there is no local storage data, it will get data from a static file on the server. If there is no static file on the server, it will use default data and create a file on the server as soon as the first set of data changes is saved.

That’s right. Persistent, intelligent, dynamic data storage without a database.

Usage

Run this in Terminal:

npm install && node app.js

Open localhost:1936 in your browser.
Press buttons.
Make smart things without a database.

Support

@matthewcyan

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>μ</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.js"></script>
        <script>
            $.get('muon.scss').done(function (sass) {
                var css = Sass.compile(sass);
                $('<style>').html(css).appendTo('head');
            });
        </script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react-with-addons.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/jsxtransformer.js"></script>
        <script type="text/jsx">
            /** @jsx React.DOM */

window.Dispatcher = _.extend({}, Backbone.Events);

var muon = JSON.parse(localStorage.getItem('muon')),
                Model = Backbone.Model.extend({
                    defaults: {
                        bool: false,
                        theme: 'light'
                    },
                    url: '/muon'
                }),
                model;

if (muon) {
                model = new Model(muon);
            } else {
                model = new Model;
                model.fetch({
                    error: function () {
                        console.log('Fetch error.', arguments);
                    }
                });
            }

var App = React.createClass({

getInitialState: function () {
                    return _.extend({}, this.props.model.toJSON());
                },

componentDidMount: function () {
                    var component = this;
                    component.props.model.on('change', function (model) {
                        var json = model.toJSON();
                        component.setState(json);
                        localStorage.setItem('muon', JSON.stringify(json));
                    });
                },

render: function () {

console.log('App:render', this.state);

var classes = React.addons.classSet({
                        muon: true
                    });

classes += ' '+ this.state.theme;
                    
                    return (
<div className={classes}>
    <button onClick={this.bool}>Toogle boolean: {this.state.bool.toString()}</button>
    <button onClick={this.save}>Save changes</button>
    <button onClick={this.reload}>Reload data</button>
    <button onClick={this.theme}>Toggle theme</button>
</div>
                    );
                },

bool: function () {
                    this.props.model.set({bool: !this.props.model.get('bool')});
                },

save: function () {
                    this.props.model.save(null, {
                        success: function () {
                            console.log('Saved to static data file.', arguments);
                        }
                    });
                },

reload: function () {
                    this.props.model.fetch();
                },

theme: function () {
                    if (this.state.theme === 'light') {
                        this.props.model.set({theme: 'dark'});
                    } else {
                        this.props.model.set({theme: 'light'});
                    }
                }
            });

React.renderComponent(<App model={model} />, document.body);
        </script>
    </head>
    <body>
    </body>
</html>

Updated missing url //cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js to //cdnjs.cloudflare.com/ajax/libs/react/0.11.2/jsxtransformer.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js

https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react-with-addons.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js