Как мы делали сайт на Tilda Publishing
Несколько месяцев назад мы запустили новый сайт. Долго выбирали инструмент для создания сайта, перебирали разные варианты, но в конце концов остановились на сервисе Tilda Publishing. Уже в процессе работы, мы поняли что трудностей нам не избежать, но проявив изобретательность, разрешили их и теперь наслаждаемся результатом.
Почему мы выбрали Tilda
Итак, почему мы выбрали Tilda? Если начать с начала, то перед нами стояла задача, сделать себе сайт, который отражал бы суть нашей деятельности. Мы создаем современные инструменты для eCommerce. И придерживаемся той идеи, что одной только эффективности и функциональности программного обеспечения сегодня уже недостаточно. Люди предпочитают пользоваться красивыми и удобными инструментами. Поэтому наши разработчики не принимают ни одного решения без согласования с дизайнером интерфейсов. Вы понимаете, мы просто не решились сделать свой сайт на коленке используя Bootstrap. Bootsrtap — это framework для прототипирования, а настоящий дизайн требует творческого внимания, знания законов композиции, понимания принципов психологии и немного опыта в создании интерфейсов.
Но мы решили быть честными перед собой. У нас мало опыта в проектировании сайтов. Мы проектируем инструменты, виджеты — конкретные вещи, которые встраивают в сайты и торговые площадки, а это немного другой род работы. Поэтому, если мы делаем сайт с нуля, то рискуем поменять специализацию и заниматься исключительно его разработкой. Это подходит для большой компании, где на эту работу нанимают специального человека, но для нас — стартапа состоящего из четырех человек, которые хотят делать приложения для Shopify с использованием NodeJS и CoffeeScript — это было бы серьёзной потерей фокуса.
Мы рассмотрели еще варианты. Если не создавать сайт с нуля на HTML, возможно нам помог бы Wordpress. Мы обрадовались, ведь на Wordpress делают сайты любой сложности. И для этого не нужно много опыта работы с языками разметки. Но это опять переводит наш фокус с создания приложений, на создание и поддержку инструмента, который должен оставаться второстепенным. Мы отбросили идею с Wordpress как трудоемкую. Достаточно трудоемкую, чтобы напугать несколько ленивых инженеров. Тем более, это возвращало нас к использованию PHP. А мы отказались от PHP еще в конце этого лета.
Мы продолжили поиски. Как компании, которая использует только современные технологии, почему бы нам не поискать инструменты, которые появились недавно.
Нам повезло
В процессе поиска мы наткнулись, на новое направление в создании, промо-страниц и дизайнерских сайтов. Что это за направление? Скорее всего после такого же изнурительного перебора технологий, несколько ребят в мире одновременно поняли, что миру нужны новые инструменты. Те, которые помогают делать дизайнерские, адаптированные ко всем видам экранов сайты без малейшего знания программирования. Мы рассмотрели только несколько вариантов, есть и другие.
Последовательность находок следующая: Blocs, Readymag и Tilda Publishing.
Blocs
Вначале мы нашли Blocs. Это милое приложение, которое позволяет составлять страницы сайта из блоков. То что нужно для работы дизайнера или паблишера. При помощи Blocs легко превратить идею в готовую страницу сайта. Но у этой программы оказалось два недостатка. Она работает только на компьютерах Apple и привязывается лицензией к одному рабочему месту. Приемлемо, но сегодня это уже моветон. Второй недостаток — процесс развертывания. Тот момент, когда созданный в приложении сайт, становится сайтом в интернете. Этот процесс не показали на промо-видео, но я рассажу, как это происходит. Blocs на выходе генерирует набор файлов HTML, стилей и картинок. Чтобы получить сайт, вам нужно после каждого обновления контента загружать файлы сайта к себе на хостинг вручную.
… непонимающая пауза. Так, а в чем проблема, спросите вы? Это нарушает нашу стройную идею. Автор контента должен работать только с одним инструментом, а после нажатия на кнопку “Публиковать”, контент должен попадать к пользователям сайта без участия третьих лиц и программ. Особенно в случае, когда нужно быстро внести правки. Раз уж мы избрали концепцией EcomGems “простоту для пользователя”, то решили начать с себя. Приложение Blocs нам не подошло, хотя очень понравились.
Readymag
Мы искали дальше и натолкнулись на Readymag. В двух словах, Readymag — это конструктор дизайнерских сайтов и интернет-журналов. Используя Readymag, дизайнер воплощает идею размещения контента на холсте страницы, не ограничивая фантазию правилами. Он адаптирует вид страницы под экраны планшетов и смартфонов. А поскольку Redaymag — это web-сервис, то не нужно заботится о размещении сайта в интернете. После нажатия на кнопку “Опубликовать”, сайт уже там. “WOW! Это то что нужно!”, — подумали мы, подключили к Readymag свой домен и взялись за работу.
Ээээ… Это история о Tilda Publishing. Нет?
Да. Мы сразу обнаружили один серьёзный недостаток в Readymag. Мы легко подключаем домен нашей компании и делаем свой сайт на Readymag, но этот сайт доступен только по HTTP протоколу. А нам хотелось, чтобы он работал и через HTTPS протокол.
HTTPS протокол
Краткое отступление о протоколе. HTTPS — протокол обмена сообщениями между компьютерами, его называют еще SSL или безопасное соединение. Это такой вид соединения, когда компьютер пользователя и сервер сайта, устанавливают между собой шифрованный канал связи и передают информацию в защищенном виде. Зачем это может понадобится?
Неочевидный факт, но если использовать незашифрованное соединение, то информация которой обменивается пользователь и сайт, видна другим компьютерам, которые подключены к интернету в той же локальной сети. Это опасно в случае бесплатного Wi-Fi в кафе или здании аэропорта. Злоумышленник следит за историей веб-серфа пользователя, видит пароли, данные кредитной карты и другую частную информацию. HTTPS придумали, чтобы защитить пользователей от такой угрозы. Если два компьютера используют безопасное соединение, то окружающие компьютеры этой сети видят только поток неясных символов, из которых нельзя узнать, ни какие страницы запрашивает пользователь у сайта, ни какую информацию он передает. С течением времени, поддержка HTTPS соединения стала де-факто стандартом для сайтов, которые заботятся о безопасности своих пользователей.
Мы связались с технической поддержкой Readymag и уточнили, можно ли добавить HTTPS для нашего сайта. Оказалось, что они пока не реализовали эту функцию. HTTPS работает только для сайтов с именами *.readymag.com. “Эх!”, — сказали мы и продолжили поиск. По крайней мере, теперь мы знали, что ищем.
Переходим на Tilda Publishing
Наконец мы наткнулись на Tilda Publishing. Этот инструмент действует по принципу, который мы уже видели у Readymag. Но проще. Редактор Tilda не предоставляет гибкости Readymag в формировании дизайна страницы. Вместо этого редактор Tilda Publishing предлагает более 170 видов блоков, из которых можно последовательно составлять промо-страницы, писать длинные и короткие риды, и даже вести блог. При этом остается работа и для дизайнера. Цвет и оформление элементов легко меняется.
Как только мы попробовали Tilda, мы сразу же влюбились в нее. Мы отказались от Readymag в пользу Tilda и переделали сайт на ней. Все шло по плану пока мы не подключили доменное имя компании к сайту, сделанному на Tilda.
Мы опять натолкнулись на проблему отсутствия HTTPS протокола. Хотя мы и не получаем от посетителей сайта конфиденциальной информации, но наличие HTTPS — сегодня стандарт качества. И мы хотели, чтобы сайт компании ему соответствовал.
Нам нравится инструмент, который мы нашли. Нам нравится способ создания контента. Нам нравится, что мы всегда можем легко делать изменения на сайте, если под рукой найдется компьютер с интернетом. Нам нравится результат, который выдаёт Tilda. Это профессионально сверстанные страницы, которые подстраиваются под любой тип экрана. Но пользователям не доступен сайт по безопасному протоколу. Разработчики Tilda пока не реализовали эту функцию, но, думаю, доделают в будущем. А нам результат нужен сегодня. На первый взгляд выхода нет.
Ответ пришел через подсказку тех-поддержки. Они написали, что редактор экспортирует готовый код, который можно загрузить на сайт вручную. Мы честно попробовали сделать такой экспорт. Получилось не круто. Мы создаем контент в облаке, потом загружаем к себе на компьютер, потом опять загружаем в облако, чтобы он стал сайтом. Процесс примерно как с Blocs. Хорошо. А как оставить контент в облаке? Ответ оказался рядом. Рядом с кнопкой экспорта сайта. Там было упоминание про Tilda API, через который можно получать контент. На тот момент работала еще только beta-версия API. Но работала она хорошо.
У нас возникла следующая идея. Мы запускаем приложение у нас на сервере. Это приложение получит информацию с серверов Tilda в автоматическом режиме посредством API и хранит у себя. А по запросу пользователей отдает им уже готовые страницы. А поскольку приложение, которое мы делаем, под контролем, мы вольны поддерживать и HTTP, и HTTPS протоколы. А после изменения контента в редакторе Tilda, API оповещает наше приложение. В этот же момент мы обновляем информацию у себя.
Что получилось
У нас получилось автономное приложение-зеркало сайта, созданного на Tilda Publishing. Оно работает с безопасными соединениями, кэширует опубликованный HTML контент у себя, а изображения и скрипты загружает на CDN сервера Amazon. Неожиданным плюсом такого решения оказалась производительность. На слабой машине c 1 CPU и c 1Gb RAM, мы легко отдаем контент сайта с задержкой в 5–10 ms и держим нагрузку до 1000 запросов в секунду. Этот показатель легко увеличить, если взять более мощную машину под сервер. А за счет того, что доставку статического контента мы делегируем серверам Amazon, которые равномерно распределяет его по всему миру, пользователи получают страницы нашего сайта с минимальной задержкой.
Теперь паблишер создает и редактирует дизайнерские страницы на Tilda Publishing. А посетители сайта видят свежий контент уже через 10 секунд.
Мечты сбываются.
Вы тоже можете
Мы открыли исходные коды приложения и даже подготовили публичный Docker образ. Поэтому, если вы столкнулись с такой же или похожей проблемой, то используйте это решение. Если же вы разработчик и найдете проблемы в нашем приложении, то мы будем только благодарны за вклад в развитие проекта.
Всем привет!
