[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.58,0:00:05.15,Default,,0000,0000,0000,,Hey guys, my name is James Long and I'm here to talk to you about Mortar.
Dialogue: 0,0:00:06.23,0:00:07.92,Default,,0000,0000,0000,,Mortar is a collection of project templates
Dialogue: 0,0:00:07.92,0:00:10.42,Default,,0000,0000,0000,,to help you get started writing web apps quickly.
Dialogue: 0,0:00:10.42,0:00:13.10,Default,,0000,0000,0000,,You can start by going to the Developer Hub
Dialogue: 0,0:00:13.10,0:00:17.21,Default,,0000,0000,0000,,at marketplace.firefox.com/developers.
Dialogue: 0,0:00:17.21,0:00:18.88,Default,,0000,0000,0000,,Click on 'Build your app'
Dialogue: 0,0:00:20.45,0:00:24.12,Default,,0000,0000,0000,,and go down to App Templates.
Dialogue: 0,0:00:24.12,0:00:27.18,Default,,0000,0000,0000,,You'll see some information about the templates available
Dialogue: 0,0:00:27.18,0:00:30.55,Default,,0000,0000,0000,,and some installation instructions.
Dialogue: 0,0:00:30.55,0:00:33.05,Default,,0000,0000,0000,,There's also a link to the Mortar repo,
Dialogue: 0,0:00:33.05,0:00:36.89,Default,,0000,0000,0000,,which is a project that lists all the available templates as sub-projects.
Dialogue: 0,0:00:36.89,0:00:41.73,Default,,0000,0000,0000,,There's an App-stub template, Game-stub, List-detail and a Tab-view template.
Dialogue: 0,0:00:41.73,0:00:44.32,Default,,0000,0000,0000,,You can see installation instructions for the templates
Dialogue: 0,0:00:44.32,0:00:48.05,Default,,0000,0000,0000,,back over on the Developer Hub and some more information about it.
Dialogue: 0,0:00:48.05,0:00:50.97,Default,,0000,0000,0000,,I'm just going to take you through it here.
Dialogue: 0,0:00:50.97,0:00:54.54,Default,,0000,0000,0000,,The App-stub template is a minimal template that comes with a few things hooked up for you.
Dialogue: 0,0:00:54.54,0:00:56.68,Default,,0000,0000,0000,,This is what it looks like when you download it.
Dialogue: 0,0:00:56.68,0:00:58.78,Default,,0000,0000,0000,,It just comes with an installation button.
Dialogue: 0,0:00:59.84,0:01:02.54,Default,,0000,0000,0000,,You can see in the index.html that there's not much there,
Dialogue: 0,0:01:02.54,0:01:05.85,Default,,0000,0000,0000,,but it's enough to help you out: Just some basic HTML,
Dialogue: 0,0:01:05.85,0:01:10.93,Default,,0000,0000,0000,,the installation button, and Require.js, which is hooked up for you already.
Dialogue: 0,0:01:10.93,0:01:14.37,Default,,0000,0000,0000,,If you don't know what Require.js is, just go to RequireJS.org.
Dialogue: 0,0:01:14.37,0:01:18.52,Default,,0000,0000,0000,,It's a JavaScript module system.
Dialogue: 0,0:01:18.52,0:01:22.66,Default,,0000,0000,0000,,It also comes with a manifest.webapp already written out for you
Dialogue: 0,0:01:22.66,0:01:25.69,Default,,0000,0000,0000,,and you can just come in here and configure it.
Dialogue: 0,0:01:25.69,0:01:28.78,Default,,0000,0000,0000,,You may have noticed the www folder.
Dialogue: 0,0:01:28.78,0:01:32.10,Default,,0000,0000,0000,,If you go back to the root of the project you'll see some folders and files.
Dialogue: 0,0:01:32.10,0:01:36.22,Default,,0000,0000,0000,,Node modules and tools just basically contain things for volo.
Dialogue: 0,0:01:36.22,0:01:38.80,Default,,0000,0000,0000,,www is where all your static assets live
Dialogue: 0,0:01:38.80,0:01:41.86,Default,,0000,0000,0000,,and there's just a few other files for extra stuff.
Dialogue: 0,0:01:41.86,0:01:44.63,Default,,0000,0000,0000,,Most of the time you'll be working in here.
Dialogue: 0,0:01:44.63,0:01:49.100,Default,,0000,0000,0000,,Another thing is it comes with volo, which is what I'm going to show you right now.
Dialogue: 0,0:01:49.100,0:01:52.80,Default,,0000,0000,0000,,Volo is a tool for managing web projects.
Dialogue: 0,0:01:52.80,0:01:54.15,Default,,0000,0000,0000,,It's built on node.js.
Dialogue: 0,0:01:54.15,0:01:57.17,Default,,0000,0000,0000,,If you don't have node you're going to have to install it, but it's pretty easy.
Dialogue: 0,0:01:57.17,0:02:02.79,Default,,0000,0000,0000,,Just go to nodejs.org, click on install and get the binary.
Dialogue: 0,0:02:02.79,0:02:08.37,Default,,0000,0000,0000,,Once you have node installed, just type npm install -g volo.
Dialogue: 0,0:02:08.37,0:02:12.58,Default,,0000,0000,0000,,This will install volo globally.
Dialogue: 0,0:02:12.58,0:02:14.40,Default,,0000,0000,0000,,Volo has a few commands you can use.
Dialogue: 0,0:02:14.40,0:02:15.94,Default,,0000,0000,0000,,volo create is one of them,
Dialogue: 0,0:02:15.94,0:02:18.15,Default,,0000,0000,0000,,which takes the name of your app
Dialogue: 0,0:02:18.15,0:02:27.47,Default,,0000,0000,0000,,and then a github reference or any other URL to a template such as mozilla mortar appstub
Dialogue: 0,0:02:27.47,0:02:29.51,Default,,0000,0000,0000,,and this will create your app based on the template.
Dialogue: 0,0:02:29.51,0:02:33.82,Default,,0000,0000,0000,,This is a quick way to create apps based on the Mortar templates.
Dialogue: 0,0:02:33.82,0:02:39.24,Default,,0000,0000,0000,,So now there's an app for that we can cd into.
Dialogue: 0,0:02:39.24,0:02:42.15,Default,,0000,0000,0000,,Another volo command that you can use is volo serve.
Dialogue: 0,0:02:42.15,0:02:44.34,Default,,0000,0000,0000,,And it fires up a development server
Dialogue: 0,0:02:44.34,0:02:51.28,Default,,0000,0000,0000,,so that you can view your site in the browser.
Dialogue: 0,0:02:51.28,0:02:56.18,Default,,0000,0000,0000,,Another command is volo add which adds JavaScript dependencies to your site.
Dialogue: 0,0:02:56.18,0:03:04.26,Default,,0000,0000,0000,,So, I can say volo add zepto and it adds it.
Dialogue: 0,0:03:04.26,0:03:07.32,Default,,0000,0000,0000,,So if I go into the lib directory in JS you can see it has zepto now.
Dialogue: 0,0:03:10.13,0:03:14.66,Default,,0000,0000,0000,,Now I can go into my javascript app.js file and require zepto.
Dialogue: 0,0:03:14.66,0:03:25.77,Default,,0000,0000,0000,,It's already actually doing that, let's just make sure that it's getting it.
Dialogue: 0,0:03:26.97,0:03:28.82,Default,,0000,0000,0000,,And there it is.
Dialogue: 0,0:03:28.82,0:03:31.60,Default,,0000,0000,0000,,Now you'll notice we're using zepto with this require function
Dialogue: 0,0:03:31.60,0:03:33.60,Default,,0000,0000,0000,,because we're using require.js.
Dialogue: 0,0:03:33.60,0:03:37.73,Default,,0000,0000,0000,,Since we're using require.js all libraries have to be defined as a module.
Dialogue: 0,0:03:37.73,0:03:40.03,Default,,0000,0000,0000,,You do this with this define function.
Dialogue: 0,0:03:40.03,0:03:43.80,Default,,0000,0000,0000,,But what happens if you want to use a third party library that doesn't do this.
Dialogue: 0,0:03:43.80,0:03:48.07,Default,,0000,0000,0000,,Volo add actually can automatically wrap libraries.
Dialogue: 0,0:03:48.07,0:03:54.55,Default,,0000,0000,0000,,So, say you want to include this font library you can pass a direct URL into volo add.
Dialogue: 0,0:03:54.55,0:03:59.65,Default,,0000,0000,0000,,It sees that it's not a module and asks you for any dependencies.
Dialogue: 0,0:03:59.65,0:04:02.83,Default,,0000,0000,0000,,It also asks you what global to export.
Dialogue: 0,0:04:02.83,0:04:11.50,Default,,0000,0000,0000,,It actually modifies a jQuery object so it doesn't export anything. (I'm gonna just ignore that)
Dialogue: 0,0:04:11.50,0:04:13.82,Default,,0000,0000,0000,,Now I could use the jQuery Flot library like so.
Dialogue: 0,0:04:13.82,0:04:18.26,Default,,0000,0000,0000,,Just require it.
Dialogue: 0,0:04:18.26,0:04:24.76,Default,,0000,0000,0000,,Note how I don't care about the return value because it just attaches itself to the jQuery object.
Dialogue: 0,0:04:24.76,0:04:28.08,Default,,0000,0000,0000,,There's two more awesome volo commands that you have to try.
Dialogue: 0,0:04:28.08,0:04:30.75,Default,,0000,0000,0000,,Volo build builds your site into an optimized version.
Dialogue: 0,0:04:30.75,0:04:34.97,Default,,0000,0000,0000,,It basically concatenates and minifies all your CSS and JavaScript.
Dialogue: 0,0:04:36.60,0:04:40.59,Default,,0000,0000,0000,,It puts it into a www-build directory.
Dialogue: 0,0:04:40.59,0:04:44.04,Default,,0000,0000,0000,,After you've done that you can say volo gh deploy
Dialogue: 0,0:04:44.04,0:04:47.48,Default,,0000,0000,0000,,It asks you where to put it at first, if you've never done this before.
Dialogue: 0,0:04:48.90,0:04:51.75,Default,,0000,0000,0000,,And that repo doesn't exist yet.
Dialogue: 0,0:04:51.75,0:04:54.63,Default,,0000,0000,0000,,So I'm going to say no and it's actually going to create it for me
Dialogue: 0,0:04:54.63,0:04:59.06,Default,,0000,0000,0000,,and deploy it onto Github pages for me.
Dialogue: 0,0:04:59.06,0:05:07.06,Default,,0000,0000,0000,,And just like that, I can go to my App and it's live.
Dialogue: 0,0:05:07.06,0:05:10.88,Default,,0000,0000,0000,,Notice how it's hosted on the github pages URL.
Dialogue: 0,0:05:10.88,0:05:13.83,Default,,0000,0000,0000,,So in about 10 seconds, I was able to deploy my app.
Dialogue: 0,0:05:13.83,0:05:16.16,Default,,0000,0000,0000,,This works whether or not the repo already exists
Dialogue: 0,0:05:16.16,0:05:20.34,Default,,0000,0000,0000,,and pushes into onto the GH pages branch.
Dialogue: 0,0:05:20.34,0:05:22.99,Default,,0000,0000,0000,,And that's it for Volo.
Dialogue: 0,0:05:22.99,0:05:25.31,Default,,0000,0000,0000,,There's also the gamestub template
Dialogue: 0,0:05:25.31,0:05:29.49,Default,,0000,0000,0000,,which if you take a look at that, and see, comes with a basic game
Dialogue: 0,0:05:29.49,0:05:32.08,Default,,0000,0000,0000,,that lets you control a box with arrow keys.
Dialogue: 0,0:05:32.08,0:05:34.90,Default,,0000,0000,0000,,It's still very simplistic, but if you look at the code
Dialogue: 0,0:05:34.90,0:05:41.68,Default,,0000,0000,0000,,it comes with a full game loop and an input library,
Dialogue: 0,0:05:41.68,0:05:46.18,Default,,0000,0000,0000,,which helps a lot.
Dialogue: 0,0:05:46.18,0:05:51.37,Default,,0000,0000,0000,,So there's a render function and a mainfunction which is the main game loop.
Dialogue: 0,0:05:58.31,0:06:01.40,Default,,0000,0000,0000,,The last 2 templates are the list-detail template and the tab-view template.
Dialogue: 0,0:06:01.40,0:06:03.78,Default,,0000,0000,0000,,These come with everything that the App-stub template does,
Dialogue: 0,0:06:03.78,0:06:09.08,Default,,0000,0000,0000,,but also a full UI library to help you get writing apps quickly.
Dialogue: 0,0:06:09.08,0:06:10.95,Default,,0000,0000,0000,,So this is the list-detail template.
Dialogue: 0,0:06:10.95,0:06:16.52,Default,,0000,0000,0000,,This is what you get when you first download the template. It's a fully working list detail app.
Dialogue: 0,0:06:16.59,0:06:19.32,Default,,0000,0000,0000,,You can see a list of items then click on them to see the details
Dialogue: 0,0:06:19.32,0:06:22.02,Default,,0000,0000,0000,,and you can edit the details
Dialogue: 0,0:06:27.68,0:06:30.23,Default,,0000,0000,0000,,and it propagates throughout the app,
Dialogue: 0,0:06:30.23,0:06:31.98,Default,,0000,0000,0000,,even back here in the list view.
Dialogue: 0,0:06:31.98,0:06:35.09,Default,,0000,0000,0000,,You can also add new items.
Dialogue: 0,0:06:45.95,0:06:47.87,Default,,0000,0000,0000,,And that all works!
Dialogue: 0,0:06:47.87,0:06:48.75,Default,,0000,0000,0000,,You can view more details about the
Dialogue: 0,0:06:48.75,0:06:55.18,Default,,0000,0000,0000,,UI library at the Mortar layouts project, which is linked to in the README.
Dialogue: 0,0:06:55.18,0:06:59.06,Default,,0000,0000,0000,,This implements that application user interface
Dialogue: 0,0:06:59.06,0:07:04.07,Default,,0000,0000,0000,,and describes how you can use it and how you can modify it.
Dialogue: 0,0:07:04.07,0:07:06.63,Default,,0000,0000,0000,,I'll show you how the list detail template uses it.
Dialogue: 0,0:07:06.63,0:07:09.35,Default,,0000,0000,0000,,This is the index.html.
Dialogue: 0,0:07:09.35,0:07:12.48,Default,,0000,0000,0000,,There's two special tags, x-view and x-listview.
Dialogue: 0,0:07:12.48,0:07:18.90,Default,,0000,0000,0000,,The list-view implements the listview structure, that implements an element with a header and a footer,
Dialogue: 0,0:07:18.90,0:07:24.49,Default,,0000,0000,0000,,and you can compose these views so that you can put them inside each other.
Dialogue: 0,0:07:24.49,0:07:28.50,Default,,0000,0000,0000,,There's a few special attributes, such as the data view attribute on a button.
Dialogue: 0,0:07:28.50,0:07:35.80,Default,,0000,0000,0000,,This makes this view appear when the button is pressed. This is just a CSS selector.
Dialogue: 0,0:07:35.81,0:07:40.79,Default,,0000,0000,0000,,You can view more details about this at the Mortar layout repository
Dialogue: 0,0:07:40.79,0:07:43.67,Default,,0000,0000,0000,,which is linked to in the README
Dialogue: 0,0:07:43.67,0:07:46.61,Default,,0000,0000,0000,,The other template is the tab-view template
Dialogue: 0,0:07:46.61,0:07:50.99,Default,,0000,0000,0000,,which is very similar to the list-detail template, just with a little bit different HTML.
Dialogue: 0,0:07:50.99,0:07:54.04,Default,,0000,0000,0000,,This comes with a list view just like the other app,
Dialogue: 0,0:07:54.04,0:07:58.10,Default,,0000,0000,0000,,but you'll notice that it's actually a sub-view of this main view, which comes with different sections.
Dialogue: 0,0:07:58.19,0:08:03.59,Default,,0000,0000,0000,,Which kind of simulate tabs. So, if I go into here and view this item
Dialogue: 0,0:08:03.59,0:08:04.98,Default,,0000,0000,0000,,and go over to these other sections,
Dialogue: 0,0:08:04.98,0:08:10.91,Default,,0000,0000,0000,,you'll notice that it actually keeps my place and I can keep pressing back to go back here.
Dialogue: 0,0:08:11.31,0:08:14.20,Default,,0000,0000,0000,,This is all part of the Mortar layouts library.
Dialogue: 0,0:08:15.22,0:08:17.30,Default,,0000,0000,0000,,So that's about it. If you have any problems,
Dialogue: 0,0:08:17.30,0:08:19.16,Default,,0000,0000,0000,,feel free to file some issues on Github.
Dialogue: 0,0:08:19.56,0:08:21.00,Default,,0000,0000,0000,,Thanks for watching!