Привет, {{ читатель }}!
Помнишь свои детские ощущения на Новый Год? Предвкушение чуда, приятное волнение перед чем-то новым, запах ёлки? Меня родители просили написать письмо Деду Морозу. Я подходил к этому занятию со всей серьёзностью. Маленький копирайтер во мне должен был решить, что он хочет получить (это простая часть). И убедить Деда Мороза в том, что он это действительно заслужил (это уже сложнее). Главное, мои старания никогда не были напрасны.
В канун Нового Года мне пришло в голову напомнить себе и друзьям, как круто это было! И заодно дать волю внутреннему гику :) Я решил запустить сайт для сбора новогодних пожеланий.
Спустя 3 дня марафона проект был запущен и появились первые пользователи. В этой статье я опишу процесс разработки и технологии, которые использовал.
Итак, вернёмся к моменту эврики. Случился он, когда я увидел эту картинку в ленте:
Спустя пятнадцать минут… или час идея оформилась. Она настолько увлекла меня, что я тут же приступил к реализации.
Дизайн
Начал с дизайна. Хотелось сделать что-то тёплое и ламповое. И быстро! До Нового Года оставалась всего пара недель!
Лезу на Creative Market, нахожу картинки, которые передают нужное настроение, покупаю:
Извлекаю основные цвета, делаю первые макеты в photoshop:
Я не любитель прорабатывать макеты до мельчайших деталей. В данном случае этих двух хватает, чтобы понять настрой. Конечно, конечный результат выглядит иначе.
Фронтенд
Перехожу к фронтенду. Тут я использую yeoman для создания и управления проектом. С помощью generator-angular создаю проект, заточенный под angular. Добавляю bootstrap, мне нравится их грид. Вместо css использую sass, потому что… ну много почему.
Итак, стек клиента:
- yeoman это:
- yo — инструмент для создания структуры фронтенда
- bower для управления зависимостями
- grunt собирает фронтенд, умеет сёрвить файлики
тестовым сервером, дружит с livereload.
Делает уйму чего ещё.
- angular клиентский js фреймворк
- bootstrap для грида
- sass вместо css
За пару дней делаю полностью автономное приложение для браузера. Выглядит отлично! Навигация, отображение и изменение данных работает без какой-либо серверной части. Но конечно, данные не сохраняются при перезагрузке страницы.
Многим веб-приложениям сегодня вообще не нужен серверный код. Это крышесносно! Особенно когда вспоминаешь, что творилось в веб-разработке 3-5 лет назад! `Увидимся в аду, JSP!`
Сервер
Единственная причина, по которой я не стал использовать Apigee или Parse, вместо того чтобы самому писать серверный код, в том что мне нужно было дополнительно обрабатывать данные до/после сохранения. Хотя Parse и это может, было некогда разбираться.
В этот раз я быстренько соорудил сервер на node.js и express, с mongodb хранилищем.
Запуск
Через три дня приложение было готово. Выложил его на heroku, прикупил домен и настроил аналитику.
Пригласил друзей попробовать.
За два дня на страничку зашли около 200 человек. Конечно, нашлись баги (и продолжают находится). Но фидбек, который я тут же начал получать вдохновляет! Баги фиксятся быстро, новые фичи пишутся легко.
Так как идеи фич идут от пользователей, я лучше понимаю, что нужно проекту. То что было реализовано на основе их пожеланий действительно **влияет на поведение людей на сайте**. Важно также, что это можно измерить в цифрах.
Выводы и ссылки (наконец-то)
За неделю мне удалось соорудить, запустить и поправить баги в приятном новогоднем проекте. Такую скорость даёт перенос логики на клиент и использование очень удобных инструментов в разработке.
Фидбек на начальной стадии не только помог избежать ненужных фич, но и поднял мотивацию. А наблюдать за тем, как люди используют этот сервис отдельное удовольствие. Об этом будет следующая статья, “аналитическая”, после Нового Года.
В планах продолжать двигаться в том же направлении. Получить как можно больше фидбека и статистики до праздников, на их основе улучшить проект. Конечная цель в том, чтобы как можно больше людей получили именно те подарки, которые хотят! Даааа нет, я просто развлекаюсь ;)
А пока приглашаю всех заценить, так сказать:
whatdoyouwantforchristmas.net
github
Код открыт. Пул реквесты и баг репорты приветствуются! Также как критика идеи и предложения фич.
С наступающим!
Отдельное спасибо fealaer за помощь в работе над проектом!
Автор: filipovskii_off
