Listick.ru service online notes

Long enough we develop simple and user-friendly service notes. But, as is usually the case, the simplicity is a big job. In our case, this applies to interfaces and javascript application. And I think it's time to share our ideas and learn from the professionals.

/ > Under the cut is a brief about the services and technology.


the

What is a Leaf?

Listick.ru is a simple online service notes. Many people every day, make notes using paper stickers or notepads. We have nothing against paper, but as soon as there is a desire to keep the notes at hand — there is a Leaf.

Our goal is to provide a simple and comfortable service. So anyone could easily use all the power of cloud notes.

Notes in the Leaf look like-colored stickers. Let's take a pause, because surely in your memory surfaced some disgusting example of the implementation of this idea. Do not rush to conclusions, that's better, rate screenshot:



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

Comfort means a lot of little things that are not noticeable at first glance. For example, files can be uploaded by dragging the window, and notes — drag icons from the sidebar. Of course, there are basket, groups, sorting groups, background settings and so on. As they say — better one time try the demo than a hundred times to read.

We should also mention our dopolnenie for Google Chrome, allowing two clicks to do the record, a screenshot with a description and link to the source. We call them screnci, from the screenshot and the link. Traditional video demonstration.

Use a Leaf can be different, for example:

the
• Record phone numbers and email addresses — as an alternative to paper stickers.
the
• Save interesting links to read them at home or at work.
the
• to Keep the various 'fast' information on work, projects, etc.
the
• For keeping to-do lists.
the
• of the stickers, you can create interesting collages and share them with friends, for example, about the pillow. Our designer likes to make collections and show mockups to clients.
the
• And in the leaf writing ideas for books, poems and songs, share photos and files!

Of course, the Leaf is a thousand and one competitor. Most often recall, perhaps Evernote or MS One Note. But, for example, Evernote is a harvester, frightening people. Even I had to collect all will in a fist, to understand. We focused on short text notes, adding to them a little bit and Packed all in a convenient interface.


the

What's under the hood?

backend based on Yii Framework. During the development we have some good extensions, Pro one of which (yii-eauth) I wrote article. Others also plan to put on github.
Turns all of this on the nginx + php-fpm + MariaDB. There is also a git server, Sentry to catch mistakes, smtp server and other Goodies.

For hosting use dedicated server from Hetzner (via FastVPS). I must say, for a few years, he never let us down never (PAH-PAH-PAH on wood). Under the service assigned a small virtual machine, which is enough to stock. In the near future, thinking about the possibility of moving user files to Azure Blob Storage.

At the front used jQuery, jQuery.UI, Underscore, Backbone, Knockout, Knockback, and other libraries. Many modules and plugins they write themselves, something ready to take. For styles use LESS and a framework that is obtained by cutting from the Twitter Bootstrap is just unnecessary.

In current architecture app has two serious problems:

the
1. a Large number of "core" libraries, which significantly increases the size of application and slow download.
the
2. Strong coupling between code modules, which complicates the introduction of new features.

I think to write a post about the mistakes made in this architecture. For example, about the cons of using knockout and backbone in a single application. Now already on the way serious changes in web client that will come after the mobile version.

mobile web app plays a considerable role in the speed and amount of data downloaded. So prepare to release your web application with a fully updated architecture. The new architecture is based on ideas proposed by Nicholas Sekasom (1, 2), and embodied in the project aurajs. It is important that the application now uses an AMD (requirejs). We also completely abandoned the Knockout+Knockback in favor of a system of ideas, partly borrowed from Backbone.Marionette.

About the design add-ons for Google Chrome written a lot articles. In our addition we can note a few features:

We divided the background logic of the script into several smaller modules: there are PortHandler for popup window script on the page for the script on other sites. the

1. Use knockoutjs in popup window and in-side scripting sites. With the Manifesto of the second version became friends through classBindingProvider.
the
2. styles are all also LESS.
the
3. Connecting to API Leaf is via Cross-document messaging (window.postMessage).

If you are interested in something specific, please write in comments, will tell.


the

Future of the project

First and foremost plan is to launch the mobile app and continue to experiment with the channels to attract new users. Next planned features:

the
1. design notes (text selection, their colors widget);
the
2. reminders for notes with diary, email and SMS;
the
3. search;
the
4. collaborative editing;
the
5. simple drawing: arrows, figures, captions, etc.;
the
6. the working field with the effect of reducing and navigation.

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

Article based on information from habrahabr.ru