The Mojito QuickStart Guide is both an introduction to Mojito concepts and an example application.
The application has twelve tiles that you can click or tap to learn the basics of Mojito. The layout adapts to the device used to view the application--tiles rearrange themselves on a tablet or phone for better usability.
git clone git://github.com/yahoo/mojito.git cd examples/quickstartguide npm i ./script/start_server
You can now view the application at http://localhost:8666/.
The Mojito Quickstart Guide provides a total of 12 documentation topics that are stored locally for reading.
Each tile displayed by the application represents a documentation topic. These topics, also known as "guides", are static Markdown (
.md) files that reside in a
guides/ directory. The titles of the tiles are based on the top-level heading of Markdown files. Since all the data is in
guides/, we use one centralized model
to access this dataset. Next, let's look at the mojits and the model that power our application.
Shelf mojit iterates through each Markdown files to obtain the titles. For each title,
Shelf will display it in an independent tile and also add a link to introduce the tile to the
Read mojit will take raw Markdown file and render it into HTML and display the content.
In this application, both
Read mojits access the same data set: the guide files. Therefore, there is only one universal model to support both of the mojits.
All Mojito applications have a similar application flow. The diagram below gives an overview of the logic flow of this application.
The logic flow below describes what happens when you start the application and see the landing page that displays twelve topic tiles.
routes.yaml: To find out what happened in the code, we come to routes.yaml to determine which instance is called. In this case it's something called shelf.index. We can then tell it's calling an index from a shelf so we go to application.yaml to figure out what index or shelf mean.
application.yaml: In application.yaml, we see shelf is under master specs and it's an HTMLFrameMojit that has a child of a type Shelf. shelf.index calls the index method of a HTMLFrameMojit, but actually all
HTMLFrameMojit does is just to generate an HTML skeleton, and pass the rest of the executions to its children's
index method, Shelf mojit in this case.
models/GuideModel: In the index function, you can see there is a call: model.getGuides() which goes to the model, so we come to models/GuideModel to see how data is obtained there. (Sometimes you will have different models for different mojit, but in this case, both Shelf and Read mojit access the same data set, so it becomes a global model)
The logic flow below describes what happens when a tile is clicked to read a topic.
routes.yaml: To find out what happened in the code, we come to routes.yaml to determine which instance is called. In this case it's read.index. We can then tell it's calling index method on read. so we go to application.yaml to figure out what read mean.
application.yaml: In application.yaml, we see read is under master read and it's an HTMLFrameMojit that has a child of a type Read. read.index calls the index method of a HTMLFrameMojit, which passes the executions to its children's index method, Read mojit in this case.
mojits/Read/binders/index.js: After view is generated, the associated binder will be executed. e.g. index.js will run after index.html(naming convention). In this case, we can come to mojits/Read/binders/index.js and see what happens after the view is generated.