update README
This commit is contained in:
Leo Horie
parent
91a492b2e8
commit
0ac6ef44b8
3 changed files with 42 additions and 87 deletions
24
README.md
24
README.md
|
|
@ -1,6 +1,8 @@
|
|||
# Mithril.js - A framework for building brilliant applications
|
||||
|
||||
Note: This branch is a sneak peek for the upcoming version 1.0. It's a rewrite from the ground up and it's not backwards compatible with [Mithril 0.2.x](http://mithril.js.org)
|
||||
[Documentation](docs) | [Migration Guide](docs/v1.x-migration.md)
|
||||
|
||||
Note: This branch is a sneak peek for the upcoming version 1.0. It's a rewrite from the ground up and it's not backwards compatible with [Mithril 0.2.x](http://mithril.js.org). You can find preliminary [documentation here](docs) and [migration guide here](docs/v1.x-migration.md)
|
||||
|
||||
This rewrite aims to fix longstanding API design issues, significantly improve performance, and clean up the codebase.
|
||||
|
||||
|
|
@ -16,25 +18,15 @@ Examples run out of the box. Just open the HTML files.
|
|||
|
||||
## Status
|
||||
|
||||
Code still is in flux. Most notably, there's no promise polyfill yet and there are several use cases that still need to be polished. DO NOT USE IN PRODUCTION YET!
|
||||
The code is fairly stable and I'm using it in production, but there may be bugs still lurking.
|
||||
|
||||
Some examples of usage can be found in the [examples](examples) folder. [ThreadItJS](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/threaditjs/index.html) has the largest API surface coverage and comments indicating pending issues in framework usability. Note that the APIs those examples use may not become the final public API points in v1.0.
|
||||
Some examples of usage can be found in the [examples](examples) folder. [ThreadItJS](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/threaditjs-bundle/index.html) has the largest API surface coverage.
|
||||
|
||||
Partial documentation can be found in the `/docs` directory
|
||||
Partial documentation can be found in the [`/docs`](docs) directory
|
||||
|
||||
## Performance
|
||||
|
||||
Mithril's virtual DOM engine is less than 500 lines of well organized code and it implements a modern search space reduction diff algorithm and a DOM recycling mechanism, which translate to top-of-class performance. See the [dbmon implementation (non-optimized)](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril/index.html) (for comparison, here are optimized dbmon implementations for [React v15.0.2](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/react/index.html), [Angular v2.0.0-beta.17](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/angular/index.html) and [Mithril 0.2.x](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril-0.2.x/index.html)).
|
||||
|
||||
## Lifecycle methods and Animation Support
|
||||
|
||||
Mithril's `config` method is now replaced by several lifecycle methods to improve separation of concerns and allow better control over animations.
|
||||
|
||||
- **`oninit(vnode)`** Runs once before vnode diff and creation
|
||||
- **`oncreate(vnode)`** Runs once after the DOM element is created. It's guaranteed to run after all DOM changes in the render cycle
|
||||
- **`onupdate(vnode)`** Runs after vnode is diffed by a re-render. It's guaranteed to run after all DOM changes in the render cycle
|
||||
- **`onbeforeremove(vnode, done)`** Runs before DOM removal and waits for `done` to be called before actually removing the DOM element. Affects when `onremove` is called
|
||||
- **`onremove(vnode)`** Runs after DOM removal.
|
||||
Mithril's virtual DOM engine is around 500 lines of well organized code and it implements a modern search space reduction diff algorithm and a DOM recycling mechanism, which translate to top-of-class performance. See the [dbmon implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril/index.html) (for comparison, here are dbmon implementations for [React v15.0.2](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/react/index.html), and [Angular v2.0.0-beta.17](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/angular/index.html). All implementations are naive (i.e. apples-to-apples, no optimizations)
|
||||
|
||||
## Robustness
|
||||
|
||||
|
|
@ -42,6 +34,6 @@ There are over 3000 assertions in the test suite, and tests cover even difficult
|
|||
|
||||
## Modularity
|
||||
|
||||
Despite the huge performance improvements, the new codebase is smaller than v0.2.x, currently clocking at 7kb min+gzip
|
||||
Despite the huge improvements in performance and modularity, the new codebase is smaller than v0.2.x, currently clocking at 7.2kb min+gzip
|
||||
|
||||
In addition, Mithril is now completely modular: you can import only the modules that you need and easily integrate 3rd party modules if you wish to use a different library for routing, ajax, and even rendering
|
||||
|
|
|
|||
2
examples/dbmonster/angular/app.js
vendored
2
examples/dbmonster/angular/app.js
vendored
|
|
@ -33,7 +33,7 @@ var AppComponent = ng.core.Component({selector: "my-app"})
|
|||
},
|
||||
update: function() {
|
||||
var self = this
|
||||
self.databases = ENV.generateData(true).toArray()
|
||||
self.databases = ENV.generateData().toArray()
|
||||
setTimeout(function() {self.update()}, ENV.timeout)
|
||||
|
||||
if (renderStage === 0) {
|
||||
|
|
|
|||
|
|
@ -6,83 +6,46 @@ perfMonitor.startFPSMonitor()
|
|||
perfMonitor.startMemMonitor()
|
||||
perfMonitor.initProfiler("render")
|
||||
|
||||
var Query = React.createClass({
|
||||
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
|
||||
if (nextProps.elapsedClassName !== this.props.elapsedClassName) return true
|
||||
if (nextProps.formatElapsed !== this.props.formatElapsed) return true
|
||||
if (nextProps.query !== this.props.query) return true
|
||||
return false
|
||||
},
|
||||
render: function render() {
|
||||
return h("td", {className: "Query " + this.props.elapsedClassName},
|
||||
this.props.formatElapsed,
|
||||
h("div", {className: "popover left"},
|
||||
h("div", {className: "popover-content"}, this.props.query),
|
||||
h("div", {className: "arrow"})
|
||||
)
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
var Database = React.createClass({
|
||||
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
|
||||
if (nextProps.lastMutationId === this.props.lastMutationId) return false
|
||||
return true
|
||||
},
|
||||
render: function render() {
|
||||
var lastSample = this.props.lastSample
|
||||
return h("tr", {key: this.props.dbname},
|
||||
h("td", {className: "dbname"}, this.props.dbname),
|
||||
h("td", {className: "query-count"},
|
||||
h("span", {className: this.props.lastSample.countClassName}, this.props.lastSample.nbQueries)
|
||||
),
|
||||
this.props.lastSample.topFiveQueries.map(function (query, index) {
|
||||
return h(Query, {
|
||||
key: index,
|
||||
query: query.query,
|
||||
elapsed: query.elapsed,
|
||||
formatElapsed: query.formatElapsed,
|
||||
elapsedClassName: query.elapsedClassName
|
||||
})
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
var data = []
|
||||
|
||||
var DBMon = React.createClass({
|
||||
getInitialState: function getInitialState() {
|
||||
return {databases: []}
|
||||
},
|
||||
|
||||
loadSamples: function loadSamples() {
|
||||
var data = ENV.generateData(true).toArray()
|
||||
|
||||
perfMonitor.startProfile("render")
|
||||
this.setState({databases: data})
|
||||
perfMonitor.endProfile("render")
|
||||
|
||||
setTimeout(this.loadSamples, ENV.timeout)
|
||||
},
|
||||
|
||||
componentDidMount: function componentDidMount() {
|
||||
this.loadSamples()
|
||||
},
|
||||
|
||||
render: function render() {
|
||||
render: function() {
|
||||
return h("div", null,
|
||||
h("table", {className: "table table-striped latest-data"},
|
||||
h("tbody", null, this.state.databases.map(function (database) {
|
||||
return h(Database, {
|
||||
key: database.dbname,
|
||||
lastMutationId: database.lastMutationId,
|
||||
dbname: database.dbname,
|
||||
samples: database.samples,
|
||||
lastSample: database.lastSample
|
||||
h("tbody", null,
|
||||
data.map(function(db) {
|
||||
return h("tr", {key: db.dbname},
|
||||
h("td", {className: "dbname"}, db.dbname),
|
||||
h("td", {className: "query-count"},
|
||||
h("span", {className: db.lastSample.countClassName}, db.lastSample.nbQueries)
|
||||
),
|
||||
db.lastSample.topFiveQueries.map(function(query, i) {
|
||||
return h("td", {key: i, className: query.elapsedClassName},
|
||||
query.formatElapsed,
|
||||
h("div", {className: "popover left"},
|
||||
h("div", {className: "popover-content"}, query.query),
|
||||
h("div", {className: "arrow"})
|
||||
)
|
||||
)
|
||||
})
|
||||
)
|
||||
})
|
||||
}))
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
ReactDOM.render(h(DBMon, null), document.getElementById("app"))
|
||||
var root = document.getElementById("app")
|
||||
function update() {
|
||||
data = ENV.generateData().toArray()
|
||||
|
||||
perfMonitor.startProfile("render")
|
||||
ReactDOM.render(h(DBMon, null), root)
|
||||
|
||||
perfMonitor.endProfile("render")
|
||||
|
||||
setTimeout(update, ENV.timeout)
|
||||
}
|
||||
|
||||
update()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue