YUIConf2013: Introducing The "Modown" Project
•
1 like•3,370 views
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!
Recommended
Recommended
More Related Content
Similar to YUIConf2013: Introducing The "Modown" Project
Similar to YUIConf2013: Introducing The "Modown" Project (20)
More from Caridy Patino
More from Caridy Patino (12)
Recently uploaded
Recently uploaded (20)
YUIConf2013: Introducing The "Modown" Project
- 4. “modown”
- 6. motivations
- 7. web applications becoming single-page applications
- 8. YAF success
- 14. users can switch between different states in no time
- 15. ... and doing so without breaking any of the core features of the web (history, url, openness, seo)
- 16. back to our roots
- 17. building blocks rather than prescriptions
- 19. development on the open
- 20. goals
- 21. building blocks for SPA written in nodejs
- 23. rendering initial state on the server, then let the browser takes over
- 24. today
- 25. 13 modules in NPM
- 26. modown components expressview expressyui expressannotation expressmap express expresscombo expressstate expressslash locatoryui locatormicro Locator locatordust https://npmjs.org/search?q=modown locatorlang locatorhandlebars
- 27. 2 major customers in production (flickr and media)
- 28. all major changes in YAF are already in place https://github.com/yui/yui3/blob/master/src/app/HISTORY.md
- 29. no docs, only component level docs and examples in github
- 30. examples
- 31. express-yui for yui core modules
- 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>
- 39. express-yui for custom yui modules
- 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.listen(3000);
- 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.ready(function (err) { app.listen(3000); });
- 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(); }); }); app.yui.ready(function (err) { app.listen(3000); });
- 43. 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); });
- 44. 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); });
- 45. <!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>
- 46. <!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>
- 48. locator gives semantic meaning to files on the filesystem
- 49. filesystem analysis to understand the capabilities of the app
- 50. on the making...
- 51. Intl
- 52. composition
- 53. ES6 modules
- 54. UI data bindings
- 56. some final notes
- 57. modown is not a framework
- 58. modown is not a product
- 59. modown is just a principle
- 60. Thanks @caridy