README
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
- Install CLI
$ npm install -g exseed-cli
Clone the boilerplate project
Install dependencies
$ cd exseed-boilerplate
$ npm install
- Run it
$ sd build --watch
$ sd init
$ sd serve
Example - Todo List
- 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>/
- Update installed apps
Tell exseed what apps you want to use
// settings.js
export default {
installedApps: [
'./exseed.core',
// other apps
'./todoapp',
],
// other settings
};
- 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);
});
});
}
- 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