Mais conteúdo relacionado Semelhante a YUIConf2012: Mojito for YUI Developers (20) Mais de Caridy Patino (10) YUIConf2012: Mojito for YUI Developers4. Agenda:
- YUI Apps overview
- Mojito for YUI Apps
- Mojito components
- Mojito Mojits
- Execution context & configurations
- DEMO
- Extending Mojito
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
12. YUI_config = {filter: “debug”};
YUI.GlobalConfig = {filter: “debug”};
YUI.applyConfig({filter: “debug”});
Y.applyConfig({filter: “debug”});
YUI({filter: “debug”});
19. How to build those files for production?
How to optimize them?
How to push to CDN?
23. There are four different kind of applications
that we can build with YUI
28. Nowadays, when we build a product, we usually
need to build more that one type of app
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
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
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
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
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
58. A Mojit should be:
- sharable
- configurable
- customizable
- nest-able
- mutable
60. A Mojit is a composition of entities in a
form of JS, CSS, templates, configurations,
and other assets
65. By affinity, which is applicable for
javascript files, and it is used by mojito-store
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
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)
72. YUI 4x4
Seeds YUI use YUI config YUI add
Web x x
YAF x x
Hybrid x x
NodeJS x x
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
82. YUI 4x4
Seeds YUI use YUI config YUI add
Web x x
YAF x x
Hybrid x x
NodeJS x
88. ... and from the application point of view
there is not distinction because the mojito-store
will flatten the structure
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!
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
98. - YAF integration is coming
- Performance is paramount
- Mojito extensions:
(debugger, profiler, less, sass,
coffeescript, typescript, etc)
101. All the code from the presentation
is available here:
http://gist.github.com/4070536