Представляем Hoodie: разработка полного стека для фронтенд-разработчиков

Если вы еще не слышали о худи, обязательно посмотрите.

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

Хотя платформа все еще находится в зачаточном состоянии, она уже предлагает несколько новых мощных инструментов, которые стоит попробовать любому фронтенд-разработчику, который хочет опередить игру. Команда Hoodie имеет проверенный опыт работы над другими очень успешными проектами, такими как CouchDB, Async, Mustache.js и многими другими.

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

Что такое Худи?

Прежде всего, что такое худи? Что в этом такого замечательного? Hoodie — это платформа с открытым исходным кодом и API, полностью поддерживающая JavaScript, которая сочетает в себе несколько новых мощных парадигм в одном пакете разработки полного стека, что приносит пользу как разработчикам, создающим приложения Hoodie, так и конечным пользователям, которые с ними взаимодействуют. Главными среди этих концепций являются движения «noBackend» и «Offline First», а также сильный процесс, управляемый сообществом, известный как «Dreamcode» для создания API.

noBackend

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

Худи возвращает контроль в руки фронтенд-дизайнера и разработчика, полностью абстрагируясь от серверной части. При разработке интерфейсных приложений Hoodie вместо того, чтобы беспокоиться о своей серверной части, все, о чем вам нужно беспокоиться, — это простой, простой в освоении и реализации интерфейсный API, встроенный в Hoodie. Например, хотите зарегистрировать нового пользователя? Это можно сделать одной строкой кода:

 hoodie.account.signUp(username, password);

Это идея инициативы noBackend, которой Hoodie полностью привержен. noBackend означает, что вам не нужен бэкенд-разработчик! Просто разверните серверную часть Hoodie на своем сервере и забудьте об этом .

Толстовка полностью написана на JavaScript. Его автономная серверная часть использует Node.JS с Apache CouchDB в качестве базы данных. На момент написания этой статьи основные функции, которые Hoodie уже реализовала, включают регистрацию и администрирование пользователей, загрузку данных, хранение и электронную почту. Эти основные функции можно легко расширить, добавив дополнительные плагины Node.js.

Код мечты

Hoodie — это в первую очередь API — это то, что делает возможным noBackend. Реализация Hoodie может со временем меняться и улучшаться, но интерфейс, предоставляемый разработчикам, останется прежним, так что вам никогда не придется об этом беспокоиться.

Толстовка по-прежнему быстро растет, и постоянно добавляются новые функции. Hoodie, как и другие проекты noBackend, использует основанный на сообществе подход к разработке API под названием Dreamcode. По сути, вы придумываете код, который хотели бы написать, и, если он получит достаточную поддержку сообщества, Худи воплотит его в жизнь.

Этот API-первый краудсорсинговый подход к разработке API Hoodie означает, что код Hoodie легко написать и легко прочитать. Это код вашей мечты!

Сначала офлайн

Hoodie решает множество проблем для разработчиков интерфейсных приложений с помощью своего noBackend API, управляемого Dreamcode. Но одна из основных целей Hoodie — решить и серьезную проблему пользователей — их часто парализующую зависимость от подключения.

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

Движение Offline First ищет изящную гармонию с этим простым фактом жизни. В Offline First отсутствие подключения — это просто еще одно нормальное состояние приложения. На самом деле это состояние по умолчанию! Худи с энтузиазмом принимает эту философию. За API стоит полная интерфейсная реализация временного локального хранилища и автоматическая изящная синхронизация всякий раз, когда соединение становится доступным.

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

Конечно, эта модель имеет свой собственный набор уникальных дизайнерских задач и подходов, но команда Hoodie является пионером в методах решения этих проблем.

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

Простое приложение с капюшоном

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

Под обложками Hoodie, по сути, представляет собой комбинацию серверной части, встроенной в NodeJS, и клиентской библиотеки JavaScript. Помимо простого процесса установки и развертывания, разработчик, работающий над приложением, будет работать только с кодом на стороне клиента. Встроенная библиотека может взаимодействовать со стороной сервера, и разработчик ничего не знает о том, как она работает.

Что, если наше приложение требует, чтобы мы сделали что-то нестандартное на сервере? Мы всегда можем создать плагины Hoodie. Вот еще немного информации о плагинах.

Начало работы с приложением Hoodie

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

 hoodie new toptalCommunity

Это создаст инициализированное приложение Hoodie, в котором уже есть некоторый код, и мы уже можем запустить наше приложение! Если мы напечатаем

 cd toptalCommunity hoodie start

браузер откроется с образцом приложения от команды Hoodie:

В этот момент я провел небольшую уборку. Приложения Hoodie в настоящее время поставляются с Bootstrap и Prism, но я удалил предоставленные версии. Мне не нужна была Prism, и я хотел использовать свою собственную версию Bootstrap, чтобы использовать шрифты и JS, которые хотел. Я также внес некоторые изменения в main.css при создании приложения, чтобы придать ему собственный стиль и использовать мой простой загрузочный шаблон. Я использовал jQuery только для манипуляций с DOM и событий. Худи позаботится обо всем остальном.

