Хобби-проекты: chip-in.me — кто, кому и сколько

в 17:43, , рубрики: Блог компании DataArt, Веб, разработка, Разработка веб-сайтов, статьи, хобби-проекты, метки:

Хобби-проекты: chip-in.me — кто, кому и сколько - 1

Меня зовут Александр Кашеверов (@kashesandr), я занимаюсь веб-разработкой в DataArt с 2011 года. Люблю веб, игру «любоеслово точка JS», спонтанные вылазки с друзьями на природу. И с этими вылазками часто возникала одна и та же проблема: когда скидывались на еду для 14 – 15 человек, бывало сложно понять, кто и кому сколько денег потом должен…

Практикуясь в новой для себя технологии, я заодно написал небольшую утилиту, задача которой — упрощать жизнь в таких случаях. Так появился крохотный сайт chip-in.me. Все предельно просто: вписываем людей, их вклад в общую покупку (только с равным долями!), нажимаем кнопку и получаем результат — кто, кому и сколько должен отдать денег, с именами и суммами. Результатом можно поделиться с друзьями.

Хобби-проекты: chip-in.me — кто, кому и сколько - 2Хобби-проекты: chip-in.me — кто, кому и сколько - 3

Технические детали

Выбор был сделан в пользу Polymer. И вот почему:

  • Это Google. Т.е. скорее всего продукт качественный и будет продвигаться на рынке. Быть на волне — полезно.
  • Polymer — надстройка над веб-компонентами, значит, вероятно, это будет востребовано в ближайшем будущем, хорошо к тому моменту уже иметь опыт.
  • Продукт на тот момент обновился до стабильной версии 1.0.0 — можно смело пользоваться.


Подробнее про Polymer можно почитать в моей статье здесь.

Приложение chip-in.me — набор независимых компонент с изолированными логикой, версткой и стилями. Технически получаются три разных файла в папке для отдельного компонента. Сборщик компонует все части в два файла: html и js. Далее эти файлы подключаются в index.html. Конечно, предварительно в приложение подключается библиотека Polymer.

К слову, в Google позаботились о юнит-тестировании и создали удобную утилиту Web Component Tester.

Трудности в реализации

  • К логике стоит привыкнуть. Работа two-way binding для массивов очевидна не сразу. Но понимание приходит достаточно быстро.
  • Изначально для меня было неочевидно, почему Polymer и polyfills подключаются именно таким образом.
  • Когда писалась программа, для Gulp еще не было обертки Vulcanize (утилита Polymer для минификации кода). Пришлось написать самому, оказалось просто.
  • Увы, у меня так и не получилось запустить приложение на старом Android. Polymer построен на основе веб-компонентов, которые не поддерживаются старыми браузерами. И даже полифиллами.
  • Возникали проблемы с blur и focus для input-элементов.
  • В качестве хранилища данных используется Parse.com, который закроется в конце 2016. Придется искать новое хранилище или делать локально. Но это совсем другая история.

Конечное приложение chip-in.me представляет из себя:

  • Основной index.html.
  • Html-файл для всех компонент (там же все стили).
  • JavaScript-файл для всей логики всех компонент.
  • Приложение зависит от Polymer-компонентов и самой библиотеки, это все лежит в отдельной папке.

С момента запуска (лето 2015) сайт приложения посетили около 800 человек. Среднее время, проводимое пользователем на сайте — около двух минут.

С Polymer познакомиться было приятно, да и с задачей он справился великолепно. Слоган Polymer звучит, как «There is an element for that» («Для этого есть компонент»). И выбран он был явно неслучайно. Все достаточно легко и просто, хоть в библиотеке и есть небольшие баги и слепые места.

Код приложения можно посмотреть здесь:
https://github.com/DataArt/chip-in-calculator

Автор: DataArt

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js