- PVSM.RU - https://www.pvsm.ru -
[1]Уже достаточно долго мы занимаемся разработкой простого и понятного пользователям сервиса заметок. Но, как это обычно бывает, за внешней простотой стоит большая работа. В нашем случае это касается интерфейсов и javascript приложений. И, кажется, пришло время поделиться нашими идеями и узнать мнение профессионалов.
Под катом кратко про сервис и технологии.
Listick.ru [1] — это простой сервис онлайн заметок. Многие люди ежедневно делают заметки, используя для этого бумажные стикеры или блокноты. Мы ничего не имеем против бумаги, но как только возникает желание держать заметки под рукой — появляется Листик.
Наша цель — предоставить простотой и комфортный сервис. Чтобы любой человек мог легко воспользоваться всей силой облачных заметок.
Заметки в Листике выглядят как цветные стикеры. Давайте здесь сделаем паузу, потому что наверняка в вашей памяти всплыл какой-нибудь пример отвратительной реализацией это идеи. Не торопитесь с выводами, вот лучше оцените скриншот:
Стикеры можно таскать, менять цвет и размер. Здесь же можно добавить изображения, файлы и скринки (об этом чуть позже). Такой подход позволяет задействовать нашу зрительную память и образное
Комфорт подразумевает множество мелочей, которые не заметны на первый взгляд. Так, например, файлы можно загружать перетаскиванием в окно, а заметки — перетягиванием иконки из боковой колонки. Конечно, есть корзина, группы, сортировка групп, настройки фона и прочее. Как говорится — лучше один раз попробовать демо [2], чем сто раз прочитать.
Отдельно стоит отметить наше дополнение [4] для Google Chrome, позволяющее в два клика делать заметку-скриншот с описанием и ссылкой на источник. Мы их называем скринки, от скриншот и линк. Традиционное видео [5] с демонстрацией.
Использовать Листик можно по-разному, например:
Конечное же, у Листика есть тысяча и один конкурент. Самые часто вспоминаемые, пожалуй, Evernote и MS One Note. Но, к примеру, Evernote — это комбайн, пугающий людей. Даже мне пришлось собрать всю волю в кулак, чтобы разобраться. Мы же сконцентрировались на коротких текстовых заметках, добавив к ним самую малость и упаковав все в удобный интерфейс.
Серверная часть основана на Yii Framework. В ходе разработки у нас появились несколько удачных расширений, про одно из которых (yii-eauth) я уже писал статью [7]. Остальные тоже планируем выкладывать на github.
Крутится все это на связке nginx + php-fpm + MariaDB. Там же установлен git-сервер, Sentry для отлова ошибок, smtp-сервер и другие полезности.
Для
На фронте использованы jQuery, jQuery.UI, Underscore, Backbone, Knockout, Knockback и другие библиотеки. Многие модули и плагины пишем сами, что-то берем готовое. Для стилей используем LESS и мини-фреймворк, полученный в результате отрезания от Twitter Bootstrap всего ненужного.
В текущей архитектуре приложения есть две серьезных проблемы:
Думаем написать пост об ошибках, допущенных в данной архитектуре. Например, про минусы использования knockout и backbone в одном приложении. Сейчас уже на подходе серьезные изменения web-клиента, которые придут вслед за мобильной версией.
В мобильном web-приложении немалую роль играет скорость работы и объем загружаемых данных. Поэтому готовим к выходу web-приложение с полностью обновленной архитектурой. Новая архитектура основана на идеях, предложенных Николасом Закасом (1 [9], 2 [10]), и воплощенных в проекте aurajs [11]. Важно, что приложение теперь использует AMD (requirejs). Также мы полностью отказались от Knockout+Knockback в пользу системы представлений, частично заимствованной из Backbone.Marionette [12].
Про разработку дополнений для Google Chrome написано немало статей [13]. В нашем дополнении можно отметить несколько особенностей:
Если вас заинтересовало что-то определенное — пишите в комментариях, расскажем.
В первую очередь планируем запустить мобильное приложение и продолжать эксперименты с каналами привлечения новых пользователей. Далее запланирован такой набор функций:
P.S. Онлайн заметки имеют как преимущества, так и недостатки. Любой желающий может опробовать сервис в действии и сделать собственные выводы. Мы верим, что у простых заметок есть своя аудитория и сервис будет востребован.
Автор: Nodge
Источник [16]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/27046
Ссылки в тексте:
[1] Image: http://listick.ru/?utm_source=habr&utm_medium=post&utm_campaign=first_post
[2] Image: http://listick.ru/demo?utm_source=habr&utm_medium=post&utm_campaign=first_post
[3] мышление: http://www.braintools.ru
[4] дополнение: https://chrome.google.com/webstore/detail/fnemcieeocddldiickhdhmogdhiggcie?utm_source=habr&utm_medium=post&utm_campaign=first_post
[5] видео: http://listick.ru/extensions/chrome?utm_source=habr&utm_medium=post&utm_campaign=first_post
[6] про подушку: http://listick.ru/share/gLccL?utm_source=habr&utm_medium=post&utm_campaign=first_post
[7] статью: http://habrahabr.ru/post/129804/
[8] хостинга: https://www.reg.ru/?rlink=reflink-717
[9] 1: http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
[10] 2: http://addyosmani.com/largescalejavascript/
[11] aurajs: https://github.com/aurajs/aura
[12] Backbone.Marionette: https://github.com/marionettejs/backbone.marionette
[13] статей: http://habrahabr.ru/search/?q=chrome+extension+&target_type=posts
[14] classBindingProvider: https://github.com/rniemeyer/knockout-classBindingProvider
[15] Cross-document messaging: http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#web-messaging
[16] Источник: http://habrahabr.ru/post/169255/
Нажмите здесь для печати.