inferno-starter
The goal of this project is to provide a starting base for an mobx inferno project with isomorphism.
Features:
async/await
support
Isomorphic for SEO goodness
CSS and SCSS compilation
MongoDB user register/login/logout
Token based authentication
Decorators for accessing actions and state
Hot reload
Bundle size as small as possible
Offline support through service workers
For development:
npm run dev
For production:
npm run prod
Node 6+ (or Node 4 with additional babel plugins) MongoDB server
Optimized for minimal bundle size.
Optimized for server-side speed. (See the benchmark, it's fast !)
Using Inferno, the fastest React-like framework out there.
Using MobX, the easiest and insanely fast state manager.
Simple and minimal with routing, authentication, database and server-side rendering.
Good developer experience with hot-reloading and source-maps.
Get to 100% score on Google Lighthouse
gb -G=4 -k=true -c 200 -n 10000 http://localhost:2000/about Document Path: /about Document Length: 1436 bytes Concurrency Level: 200 Time taken for tests: 3.06 seconds Complete requests: 10000 Failed requests: 0 HTML transferred: 14360000 bytes Requests per second: 3262.76 [#/sec] (mean)Time per request: 61.298 [ms] (mean) Time per request: 0.306 [ms] (mean, across all concurrent requests) HTML Transfer rate: 4575.37 [Kbytes/sec] received Connection Times (ms) min mean[+/-sd] median max Total: 1 0 12.07 59 246
Tested on i7-6700K @ 4.00GHz 16GB RAM. Single node.js instance.
stores
?State contains the state of your application (ex: list of your todos, UI state etc). Stores contain the methods that mutate that state (ex: adding a todo, fetching data). Technically our State object is also a store, but we make the differentiation so that our logic is easier to follow by using the same principes as redux (one big state object).
state
and stores
in our components ?@connect(['state', 'store'])class MyComponent extends Component { componentDidMount() { const { state, store } = this.props store.account.doSomething(); } render({ state, store }) { return <div>{state.account.username}</div> } }
connect
?The @connect
decorator injects stores into your components.
Additionally, it keeps your components up to date with any changes in your stores.
Example: If you display a messageCount
from a Messages
store and it gets updated,
then all the visible components that display that messageCount
will update themselves.
No, it actually allows the rendering to be done more efficiently. So connect as many as you want !
Goto src/server/models
Add [Name].js
with your model in it
Goto src/config/stores
Add [Name].js
(it's just a class, ex: Account.js
)
Update src/config/stores.js
Goto server/config.js
Change SSR: false
to SSR: true
Make sure you added the @connect
decorator to your component.
You cannot use decorators on stateless components. You should instead wrap your component like this:
// Simple observable component without injectionconst MyComponent = connect(props => { return <p>Something is cool</p>})// or with injection into propsconst MyComponent = connect(['state', 'store'])(props => { return <p>We have stores and state in our props: {props.state.something}</p>})
Add a static onEnter
method to your component like this:
class MyComponent extends Component { static onEnter({ myStore, params }) { return myStore.browse() } // ...}
The onEnter
method is smart, it will be executed either on the server or on the browser depending on how you access the website.
It also passes all your stores and url params as arguments as a convenience.
Ryan Megidov
https://github.com/nightwolfz/inferno-starter
上一篇:inferno
下一篇:inferno-website
还没有评论,说两句吧!
热门资源
Keras-ResNeXt
Keras ResNeXt Implementation of ResNeXt models...
seetafaceJNI
项目介绍 基于中科院seetaface2进行封装的JAVA...
spark-corenlp
This package wraps Stanford CoreNLP annotators ...
capsnet-with-caps...
CapsNet with capsule-wise convolution Project ...
inferno-boilerplate
This is a very basic boilerplate example for pe...
智能在线
400-630-6780
聆听.建议反馈
E-mail: support@tusaishared.com