9ae592ee4d
1. Do some temporary style modifications to help make the code more readable for profiling (with help from ESLint). 2. Profile the code, and optimize accordingly.
81 lines
1.9 KiB
Markdown
81 lines
1.9 KiB
Markdown
**Note: This is a WIP partial rewrite of Mithril.**
|
|
|
|
[](http://js.org)
|
|
[](https://gitter.im/lhorie/mithril.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
|
[](https://travis-ci.org/lhorie/mithril.js)
|
|
|
|
# Mithril
|
|
|
|
A Javascript Framework for Building Brilliant Applications
|
|
|
|
See the [website](http://mithril.js.org) for documentation
|
|
|
|
There's also a [blog](http://lhorie.github.io/mithril-blog) and a [mailing list](https://groups.google.com/forum/#!forum/mithriljs)
|
|
|
|
---
|
|
|
|
## What is Mithril?
|
|
|
|
Mithril is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.
|
|
|
|
### Light-weight
|
|
|
|
- Only 5kb gzipped, no dependencies
|
|
- Small API, small learning curve
|
|
|
|
### Robust
|
|
|
|
- Safe-by-default templates
|
|
- Hierarchical MVC via components
|
|
|
|
### Fast
|
|
|
|
- Virtual DOM diffing and compilable templates
|
|
- Intelligent auto-redrawing system
|
|
|
|
---
|
|
|
|
## Sample code
|
|
|
|
```javascript
|
|
//namespace
|
|
var app = {};
|
|
|
|
//model
|
|
app.PageList = function() {
|
|
return m.request({method: "GET", url: "pages.json"});
|
|
};
|
|
|
|
//controller
|
|
app.controller = function() {
|
|
var pages = app.PageList();
|
|
return {
|
|
pages: pages,
|
|
rotate: function() {
|
|
pages().push(pages().shift());
|
|
}
|
|
}
|
|
};
|
|
|
|
//view
|
|
app.view = function(ctrl) {
|
|
return [
|
|
ctrl.pages().map(function(page) {
|
|
return m("a", {href: page.url}, page.title);
|
|
}),
|
|
m("button", {onclick: ctrl.rotate}, "Rotate links")
|
|
];
|
|
};
|
|
|
|
|
|
//initialize
|
|
m.module(document.getElementById("example"), app);
|
|
```
|
|
|
|
---
|
|
|
|
### Learn more
|
|
|
|
- [Tutorial](http://mithril.js.org/getting-started.html)
|
|
- [Differences from Other Frameworks](http://mithril.js.org/comparison.html)
|
|
- [Benchmarks](http://mithril.js.org/benchmarks.html)
|