Listick.ru - online notes service

For quite a long time we have been developing a simple and understandable service for users of notes. But, as is usually the case, there is a lot of work behind outward simplicity. In our case, this concerns interfaces and javascript applications. And it seems that the time has come to share our ideas and learn the opinion of professionals.

Under the cut briefly about the service and technology.

What is a leaf?

Listick.ru is a simple online notes service. Many people take notes daily using paper stickers or notebooks. We have nothing against the paper, but as soon as there is a desire to keep notes at hand, Leaf appears.
')
Our goal is to provide a simple and comfortable service. So that any person can easily use all the power of cloud notes.

Notes in the leaf look like colored stickers. Let's pause here because surely some example has come up in your memory of a disgusting realization of this idea. Do not rush to conclusions, here's a better estimate:



Stickers can be dragged, change color and size. Here you can add images, files and screenshots (more on that later). This approach allows us to use our visual memory and imaginative thinking.

Comfort means a lot of little things that are not noticeable at first glance. For example, files can be loaded by dragging into the window, and notes by dragging the icon from the sidebar. Of course, there is a basket, groups, sorting groups, background settings, and more. As they say - it's better to try the demo once than read a hundred times.

We should also mention our addition for Google Chrome, which allows you to take a screenshot with a description and a link to the source in two clicks. We call them screenshots, from the screenshot and link. Traditional video with a demonstration.

You can use Leaf in different ways, for example:

• Write down phone numbers and email addresses - as an alternative to paper stickers.
• Save interesting links to read them at home or at work.
• Save various “fast” information on work, projects, etc.
• To maintain a to-do list.
• From stickers you can create interesting collages and share them with friends, for example, about a pillow . Our designer likes to make collections of materials and show mockups to customers.
• And in the leaflet they write ideas for books, poems and songs, exchange photos and files!

Of course, Logistics has a thousand and one competitors. Perhaps the most frequently recalled are Evernote and MS One Note. But, for example, Evernote is the combine frightening people. Even I had to gather all the will into a fist to figure it out. We concentrated on short text notes, adding very little to them and packing everything into a convenient interface.

What is under the hood?

The server part is based on the Yii Framework . In the course of development, we had several successful extensions, about one of which ( yii-eauth ) I already wrote an article . The rest, too, are planning to post on github.

All this is spinning on a bunch of nginx + php-fpm + MariaDB. A git-server, Sentry for catching errors, smtp-server and other utilities are also installed there.

For hosting use a dedicated server from Hetzner (via FastVPS). I must say, for several years, he did not let us down even once (pah-pah-pah on a tree). The service is reserved for one small virtual machine, which is still enough with a margin. In the near future, we are considering the possibility of transferring user files to Azure Blob Storage.

On the front used jQuery, jQuery.UI, Underscore, Backbone, Knockout, Knockback and other libraries. We write many modules and plug-ins ourselves, we take something ready. For styles, we use LESS and a mini-framework, obtained as a result of cutting off all unnecessary things from Twitter Bootstrap.

There are two major problems with the current application architecture:

1. A large number of "core" libraries, which significantly increases the size of the application and slows down the download.
2. Strong code connectivity between modules, which makes it difficult to implement new functions.

We think to write a post about errors made in this architecture. For example, about the cons of using knockout and backbone in one application. Now serious changes are coming on the web client, which will come after the mobile version.

In a mobile web application , the speed of work and the amount of downloaded data play a significant role. Therefore, we are preparing to exit a web application with a completely updated architecture. New architecture is based on the ideas proposed by Nicholas Zakas ( 1 , 2 ), and embodied in the project aurajs . It is important that the application now uses AMD (requirejs). We also completely abandoned Knockout + Knockback in favor of the presentation system, partially borrowed from Backbone.Marionette .

About the development of add-ons for Google Chrome written a lot of articles . In our supplement, there are several features:

1. We have divided the background script logic into several small modules: there is a PortHandler for popup windows, for a script on the List, for a script on other sites.
2. We use knockoutjs both in the popup window and in the scripts on the side of sites. With the manifest of the second version we made friends through classBindingProvider .
3. For styles, everything is also LESS.
4. Connection to the Logistics API is carried out via Cross-document messaging (window.postMessage).

If you are interested in something specific - write in the comments, tell.

Future of the project

First of all, we plan to launch a mobile application and continue experiments with channels to attract new users. Next is planned such a set of functions:

1. design of notes (selection of text, its own colors of the widget);
2. reminders for notes with the planner, notifications by email and SMS;
3. Search;
4. co-editing;
5. simple drawing: arrows, shapes, captions, etc .;
6. working field with the effect of reducing and navigator.

PS Online notes have both advantages and disadvantages. Anyone can try the service in action and draw their own conclusions. We believe that simple notes have their own audience and the service will be in demand.