Знакомство с glitch.com 🥳 🤟🏻

Моя история взаимодействия с glitch.com началась не так давно, но за это короткое время, я успел полюбить 🥰 этот классно придуманный сервис. Итак, в этой статье пойдет повествование о моем опыте развертывания приложения.

Этот проект разрабатывает и поддерживает команда FogCreek под руководством Джоэля Спольски, который со-основал такие сервисы как Трелло и СтекОверфлоу. Если что, вот тут его блог.

Эта история состоит из двух частей.

  • В первой части (текущая) пойдет речь о самом сервисе Glitch.com и его возможностях и плюшках.
  • Во второй части, будет рассказан опыт поставки своего node.js приложения на glitch.com, нестандартным способом.

По сути дела — это фактически удаленное рабочее место, с возможностью редактирования кода, добавления файлов и возможностью выполнять необходимые команды в консоле.

И еще этот сервис выделяется необычным и клевым дизайном. В основном он ориентирован на node.js и статические страницы. Так что это просто рай для JavaScript разработчика.

При первом посещении нас встречает главная страница, которая оформлена весьма забавно.

Главная страница.
Вот такая забавная главная страница
Виды аутентификации.

Поддерживается следующие виды аутентификации:

  • Facebook
  • GitHub
  • Google
  • И обычный регулярный вход при помощи e-mail и пароля.
  • А еще есть неприметная кнопочка внизу “Использовать одноразовый код для входа”

Какой способ выбрать — решать вам. Для разработчика конечно же удобнее использовать вход через GitHub.

Вообще меня поразил этот сервис тем, что он выдает достаточно ресурсов для вашего веб-приложения и больше всего поразила их консоль. И теперь поговорим о важных составляющих данного сервиса.

Про UI

После входа в ваш аккаунт, при наличии ваших проектов, отображается список, из которого вы можете сразу же выбрать проект. Остальная же информация, о творчестве других людей, находится ниже. Это очень удобно и не заставляет вас делать лишних движений.

Вы можете кликнуть на ваш проект и далее вашему взору показывается предпросмотр.

Вы можете сразу же нажать на кнопки:

  • Edit Project — для того чтобы открыть удобную и простую IDE в браузере, которая может перезагружаться, после внесения вами изменений. Очень удобно!
  • Show — чтобы открыть проект в отдельном окне для просмотра, так как если бы вы были пользователями.

Вот так к примеру выглядит приложение mad-fake-slack — если я нажимаю на Show.

Вот так выглядит приложение mad-fake-slack запущенное на glitch.com

Ну а если я нажимаю на Edit Project , то попадаю в мини импровизированную IDE. Она очень удобная для быстрого фикса проблемы в браузере.

Вид IDE для вашего проекта

Возможности IDE

  • Просмотр содержимого файлов
  • Загрузка файлов
  • Создание файлов вложенных в папки, путем указания не только названия файла, но и пути.
  • Удаление файлов
  • Загрузка assets и для этого есть спец папка. Она может служить перевалочной базой — этаким файловым обменником. Далее вы увидите как можно воспользоваться этой возможностью.
  • Реакция на изменения дает возможность видеть, как они влияют на UI вашего веб приложение.
  • Очень удобное оповещение о новых пакетах, для ваших зависимостей
Вот так удобно приходит оповещение о новых версиях пакетов

Есть и минусы в IDE, но они легко обходятся через консоль. В IDE нельзя загрузить бинарный файл типа картинки или шрифта сразу в нужную папку, все загружаемые файлы будут помещены в папку assets. Но как я уже сказал, это не проблема.

Метрики доступные в IDE glitch.com

Как же без метрик. Они очень важны, так как все ваши веб изделия, запускаются в контейнере. А я скажу честно, меня очень спасли они, так как node.js библиотека для @slack/rtm-api — сходит сума, если ей выдается адрес, который не слушается никем, что приводит к загрузке процессора под 80%. Думаю это было бы сложно заметить, если бы не было статуса контейнера.

Вот так вот выглядит в интерфейсе статус контейнера:

Как видим Container Status OK

Он спрятан в меню Tools и не беспокоит вас, но как только, что-то пойдет не так, вы получите уведомление прямо в IDE. Кликнув на Container Status, вы увидите следующую секцию:

Тут в реальном времени показывается метрики:

  • Загрузка процессора
  • Использование памяти
  • Использование дискового пространства

В принципе все очень удобно. Ну а теперь поговорим о возможностях консоли.

Возможности консоли

Перейти в консоль можно из меню Tools, кликнув по пункту “Full Page Console ->”.

Пункт меню для перехода в консоль

И она представляет из себя страницу черного цвета с ценными советами и возможностями нативной консоли.

Вот так встречает нас консоль

Что же может эта консоль?

  • Реагировать на стандартные команды переноса каретки Ctrl+Eи Ctrl+A для перемещения в конец и в начало строки. Очень удобно!
  • Можно запустить htop и top и закрыть их стандартным нажатием на клавишу q
Запущенный htop в консоле
  • Команда clear очищает экран консоли. Тоже очень удобная фитча.
  • В системе установлены и доступны curl и wget
Очень нужные инструменты curl и wget
  • Также можно посмотреть env которые установлены в докере
Без проблем можно увидеть, что творится в переменных окружения.
  • Вообще можно сказать, что это полноценная консоль, с набором шорткатов, которая мне очень понравилась! При этом все статусы, при использовании wget и curl работают отлично. Виден прогресс и ты в курсе полной картины.
  • Все изменения произведенные в консоле, не будут сразу применены из логических соображений. Этот подход дает вам возможность подумать, осознать ваши изменения и тогда, когда вы будете готовы, просто наберите команду refresh в консоле и нажмите Enter. Ваши изменения тут же будут применены и UI будет перезагружен. В IDE вы увидите файлы или изменения произведенные в консоле.

Заключение

Возможности сервиса впечатляют своей простотой и возможностью выполнять деплой и вносить изменения за наименьшее кол-во действий. Полнофункциональная консоль в веб браузере — это тоже очень крутая фишка, которая радует не только качественным отображением данных, но и обилием установленного по дефолту инструментария, что помогает без проблем осуществлять действия, необходимые для развертывания приложения внутри докера.

Хочешь узнать больше о Mad Devs?

Увидимся во второй части!

Скрытое послание! ))) 😍

P.S. А еще у вас есть отличная возможность познакомиться с контентом всей команды Mad Devs:
Блог — делимся ништяками, лайфхаками и экспертизой, полученной исключительно на личном опыте каждого члена нашей команды!
Инстаграм — делимся нашими рабочими процессами и
рок-н-рольным настроением!
Подпишитесь и почувствуйте нашу Mad-атмосферу!

Mad Devs — блог об IT

Engineering your growth. Mad Devs is the team behind large scalable projects, globally.

Mad Devs — блог об IT

Mad Devs is a Cambridge-headquartered IT company developing enterprise-level software solutions for finance, transportation & logistics, security, edtech, and advertising industries. For more information about us, please browse our website: https://maddevs.io/

Alexander Vishnyakov

Written by

«Переписывание с нуля гарантирует лишь одно — ноль!» — Мартин Фаулер

Mad Devs — блог об IT

Mad Devs is a Cambridge-headquartered IT company developing enterprise-level software solutions for finance, transportation & logistics, security, edtech, and advertising industries. For more information about us, please browse our website: https://maddevs.io/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store