112 lines
No EOL
6.1 KiB
HTML
112 lines
No EOL
6.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Mithril</title>
|
|
<link href="lib/prism/prism.css" rel="stylesheet" />
|
|
<link href="style.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="container">
|
|
<a href="index.html" class="logo"><span>○</span> Mithril</a>
|
|
<a href="getting-started.html">Guide</a>
|
|
<a href="mithril.html">API</a>
|
|
<a href="community.html">Community</a>
|
|
<a href="mithril.min.zip">Download</a>
|
|
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="content">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col(3,3,12)">
|
|
<h2 id="core-topics">Core Topics</h2>
|
|
<ul>
|
|
<li><a href="installation.html">Installation</a></li>
|
|
<li><a href="getting-started.html">Getting Started</a></li>
|
|
<li><a href="routing.html">Routing</a></li>
|
|
<li><a href="web-services.html">Web Services</a></li>
|
|
<li><a href="components.html">Components</a></li>
|
|
</ul>
|
|
<h2 id="advanced-topics.html">Advanced Topics</h2>
|
|
<ul>
|
|
<li><a href="compiling-templates.html">Compiling Templates</a></li>
|
|
<li><a href="auto-redrawing.html">The Auto-Redrawing System</a></li>
|
|
<li><a href="integration.html">Integrating with Other Libraries</a></li>
|
|
</ul>
|
|
<h2 id="misc">Misc</h2>
|
|
<ul>
|
|
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
|
<li><a href="benchmarks.html">Benchmarks</a></li>
|
|
<li><a href="practices.html">Good Practices</a></li>
|
|
<li><a href="tools.html">Useful Tools</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col(9,9,12)">
|
|
<h2 id="compiling-templates">Compiling Templates</h2>
|
|
<p>You can optionally pre-compile templates that use <code>m()</code> by running the <a href="tools/template-compiler.sjs"><code>template-compiler.sjs</code></a> macro with <a href="https://github.com/mozilla/sweet.js">Sweet.js</a>. This step isn't required in order to use Mithril, but it's an easy way to squeeze a little bit more performance out of an application, without the need for code changes.</p>
|
|
<p>Compiling a template transforms the nested function calls of a template into a raw virtual DOM tree (which is merely a collection of native Javascript objects that is ready to be rendered via <a href="mithril.render.html"><code>m.render</code></a>). This means that compiled templates don't need to parse the string in <code>m("div#foo")</code> and they don't incur the cost of the function call.</p>
|
|
<p>It's worth mentioning that Mithril has built-in mechanisms elsewhere that take care of real bottlenecks like browser repaint management and DOM updating. This optional compilation tool is merely "icing on the cake" that speeds up the javascript run-time of templates (which is already fast even without compilation - see performance test in the homepage).</p>
|
|
<p>The macro takes regular Mithril templates like the one below:</p>
|
|
<pre><code class="lang-javascript">var view = function() {
|
|
return m("a", {href: "http://google.com"}, "test");
|
|
}</code></pre>
|
|
<p>It pre-processes the <code>m()</code> call and replaces it with its output:</p>
|
|
<pre><code class="lang-javascript">var view = function() {
|
|
return {tag: "a", attrs: {href: "http://google.com"}, children: "test"};
|
|
}</code></pre>
|
|
<p>Note that compiled templates are meant to be generated by an automated build process and are not meant to be human editable.</p>
|
|
<hr>
|
|
<h3 id="installing-nodejs-and-sweetjs-for-one-off-compilations">Installing NodeJS and SweetJS for one-off compilations</h3>
|
|
<p>SweetJS requires a <a href="http://nodejs.org">NodeJS</a> environment. To install it, go to its website and use the installer provided.</p>
|
|
<p>To install SweetJS, NodeJS provides a command-line package manager tool. In a command line, type:</p>
|
|
<pre><code>npm install -g sweet.js</code></pre>
|
|
<p>To compile a file, type:</p>
|
|
<pre><code>sjs --module /mithril.compile.sjs --output <output-filename>.js <input-filename>.js</code></pre>
|
|
<hr>
|
|
<h3 id="automating-compilation">Automating Compilation</h3>
|
|
<p>If you want to automate compilation, you can use <a href="http://gruntjs.com">GruntJS</a>, a task automation tool. If you're not familiar with GruntJS, you can find a tutorial on their website.</p>
|
|
<p>Assuming NodeJS is already installed, run the following command to install GruntJS:</p>
|
|
<pre><code>npm install -g grunt-cli</code></pre>
|
|
<p>Once installed, create two files in the root of your project, <code>package.json</code> and <code>Gruntfile.js</code></p>
|
|
<p><code>package.json</code></p>
|
|
<pre><code class="lang-javascript">{
|
|
"name": "project-name-goes-here",
|
|
"version": "0.0.0", //must follow this format
|
|
"devDependencies": {
|
|
"grunt-sweet.js": "*"
|
|
}
|
|
}</code></pre>
|
|
<p><code>Gruntfile.js</code></p>
|
|
<pre><code class="lang-javascript">module.exports = function(grunt) {
|
|
grunt.initConfig({
|
|
sweetjs: {
|
|
modules: ["mithril.compile.sjs"],
|
|
compile: {expand: true, cwd: ".", src: "**/*.js", dest: "destination-folder-goes-here/"}
|
|
}
|
|
});
|
|
|
|
grunt.loadNpmTasks('grunt-sweet.js');
|
|
|
|
grunt.registerTask('default', ['sweetjs']);
|
|
}</code></pre>
|
|
<p>Make sure to replace the <code>project-name-goes-here</code> and <code>destination-folder-goes-here</code> placeholders with appropriate values.</p>
|
|
<p>To run the automation task, run the following command from the root folder of your project:</p>
|
|
<pre><code>grunt</code></pre>
|
|
<p>More documentation on the grunt-sweet.js task and its options <a href="https://github.com/natefaubion/grunt-sweet.js">can be found here</a></p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer>
|
|
<div class="container">
|
|
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
|
<br />© 2014 Leo Horie
|
|
</div>
|
|
</footer>
|
|
<script src="lib/prism/prism.js"></script>
|
|
</body>
|
|
</html> |