YUIConf2012: Mojito for YUI Developers

2,751 views

Published on

We use YUI on the daily basis in a form of building blocks, but when it comes to boilerplating our projects, we are on our own. Mojito provides a unique opportunity for YUI developers to speed up the development process by providing boilerplate and building capabilities for YUI projects by offering a variety of options to build traditional YUI web apps, mobile apps to deploy on devices, and Node.JS applications as well. It does it by leveraging YUI Library and YUI Tool chains to build at scale.

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
2,751
On SlideShare
0
From Embeds
0
Number of Embeds
559
Actions
Shares
0
Downloads
18
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

YUIConf2012: Mojito for YUI Developers

  1. 1. Caridy PatinoBartender at Yahoo! Mojito TeamPrincipal Engineer at Yahoo! Searchcaridy@yahoo-inc.com@caridy
  2. 2. for YUI developer
  3. 3. Agenda:- YUI Apps overview- Mojito for YUI Apps- Mojito components- Mojito Mojits- Execution context & configurations- DEMO- Extending Mojito
  4. 4. There are three things we do when creating YUI applications:
  5. 5. The Seed file(s)
  6. 6. Example of a composite seed from search.yahoo.com:http://a.l.yimg.com/pv/lib/s9/srp-core-js-1_201106101018.jshttp://a.l.yimg.com/pv/lib/s9/srp-core-js-2_201210020629.js
  7. 7. The YUI().use() statement
  8. 8. The YUI config
  9. 9. YUI_config = {filter: “debug”};YUI.GlobalConfig = {filter: “debug”};YUI.applyConfig({filter: “debug”});Y.applyConfig({filter: “debug”});YUI({filter: “debug”});
  10. 10. ... and there is a four thing we also do:
  11. 11. The YUI.add() magic to create new building blocks or to bundle business logic
  12. 12. ... and here is where things get messy
  13. 13. How to organize our files?
  14. 14. How to configure our app to use our files?
  15. 15. How to build those files for production? How to optimize them? How to push to CDN?
  16. 16. ... and this list goes on and on!
  17. 17. We are on our own on this!
  18. 18. YUI Runtimes
  19. 19. There are four different kind of applications that we can build with YUI
  20. 20. Traditional Web Pages
  21. 21. HTML5 Web App (a la YAF)
  22. 22. Offline HTML5 Hybrid App (a la phonegap)
  23. 23. NodeJS App to serve traffic
  24. 24. Nowadays, when we build a product, we usually need to build more that one type of app
  25. 25. We can group the runtimes by Server and Client
  26. 26. YUI 4x4 Seeds YUI use YUI config YUI add Web x x x x YAF x x x xHybrid x x x xNodeJS x x x
  27. 27. Mojito for YUI Developer$ npm install mojito -g
  28. 28. YUI vs Mojito
  29. 29. YUI and Mojito
  30. 30. YUI is a library of building blocksto create javascript applications!
  31. 31. Mojito is a boilerplate framework for javascript applications!
  32. 32. Mojito is a boilerplate framework for javascript YUI applications...
  33. 33. ... and YUI modules are the building blocks for those apps
  34. 34. Mojito does NOT provide any building block, it provides archetypes and utilities
  35. 35. Mojito Architecture Components
  36. 36. Mojito Components mojito-cli mojito-storemojito-server mojito-core mojito-client
  37. 37. Command line interface$ mojito <something> mojito-cli mojito-store mojito-server mojito-core mojito-client
  38. 38. The Store is an abstraction layer for a mojito application filesystem mojito-cli mojito-store mojito-server mojito-core mojito-client
  39. 39. Mojito core is the dispatch engineand a runtime abstraction for logical pieces mojito-cli mojito-store mojito-server mojito-core mojito-client
  40. 40. Mojito server for NodeJS (a la express) mojito-cli mojito-store mojito-server mojito-core mojito-client
  41. 41. Mojito client (a la YAF) mojito-cli mojito-storemojito-server mojito-core mojito-client
  42. 42. mojito-cli The capabilities of mojito-storeeach component canbe augmented easily mojito-server mojito-core mojito-client
  43. 43. mojito-cli mojito-storeEach component can be used in isolation mojito-server mojito-core mojito-client
  44. 44. Server runtime workflow analyze req route flush static or error(middleware) exists? dispatch dispatch deploy no flush content client? yes generate seed flush html and Y.use
  45. 45. Client runtime workflow route navigateanalyze url exists? dispatch valid yes dispatch runtime? execute no delegate to flush content remote runtime
  46. 46. Growing your software with Mojito
  47. 47. Applications will tent to grow organicallyby adding complexity and new logical pieces
  48. 48. Some of these logical pieces can be reuseacross different form factors and devices
  49. 49. In Mojito, a logical piece is called a Mojitand Applications are just composition of Mojits
  50. 50. In Mojito, the simplest app contains one Mojit$ mojito create app demo$ cd ./demo$ mojito create mojit foo$ mojito start
  51. 51. Mojits in Mojito
  52. 52. A Mojit should be:- sharable- configurable- customizable- nest-able- mutable
  53. 53. Mojit structure
  54. 54. A Mojit is a composition of entities in aform of JS, CSS, templates, configurations, and other assets
  55. 55. $ mojito create mojit foo
  56. 56. Entity Registration in Mojito
  57. 57. In Mojito, there are three different registration processes
  58. 58. By YUI.add(), which is applicable for yui modules and it is used by YUI
  59. 59. By affinity, which is applicable forjavascript files, and it is used by mojito-store
  60. 60. The affinity could be:server, client or common
  61. 61. The affinity registration solves two use cases: Bar requires (server) Foo (common) Baz (client) requires Bar (server) Foo requires (common) Bar (client)
  62. 62. By selector, which is applicable for js, css and templates, and it is used by mojito-store during run time
  63. 63. The selector could be <anything> in a form of a string
  64. 64. The selector registration solves one use case: pick “bar.iphone” Bar (iphone) Foo require “bar” Bar mojito-store (ipad) selector iphone,mobile,* Bar context (mobile)
  65. 65. render(data, { view: { name: “bar” }});
  66. 66. YUI 4x4 Seeds YUI use YUI config YUI add Web x x YAF x xHybrid x xNodeJS x x
  67. 67. Mojito execution context and configurations
  68. 68. Mojito uses the Yahoo! Configuration Bundle (aka YCB) http://github.com/yahoo/ycb
  69. 69. Mojito Server and Client abstractions willtake care of resolving execution context and configurations when needed
  70. 70. path/to/demo/application.json
  71. 71. path/to/mojits/foo/definition.json
  72. 72. Accessing configuration from Mojit’s controller
  73. 73. Mojito does heavy use of configurations in a form of JSON files
  74. 74. Customizing Seed files
  75. 75. Customizing Seed files
  76. 76. YUI 4x4 Seeds YUI use YUI config YUI add Web x x YAF x xHybrid x xNodeJS x
  77. 77. DEMO
  78. 78. Extending Mojito
  79. 79. Mojito embraces NPM to enable software composition
  80. 80. package.json
  81. 81. $ cd path/to/app/$ npm install mojit-trending-now
  82. 82. ... and from the application point of viewthere is not distinction because the mojito-store will flatten the structure
  83. 83. Mojito embraces NPM to supportboilerplate extensions and addons
  84. 84. $ cd path/to/app/$ npm install mojito-sass$ npm install mojito-shaker
  85. 85. Mojito extensions can be:- mojito cli commands- store addons- mojits, archetypes & renderers- middleware- action-context addons
  86. 86. ... and we need your help to build those extensions!
  87. 87. Mojito Today
  88. 88. // Mojito 101$ npm install mojito@0.5.0pr4 -g$ mojito version$ mojito create app demo$ cd ./demo$ mojito create mojit foo$ mojito jslint app . -p$ mojito test app . --coverage$ mojito start --context ”environment:dev”$ curl http://localhost:8666/@foo/index
  89. 89. // Mojito 101 (second part)$ mojito build html5app ./$ mojito gv client$ mojito jslint app ./$ mojito docs app ./$ mojito info ./$ mojito help
  90. 90. Current versions:- mojito@0.5.0pr4- yui@3.7.3
  91. 91. Mojito Tomorrow
  92. 92. - YAF integration is coming- Performance is paramount- Mojito extensions: (debugger, profiler, less, sass, coffeescript, typescript, etc)
  93. 93. One last thing...
  94. 94. http://github.com/yahoo/mojito
  95. 95. All the code from the presentation is available here:http://gist.github.com/4070536
  96. 96. Thank you! @caridy

×