Основы Titanium: 11 шагов к поддерживаемому приложению

Я пару раз говорил об «улучшении титана», но подумал, что было бы разумно также описать, как на самом деле правильно настроить приложение. В этом руководстве я опишу, что я считаю правильным способом структурировать приложение.

примечание: мнения расходятся по этому поводу, но я всегда настраиваю приложения именно так, и это окупилось. Просто возьмите то, что вам нравится из учебника, и сделайте его своим.

1. Создайте приложение Alloy.

Используйте Appcelerator Studio для создания нового проекта Alloy. Важно использовать сплав Alloy, а не Ti Classic. Alloy - отличная основа для создания хорошо структурированных приложений, поскольку это MVC.

2. Используйте Alloy.js только для самого необходимого.

Чаще всего я вижу файлы Alloy.js длиной в сотни строк с множеством глобальных переменных, функций и вычислений. Alloy.js запускается при запуске, и все объявленные в нем переменные на самом деле являются глобальными. Хотя это может показаться полезным, на самом деле это не так.

Alloy.js отлично подходит для простых вычислений вещей, которые вам нужны во всем приложении. Например, в вашем приложении есть представления, ширина которых должна быть на 20dp меньше ширины устройства. Если вы вычислите это в Alloy.js и поместите в Alloy.Globals, вы сможете правильно использовать его во всех файлах tss в своем приложении.

3. Не злоупотребляйте Alloy.Globals

Хотя простые переменные могут быть на глобальных объектах, не размещайте тонны переменных и / или функций на глобальных объектах. Это то, что должно быть в lib.

4. Используйте папку app / lib для методов, которые будут использоваться во всем приложении.

Папка app / lib отлично подходит для размещения множества необходимых функций в вашем приложении. По моему опыту, даже здорово, если эта функция используется только в одном контроллере. Он сохраняет контроллер в чистоте и прост в обслуживании.

Но помните, что вы не создаете большие файлы в папке lib. Самый простой способ предотвратить это - сгруппировать определенные функции в файлах. Поскольку вы можете создавать папки в папке lib, можно легко разделить проблемы. Например, у вас есть приложение, в котором у пользователя есть профиль, и пользователь должен войти в систему. Вы можете создать все функции в 1 файле, но я рекомендую создать папку «Пользователь» в папке «lib» и в этой папке. у вас есть 2 файла: Auth.js и Profile.js. Auth заботится об аутентификации (например, о вызове входа в систему, хранении токенов и т. Д.), А Profile заботится о пользовательских данных. Больше функциональности для пользователя? Создайте новый файл с правильным именем.

5. Поместите конфигурации в config.json.

