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