Listick.ru - online notes service

For quite a long time we have been developing a simple and user-friendly note service. But, as it usually happens, there is a lot of work behind external simplicity. In our case, this applies to interfaces and javascript applications. And it seems that the time has come to share our ideas and get the opinion of professionals.

Under cat, briefly about service and technology.

What is a leaf?

Listick.ru  is a simple online note taking service. Many people take notes daily using paper stickers or notepads. We have nothing against paper, but as soon as there is a desire to keep notes at hand, a Leaf appears.

Our goal is to provide a simple and comfortable service. So that anyone can easily take advantage of the full power of cloud notes.

The notes in the Leaf look like colored stickers. Let’s pause here, because for sure some kind of disgusting realization of this idea has surfaced in your memory. Do not rush to conclusions, here's a better estimate for the screenshot:



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 and dropping into the window, and notes by dragging the icon from the side column. 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.

Separately, it is worth noting our add-on for Google Chrome, which allows you to take a screenshot in two clicks with a description and a link to the source. We call them screenshots, from screenshot and link. Traditional videowith a demonstration.

You can use the Leaf in different ways, for example:

• Writing phones and email addresses is an alternative to paper stickers.
• Keep interesting links to read at home or at work.
• Save various “quick” information on work, projects, etc.
• To maintain to-do lists.
• From stickers you can create interesting collages and share them with friends, for example, about a pillow . Our designer likes to make selections of materials and show layouts to clients.
• And in the leaflet they write ideas for books, poems and songs, exchange photos and files!

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

What's under the hood?

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

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

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

At the front , jQuery, jQuery.UI, Underscore, Backbone, Knockout, Knockback and other libraries are used. We write many modules and plugins ourselves, we take something ready. For styles, we use LESS and a mini-framework obtained by cutting off everything unnecessary from Twitter Bootstrap.

There are two serious problems in the current application architecture:

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

We are thinking of writing a post about the mistakes made in this architecture. For example, the cons of using knockout and backbone in one application. Serious changes of the web client are coming soon, which will come after the mobile version.

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

A lot of articles have been written about the development of add-ons for Google Chrome . In our supplement, several features can be noted:

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

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

Future project

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

1. design notes (text selection, custom widget colors);
2. reminders for notes with the planner of affairs, notifications by email and SMS;
3. Search;
4. collaborative editing;
5. simple drawing: arrows, shapes, captions, etc .;
6. working field with a reduction effect and a 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.