От автора: сегодня мы поговорим о том, как осуществляется в приложениях Angular поиск. Рады продемонстрировать Angular InstantSearch — нашу новейшую библиотеку для создания пользовательских интерфейсов поиска в приложениях Angular.
Наша миссия в Algolia состоит в том, чтобы убедиться, что любой веб-сайт или приложение имеет лучшую практику поиска. Но поиск — это особенная область знаний, со специфическими понятиями, специальными навыками кодирования и лучшими практиками UX / UI. Эти знания трудно получить, так как поиск — это только часть проекта, поэтому мы хотим, чтобы любой разработчик мог легко создать пользовательский интерфейс поиска, даже если остальная часть головоломки поиска собрана кем-то другим.
Фреймворки и пользовательский интерфейс поиска
В 2015 году мы выпустили наше первое решение для предоставления библиотеки поиска UI / UX: InstantSearch.js . Цель InstantSearch.js заключалась в том, чтобы позволить разработчикам быстрее создавать свой поисковый интерфейс, предоставляя набор готовых виджетов пользовательского интерфейса . С тех пор, как возобладала система веб-фреймворка, мы построили общее (Vanilla JavaScript) решение вместо одного, адаптированного к определенному фреймворку.
Но вскоре стало ясно, что мы должны сделать еще кое-что, если хотим предоставить лучший опыт разработчику. При использовании определенного веб-фреймворка разработчик ожидает определенный вид API, который мы можем предоставить только с выделенными версиями InstantSearch. Вот почему в 2016 году мы начали выпускать InstantSearch «других оттенков», вроде React InstantSearch и Vue InstantSearch.
После нескольких запросов от наших пользователей мы подумали, что разработчики Angular заслуживают отдельную библиотеку InstantSearch.Этот оттенок InstantSearch, как и все наши продукты, был создан в сотрудничестве с нашими пользователями. Мы связались со всеми нашими нынешними и потенциальными пользователями, заинтересованными в Algolia + Angular, и предложили им присоединиться к частному чату, где они могут постоянно оставлять отзывы о библиотеке. Исходя из этого, мы создали первую бета-версию; сегодня Angular InstantSearch уже используется в производстве и имеет большой успех.
Давайте рассмотрим некоторые из основных функций библиотеки.
Сборка для Angular 4 и 5
Angular InstantSearch совместим с Angular 4 и 5, что означает, что даже если вы все еще находитесь на Angular 4, вы можете использовать библиотеку и быть уверенным, что она будет работать, когда вы перейдете на Angular 5. Но она не совместима с Angular 1 и 2, потому что изменения между Angular 2 и Angular 4 или 5 были слишком обширными. Мы также подумали, что лучше предоставлять большие возможности (например, рендеринг на стороне сервера) до последнего, а не быть заблокированным несовместимостью старой версии.
20 готовых к использованию виджетов
Из хорошего окна поиска в правильную систему разбиения на страницы мы получили вас. Этот релиз включает в себя все виджеты, необходимые для создания полного пользовательского интерфейса поиска. Виджеты могут быть полностью настроены, от DOM, которым они генерируются, до их стиля и поведения.
<Declarative /> API
С помощью Angular InstantSearch виджеты можно легко использовать с помощью директив Angular. Это лишь вопрос написания HTML-кода для получения рабочего поиска:
<ng-ais-instantsearch> <ng-ais-search-box placeholder="Search here..."></ng-ais-search-box> <ng-ais-hits></ng-ais-hits> </ng-ais-instantsearch>
Все параметры — это атрибуты, применяемые в директивах виджетов. Построение пользовательского интерфейса поиска теперь может быть достигнуто за несколько минут, оставаясь при этом легко настраиваемым.
Настройки API
Хотя мы определили наиболее распространенные примеры использования и лучшие практики при разработке виджетов InstantSearch, некоторые потребности просто не могут быть достигнуты при одном использовании опций. Ничего страшного.
Angular InstantSearch предоставляет API, позволяющий выбрать нужный рендеринг, не переписывая весь код логики поиска. Например, преобразование виджета меню, которое по умолчанию отображается как список в выпадающем меню, становится простым.
Первоклассная SPA-поддержка
Одностраничные приложения могут предоставлять своим пользователям практические и динамические впечатления, загружая и отображая только соответствующие элементы пользовательского интерфейса, основанные на потребностях и действиях пользователя.
С помощью Angular InstantSearch виджеты теперь- это не что иное, как обычные элементы DOM. Они могут быть динамически добавлены или удалены со страницы. Например, вы можете выбрать отображение только определенного типа фильтров в зависимости от текущего запроса.
Конечно, рендеринг на стороне сервера
Angular 5 поставляется с хорошими утилитами, которые облегчают создание приложений на стороне сервера.
Создание визуализированного приложения на стороне сервера является обязательным для улучшения оценки SEO в поисковых системах, облегчая веб-сканеры, особенно если вы работаете в сфере электронной коммерции. Это также хороший способ ускорить отображение первой страницы для пользователей.
Вот почему мы разработали Angular InstantSearch с рендерингом на стороне сервера, доступным с первого дня.
Попробуйте
Попробуйте Angular InstantSearch! У нас есть учебник по запуску, а также встроены несколько демо, чтобы вы могли быстро увидеть, как он выглядит и как ведет себя. Это первый выпуск Angular InstantSearch, основанный на ваших отзывах, и мы будем обогащать его в ближайшие недели и месяцы.
Автор: Marie-Laure Thuret
Источник: https://blog.algolia.com/
Редакция: Команда webformyself.