1 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. 2 00:00:06,230 --> 00:00:07,915 Mortar is a collection of project templates 3 00:00:07,915 --> 00:00:10,417 to help you get started writing web apps quickly. 4 00:00:10,417 --> 00:00:13,098 You can start by going to the Developer Hub 5 00:00:13,098 --> 00:00:17,212 at marketplace.firefox.com/developers. 6 00:00:17,212 --> 00:00:18,882 Click on 'Build your app' 7 00:00:20,451 --> 00:00:24,118 and go down to App Templates. 8 00:00:24,118 --> 00:00:27,179 You'll see some information about the templates available 9 00:00:27,179 --> 00:00:30,553 and some installation instructions. 10 00:00:30,553 --> 00:00:33,052 There's also a link to the Mortar repo, 11 00:00:33,052 --> 00:00:36,886 which is a project that lists all the available templates as sub-projects. 12 00:00:36,886 --> 00:00:41,728 There's an App-stub template, Game-stub, List-detail and a Tab-view template. 13 00:00:41,728 --> 00:00:44,318 You can see installation instructions for the templates 14 00:00:44,318 --> 00:00:48,052 back over on the Developer Hub and some more information about it. 15 00:00:48,052 --> 00:00:50,970 I'm just going to take you through it here. 16 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. 17 00:00:54,536 --> 00:00:56,681 This is what it looks like when you download it. 18 00:00:56,681 --> 00:00:58,781 It just comes with an installation button. 19 00:00:59,842 --> 00:01:02,543 You can see in the index.html that there's not much there, 20 00:01:02,543 --> 00:01:05,851 but it's enough to help you out: Just some basic HTML, 21 00:01:05,851 --> 00:01:10,932 the installation button, and Require.js, which is hooked up for you already. 22 00:01:10,932 --> 00:01:14,368 If you don't know what Require.js is, just go to RequireJS.org. 23 00:01:14,368 --> 00:01:18,515 It's a JavaScript module system. 24 00:01:18,515 --> 00:01:22,661 It also comes with a manifest.webapp already written out for you 25 00:01:22,661 --> 00:01:25,693 and you can just come in here and configure it. 26 00:01:25,693 --> 00:01:28,785 You may have noticed the www folder. 27 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. 28 00:01:32,102 --> 00:01:36,215 Node modules and tools just basically contain things for volo. 29 00:01:36,215 --> 00:01:38,798 www is where all your static assets live 30 00:01:38,798 --> 00:01:41,863 and there's just a few other files for extra stuff. 31 00:01:41,863 --> 00:01:44,626 Most of the time you'll be working in here. 32 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. 33 00:01:49,995 --> 00:01:52,801 Volo is a tool for managing web projects. 34 00:01:52,801 --> 00:01:54,151 It's built on node.js. 35 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. 36 00:01:57,167 --> 00:02:02,786 Just go to nodejs.org, click on install and get the binary. 37 00:02:02,786 --> 00:02:08,368 Once you have node installed, just type npm install -g volo. 38 00:02:08,368 --> 00:02:12,583 This will install volo globally. 39 00:02:12,583 --> 00:02:14,398 Volo has a few commands you can use. 40 00:02:14,398 --> 00:02:15,937 volo create is one of them, 41 00:02:15,937 --> 00:02:18,146 which takes the name of your app 42 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 43 00:02:27,468 --> 00:02:29,512 and this will create your app based on the template. 44 00:02:29,512 --> 00:02:33,816 This is a quick way to create apps based on the Mortar templates. 45 00:02:33,816 --> 00:02:39,245 So now there's an app for that we can cd into. 46 00:02:39,245 --> 00:02:42,147 Another volo command that you can use is volo serve. 47 00:02:42,147 --> 00:02:44,338 And it fires up a development server 48 00:02:44,338 --> 00:02:51,285 so that you can view your site in the browser. 49 00:02:51,285 --> 00:02:56,182 Another command is volo add which adds JavaScript dependencies to your site. 50 00:02:56,182 --> 00:03:04,256 So, I can say volo add zepto and it adds it. 51 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. 52 00:03:10,132 --> 00:03:14,663 Now I can go into my javascript app.js file and require zepto. 53 00:03:14,663 --> 00:03:25,770 It's already actually doing that, let's just make sure that it's getting it. 54 00:03:26,970 --> 00:03:28,818 And there it is. 55 00:03:28,818 --> 00:03:31,598 Now you'll notice we're using zepto with this require function 56 00:03:31,598 --> 00:03:33,605 because we're using require.js. 57 00:03:33,605 --> 00:03:37,731 Since we're using require.js all libraries have to be defined as a module. 58 00:03:37,731 --> 00:03:40,030 You do this with this define function. 59 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. 60 00:03:43,799 --> 00:03:48,068 Volo add actually can automatically wrap libraries. 61 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. 62 00:03:54,550 --> 00:03:59,654 It sees that it's not a module and asks you for any dependencies. 63 00:03:59,654 --> 00:04:02,832 It also asks you what global to export. 64 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) 65 00:04:11,500 --> 00:04:13,823 Now I could use the jQuery Flot library like so. 66 00:04:13,823 --> 00:04:18,263 Just require it. 67 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. 68 00:04:24,765 --> 00:04:28,083 There's two more awesome volo commands that you have to try. 69 00:04:28,083 --> 00:04:30,749 Volo build builds your site into an optimized version. 70 00:04:30,749 --> 00:04:34,969 It basically concatenates and minifies all your CSS and JavaScript. 71 00:04:36,599 --> 00:04:40,587 It puts it into a www-build directory. 72 00:04:40,587 --> 00:04:44,037 After you've done that you can say volo gh deploy 73 00:04:44,037 --> 00:04:47,484 It asks you where to put it at first, if you've never done this before. 74 00:04:48,899 --> 00:04:51,746 And that repo doesn't exist yet. 75 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 76 00:04:54,632 --> 00:04:59,055 and deploy it onto Github pages for me. 77 00:04:59,055 --> 00:05:07,057 And just like that, I can go to my App and it's live. 78 00:05:07,057 --> 00:05:10,885 Notice how it's hosted on the github pages URL. 79 00:05:10,885 --> 00:05:13,832 So in about 10 seconds, I was able to deploy my app. 80 00:05:13,832 --> 00:05:16,158 This works whether or not the repo already exists 81 00:05:16,158 --> 00:05:20,343 and pushes into onto the GH pages branch. 82 00:05:20,343 --> 00:05:22,988 And that's it for Volo. 83 00:05:22,988 --> 00:05:25,308 There's also the gamestub template 84 00:05:25,308 --> 00:05:29,490 which if you take a look at that, and see, comes with a basic game 85 00:05:29,490 --> 00:05:32,082 that lets you control a box with arrow keys. 86 00:05:32,082 --> 00:05:34,897 It's still very simplistic, but if you look at the code 87 00:05:34,897 --> 00:05:41,676 it comes with a full game loop and an input library, 88 00:05:41,676 --> 00:05:46,181 which helps a lot. 89 00:05:46,181 --> 00:05:51,371 So there's a render function and a mainfunction which is the main game loop. 90 00:05:58,308 --> 00:06:01,398 The last 2 templates are the list-detail template and the tab-view template. 91 00:06:01,398 --> 00:06:03,775 These come with everything that the App-stub template does, 92 00:06:03,775 --> 00:06:09,078 but also a full UI library to help you get writing apps quickly. 93 00:06:09,078 --> 00:06:10,946 So this is the list-detail template. 94 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. 95 00:06:16,587 --> 00:06:19,321 You can see a list of items then click on them to see the details 96 00:06:19,321 --> 00:06:22,015 and you can edit the details 97 00:06:27,675 --> 00:06:30,227 and it propagates throughout the app, 98 00:06:30,227 --> 00:06:31,980 even back here in the list view. 99 00:06:31,980 --> 00:06:35,086 You can also add new items. 100 00:06:45,948 --> 00:06:47,874 And that all works! 101 00:06:47,874 --> 00:06:48,748 You can view more details about the 102 00:06:48,748 --> 00:06:55,184 UI library at the Mortar layouts project, which is linked to in the README. 103 00:06:55,184 --> 00:06:59,059 This implements that application user interface 104 00:06:59,059 --> 00:07:04,071 and describes how you can use it and how you can modify it. 105 00:07:04,071 --> 00:07:06,631 I'll show you how the list detail template uses it. 106 00:07:06,631 --> 00:07:09,354 This is the index.html. 107 00:07:09,354 --> 00:07:12,482 There's two special tags, x-view and x-listview. 108 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, 109 00:07:18,902 --> 00:07:24,487 and you can compose these views so that you can put them inside each other. 110 00:07:24,487 --> 00:07:28,499 There's a few special attributes, such as the data view attribute on a button. 111 00:07:28,499 --> 00:07:35,802 This makes this view appear when the button is pressed. This is just a CSS selector. 112 00:07:35,807 --> 00:07:40,790 You can view more details about this at the Mortar layout repository 113 00:07:40,790 --> 00:07:43,666 which is linked to in the README 114 00:07:43,666 --> 00:07:46,608 The other template is the tab-view template 115 00:07:46,608 --> 00:07:50,990 which is very similar to the list-detail template, just with a little bit different HTML. 116 00:07:50,990 --> 00:07:54,042 This comes with a list view just like the other app, 117 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. 118 00:07:58,194 --> 00:08:03,590 Which kind of simulate tabs. So, if I go into here and view this item 119 00:08:03,590 --> 00:08:04,983 and go over to these other sections, 120 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. 121 00:08:11,306 --> 00:08:14,205 This is all part of the Mortar layouts library. 122 00:08:15,220 --> 00:08:17,304 So that's about it. If you have any problems, 123 00:08:17,304 --> 00:08:19,159 feel free to file some issues on Github. 124 00:08:19,558 --> 00:08:21,001 Thanks for watching!