Худи и код мечты

Работая над созданием этого примера приложения, я быстро осознал все преимущества работы с Hoodie. Так много обычных вопросов, на которые нужно ответить при запуске проекта, просто не было. Худи позволил мне просто написать код и увидеть приложение вживую и в рабочем состоянии.

Какую стратегию мы должны использовать для управления учетными записями пользователей? Плагин учетной записи Hoodie является ответом. Как мы должны хранить наши данные на бэкэнде? Простой API-интерфейс хранилища Hoodie справится с этим за нас, предоставляя нам функциональность Offline First бесплатно! Не требовалось никаких усилий, чтобы заставить это приложение Hoodie работать в автономном режиме, оно просто работает.

Давайте немного углубимся в некоторые реализации:

Управление учетными записями пользователей

У Hoodie есть плагин, который берет на себя управление учетными записями, который называется hoodie-plugin-users . API не может быть проще.

Как добавить нового пользователя?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Как мы авторизуем пользователя?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

У нас есть зарегистрированный пользователь?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

Это действительно не может быть проще. О, подождите, и как наш пользовательский интерфейс будет реагировать на все это? Толстовка приготовила для вас события

Реагировать на вход пользователя:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

Хранилище данных

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

Hoodie позволяет нам добавлять данные в свое локальное хранилище без входа в систему, так как же он узнает, какому пользователю принадлежат эти данные? Что ж, он сохраняет его локально и не будет синхронизироваться с сервером, пока этот пользователь не войдет в систему. Hoodie также позаботится о том, чтобы только этот пользователь мог получить доступ к этим данным.

Итак, вот как это работает:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

Это так просто! Хорошо, это поможет нам создать событие, как мы поделимся им с другими? Здесь нам поможет global share plugin . Мы должны установить его, так как это не плагин по умолчанию:

 hoodie install global-share

Теперь у нас есть плагин, давайте использовать его! Мы должны опубликовать данные, которые мы уже добавили в наше пользовательское хранилище, в глобальное хранилище.

 hoodie.store.findAll('event').publish();

Это пометит все события, сохраненные для этого пользователя, как общедоступные, поэтому при запросе глобального хранилища мы получим эти данные в качестве результата.

 hoodie.global.findAll('event'); //This is read-only

На странице «Мои события» пользователь может создавать события, которые публикуются непосредственно в глобальном хранилище.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

Опубликованные события видны всем, поэтому теперь любой пользователь может видеть события, созданные на странице «События».

Так что насчет данных, которые не должны быть общедоступными? Мы сохраняем события, к которым подал заявку наш пользователь, и показываем их на странице «События». Когда пользователь нажимает кнопку «Применить», выполняется следующее:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

На двух снимках экрана ниже показаны два окна браузера, запущенные одновременно. В первом браузере пользователь зарегистрирован как пользователь a@aa , который подал заявку на событие A. Во втором случае пользователь b@bb вошел в систему и подал заявку на B Event .

Длинный опрос

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

Это очень легко сделать. В нашем примере приложения одна строка сделала свое дело:

 hoodie.global.on('add:event', loadEvent);

Эта простая строка позаботится о длительном опросе сервера для проверки новых событий, которые могли быть добавлены другими пользователями, и добавления их на страницу «Мои события».

Некоторые проблемы

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

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

В библиотеке также по-прежнему отсутствует множество важных вещей, которые вам понадобятся в любом производственном приложении, таких как проверка данных, URL-адреса, на которые можно ссылаться, среда тестирования и частный обмен данными (хотя они уже добились хорошего прогресса в этом последнем). Чтобы прямо сейчас использовать Hoodie в продакшне, нам пришлось бы соединить его с другим решением, таким как AngularJS, Ember или любым из многих других решений, которые помогают нам убедиться, что у нас есть правильно структурированный и поддерживаемый код JavaScript для наших проектов Front-End. Поскольку в наши дни эти фреймворки приближаются к сложности серверных технологий, это решение в значительной степени противоречит цели Hoodie.

Будущее толстовок

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

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

Если команда Hoodie продолжит тяжелую работу, API должен быть готов к работе в прайм-тайм в кратчайшие сроки. Если вы хотите следить за прогрессом команды Hoodie, просто взгляните на их трекер вех.

Hoodie обещает упростить разработку отличных приложений для путешественников. Если идеи, которые воплощает Худи, приживутся, мы увидим, что потребность в команде бэкенд-разработчиков для каждого нового проекта отпадет в прошлое. С такими проектами легко представить золотой век для фронтенд-разработчиков в недалеком будущем. Точно так же преимущества для пользователей, предлагаемые идеалом Offline First, — это огромный шаг к доступности, расширяющий охват нашего мобильного, связанного образа жизни в тех местах, где сам Интернет не работает.

Перейдите к Толстовке, чтобы следить за прогрессом Толстовки и стать частью захватывающих новых изменений, которые она готовит.

Отдельное спасибо команде Hoodie. Логотип Hoodie используется с разрешения проекта Hoodie Open Source.