Быстрая разработка приложений или RAD — это метод очень быстрой разработки и тестирования приложений. Короче говоря, цель RAD — привлечь вашего клиента к разработке решения. Они проходят тестирование по мере создания, чтобы итеративно адаптировать решение. Конструкция переплетается с пользовательским дизайном. Поэтому очень важно двигаться быстро: быстро кодировать, быстро доставлять, собирать отзывы и быстро вносить изменения. Сеть является идеальной средой для этого.
С появлением Интернета доставка приложения для тестирования стала быстрее, чем когда-либо. Веб-приложения, как их обычно называют, могут поддерживать как самые простые, так и сложные программы. Веб-браузеры настолько мощны в наши дни, что доставка осуществляется мгновенно.
За последние несколько лет я экспериментировал с различными способами реализации RAD в Интернете. Лучше всего использовать GitHub Pages для размещения веб-приложения. Лучше всего то, что это бесплатно, и вашим пользователям не нужно ничего, кроме веб-браузера для тестирования на этапе пользовательского дизайна. Позвольте представить вам этот рабочий процесс.
1. Создайте статическую HTML-страницу
Первый шаг — настроить HTML-страницу с именем index.html. Это файл, который вы будете предоставлять своим пользователям — тот, который они будут загружать в свой браузер. Вот пример веб-приложения Excel Clipboard, которое я использовал в моем последнем сообщении в блоге:
<!doctype html>
<html lang="en">
<head>
<title>Excel Clipboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">Excel Clipboard Example</a>
<ul class="navbar-nav pull-right">
<li class="nav-item">
<a class="nav-link" href="https://github.com/martindrapeau/excel-clipboard">Code on GitHub</a>
</li>
</ul>
</nav>
...
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
HTML-документ разделен на три части:
- В теге HEAD указываются метатеги и каскадные таблицы стилей или файлы CSS.
- В теге BODY находятся HTML-элементы для отображения.
- В конце тегов BODY находятся активы JavaScript для загрузки.
Как только браузер загрузит файл HTML и файл CSS, он отобразит страницу. Параллельно он загрузит файлы JavaScript и, когда документ будет готов, запустит этот код.
Мое веб-приложение использует Bootstrap и jQuery. Эти активы загружаются непосредственно из соответствующих CDN, чтобы избежать необходимости размещать их самостоятельно.
Этот файл index.html является статическим, что означает, что он не был сгенерирован внутренним языком, таким как PHP или Java. Любая динамическая часть должна быть выполнена на JavaScript.
2. Использование JavaScript для создания динамического веб-приложения
В дополнение к активам Bootstrap я размещаю свой собственный файл app.js. Он содержит необходимый код JavaScript, чтобы сделать мое веб-приложение динамичным. Сам код заключен в знаменитую функцию jQuery document ready, которая начинает выполняться после того, как HTML-документ загружен, отрендерен и все готово к работе.
$(document).ready(function() {
function buildTable(header, rows) {
var $thead = $('table>thead').empty();
var $tbody = $('table>tbody').empty();
var $tr = $('<tr></tr>').appendTo($thead);
header.forEach(function(value) {
$tr.append('<th>' + value + '</th>');
});
rows.forEach(function(row) {
var $tr = $('<tr></tr>').appendTo($tbody);
row.forEach(function(value) {
$tr.append('<td>' + value + '</td>');
});
});
}
function onPaste(e) {
if (!e.originalEvent.clipboardData || !e.originalEvent.clipboardData.items) return;
var items = e.originalEvent.clipboardData.items;
var data;
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'text/plain') {
data = items[i];
break;
}
}
if (!data) return;
data.getAsString(function(text) {
text = text.replace(/\r/g, '').trim('\n');
var rowsOfText = text.split('\n');
var header = [];
var rows = [];
rowsOfText.forEach(function(rowAsText) {
// Remove wrapping double quotes
var row = rowAsText.split('\t').map(function(colAsText) {
return colAsText.trim().replace(/^"(.*)"$/, '$1');
});
// The first row with data is assumed to be the header
if (header.length == 0) {
// Remove empty columns
while (row.length && !row[row.length-1].trim()) row.pop();
if (row.length == 0) return;
header = row;
} else {
rows.push(row.slice(0, header.length));
}
});
buildTable(header, rows);
});
}
$(document).on('paste', onPaste);
});
JavaScript в этом веб-приложении прослушивает событие Paste, чтобы создать таблицу данных, скопированных из Excel. Он демонстрирует использование API буфера обмена. Одна из многих функций, доступных в современных браузерах.
3. Рабочий процесс разработки
На этом этапе я просто загружаю файл HTML в свой браузер для тестирования и разработки. Используя обычный текстовый редактор (в моем случае Sublime), я вношу и сохраняю изменения локально. Чтобы увидеть изменения вживую, я просто обновляю страницу. Быстрее этого не бывает.
4. Опубликовать на GitHub
Пришло время создать новый публичный репозиторий на GitHub. GitHub здесь служит многим целям. Для RAD это репозиторий кода, контроль версий, платформа для совместной работы и, самое главное, сервер, на котором размещено веб-приложение. GitHub Pages избавляет от необходимости запускать собственный сервер.
Репозиторий буфера обмена Excel выглядит следующим образом:
Чтобы обслуживать веб-приложение, мне пришлось включить GitHub Pages. Это доступно на вкладке «Настройки».
GitHub Pages публикует мое веб-приложение в домене github.io по следующему шаблону: <username>.github.io/<repository>. Мой пример веб-приложения находится здесь: https://martindrapeau.github.io/excel-clipboard/. GitHub предоставляет вам возможность использовать свой собственный домен. На самом деле, вы можете бесплатно создать профессиональный и полностью фирменный опыт, поддерживаемый GitHub Pages.
5. Непрерывная интеграция и непрерывная доставка
GitHub Pages предоставляет вам CI/CD бесплатно. Как только ваши изменения будут отправлены на GitHub, ваше веб-приложение будет опубликовано и готово к использованию вашими конечными пользователями. Чтобы внести изменения, просто зафиксируйте и отправьте новые изменения. Попросите вашего пользователя посетить страницу вашего веб-приложения и вуаля! Это действительно не быстрее, чем это.
Вот и все, профессиональные и бесплатные инструменты RAD.
Бонус
Очистка кеша
Веб-браузеры очень хорошо кэшируют активы. Вы можете заметить, что нажатие F5 не всегда обновляет последний код JavaScript в браузере. Откройте инструменты разработчика и вкладку сети. Нажмите F5, чтобы обновить, и вы можете увидеть это:
Обратите внимание, что app.js загружается из кеша памяти, что означает, что браузер использовал локальную копию, найденную на вашем компьютере. Он не запрашивал последнюю версию с сервера. Это хорошо для ресурсов Bootstrap и jQuery, потому что они не изменились — браузер избегает обращения к CDN. Это намного быстрее.
Однако мой код изменился. Вы можете нажать Ctrl+F5, чтобы выполнить аппаратное обновление, чтобы браузер перезагрузил все файлы. Конечно, я не могу просить своих пользователей сделать это. Вместо этого я реализовал очень простое решение для блокировки кэша, добавив номер версии в строку запроса. Что-то вроде этого:
<script src="app.js?v=1"></script>
Когда мой пользователь загружает веб-приложение, браузер подумает, что файл app.js изменился, и получит его с сервера. Нравится:
После цикла разработки, когда я готов отправить новую версию на GitHub, я увеличиваю номер версии.
Локальное хранилище
Вы можете значительно улучшить работу пользователя с вашим веб-приложением, используя локальное хранилище. Вы и ваш клиент избежите повторения ручных действий при каждом обновлении страницы.
Например, в моем примере с буфером обмена Excel я мог бы сохранить вставленные данные в локальное хранилище. В следующий раз, когда мой пользователь посетит веб-приложение, будут загружены последние данные. Это поможет пользователю вспомнить, что он делал последним, и избежать множества кликов. Вот дополнительный код, использующий Local Storage API для обработки этого:
function saveAndAddClearButton(header, rows) {
window.localStorage.header = JSON.stringify(header);
window.localStorage.rows = JSON.stringify(rows);
window.localStorage.date = (new Date()).toString();
var $clear = $('<button class="btn btn-sm btn-outline-danger clear">Clear</button>');
$('p.message').append($clear);
$clear.click(function(e) {
delete window.localStorage.header;
delete window.localStorage.rows;
delete window.localStorage.date;
window.location.reload();
});
}
...
// Attempt to restore from local storage
try {
var header = JSON.parse(window.localStorage.header);
var rows = JSON.parse(window.localStorage.rows);
buildTable(header, rows);
$('p.message').append('<br/><em>' + window.localStorage.date + '</em>');
} catch (err) {}
Сотрудничество
Функции совместной работы в GitHub произвели настоящую революцию в разработке кода, особенно в проектах с открытым исходным кодом. Используя форки и пулл-реквесты, стало проще, чем когда-либо, сотрудничать с другими разработчиками локально и удаленно.
По сути, вы сохраняете один репозиторий GitHub в качестве origin, в котором размещается страница GitHub. Соавторы разветвляют репозиторий. Они разрабатываются на основе своей локальной копии и, когда готовы отправить новые изменения, выполняют запрос на извлечение из своего форка в источник. Кто-то другой должен просмотреть изменения кода и объединить запрос на извлечение. Это опубликует изменения на странице GitHub.
Запросы на вытягивание действительно добавляют дополнительный шаг на этапе CI/CD. Это заставляет рассмотреть и принять изменения другим человеком. По моему опыту, это предлагает отличную систему безопасности и позволяет разработчикам бросать вызов друг другу. GitHub делает этот рабочий процесс естественным, интерактивным и даже увлекательным.
React, Vue и другие вкусности
С этого момента вы даже можете рискнуть использовать ES6. Вы можете добавить больше инструментов или использовать современные фреймворки, такие как React или Vue. Это значительно усложняет CI/CD, так как вам, скорее всего, потребуется транспилировать и связывать ваш код. Вам нужно будет установить NodeJS и необходимые инструменты и библиотеки. К счастью, эти шаги можно автоматизировать с помощью средства запуска задач и сборщика модулей, такого как Webpack. Вы также можете найти ряд шаблонов и CLI, чтобы начать работу.
За последние несколько лет React и Vue стали невероятно популярными. Эти библиотеки предлагают разработчикам стандартные рецепты и рекомендации по разработке веб-приложений. В отличие от старых дней, когда правил jQuery, вам больше не нужно слишком много думать о том, как структурировать ваше приложение. React и Vue предоставляют и включают в себя множество лучших практик. Это действительно хорошо, потому что упрощает совместную работу — теперь разработчики говорят на одном языке и используют одни и те же шаблоны.
Конечно, если вы создаете что-то самостоятельно, старый добрый jQuery с Bootstrap работает так же хорошо. Вы можете кодировать простой ES5 и CSS и вообще избегать NodeJS и Webpack. Важным моментом в RAD является быстрая разработка, быстрый сбор отзывов и быстрое внесение изменений. Не теряйте внимание клиента. Решите проблему, завоюйте доверие и сделайте их счастливыми.
Если вам понравилась эта статья, могу ли я порекомендовать Создание действительно быстрого веб-сайта с нуля.
