YUIConf2013: Introducing The "Modown" Project

http://www.ﬂickr.com/photos/diverkeith/379540273/

web applications becoming
single-page applications

modown components

mojito-next
(yui, search)

hermes
(ﬂickr)

assembler
(touchdown)

Rendr
AngularJS

Backbone

EmberJS

Meteor
DerbyJS

YAF

React

Mojito

users can switch between
different states in no time

... and doing so without breaking
any of the core features of the web
(history, url, openness, seo)

building blocks rather
than prescriptions

building blocks for
SPA written in nodejs

rendering initial state on the server,
then let the browser takes over

modown components
expressview expressyui
expressannotation

expressmap

express expresscombo

expressstate

expressslash

locatoryui

locatormicro

Locator
locatordust

https://npmjs.org/search?q=modown

locatorlang

locatorhandlebars

2 major customers in production
(ﬂickr and media)

all major changes in YAF
are already in place

https://github.com/yui/yui3/blob/master/src/app/HISTORY.md

no docs, only component level
docs and examples in github

express-yui
for yui core modules

var express = require('express'),
app

= express();

app.get('/', function (req, res, next) {
// `res.locals` holds all data
// available on the template
});
app.listen(3000);

expyui = require('express-yui'),
app
= express();

expyui.extend(app);

// `res.locals` holds all data
// available on the template
});
app.listen(3000);

app
= express();

expyui.extend(app);

app.use(expyui.expose());

// `res.locals.state.toString()` will be
// available on the template as a javascript blob
});
app.listen(3000);

app
= express();

expyui.extend(app);
app.yui.setCoreFromAppOrigin();


});
app.listen(3000);

app
= express();

expyui.extend(app);
app.yui.setCoreFromAppOrigin();


app.yui.applyConfig({ fetchCSS: false });

});
app.listen(3000);

<!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>

<!DOCTYPE html>
<html lang="en">
<head>
<title>usage of `express-yui`</title>
<script>
app.yui.ready(function (err) {
// `YUI().use()` and `app.yui.use()` are available
});
</script>
</head>
<body>
</body>
</html>

express-yui
for custom yui modules

app
= express();

expyui.extend(app);

app.get('/item/:id', function (req, res, next) {

});

app.listen(3000);

app
= express();

expyui.extend(app);


});
app.listen(3000);
});

app
= express();

expyui.extend(app);

app.yui.use('model-foo', function (Y) {
var model = new Y.ModelFoo();

});
});
app.listen(3000);
});

app
= express();

expyui.extend(app);

model.load(req.params.id, function (err) {
res.render('view-name', model.toJSON());
});
});
});
app.listen(3000);
});

app
= express();

expyui.extend(app);

model.load(req.params.id, function (err) {
res.expose(model,'fooData'); //window.app.fooData
res.render('view-name', model.toJSON());
});
});
});
app.listen(3000);
});

<!DOCTYPE html>
<html lang="en">
<head>
<title>usage of `express-yui` and `locator-yui`</title>
<script>
});
});
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>usage of `express-yui` and `locator-yui`</title>
<script>
var model = new Y.ModelFoo(app.fooData);
});
});
</script>
</head>
<body>
</body>
</html>

ﬁlesystem abstraction
with locator

locator gives semantic meaning
to ﬁles on the ﬁlesystem

ﬁlesystem analysis to understand
the capabilities of the app

YUIConf2013: Introducing The "Modown" Project

More Related Content

Similar to YUIConf2013: Introducing The "Modown" Project

More from Caridy Patino

Recently uploaded

YUIConf2013: Introducing The "Modown" Project