Это может показаться тривиальным, но во многих приложениях этого нет. У многих приложений, которые я вижу, есть настройки в самом приложении. Жестко запрограммированные URL-адреса API везде. Вместо этого вы хотите поместить базовый URL (http://api.example.com/) в файл config.json. Особенно, если этот URL-адрес отличается для среды разработки и производства. В файле config.json есть разделы для каждой среды, используйте их! Свойства, хранящиеся в файле config.json, доступны через Alloy.CFG. [Prop]

6. Используйте тему для оформления своего приложения.

Большинство приложений, которые я вижу, имеют один из следующих способов стилизации:

Скопируйте и вставьте цветовые коды и шрифты во все файлы tss
Добавьте стиль в пространство имен Alloy.Globals
Добавьте стиль в config.json

Третий вариант действительно хорош, но я обычно создаю тему просто для стилизации приложения. Внутри темы вы можете создать новый config.json, который не будет загрязнять «обычный» config.json и содержать этот файл в чистоте. При компиляции оба файла все равно объединятся, но это облегчит вам обслуживание. Чтобы настроить тему, добавьте это свойство в свой обычный config.json:

"theme" : "themeName"

Поскольку это находится в вашей конфигурации, вы даже можете создавать разные темы для разных сред, если хотите.

Затем создайте новый файл config.json следующим образом:

/app/themes/themeName/config.json

Затем заполните свой config.json следующим образом:

{
   "global": { 
      "design": {
      }
   }
}

В дизайне я обычно создаю свойство шрифты и цвета. Таким образом, я могу использовать серый цвет, который я выбрал во всем приложении, и изменить его за один раз. Просто используйте это в tss:

"#myLabel":{
    color: Alloy.CFG.design.colors.mainGrey,
    font: Alloy.CFG.design.fonts.mainText
}

Если вы часто используете одно и то же комбо, вы можете проделать тот же трюк в app.tss и применить его к классу, который можно использовать во всем приложении:

7. Используйте глобальный стиль в app.tss.

Если в вашем приложении есть ярлыки, стилизованные одинаково, вы можете захотеть централизовать стиль вместо того, чтобы повторять его повсюду. Ваш app.tss в этом случае должен выглядеть примерно так:

".defaultLabel":{
    color: Alloy.CFG.design.colors.mainGrey,
    font: Alloy.CFG.design.fonts.mainText,
    left: 20,
    right: 20,
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
}

Затем в любом представлении вы можете применить класс defaultLabel, и он получит стиль, определенный в app.tss. Необходимо переопределить 1 конкретный элемент, сделайте это в tss контроллера.

8. Не пытайтесь втиснуть все в один файл.

Когда ваше приложение растет, растут и ваши файлы представления / контроллера / стиля. Не допускайте, чтобы они стали слишком большими. Я уже говорил об этом в Улучшении титана. Все компоненты вашего представления могут быть удалены и помещены в отдельный контроллер. Это дает вашему приложению больше места, и вы можете легче поддерживать код. У вас в приложении есть кнопка с красивой анимацией? Нет необходимости хранить это в представлении, которое вы используете, сделайте его отдельным контроллером и включите его в свое представление с помощью тега ‹require›.

Когда ваш файл контроллера (.js) становится слишком большим, попробуйте переместить определенные функции в папку lib. Благодаря этому вы можете сохранить логику в папке lib, и ваш контроллер останется чистым.

9. Начните с папок i18n.

Даже если в вашем приложении только 1 язык, хранение текстов в папке i18n упростит обслуживание. Если вы все равно решите добавить язык позже, значит, вы уже настроили правильную структуру, и приложение может сразу с этим справиться. В файлах tss вы можете просто использовать функцию L ().

text: L("MyTextVar")

Даже мои простые приложения, которые я опубликовал, содержат лишь несколько строк, для которых у меня есть папки i18n. Попробуй так же. Подробнее по теме в документации.

10. Не используйте Ti.UI.create…

Это одна из тем, о которой много говорят, но каждый раз, когда я в конечном итоге использую функцию Ti.UI.create…, это оказывается для меня плохим. Я всегда забываю, что в моем коде контроллера есть функции создания, и при обновлении пользовательского интерфейса мне действительно приходится искать эти элементы. Также сложно понять, в какой структуре находятся элементы. Каковы их родители и дети. Вам необходимо прочитать весь контроллер, прежде чем вы сможете достоверно сказать, что это за структура.

Вместо этого, если вам нужен специальный элемент в вашем коде, выполните:

элемент уже присутствует в вашем представлении, но скрыт
Если элемент более сложный, создайте новый контроллер (предпочтительно внутри папки, чтобы можно было классифицировать контроллеры) и используйте require () в своем контроллере, чтобы получить этот элемент и вставить его в свое представление.

Итак, просто нужно вставить ImageView, чтобы вы могли показать результат изображения, сделанного камерой? Сделайте ImageView скрытым в вашем представлении. Является ли ваш результат изображения более сложным (например, ImageView с полупрозрачным видом сверху, с текстом внутри), вы все равно можете использовать эту стратегию, но если вы используете ее более чем в одном месте в своем приложении, было бы разумно сделать новый контроллер.

11. Используйте папки

Папки можно использовать везде. В папках controllers / views / styles или в папках lib. Также в папках с активами можно углубиться. Сделайте это, чтобы ваше приложение было удобнее в сопровождении. Получил группу контроллеров, которые все о «профиле» поместили их в папку «профиль».

Совет. Чтобы создать файл контроллера / представления / стиля в папке, вам не нужно создавать эти файлы вручную или перемещать их в папку, созданную вручную. Просто щелкните свой проект правой кнопкой мыши, выберите «New› Alloy Controller », а затем введите« profile / page.js »в качестве имени, чтобы создать контроллер с именем« page.js »в папке« profile ». Он создаст папку, если она еще не существует, а также сделает то же самое для файла представления и стиля.

Заключительное примечание

Это рекомендации, которых я стараюсь придерживаться. Вероятно, их больше, но я думаю, что это хорошее начало. Есть еще? Ответьте на эту статью и поделитесь своими мыслями! Опять же, это мои рекомендации. Если вы предпочитаете что-то другое, не стесняйтесь их комментировать. Мне интересно узнать ваше мнение.

Я занимаюсь краудфандингом этих статей (и других). Пополните меня на Patreon

Основы Titanium: 11 шагов к поддерживаемому приложению