Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#yuiconf
#modown
@caridy
http://www.flickr.com/photos/diverkeith/379540273/
the web platform
“modown”
motivations
web applications becoming
single-page applications
YAF success
mojito constraints
modown components

mojito-next
(yui, search)

hermes
(flickr)

assembler
(touchdown)
Rendr
AngularJS

Backbone

EmberJS

Meteor
DerbyJS

YAF

React

Mojito
single-page applications
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)
back to our roots
building blocks rather
than prescriptions
libraries over frameworks
development on the open
goals
building blocks for
SPA written in nodejs
extending express
rendering initial state on the server,
then let the browser takes over
today
13 modules in NPM
modown components
expressview expressyui
expressannotation

expressmap

express expresscombo

expressstate

expressslash

...
2 major customers in production
(flickr 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
examples
express-yui
for yui core modules
var express = require('express'),
app

= express();

 

app.get('/', function (req, res, next) {
// `res.locals` holds all...
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);

app.get('/', fu...
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);

app.use(expyui....
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);
app.yui.setCoreF...
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);
app.yui.setCoreF...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usage of `express-yui`</title>
<script>{{{state}}}...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usage of `express-yui`</title>
<script>{{{state}}}...
express-yui
for custom yui modules
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);
app.use(expyui.e...
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);
app.use(expyui.e...
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);
app.use(expyui.e...
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);
app.use(expyui.e...
var express = require('express'),
expyui = require('express-yui'),
app
= express();
 
expyui.extend(app);
app.use(expyui.e...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usage of `express-yui` and `locator-yui`</title>
<...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usage of `express-yui` and `locator-yui`</title>
<...
filesystem abstraction
with locator
locator gives semantic meaning
to files on the filesystem
filesystem analysis to understand
the capabilities of the app
on the making...
Intl
composition
ES6 modules
UI data bindings
modownization of YUI
some final notes
modown is not a framework
modown is not a product
modown is just a principle
Thanks
@caridy
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
Upcoming SlideShare
Loading in …5
×

YUIConf2013: Introducing The "Modown" Project

2,788 views

Published on

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!

Published in: Technology, Sports
  • Be the first to comment

YUIConf2013: Introducing The "Modown" Project

  1. 1. #yuiconf #modown @caridy
  2. 2. http://www.flickr.com/photos/diverkeith/379540273/
  3. 3. the web platform
  4. 4. “modown”
  5. 5. motivations
  6. 6. web applications becoming single-page applications
  7. 7. YAF success
  8. 8. mojito constraints
  9. 9. modown components mojito-next (yui, search) hermes (flickr) assembler (touchdown)
  10. 10. Rendr AngularJS Backbone EmberJS Meteor DerbyJS YAF React Mojito
  11. 11. single-page applications
  12. 12. users can switch between different states in no time
  13. 13. ... and doing so without breaking any of the core features of the web (history, url, openness, seo)
  14. 14. back to our roots
  15. 15. building blocks rather than prescriptions
  16. 16. libraries over frameworks
  17. 17. development on the open
  18. 18. goals
  19. 19. building blocks for SPA written in nodejs
  20. 20. extending express
  21. 21. rendering initial state on the server, then let the browser takes over
  22. 22. today
  23. 23. 13 modules in NPM
  24. 24. modown components expressview expressyui expressannotation expressmap express expresscombo expressstate expressslash locatoryui locatormicro Locator locatordust https://npmjs.org/search?q=modown locatorlang locatorhandlebars
  25. 25. 2 major customers in production (flickr and media)
  26. 26. all major changes in YAF are already in place https://github.com/yui/yui3/blob/master/src/app/HISTORY.md
  27. 27. no docs, only component level docs and examples in github
  28. 28. examples
  29. 29. express-yui for yui core modules
  30. 30. var express = require('express'), app = express();   app.get('/', function (req, res, next) { // `res.locals` holds all data // available on the template }); app.listen(3000);
  31. 31. 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);
  32. 32. 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);
  33. 33. 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);
  34. 34. 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);
  35. 35. <!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>
  36. 36. <!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>
  37. 37. express-yui for custom yui modules
  38. 38. var express = require('express'), expyui = require('express-yui'), app = express();   expyui.extend(app); app.use(expyui.expose()); app.get('/item/:id', function (req, res, next) { }); app.listen(3000);
  39. 39. var express = require('express'), expyui = require('express-yui'), app = express();   expyui.extend(app); app.use(expyui.expose()); app.get('/item/:id', function (req, res, next) { }); app.yui.ready(function (err) { app.listen(3000); });
  40. 40. var express = require('express'), expyui = require('express-yui'), app = express();   expyui.extend(app); app.use(expyui.expose()); app.get('/item/:id', function (req, res, next) { app.yui.use('model-foo', function (Y) { var model = new Y.ModelFoo(); }); }); app.yui.ready(function (err) { app.listen(3000); });
  41. 41. var express = require('express'), expyui = require('express-yui'), app = express();   expyui.extend(app); app.use(expyui.expose()); app.get('/item/:id', function (req, res, next) { app.yui.use('model-foo', function (Y) { var model = new Y.ModelFoo(); model.load(req.params.id, function (err) { res.render('view-name', model.toJSON()); }); }); }); app.yui.ready(function (err) { app.listen(3000); });
  42. 42. var express = require('express'), expyui = require('express-yui'), app = express();   expyui.extend(app); app.use(expyui.expose()); app.get('/item/:id', function (req, res, next) { app.yui.use('model-foo', function (Y) { var model = new Y.ModelFoo(); model.load(req.params.id, function (err) { res.expose(model,'fooData'); //window.app.fooData res.render('view-name', model.toJSON()); }); }); }); app.yui.ready(function (err) { app.listen(3000); });
  43. 43. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>usage of `express-yui` and `locator-yui`</title> <script>{{{state}}}</script> <script> app.yui.ready(function (err) { app.yui.use('model-foo', function (Y) { }); }); </script> </head> <body> <p>non-blocking way to inject yui seed files</p> </body> </html>
  44. 44. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>usage of `express-yui` and `locator-yui`</title> <script>{{{state}}}</script> <script> app.yui.ready(function (err) { app.yui.use('model-foo', function (Y) { var model = new Y.ModelFoo(app.fooData); }); }); </script> </head> <body> <p>non-blocking way to inject yui seed files</p> </body> </html>
  45. 45. filesystem abstraction with locator
  46. 46. locator gives semantic meaning to files on the filesystem
  47. 47. filesystem analysis to understand the capabilities of the app
  48. 48. on the making...
  49. 49. Intl
  50. 50. composition
  51. 51. ES6 modules
  52. 52. UI data bindings
  53. 53. modownization of YUI
  54. 54. some final notes
  55. 55. modown is not a framework
  56. 56. modown is not a product
  57. 57. modown is just a principle
  58. 58. Thanks @caridy

×