Your SlideShare is downloading. ×
0
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

YUIConf2013: Introducing The "Modown" Project

1,816

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 …

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,816
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. #yuiconf #modown @caridy
  • 2. http://www.flickr.com/photos/diverkeith/379540273/
  • 3. the web platform
  • 4. “modown”
  • 5. motivations
  • 6. web applications becoming single-page applications
  • 7. YAF success
  • 8. mojito constraints
  • 9. modown components mojito-next (yui, search) hermes (flickr) assembler (touchdown)
  • 10. Rendr AngularJS Backbone EmberJS Meteor DerbyJS YAF React Mojito
  • 11. single-page applications
  • 12. users can switch between different states in no time
  • 13. ... and doing so without breaking any of the core features of the web (history, url, openness, seo)
  • 14. back to our roots
  • 15. building blocks rather than prescriptions
  • 16. libraries over frameworks
  • 17. development on the open
  • 18. goals
  • 19. building blocks for SPA written in nodejs
  • 20. extending express
  • 21. rendering initial state on the server, then let the browser takes over
  • 22. today
  • 23. 13 modules in NPM
  • 24. modown components expressview expressyui expressannotation expressmap express expresscombo expressstate expressslash locatoryui locatormicro Locator locatordust https://npmjs.org/search?q=modown locatorlang locatorhandlebars
  • 25. 2 major customers in production (flickr and media)
  • 26. all major changes in YAF are already in place https://github.com/yui/yui3/blob/master/src/app/HISTORY.md
  • 27. no docs, only component level docs and examples in github
  • 28. examples
  • 29. express-yui for yui core modules
  • 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. 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. 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. 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. 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. <!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. <!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. express-yui for custom yui modules
  • 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. 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. 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. 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. 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. <!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. <!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. filesystem abstraction with locator
  • 46. locator gives semantic meaning to files on the filesystem
  • 47. filesystem analysis to understand the capabilities of the app
  • 48. on the making...
  • 49. Intl
  • 50. composition
  • 51. ES6 modules
  • 52. UI data bindings
  • 53. modownization of YUI
  • 54. some final notes
  • 55. modown is not a framework
  • 56. modown is not a product
  • 57. modown is just a principle
  • 58. Thanks @caridy

×