The Mojito team have been working very hard on a new project under the YUI umbrella with codename "Modown", and we want to tell you more about it. Building on the success of the YUI Application Framework (YAF), plus the things we learned while creating Mojito, we decided to go back to our roots by creating a set of modular and versatile building blocks rather than trying to prescribe how to write single-page applications. In this presentation, we are going to cover the motivations, the current state of the project, how you can start using it, and how to help!
32. var express = require('express'),
app
= express();
app.get('/', function (req, res, next) {
// `res.locals` holds all data
// available on the template
});
app.listen(3000);
33. var express = require('express'),
expyui = require('express-yui'),
app
= express();
expyui.extend(app);
app.get('/', function (req, res, next) {
// `res.locals` holds all data
// available on the template
});
app.listen(3000);
34. var express = require('express'),
expyui = require('express-yui'),
app
= express();
expyui.extend(app);
app.use(expyui.expose());
app.get('/', function (req, res, next) {
// `res.locals.state.toString()` will be
// available on the template as a javascript blob
});
app.listen(3000);
35. var express = require('express'),
expyui = require('express-yui'),
app
= express();
expyui.extend(app);
app.yui.setCoreFromAppOrigin();
app.use(expyui.expose());
app.get('/', function (req, res, next) {
// `res.locals.state.toString()` will be
// available on the template as a javascript blob
});
app.listen(3000);
36. var express = require('express'),
expyui = require('express-yui'),
app
= express();
expyui.extend(app);
app.yui.setCoreFromAppOrigin();
app.use(expyui.expose());
app.yui.applyConfig({ fetchCSS: false });
app.get('/', function (req, res, next) {
// `res.locals.state.toString()` will be
// available on the template as a javascript blob
});
app.listen(3000);
37. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usage of `express-yui`</title>
<script>{{{state}}}</script>
// if using handlebars, or
<script><%== state %></script> // if using micro, or
<script>{state|s}</script>
// if using dust
</head>
<body>
<p>non-blocking way to inject yui seed files</p>
</body>
</html>
38. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usage of `express-yui`</title>
<script>{{{state}}}</script>
<script>
app.yui.ready(function (err) {
// `YUI().use()` and `app.yui.use()` are available
});
</script>
</head>
<body>
<p>non-blocking way to inject yui seed files</p>
</body>
</html>