Введение
Для того, чтобы вы быстро могли начать создавать ваши web-приложения, мы предусмотрели несколько шаблонов, в которых уже многое настроено. Каждый шаблон - статический web-проект с интрументами для сборки и деплоя.
Что вы получите:
- Минимальную и хорошо сформированную HTML-структуру
Предварительно настроеный manifest.webapp- JavaScript библиотеки для взаимодействий с макетом
- require.js для структурирования вашего JavaScript-кода
- volo для автоматизации локальной разработки и деплоя
- готовые шаблоны (некоторые из шаблонов)
Вы можете посмотреть все доступные шаблоны в репозитории mortar. Доступные сейчас:
- mortar-app-stub: пустой шаблон, который содержит только необходимые вещи для начала работы
- mortar-list-detail: содержит библиотеки шаблонов и устанавливает list-detail шаблон для вас
- mortar-game-stub: минимальный шаблон web-игры который обрабатывает ввод и render loop
Starting with the App Stub Template
You can simply use git to get the template from this repo:
git clone [email protected]:mozilla/mortar-app-stub.git myapp
Using volo is recommended, however. volo is a tool for automating projects, and you'll use it with this template, so go ahead and install it. You first need node.js, which you can download from here. Once you have node, install volo:
npm install -g volo
Now you can just use the create command:
volo create myproject mozilla/mortar-app-stub
When future templates are available, you can use the same create command with different template URLs.
Что нового?
All your HTML, CSS, and JavaScript are under the www directory, so start coding! You'll see a bunch of stuff in there, but feel free to remove anything you don't need.
The template uses require.js to manage JavaScript. If you look in www/js/app.js you'll see that it defines the main module and loads a few libraries like zepto. The Marketplace JavaScript library is also included, which enables in-app payments and receipt verification. You don't need this if you're a free app without in-app payments.
Below that, you'll see the line:
define(function(require) {
That defines the main module for your app, and you should start coding within the function. You can use require to load in other modules, the same way zepto is loaded. Check out the require.js API to learn more about modules.
Note: By default, modules are loaded from www/js/lib. If you want to load something from www/js, which is your working directory, use the syntax require('./mylib') instead of just require('mylib')
You can edit CSS in www/css/app.css. Typically you should @import additional CSS files at the top of this file instead of using the <link> tag to include them. This allows the volo optimizer to inline all the CSS when building for deploying.
Finally, volo provides several helpful commands that you can use:
$ volo serve # Fire up a local development server $ volo add <library> # Add the JavaScript library $ volo build # Build an optimized version of the app into www-built $ volo ghdeploy # Deploy the built version to github (need to build first)
Всё это должно быть запущено в корне вашего проекта. There are a few other commands and you can view the full list by simply typing volo.
Note: volo itself only has a few built-in commands. The app template provides the serve, build, ghdeploy, and other commands.
Учебник
Чтобы получить больше информации о шаблонах, посмотрите Weather App Tutorial который показывает как пошагово создать приложение с этими шаблонами. It dives into the volo commands more specifically and explains the template in more detail.