Если вы использовали Kendo UI Mobile, то вы знаете, что одна из вещей, которые он действительно делает, это то, что называется «адаптивный рендеринг». Здесь он адаптируется к внешнему виду операционной системы для устройства, на котором он работает. Это действительно привлекательная функция — при условии, что вы хотите, чтобы ваше приложение чувствовало конкретное устройство.
Иногда, однако, вы не хотите этого. Вам нужно приложение, которое везде выглядит одинаково. Для этих случаев мы создали тему Kendo UI Mobile Flat. Эта тема предназначена для обеспечения одинакового внешнего вида, независимо от устройства или операционной системы.
Я был поклонником плоской темы Kendo UI Mobile с момента ее первого запуска. Я использую его как тему де-факто для всех моих проектов Kendo UI Mobile. Одна из вещей, которую я всегда хотел, это иметь больше цветовых вариантов с Kendo UI Mobile и Flat UI. Telerik уже давно предлагает конструктор тем с технологией drag-and-drop для Kendo UI Mobile, который действительно хорош. Он позволяет вам настраивать как ОС, так и Flat Kendo UI Mobile. Это требует от вас придумать красивую цветовую палитру самостоятельно, а для тех из нас, кто не является дизайнером, даже это может быть немного сложным.
В прошлом месяце я приступил к созданию набора предопределенных переопределений тем для Kendo UI Mobile Flat UI. Я хотел позволить людям предварительно просмотреть их, а затем загрузить понравившийся и вставить его прямо в свое приложение. Первое, что мне нужно было сделать, это создать набор тем, и для этого мне нужно было немного вдохновения.
Куда пойти для вдохновения
Одним из первых мест, где я искал примеры цветовых палитр, был сайт jQuery Mobile . jQuery UI и jQuery Mobile уже давно предлагают отличный выбор тем, и я украл первые несколько цветовых палитр непосредственно оттуда (синий, красный, профессиональный).
Примерно в это же время я читал инструкции по дизайну материалов и заметил там несколько великолепных цветовых палитр . Затем я создал еще пять тем, полностью основанных на палитрах, вдохновленных Material Design.
Имея в руках восемь тем Kendo UI Mobile Flat, я приступил к созданию сайта, который бы надлежащим образом демонстрировал эти темы, и дал простые инструкции для получения файла темы и его установки в проекте. Так появился сайт Kendo Flat Themes .
Кендо Флэт Темы
Приложение Kendo Flat Themes — интересное исследование, потому что мне пришлось решить несколько довольно общих проблем с веб-приложениями…
- Как я могу хранить и обслуживать файлы CSS для пользователей для предварительного просмотра?
- Как я могу предоставить механизм загрузки?
- Как я могу гарантировать, что коллекция CSS-файлов может быть расширена без необходимости повторного развертывания файлов?
Я решил, что большую часть того, что мне нужно, можно было бы сделать с помощью Kendo UI для структуры приложения и виджетов UI, Bootstrap для разметки и Telerik Backend Services для хранения всех моих CSS-файлов. Веб-фреймворк, на котором я решил построить все это, был Express для NodeJS.
Выбор веб-платформы
Выбор основы обычно не составляет труда. Разработчики осваивают свои базовые навыки, как музыкант, играющий на скрипке. У нас есть скрипка, на которой мы любим играть, и мы не хотим играть на других. Для некоторых это ASP.NET, Ruby on Rails для других и, недавно, Express для Node.
Чем больше кода, который я пишу, и сайтов, которые я разрабатываю, тем проще мне будет мой веб-каркас. Как правило, я хочу, чтобы это полностью не мешало, пока мне это не нужно, а затем я склонен просить многое об этом. Вот почему я выбираю веб-фреймворк Express for Node.
Экспресс
Express — это радикально минималистичный веб-фреймворк с бесконечной мощью. Из коробки он делает очень мало, кроме маршрутизации HTTP-запросов и превращения шаблонов Jade в HTML. Это хорошо, потому что когда вы только начинаете работать над проектом, это действительно все, что вы делаете.
Экспресс настройка проекта
В моем случае в моем приложении только две страницы: одна — главная страница указателя, а вторая — страница «просмотра», которая отображает мобильное приложение Kendo UI в iFrame, завернутом в изображение телефона, которое я создал в Fireworks. , Приложение выглядит как SPA, но на самом деле это две страницы — одна встроена в другую.
Все файлы CSS хранятся в бэкэнд-сервисах Telerik в типе контента, который называется «CSSFiles».
Каждый файл имеет имя, базовый цвет и ссылку на сам файл. Так как Telerik Backend Services основан на MongoDB, я могу хранить реальные файлы в моих типах контента. Это так же, как я использую MongoDB, за исключением того, что я позволяю Telerik делать это, поскольку они также предоставляют отличный SDK для взаимодействия с этим экземпляром MongoDB, а также приятный визуальный интерфейс для работы с данными.
На настольных компьютерах пользователь получает Kendo UD DropDown List, который заполняется данными из типа CSSFiles в Backend Services. Каждый элемент в раскрывающемся списке содержит предварительный просмотр основного цвета рядом с именем.
После выбора темы URL-адрес iFrame изменяется на «/ viewer? Id =» и добавляется UID выбранного файла CSS.
change: function(e) {
var dataItem = e.sender.dataItem(),
src = 'viewer?id=' + dataItem.CSSFile;
// changing the src of the iframe reloads it
iframe.src = src;
}
На стороне сервера Express получает этот /viewerмаршрут и выполняет функцию. Затем эта функция использует библиотеку NPM Telerik Backend Services, чтобы выполнить HTTP-вызов для получения дополнительной информации о файле CSS с этим конкретным уникальным идентификатором. Это означает, что приложение вызывает сервер, а сервер общается с Telerik Backend Services. Обратите внимание, что нет необходимости размещать вызовы Backend Services на сервере . Я мог бы использовать API Backend Services прямо в браузере. Кроме того, ключи Backend Services не являются секретными. Мое сокрытие этого за общедоступным URL никоим образом не делает его более безопасным. Я решил использовать его на стороне сервера, так как я уже использовал Express и хотел централизовать свой API.
Express возвращает всю информацию о файле вместе с URL-адресом файла из Backend Services. Затем он отправляет обратно HTML-код для создания образца мобильного приложения Kendo UI и просто вставляет <link>в начало страницы URL-адрес, заданный в качестве URL-адреса файла CSS файла, возвращаемого Telerik Backend Services.
/* GET viewer page. */
router.get('/', function(req, res) {
var id = req.query.id;
if (id) {
files.getDownloadUrlById(id).then(function(url) {
res.render('viewer', { url: url });
});
}
else {
res.render('viewer', { url: '' });
}
});
Когда пользователь находит понравившийся шаблон, он нажимает кнопку загрузки. Это указывает им на «/ download? Id =», где id — это уникальный идентификатор файла. Экспресс направляет этот входящий запрос на метод «загрузки». Затем происходит нечто интересное …
/* GET download page. */
router.get('/download/:id', function(req, res) {
var id = req.params.id;
if (id) {
files.getById(id).then(function(file) {
// send the file down to the client
res.setHeader('Content-disposition', 'attachment; filename=' + file.result.Filename);
download.getFileByUri(file.result.Filename, file.result.Uri).then(function(css) {
res.send(css);
});
});
}
});
Сервер отправляет HTTP-запрос в Telerik Backend Services для необработанного файла CSS. Что он возвращает, так это фактический файл, представляющий собой набор текста, содержащий фактический CSS. Все это предоставляется Backend Services SDK . Затем он устанавливает соответствующую информацию заголовка в ответе Express, включая имя загрузки и каналы, которые возвращают ответ пользователю. В результате вместо смены страниц пользователь получает отличную чистую загрузку файла CSS, который был всего лишь беспорядочным идентификатором несколькими миллисекундами ранее.
Когда я хочу добавить новый файл CSS в коллекцию, я просто добавляю новую запись в тип в моем экземпляре Telerik Backend Services и загружаю файл CSS. Я не должен касаться переднего конца вообще.
Теперь, когда у меня было рабочее приложение, пришло время для развертывания.
Работает на моей машине!
Я ненавижу эту часть так сильно. Нет более разочаровывающего момента, чем когда вы берете приложение, которое отлично работает на вашем компьютере, и развертываете его на другом компьютере, на котором оно полностью сломано. Это также ужасное место для устранения неполадок. Я надеюсь, что вы любите файлы журналов и отлично отработали навыки поиска файлов.
Вот почему выбор правильного хостинг-провайдера имеет первостепенное значение.
Привет Модуль
Многие из вас могут знать, что Telerik недавно был приобретен Progress Software . Progress также владеет компанией под названием Modulus . У Modulus одна цель — сделать лучшее решение для хостинга Node доступным — период. Вот совет для вашей карьеры — когда ваша компания приобретается другой компанией, и у вас есть возможность использовать некоторые из продуктов этой новой компании, вы должны сделать это полностью!
На полном серьезе, когда я решил использовать Modulus, он столкнулся с довольно жесткой конкуренцией. Если вы собираетесь использовать Azure и Heroku, вам лучше знать, что вы делаете.
Модуль интересен мне, потому что они делают только Node. Вот и все. Хотите установить экземпляр WordPress? Существует множество других услуг хостинга, которые могут вам помочь, но Modulus не является одним из них. Они определенно поддерживают философию «делай одно и делай хорошо».
Так как они складываются?
Установка модуля
Модуль устанавливается глобально как библиотека NPM.
> npm install -g modulus
Следующим шагом является вход в систему или создание учетной записи.
> modulus login
После того как мы вошли в систему, пришло время создать новое приложение …
> modulus create kendo-flat-themes
Время развернуть.
> modulus deploy
По умолчанию модуль используется app.jsв качестве отправной точки для приложения Express. Начиная с Express 4, приложения запускаются путем выполнения отдельного файла веб-сервера в /bin/www. Модуль делает вашу точку входа достаточно простой для настройки, добавляя mainсвойство в ваш файл package.json.
{
"name": "kendo-flat-themes",
"version": "1.0.0",
"main": "./bin/www",
"dependencies": {
...
}
}
И с этим я был и работает! Все, что мне нужно было сделать, это купить доменное имя, а затем рассказать Модулю, что это было К счастью, это действительно легко сделать, просто добавив его в раздел «Администрирование» для своего проекта.
Я должен быть честным — это было намного проще, чем я ожидал. Хостинг приложений Node — это не всегда прогулка в парке, но Modulus прошла лишнюю милю, чтобы абстрагироваться от вас всех неприятных деталей развертывания, чтобы ваше приложение «просто работало». Если вы когда-либо были в кошмаре развертывания, вы знаете, насколько это ценно. Модуль Modulus CLI — это простой и изящный инструмент для работы. У него нет тонны запутанных вариантов, и команды делают то, что, как вы думаете, они должны делать.
Теперь я знаю, что вы думаете: «Берк, вашей компании принадлежит Модуль. Вы должны сказать хорошие вещи об этом.
Правда в том, что я не знаю.
Когда что-то не работает должным образом, я сообщаю об этом инженерам, чтобы они могли это исправить, но я не пишу в блоге об этом. Modulus — действительно лучший в своем роде сервис. Они выполнили свое обещание сделать Node правильно, и опыт начала работы — один из лучших в отрасли.
При этом, следующий естественный вопрос: «Сколько это стоит?»
Ценообразование модуля разделено на сервопривод, базу данных и хранилище файлов. Серво стоят по цене $ 0,02 в час , что приблизительно равно 48 центам в день . Каждый сервопривод запускает экземпляр вашего приложения, и вы можете в любое время увеличить или уменьшить его до более или менее сервоприводов. По умолчанию вы получаете один серво для вашего приложения. Базы данных стоят 5 долларов за гигабайт в месяц (MongoDB), а хранилище файлов — 1 доллар за гигабайт в месяц . Это означает, что если вы используете один сервопривод, такой как я, ваш счет будет составлять около $ 14,40 в месяц, в зависимости от того, сколько дней в текущем месяце. Обратите внимание, что они начинают с кредита в вашем аккаунте в размере 15 долларов США, что соответствует примерно 30-дневной пробной версии.
Сравните это с Heroku, которая предоставляет выделенные «Dynos» (такие же как Servos) за 0,05 доллара в час, что соответствует примерно 37 долларам в месяц.
Квартира там, где она есть
Пройдите эти новые плоские темы и дайте мне знать, что вы думаете. Пока вы в этом, попробуйте Kendo UI и модуль также. Если вы хотите создавать многофункциональные мобильные и веб-приложения на основе Node, Kendo UI и Modulus — это мощная комбинация, которая предоставляет все необходимое для самых современных сайтов. Узел становится горячим и горячим — сейчас самое время окунуть пальцы ног в воду.
Весь код для сайта Kendo Flat Themes можно найти на GitHub .