Серверная валидация сложных форм и ее синхронизация с фронтендом на примере Ajv - Александр Сафт (Zeeng)

1. Серверная валидация сложных форм
и ее синхронизация с фронтендом
на примере Ajv
Александр Сафт
@fend25
SPA Meetup
Москва, 8 апреля 2017 года

2. Проверка данных
ВАЛИДАЦИЯ — (от лат. validus сильный)
признание чего-либо законным, действительным.
ВЕРИФИКАЦИЯ — (от лат. лат. verus истинный + facere делать)
свидетельство, удостоверение в подлинности.
Словарь иностранных слов, вошедших в состав русского языка.
Чудинов А.Н., 1910

3. Классификация проверки данных
Валидация
Верификация
Тип

4. Классификация проверки данных
На клиенте На сервере
Валидация
Верификация
МестоТип

5. Классификация проверки данных
На клиенте На сервере
Валидация ↔
Верификация
МестоТип

6. Валидация и верификация
Backend:
• Два отдельных процесса
• Валидация – на старте
хендлера
• Верификация – может быть
размазана тонким слоем по
всему хендлеру
Frontend:
• Как правило, в одном месте
• Валидация и верификация
слиты
• Выполняются в лучшем случае
последовательно (могут быть
смешаны)

7. Клиентская валидация
Angular Redux-form

8. Клиентская валидация - перспектива
React-redux-form form2

9. Серверная валидация - встроенная
app.post('/register', function(req, res) {
req.Validator
.validate('username', i18n.t('user.displayName'), {length: {min: 3, max: 256})
.filter('username', {trim: true})
.validate('password', {length: {min: 4, max: 64}})
.filter('password', {stripTags: false, escapeHTML: false});
req.Validator.getErrors(function(errors){ ... });
});

10. Серверная валидация - отдельная
Своя схема - Joi
Json Schema
const schema = Joi.object().keys({
username: Joi.string().alphanum().min(3).max(30).required(),
password: Joi.string().regex(/^[a-zA-Z0-9]{3,30}$/),
access_token: [Joi.string(), Joi.number()],
email: Joi.string().email()
}).with('username').without('password', 'access_token');
const schema = {
type: 'object',
properties: {
username: {type: 'string', format: 'alphanum', minLength:3, maxLength:30},
password: {type: 'string', regex: /^[a-zA-Z0-9]{3,30}$/},
access_token: {oneOf: [{type: 'string'}, {type: 'number'}]},
email: {type: 'string', format: 'email'}
},
required: ['username']
}

11. Серверная валидация - хелперы
До После
const userSchema = toAjvObject({
name: ct.notEmptyString,
email: ct.email,
dateOfBirth: ct.date,
about: ct.stringOrNull
})
const userSchema = {
type: 'object',
properties: {
name: {type: 'string', minLength: 1},
email: {type: 'string', format: 'email'},
dateOfBirth: {type: 'string', format: 'date'},
about: {oneOf: [{type: 'string'}, {type: 'null'}]}
},
required: ['name', 'email', 'dateOfBirth', 'about']
}

12. Серверная валидация – API
Допустим, API должно уметь выполнять три действия:
1. Добавить пользователя
2. Обновить пользователя
3. Создать бронирование с новыми пользователями
const commands = {
CREATE_USER: 'CREATE_USER',
UPDATE_USER: 'UPDATE_USER',
CREATE_BOOKING: 'CREATE_BOOKING'
}

13. Серверная валидация – API
// create user
const userSchema = {
name: ct.notEmptyString,
email: ct.email
}
schemas.saveValidator(commands.CREATE_USER, toAjvObject(userSchema))
// update user
const userWithIdSchema = addIntId(userSchema)
schemas.saveValidator(commands.UPDATE_USER, toAjvObject(userWithIdSchema))
// create booking
const createBookingSchema = {
startTs: ct.datetime,
users: toAjvArray(toAjvObject(userSchema))
}
schemas.saveValidator(commands.CREATE_BOOKING, toAjvObject(createBookingSchema))

14. Серверная валидация – API
function saveValidator(cmdCode, schema) {
validators.raw[cmdCode] = schema
validators.compiled[cmdCode] = ajv.compile(schema)
}
// create booking
const createBookingSchema = {
startTs: ct.datetime,
users: toAjvArray(toAjvObject(userSchema))
}
schemas.saveValidator(commands.CREATE_BOOKING, toAjvObject(createBookingSchema))

15. Серверная валидация – API
{
"type": "object",
"properties": {
"startTs": {"type": "string", "format": "date-time"},
"users": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {"type": "string", "minLength": 1},
"email": {"type": "string", "format": "email"},
"dateOfBirth": {"type": "string", "format": "date"},
"about": {"oneOf": [{"type": "string"},{"type": "null"}]}
},
"required": ["name", "email", "dateOfBirth","about"]
}
}
},
"required": ["startTs", "users"]
}

16. Синхронизированная валидация
Валидаторы можно передать на клиентскую часть.
Валидация и верификация на клиенте таким образом разделяются.
Часть верификации может быть вынесена также в схему при помощи
расширений JSON Schema. Дело вкуса, и выбирается по проекту и от
желаний разработчиков.
Минус: при передаче валидатора нужно самостоятельно написать
обвязку для генерации сообщений об ошибках. В некоторой степени
эта задача облегчается четкостью структуры ошибок Ajv.

17. Выводы
1. JS – язык, который позволяет на пустом месте
создать экземпляр любого объекта/структуры и
ничего за это не будет*
2. Из-за этого часто выходит лапша, которую потом
долго и нудно рефакторить
3. Если лапшу держать в крепких объятиях оберток и
хелперов, а все что можно – выносить в общие
константы, то на выходе получится лаконичный и
гибкий код, с которым будет приятно работать.
* кроме Cannot read property 'x' of undefined

18. Спасибо за внимание
Александр Сафт
@fend25