Exseed

A highly extensible nodejs framework

Features

• Highly Extensible
• Easy to Use
• Full Stack
• ORM Integrated
• ES6/ES7 Syntax
• Isomorphic

Workflow & Implementation Details

| Item | Choice | |------------|--------| | Build Tool | Webpack | | Automation | Gulp | | Backend | Node, Express(>=4.0.0) | | ORM | Waterline | | Frontend | React, Redux/Alt, React-Router | | Testing | Mocha | | CI | Travis CI |

Compare to Other Frameworks

| | Exseed | Express | Koa | Sails | Hapi | | ------------- | ------ | ------- | ------ | ------ | ------ | | Extensibility | ★★★★★ | ★★★★★ | ★★★★☆ | ★★★★☆ | ★★★★☆ | | Threshold | ★★★☆☆ | ★★☆☆☆ | ★★★☆☆ | ★★★★☆ | ★★☆☆☆ | | Build Speed | ★★★★★ | ★☆☆☆☆ | ★☆☆☆☆ | ★★★★☆ | ★☆☆☆☆ | | Full Stack | ✔ | | | ✔ | | | ORM | ✔ | | | ✔ | | | Modern Syntax | ✔ | | ✔ | | | | Isomorphic | ✔ | | | | |

Usage

1. Install CLI

$ npm install -g exseed-cli

2. Clone the boilerplate project

3. Install dependencies

$ cd exseed-boilerplate
$ npm install

4. Run it

$ sd build --watch
$ sd init
$ sd serve

Example - Todo List

1. File Structure

- <project root>
----- settings.js
----- exseed.core/
----- todoapp/
--------- settings.js
--------- models.js
--------- routes.js
--------- flux/
------------- boot.js
------------- routes.js
------------- views/pages/MainPage.js
----- <other_app_1>/
----- <other_app_2>/
----- <other_app_n>/

2. Update installed apps

Tell exseed what apps you want to use

// settings.js

export default {
  installedApps: [
    './exseed.core',
    // other apps
    './todoapp',
  ],
  // other settings
};

3. The server side

// todoapp/settings.js

export default {
  name: 'todo',
};

// todoapp/models.js

export const todolist = {
  identity: 'todolist',
  attributes: {
    content: {
      type: 'string',
      required: true,
    },
  },
};

// todoapp/routes.js

import { models } from 'exseed';

export default function routes({ app }) {
  app.get('/api/todolist', (req, res) => {
    models.todolist
      .find()
      .then((todolist) => {
        res.json(todolist);
      });
  });

  app.post('/api/todolist', (req, res) => {
    models.todolist
      .create(req.body.todo)
      .then((todo) => {
        res.json(todo);
      });
  });
}

4. The client side

All react related files are inside todoapp/flux folder

// todoapp/flux/boot.js

import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';

render(
  <Router history={browserHistory}>
    {routes}
  </Router>
, document.getElementById('exseed_root'));

// todoapp/flux/routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import settings from '../settings';
import MainPage from './views/pages/MainPage';

export default (
  <Route path="/todo" component={MainPage} EXSEED_APP_NAME={settings.name} />
);

// todoapp/flux/views/pages/MainPage.js

import React from 'react';
import BaseLayout
from '../../../../exseed.core/flux/views/layouts/BaseLayout';

export default class MainPage extends React.Component {
  ...

  render() {
    const scripts = [
      'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js',
      '/todo/js/bundle.js',
    ];

    return (
      <BaseLayout
        title="Exseed - Todo"
        scripts={scripts}>
        <h1>Todo</h1>
        <input
          type="text"
          onKeyDown={this.handleKeyDown.bind(this)}
          onChange={this.handleChange.bind(this)}
          value={this.state.content} />
        <ul>
          {this.state.todos.map(todo => (
            <li key={todo.id}>
              {todo.content}
            </li>
          ))}
        </ul>
      </BaseLayout>
    );
  }
};

See the complete todo app

Docs

• API Docs
• Developer Guide