Hobby projects: chip-in.me - who, to whom and how much

My name is Alexander Kasheverov (@kashesandr), I have been doing web development in DataArt since 2011. I love the web, the “lovable word JS” game, spontaneous forays with friends on nature. And with these attacks, the same problem often arose: when thrown in for 14–15 people, it was difficult to understand who and how much money should later ...

Practicing new technology for myself, I also wrote a small utility whose task is to simplify life in such cases. This is how the tiny site chip-in.me appeared . Everything is very simple: we enter people, their contribution to the total purchase (only with equal shares!), Press the button and get the result - who, to whom and how much should give money, with names and amounts. The result can be shared with friends.


')

Technical details

The choice was made in favor of Polymer. And that's why:

• This is google. Those. most likely the product is quality and will be promoted in the market. Being on the wave is useful.
• Polymer is an add-on for web components, which means that it will probably be in demand in the near future, it is good to have experience by that moment.
• The product at that time was updated to a stable version 1.0.0 - you can safely use it.

You can read more about Polymer in my article here .

The chip-in.me application is a set of independent components with isolated logic, layout and styles. Technically, there are three different files in a folder for a separate component. The collector assembles all parts into two files: html and js. Further, these files are connected to index.html. Of course, the Polymer library is preloaded into the application.

By the way, Google took care of unit testing and created a handy utility Web Component Tester .

Implementation difficulties

• It is worth getting used to the logic. The two-way binding for arrays is not immediately obvious. But understanding comes quickly enough.
• Initially, it was not obvious to me why Polymer and polyfills are connected in this way.
• When the program was written, for Gulp there was no Vulcanize wrapper yet (Polymer utility for code minification). I had to write myself, it turned out to be easy.
• Alas, I never managed to run the application on the old Android. Polymer is based on web components that are not supported by older browsers. And even polyfill.
• There were problems with blur and focus for input elements.
• Parse.com is used as data storage , which will be closed at the end of 2016. You will have to search for a new storage or do it locally. But that's another story.

The final application chip-in.me is:

• The main index.html.
• Html-file for all components (there all styles).
• JavaScript file for all the logic of all components.
• The application depends on the Polymer components and the library itself, it’s all in a separate folder.

Since its launch (summer 2015), about 800 people have visited the application site. The average time spent by the user on the site is about two minutes.

It was nice to get acquainted with Polymer, and he coped with the task superbly. The Polymer slogan sounds like "There is an element for that" ("There is a component for this"). And he was clearly chosen by chance. Everything is quite simple and simple, even though there are small bugs and blind spots in the library.

The application code can be found here:
https://github.com/DataArt/chip-in-calculator