Embed Size (px)
DESCRIPTION
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.
Citation preview
Caridy PatinoBartender at Yahoo! Mojito TeamPrincipal Engineer at Yahoo! Search
[email protected]@caridy
for YUI developer
Agenda:
- YUI Apps overview- Mojito for YUI Apps- Mojito components- Mojito Mojits- Execution context & configurations- DEMO- Extending Mojito
There are three things we do when creating YUI applications:
The Seed file(s)
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
Example of a composite seed from search.yahoo.com:
The YUI().use() statement
The YUI config
YUI_config = {filter: “debug”};YUI.GlobalConfig = {filter: “debug”};YUI.applyConfig({filter: “debug”});Y.applyConfig({filter: “debug”});YUI({filter: “debug”});
... and there is a four thing we also do:
The YUI.add() magic to create new building blocksor to bundle business logic
... and here is where things get messy
How to organize our files?
How to configure our app to use our files?
How to build those files for production?How to optimize them?How to push to CDN?
... and this list goes on and on!
We are on our own on this!
YUI Runtimes
There are four different kind of applicationsthat we can build with YUI
Traditional Web Pages
HTML5 Web App (a la YAF)
Offline HTML5 Hybrid App (a la phonegap)
NodeJS App to serve traffic
Nowadays, when we build a product, we usuallyneed to build more that one type of app
We can group the runtimes byServer and Client
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
Mojito for YUI Developer
$ npm install mojito -g
YUI vs Mojito
YUI and Mojito
YUI is a library of building blocksto create javascript applications!
Mojito is a boilerplate framework forjavascript applications!
Mojito is a boilerplate framework forjavascript YUI applications...
... and YUI modules are the building blocksfor those apps
Mojito does NOT provide any building block,it provides archetypes and utilities
Mojito Architecture Components
mojito-store
mojito-cli
mojito-server
mojito-core
Mojito Components
mojito-client
mojito-store
mojito-cli
mojito-server
mojito-core
Command line interface$ mojito <something>
mojito-client
mojito-store
mojito-cli
mojito-server
mojito-core
The Store is an abstraction layer for amojito application filesystem
mojito-client
mojito-store
mojito-cli
mojito-server
mojito-core
Mojito core is the dispatch engineand a runtime abstraction for logical pieces
mojito-client
mojito-store
mojito-cli
mojito-server
mojito-core
Mojito server for NodeJS(a la express)
mojito-client
mojito-store
mojito-cli
mojito-server
mojito-core
Mojito client(a la YAF)
mojito-client
The capabilities of each component canbe augmented easily
mojito-store
mojito-cli
mojito-server
mojito-core
mojito-client
Each component can be used in isolation
mojito-store
mojito-cli
mojito-server
mojito-core
mojito-client
Server runtime workflow
routeexists?
flush static or error
dispatch
analyze req(middleware)
dispatch deployclient?
noflush content
generate seedand Y.use
yes
flush html
Client runtime workflow
routeexists?
navigate
dispatch
analyze url
dispatch valid runtime?
yesexecute
delegate to remote runtime
no
flush content
Growing your software with Mojito
Applications will tent to grow organically by adding complexity and new logical pieces
Some of these logical pieces can be reuseacross different form factors and devices
In Mojito, a logical piece is called a Mojitand Applications are just composition of Mojits
In Mojito, the simplest appcontains one Mojit
$ mojito create app demo$ cd ./demo$ mojito create mojit foo$ mojito start
Mojits in Mojito
A Mojit should be:
- sharable- configurable- customizable- nest-able- mutable
Mojit structure
A Mojit is a composition of entities in aform of JS, CSS, templates, configurations,
and other assets
$ mojito create mojit foo
Entity Registration in Mojito
In Mojito, there are three differentregistration processes
By YUI.add(), which is applicable foryui modules and it is used by YUI
By affinity, which is applicable forjavascript files, and it is used by mojito-store
The affinity could be:server, client or common
The affinity registration solves two use cases:
Foo(common)
Bar(server)
Baz(client) requires
requires
Foo(common)
Bar(server)
Bar(client)
requires
By selector, which is applicable for js, css and templates,and it is used by mojito-store during run time
The selector could be <anything> in a form of a string
The selector registration solves one use case:
Foo
Bar(iphone)
Bar(mobile)
require “bar”mojito-store
context
selector iphone,mobile,*
Bar(ipad)
pick “bar.iphone”
render(data, { view: { name: “bar” }});
YUI 4x4
Seeds YUI use YUI config YUI add
Web x x
YAF x x
Hybrid x x
NodeJS x x
Mojito execution context and configurations
Mojito uses the Yahoo! Configuration Bundle(aka YCB)
http://github.com/yahoo/ycb
Mojito Server and Client abstractions willtake care of resolving execution context
and configurations when needed
path/to/demo/application.json
path/to/mojits/foo/definition.json
Accessing configuration from Mojit’s controller
Mojito does heavy use of configurationsin a form of JSON files
Customizing Seed files
Customizing Seed files
YUI 4x4
Seeds YUI use YUI config YUI add
Web x x
YAF x x
Hybrid x x
NodeJS x
DEMO
Extending Mojito
Mojito embraces NPM to enablesoftware composition
package.json
$ cd path/to/app/$ npm install mojit-trending-now
... and from the application point of viewthere is not distinction because the mojito-store
will flatten the structure
Mojito embraces NPM to supportboilerplate extensions and addons
$ cd path/to/app/$ npm install mojito-sass$ npm install mojito-shaker
Mojito extensions can be:
- mojito cli commands- store addons- mojits, archetypes & renderers- middleware- action-context addons
... and we need your help to build thoseextensions!
Mojito Today
// Mojito 101
$ npm install [email protected] -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
// Mojito 101 (second part)
$ mojito build html5app ./$ mojito gv client$ mojito jslint app ./$ mojito docs app ./$ mojito info ./$ mojito help
Current versions:- [email protected] [email protected]
Mojito Tomorrow
- YAF integration is coming- Performance is paramount- Mojito extensions: (debugger, profiler, less, sass, coffeescript, typescript, etc)
One last thing...
http://gist.github.com/4070536
All the code from the presentationis available here:
Thank you! @caridy
