Une présentation de Mortar

James Long décrit la librairie de modèles Mortar et de dépôt, ainsi que comment débuter la création d'appli à l'aide de Mortar.

Hey guys, my name is James Long and I'm here to talk to you about Mortar.

Mortar is a collection of project templates

to help you get started writing web apps quickly.

You can start by going to the Developer Hub

at marketplace.firefox.com/developers.

Click on 'Build your app'

and go down to App Templates.

You'll see some information about the templates available

and some installation instructions.

There's also a link to the Mortar repo,

which is a project that lists all the available templates as sub-projects.

There's an App-stub template, Game-stub, List-detail and a Tab-view template.

You can see installation instructions for the templates

back over on the Developer Hub and some more information about it.

I'm just going to take you through it here.

The App-stub template is a minimal template that comes with a few things hooked up for you.

This is what it looks like when you download it.

It just comes with an installation button.

You can see in the index.html that there's not much there,

but it's enough to help you out: Just some basic HTML,

the installation button, and Require.js, which is hooked up for you already.

If you don't know what Require.js is, just go to RequireJS.org.

It's a JavaScript module system.

It also comes with a manifest.webapp already written out for you

and you can just come in here and configure it.

You may have noticed the www folder.

If you go back to the root of the project you'll see some folders and files.

Node modules and tools just basically contain things for volo.

www is where all your static assets live

and there's just a few other files for extra stuff.

Most of the time you'll be working in here.

Another thing is it comes with volo, which is what I'm going to show you right now.

Volo is a tool for managing web projects.

It's built on node.js.

If you don't have node you're going to have to install it, but it's pretty easy.

Just go to nodejs.org, click on install and get the binary.

Once you have node installed, just type npm install -g volo.

This will install volo globally.

Volo has a few commands you can use.

volo create is one of them,

which takes the name of your app

and then a github reference or any other URL to a template such as mozilla mortar appstub

and this will create your app based on the template.

This is a quick way to create apps based on the Mortar templates.

So now there's an app for that we can cd into.

Another volo command that you can use is volo serve.

And it fires up a development server

so that you can view your site in the browser.

Another command is volo add which adds JavaScript dependencies to your site.

So, I can say volo add zepto and it adds it.

So if I go into the lib directory in JS you can see it has zepto now.

Now I can go into my javascript app.js file and require zepto.

It's already actually doing that, let's just make sure that it's getting it.

And there it is.

Now you'll notice we're using zepto with this require function

because we're using require.js.

Since we're using require.js all libraries have to be defined as a module.

You do this with this define function.

But what happens if you want to use a third party library that doesn't do this.

Volo add actually can automatically wrap libraries.

So, say you want to include this font library you can pass a direct URL into volo add.

It sees that it's not a module and asks you for any dependencies.

It also asks you what global to export.

It actually modifies a jQuery object so it doesn't export anything. (I'm gonna just ignore that)

Now I could use the jQuery Flot library like so.

Just require it.

Note how I don't care about the return value because it just attaches itself to the jQuery object.

There's two more awesome volo commands that you have to try.

Volo build builds your site into an optimized version.

It basically concatenates and minifies all your CSS and JavaScript.

It puts it into a www-build directory.

After you've done that you can say volo gh deploy

It asks you where to put it at first, if you've never done this before.

And that repo doesn't exist yet.

So I'm going to say no and it's actually going to create it for me

and deploy it onto Github pages for me.

And just like that, I can go to my App and it's live.

Notice how it's hosted on the github pages URL.

So in about 10 seconds, I was able to deploy my app.

This works whether or not the repo already exists

and pushes into onto the GH pages branch.

And that's it for Volo.

There's also the gamestub template

which if you take a look at that, and see, comes with a basic game

that lets you control a box with arrow keys.

It's still very simplistic, but if you look at the code

it comes with a full game loop and an input library,

which helps a lot.

So there's a render function and a mainfunction which is the main game loop.

The last 2 templates are the list-detail template and the tab-view template.

These come with everything that the App-stub template does,

but also a full UI library to help you get writing apps quickly.

So this is the list-detail template.

This is what you get when you first download the template. It's a fully working list detail app.

You can see a list of items then click on them to see the details

and you can edit the details

and it propagates throughout the app,

even back here in the list view.

You can also add new items.

And that all works!

You can view more details about the

UI library at the Mortar layouts project, which is linked to in the README.

This implements that application user interface

and describes how you can use it and how you can modify it.

I'll show you how the list detail template uses it.

This is the index.html.

There's two special tags, x-view and x-listview.

The list-view implements the listview structure, that implements an element with a header and a footer,

and you can compose these views so that you can put them inside each other.

There's a few special attributes, such as the data view attribute on a button.

This makes this view appear when the button is pressed. This is just a CSS selector.

You can view more details about this at the Mortar layout repository

which is linked to in the README

The other template is the tab-view template

which is very similar to the list-detail template, just with a little bit different HTML.

This comes with a list view just like the other app,

but you'll notice that it's actually a sub-view of this main view, which comes with different sections.

Which kind of simulate tabs. So, if I go into here and view this item

and go over to these other sections,

you'll notice that it actually keeps my place and I can keep pressing back to go back here.

This is all part of the Mortar layouts library.

So that's about it. If you have any problems,

feel free to file some issues on Github.

Thanks for watching!