Интро к Valya

Я настолько вдохновился тем, что у Medium появилось API, что хочется писать, особенно, когда под рукой есть удобный инструмент для оживления своих мыслей.

Я не хочу полностью пересказывать доклад, с которым я планирую выступить на #MoscowJS, поэтому устройтесь удобно перед вашим экраном. Много времени это чтиво не займет. В любом случае я уже благодарен вам, что вы здесь. Погнали!

React — это View в архитектуре вашего приложения. Да это так, это аксиома. Но это не повод крошить челюсти оппонентов, если те решили сравнить его с Angular, впрочем, ровно как и не повод отказываться от сравнения. Так или иначе, в этой заметке вы будете ощущать от начала и до конца сравнение положения дел в React и Angular.

Так вот. Я хочу поговорить с вами про валидацию форм.

В Angular работа с формами — это один из главных бенефитов фреймворка, а в React — ну это ж просто View, скажем так.

В общем, там как и следует — ничего.

Есть коммьюнити. Там делают разные поделки, но все довольно монструозные, либо с «подвывертом и прихлопом». При ближайшем изучении документации — тянет блевать, простите.

Заходим в первый пример — formsy-react.

1. Подключите миксин

Ну, в общем, думаю, что дальше нет смысла продолжать.

Да, некоторые из вас, может быть, еще пишут компоненты, используя метод React.createClass({}), но на дворе 2015 — поэтому давайте забудем про Миксины. Facebook заявили, что никакой поддержки Миксинов не будет, если вы пишете компоненты в классическом стиле (es6).

Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.
There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today.

И уж тем более, если вы пишете stateless-компоненты в виде простых функций.

Заходим во второй пример — newforms

1. Валидация в стиле Joi (сам Джой вообще очень крутой инструмент)
2. Конструктор форм
3. Кастомные компонент
4. Прочтите 18 разделов с кучей подразделов документации

Design

Render

Implementing custom validation

Ну и напоследок, третий пример — react-forms:

1. Опишите форму в виде схемы (декларативно, но совсем не то)

Мой манифест:

1. Я хочу иметь под рукой привычные элементы форм
2. Я хочу валидировать элементы форм
3. Я хочу валидировать данные в принципе
4. Я хочу решать как это будет выглядеть
5. Я хочу иметь гибкий инструмент

Мольбы были услышаны

Позвольте представить, Valya, леди и джентльмены!

«Valya — Higher-Order Component for validation in React»

Компонент высшего порядка, созданный Kir Belevich, который соответствует всем требованиям, которые я выдвигаю в манифесте.

Вы, может быть, не спросите, но я отвечу на вопрос: «Как так получилось, что Kir Belevich и Denis Koltsov написали компонент, который полностью удовлетворяет всем требованиям?»

Отвечаю — проекты, в которых мы работаем на разных концах Евразии в основном состоят из форм.

Как я, так и парни сталкиваются каждый день с одними и теми же проблемами.

Я хочу привести один простой пример с github, который покроет все случаи валидации ваших элементов ваших форм в Valya. Один из атрибутов, созданного вами валидатора называется (о боже!) validators, чтобы проверить любые данные, вы должны просто пробросить в этот атрибут следующий массив:

Все! Концепция, построенная на промисах — о, господи, я чуть не кончил, когда увидел это. Так просто и так гениально.

Вам ведь правда больше ничего не надо, два основных статуса:

• Успех
• Вот Г

Я не буду приводить полного примера для написания своего валидатора, потому что для этого вам понадобится просто написать совершенно простой компонент и использовать для него декоратор.

Посмотрите пример здесь @deepsweet/valya.

Еще большее количество примеров тут @isnifer/valya-examples