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.

2. Caridy Patino
Bartender at Yahoo! Mojito Team
Principal Engineer at Yahoo! Search
caridy@yahoo-inc.com
@caridy

3. for YUI developer

4. Agenda:
- YUI Apps overview
- Mojito for YUI Apps
- Mojito components
- Mojito Mojits
- Execution context & configurations
- DEMO
- Extending Mojito

5. There are three things we do when creating
YUI applications:

6. The Seed file(s)

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

9. The YUI().use() statement

11. The YUI config

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 files?

18. How to configure our app to use our files?

19. How to build those files 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

24. Traditional Web Pages

25. HTML5 Web App (a la YAF)

26. Offline HTML5 Hybrid App (a la phonegap)

27. NodeJS App to serve traffic

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 config 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

39. Mojito Architecture Components

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 filesystem
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 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

49. Client runtime workflow
route
navigate
analyze url exists?
dispatch
valid
yes
dispatch runtime? execute
no
delegate to
flush 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
- configurable
- customizable
- nest-able
- mutable

59. Mojit structure

60. A Mojit is a composition of entities in a
form of JS, CSS, templates, configurations,
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 affinity, which is applicable for
javascript files, and it is used by mojito-store

66. The affinity could be:
server, client or common

67. The affinity 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 config YUI add
Web x x
YAF x x
Hybrid x x
NodeJS x x

73. Mojito execution context and configurations

74. Mojito uses the Yahoo! Configuration Bundle
(aka YCB)
http://github.com/yahoo/ycb

75. Mojito Server and Client abstractions will
take care of resolving execution context
and configurations when needed

76. path/to/demo/application.json

77. path/to/mojits/foo/definition.json

78. Accessing configuration from Mojit’s controller

79. Mojito does heavy use of configurations
in a form of JSON files

80. Customizing Seed files

81. Customizing Seed files

82. YUI 4x4
Seeds YUI use YUI config 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 flatten 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, profiler, less, sass,
coffeescript, typescript, etc)

99. One last thing...

100. http://github.com/yahoo/mojito

101. All the code from the presentation
is available here:
http://gist.github.com/4070536

102. Thank you!
@caridy