0:00:01.584,0:00:05.150 Hey guys, my name is James Long and I'm here to talk to you about Mortar. 0:00:06.230,0:00:07.915 Mortar is a collection of project templates 0:00:07.915,0:00:10.417 to help you get started writing web apps quickly. 0:00:10.417,0:00:13.098 You can start by going to the Developer Hub 0:00:13.098,0:00:17.212 at marketplace.firefox.com/developers. 0:00:17.212,0:00:18.882 Click on 'Build your app' 0:00:20.451,0:00:24.118 and go down to App Templates. 0:00:24.118,0:00:27.179 You'll see some information about the templates available 0:00:27.179,0:00:30.553 and some installation instructions. 0:00:30.553,0:00:33.052 There's also a link to the Mortar repo, 0:00:33.052,0:00:36.886 which is a project that lists all the available templates as sub-projects. 0:00:36.886,0:00:41.728 There's an App-stub template, Game-stub, List-detail and a Tab-view template. 0:00:41.728,0:00:44.318 You can see installation instructions for the templates 0:00:44.318,0:00:48.052 back over on the Developer Hub and some more information about it. 0:00:48.052,0:00:50.970 I'm just going to take you through it here. 0:00:50.970,0:00:54.536 The App-stub template is a minimal template that comes with a few things hooked up for you. 0:00:54.536,0:00:56.681 This is what it looks like when you download it. 0:00:56.681,0:00:58.781 It just comes with an installation button. 0:00:59.842,0:01:02.543 You can see in the index.html that there's not much there, 0:01:02.543,0:01:05.851 but it's enough to help you out: Just some basic HTML, 0:01:05.851,0:01:10.932 the installation button, and Require.js, which is hooked up for you already. 0:01:10.932,0:01:14.368 If you don't know what Require.js is, just go to RequireJS.org. 0:01:14.368,0:01:18.515 It's a JavaScript module system. 0:01:18.515,0:01:22.661 It also comes with a manifest.webapp already written out for you 0:01:22.661,0:01:25.693 and you can just come in here and configure it. 0:01:25.693,0:01:28.785 You may have noticed the www folder. 0:01:28.785,0:01:32.102 If you go back to the root of the project you'll see some folders and files. 0:01:32.102,0:01:36.215 Node modules and tools just basically contain things for volo. 0:01:36.215,0:01:38.798 www is where all your static assets live 0:01:38.798,0:01:41.863 and there's just a few other files for extra stuff. 0:01:41.863,0:01:44.626 Most of the time you'll be working in here. 0:01:44.626,0:01:49.995 Another thing is it comes with volo, which is what I'm going to show you right now. 0:01:49.995,0:01:52.801 Volo is a tool for managing web projects. 0:01:52.801,0:01:54.151 It's built on node.js. 0:01:54.151,0:01:57.167 If you don't have node you're going to have to install it, but it's pretty easy. 0:01:57.167,0:02:02.786 Just go to nodejs.org, click on install and get the binary. 0:02:02.786,0:02:08.368 Once you have node installed, just type npm install -g volo. 0:02:08.368,0:02:12.583 This will install volo globally. 0:02:12.583,0:02:14.398 Volo has a few commands you can use. 0:02:14.398,0:02:15.937 volo create is one of them, 0:02:15.937,0:02:18.146 which takes the name of your app 0:02:18.146,0:02:27.468 and then a github reference or any other URL to a template such as mozilla mortar appstub 0:02:27.468,0:02:29.512 and this will create your app based on the template. 0:02:29.512,0:02:33.816 This is a quick way to create apps based on the Mortar templates. 0:02:33.816,0:02:39.245 So now there's an app for that we can cd into. 0:02:39.245,0:02:42.147 Another volo command that you can use is volo serve. 0:02:42.147,0:02:44.338 And it fires up a development server 0:02:44.338,0:02:51.285 so that you can view your site in the browser. 0:02:51.285,0:02:56.182 Another command is volo add which adds JavaScript dependencies to your site. 0:02:56.182,0:03:04.256 So, I can say volo add zepto and it adds it. 0:03:04.256,0:03:07.317 So if I go into the lib directory in JS you can see it has zepto now. 0:03:10.132,0:03:14.663 Now I can go into my javascript app.js file and require zepto. 0:03:14.663,0:03:25.770 It's already actually doing that, let's just make sure that it's getting it. 0:03:26.970,0:03:28.818 And there it is. 0:03:28.818,0:03:31.598 Now you'll notice we're using zepto with this require function 0:03:31.598,0:03:33.605 because we're using require.js. 0:03:33.605,0:03:37.731 Since we're using require.js all libraries have to be defined as a module. 0:03:37.731,0:03:40.030 You do this with this define function. 0:03:40.030,0:03:43.799 But what happens if you want to use a third party library that doesn't do this. 0:03:43.799,0:03:48.068 Volo add actually can automatically wrap libraries. 0:03:48.068,0:03:54.550 So, say you want to include this font library you can pass a direct URL into volo add. 0:03:54.550,0:03:59.654 It sees that it's not a module and asks you for any dependencies. 0:03:59.654,0:04:02.832 It also asks you what global to export. 0:04:02.832,0:04:11.500 It actually modifies a jQuery object so it doesn't export anything. (I'm gonna just ignore that) 0:04:11.500,0:04:13.823 Now I could use the jQuery Flot library like so. 0:04:13.823,0:04:18.263 Just require it. 0:04:18.263,0:04:24.765 Note how I don't care about the return value because it just attaches itself to the jQuery object. 0:04:24.765,0:04:28.083 There's two more awesome volo commands that you have to try. 0:04:28.083,0:04:30.749 Volo build builds your site into an optimized version. 0:04:30.749,0:04:34.969 It basically concatenates and minifies all your CSS and JavaScript. 0:04:36.599,0:04:40.587 It puts it into a www-build directory. 0:04:40.587,0:04:44.037 After you've done that you can say volo gh deploy 0:04:44.037,0:04:47.484 It asks you where to put it at first, if you've never done this before. 0:04:48.899,0:04:51.746 And that repo doesn't exist yet. 0:04:51.746,0:04:54.632 So I'm going to say no and it's actually going to create it for me 0:04:54.632,0:04:59.055 and deploy it onto Github pages for me. 0:04:59.055,0:05:07.057 And just like that, I can go to my App and it's live. 0:05:07.057,0:05:10.885 Notice how it's hosted on the github pages URL. 0:05:10.885,0:05:13.832 So in about 10 seconds, I was able to deploy my app. 0:05:13.832,0:05:16.158 This works whether or not the repo already exists 0:05:16.158,0:05:20.343 and pushes into onto the GH pages branch. 0:05:20.343,0:05:22.988 And that's it for Volo. 0:05:22.988,0:05:25.308 There's also the gamestub template 0:05:25.308,0:05:29.490 which if you take a look at that, and see, comes with a basic game 0:05:29.490,0:05:32.082 that lets you control a box with arrow keys. 0:05:32.082,0:05:34.897 It's still very simplistic, but if you look at the code 0:05:34.897,0:05:41.676 it comes with a full game loop and an input library, 0:05:41.676,0:05:46.181 which helps a lot. 0:05:46.181,0:05:51.371 So there's a render function and a mainfunction which is the main game loop. 0:05:58.308,0:06:01.398 The last 2 templates are the list-detail template and the tab-view template. 0:06:01.398,0:06:03.775 These come with everything that the App-stub template does, 0:06:03.775,0:06:09.078 but also a full UI library to help you get writing apps quickly. 0:06:09.078,0:06:10.946 So this is the list-detail template. 0:06:10.946,0:06:16.524 This is what you get when you first download the template. It's a fully working list detail app. 0:06:16.587,0:06:19.321 You can see a list of items then click on them to see the details 0:06:19.321,0:06:22.015 and you can edit the details 0:06:27.675,0:06:30.227 and it propagates throughout the app, 0:06:30.227,0:06:31.980 even back here in the list view. 0:06:31.980,0:06:35.086 You can also add new items. 0:06:45.948,0:06:47.874 And that all works! 0:06:47.874,0:06:48.748 You can view more details about the 0:06:48.748,0:06:55.184 UI library at the Mortar layouts project, which is linked to in the README. 0:06:55.184,0:06:59.059 This implements that application user interface 0:06:59.059,0:07:04.071 and describes how you can use it and how you can modify it. 0:07:04.071,0:07:06.631 I'll show you how the list detail template uses it. 0:07:06.631,0:07:09.354 This is the index.html. 0:07:09.354,0:07:12.482 There's two special tags, x-view and x-listview. 0:07:12.482,0:07:18.902 The list-view implements the listview structure, that implements an element with a header and a footer, 0:07:18.902,0:07:24.487 and you can compose these views so that you can put them inside each other. 0:07:24.487,0:07:28.499 There's a few special attributes, such as the data view attribute on a button. 0:07:28.499,0:07:35.802 This makes this view appear when the button is pressed. This is just a CSS selector. 0:07:35.807,0:07:40.790 You can view more details about this at the Mortar layout repository 0:07:40.790,0:07:43.666 which is linked to in the README 0:07:43.666,0:07:46.608 The other template is the tab-view template 0:07:46.608,0:07:50.990 which is very similar to the list-detail template, just with a little bit different HTML. 0:07:50.990,0:07:54.042 This comes with a list view just like the other app, 0:07:54.042,0:07:58.101 but you'll notice that it's actually a sub-view of this main view, which comes with different sections. 0:07:58.194,0:08:03.590 Which kind of simulate tabs. So, if I go into here and view this item 0:08:03.590,0:08:04.983 and go over to these other sections, 0:08:04.983,0:08:10.910 you'll notice that it actually keeps my place and I can keep pressing back to go back here. 0:08:11.306,0:08:14.205 This is all part of the Mortar layouts library. 0:08:15.220,0:08:17.304 So that's about it. If you have any problems, 0:08:17.304,0:08:19.159 feel free to file some issues on Github. 0:08:19.558,0:08:21.001 Thanks for watching!