YUIConf2012: Mojito for YUI Developers
?
5 likes?2,015 views
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.
YUIConf2012: Mojito for YUI Developers
- 2. Caridy Patino Bartender at Yahoo! Mojito Team Principal Engineer at Yahoo! Search caridy@yahoo-inc.com @caridy
- 4. Agenda: - YUI Apps overview - Mojito for YUI Apps - Mojito components - Mojito Mojits - Execution context & con?gurations - DEMO - Extending Mojito
- 5. There are three things we do when creating YUI applications:
- 8. Example of a composite seed from search.yahoo.com: http://a.l.yimg.com/pv/lib/s9/srp-core-js-1_201106101018.js http://a.l.yimg.com/pv/lib/s9/srp-core-js-2_201210020629.js
- 11. The YUI con?g
- 12. YUI_config = {filter: ¡°debug¡±}; YUI.GlobalConfig = {filter: ¡°debug¡±}; YUI.applyConfig({filter: ¡°debug¡±}); Y.applyConfig({filter: ¡°debug¡±}); YUI({filter: ¡°debug¡±});
- 13. ... and there is a four thing we also do:
- 14. The YUI.add() magic to create new building blocks or to bundle business logic
- 16. ... and here is where things get messy
- 17. How to organize our ?les?
- 18. How to con?gure our app to use our ?les?
- 19. How to build those ?les for production? How to optimize them? How to push to CDN?
- 20. ... and this list goes on and on!
- 21. We are on our own on this!
- 22. YUI Runtimes
- 23. There are four different kind of applications that we can build with YUI
- 25. HTML5 Web App (a la YAF)
- 26. Of?ine HTML5 Hybrid App (a la phonegap)
- 27. NodeJS App to serve traf?c
- 28. Nowadays, when we build a product, we usually need to build more that one type of app
- 29. We can group the runtimes by Server and Client
- 30. YUI 4x4 Seeds YUI use YUI con?g YUI add Web x x x x YAF x x x x Hybrid x x x x NodeJS x x x
- 31. Mojito for YUI Developer $ npm install mojito -g
- 32. YUI vs Mojito
- 33. YUI and Mojito
- 34. YUI is a library of building blocks to create javascript applications!
- 35. Mojito is a boilerplate framework for javascript applications!
- 36. Mojito is a boilerplate framework for javascript YUI applications...
- 37. ... and YUI modules are the building blocks for those apps
- 38. Mojito does NOT provide any building block, it provides archetypes and utilities
- 40. Mojito Components mojito-cli mojito-store mojito-server mojito-core mojito-client
- 41. Command line interface $ mojito <something> mojito-cli mojito-store mojito-server mojito-core mojito-client
- 42. The Store is an abstraction layer for a mojito application ?lesystem mojito-cli mojito-store mojito-server mojito-core mojito-client
- 43. Mojito core is the dispatch engine and a runtime abstraction for logical pieces mojito-cli mojito-store mojito-server mojito-core mojito-client
- 44. Mojito server for NodeJS (a la express) mojito-cli mojito-store mojito-server mojito-core mojito-client
- 45. Mojito client (a la YAF) mojito-cli mojito-store mojito-server mojito-core mojito-client
- 46. mojito-cli The capabilities of mojito-store each component can be augmented easily mojito-server mojito-core mojito-client
- 47. mojito-cli mojito-store Each component can be used in isolation mojito-server mojito-core mojito-client
- 48. Server runtime work?ow analyze req route ?ush static or error (middleware) exists? dispatch dispatch deploy no ?ush content client? yes generate seed ?ush html and Y.use
- 49. Client runtime work?ow route navigate analyze url exists? dispatch valid yes dispatch runtime? execute no delegate to ?ush content remote runtime
- 50. Growing your software with Mojito
- 51. Applications will tent to grow organically by adding complexity and new logical pieces
- 53. Some of these logical pieces can be reuse across different form factors and devices
- 54. In Mojito, a logical piece is called a Mojit and Applications are just composition of Mojits
- 56. In Mojito, the simplest app contains one Mojit $ mojito create app demo $ cd ./demo $ mojito create mojit foo $ mojito start
- 57. Mojits in Mojito
- 58. A Mojit should be: - sharable - con?gurable - customizable - nest-able - mutable
- 59. Mojit structure
- 60. A Mojit is a composition of entities in a form of JS, CSS, templates, con?gurations, and other assets
- 61. $ mojito create mojit foo
- 62. Entity Registration in Mojito
- 63. In Mojito, there are three different registration processes
- 64. By YUI.add(), which is applicable for yui modules and it is used by YUI
- 65. By af?nity, which is applicable for javascript ?les, and it is used by mojito-store
- 66. The af?nity could be: server, client or common
- 67. The af?nity registration solves two use cases: Bar requires (server) Foo (common) Baz (client) requires Bar (server) Foo requires (common) Bar (client)
- 68. By selector, which is applicable for js, css and templates, and it is used by mojito-store during run time
- 69. The selector could be <anything> in a form of a string
- 70. 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)
- 71. render(data, { view: { name: ¡°bar¡± } });
- 72. YUI 4x4 Seeds YUI use YUI con?g YUI add Web x x YAF x x Hybrid x x NodeJS x x
- 73. Mojito execution context and con?gurations
- 74. Mojito uses the Yahoo! Con?guration Bundle (aka YCB) http://github.com/yahoo/ycb
- 75. Mojito Server and Client abstractions will take care of resolving execution context and con?gurations when needed
- 78. Accessing con?guration from Mojit¡¯s controller
- 79. Mojito does heavy use of con?gurations in a form of JSON ?les
- 82. YUI 4x4 Seeds YUI use YUI con?g YUI add Web x x YAF x x Hybrid x x NodeJS x
- 83. DEMO
- 84. Extending Mojito
- 85. Mojito embraces NPM to enable software composition
- 86. package.json
- 87. $ cd path/to/app/ $ npm install mojit-trending-now
- 88. ... and from the application point of view there is not distinction because the mojito-store will ?atten the structure
- 89. Mojito embraces NPM to support boilerplate extensions and addons
- 90. $ cd path/to/app/ $ npm install mojito-sass $ npm install mojito-shaker
- 91. Mojito extensions can be: - mojito cli commands - store addons - mojits, archetypes & renderers - middleware - action-context addons
- 92. ... and we need your help to build those extensions!
- 93. Mojito Today
- 94. // 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
- 95. // Mojito 101 (second part) $ mojito build html5app ./ $ mojito gv client $ mojito jslint app ./ $ mojito docs app ./ $ mojito info ./ $ mojito help
- 96. Current versions: - mojito@0.5.0pr4 - yui@3.7.3
- 97. Mojito Tomorrow
- 98. - YAF integration is coming - Performance is paramount - Mojito extensions: (debugger, pro?ler, less, sass, coffeescript, typescript, etc)
- 101. All the code from the presentation is available here: http://gist.github.com/4070536
- 102. Thank you! @caridy