Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Vue InstantSearch - Vue.js Paris #11 (...

Building Vue InstantSearch - Vue.js Paris #11 (@algolia)

Building a search engine is complex.
Building an instant search / as you type search user interface … is not easy either.
Algolia solves the first point by providing a hosted search engine as an API.
The JavaScript Vue InstantSearch library solves the second point.
Here are the slides of the 30 minutes talk in which I shared some of the Vue features and patterns we leveraged to make the library as easy to use as possible.

The talk is available here: https://www.youtube.com/watch?v=1djmQvt1xDY

Content:
- Search Store
- Provide/Inject
- Mixins
- Computed Setters
- Slots & scoped Slots

https://www.meetup.com/Vuejs-Paris/events/243622730/

Raymond Rutjes

October 04, 2017
Tweet

Other Decks in Programming

Transcript

  1. @rayrutjes About me • Self-taught developer • Couple of web

    agencies • Freelancing • Ran my own company > 5 years • Happy member of Algolia
  2. @rayrutjes About me • Self-taught developer • Couple of web

    agencies • Freelancing • Ran my own company > 5 years • Happy member of Algolia
  3. @rayrutjes InstantSearch - Is the name of libraries to create

    search UXs on top of Algolia - A bunch of re-usable components - Focus on improving developer productivity & happiness
  4. @rayrutjes InstantSearch - Is the name of libraries to create

    search UXs on top of Algolia - A bunch of re-usable components - Focus on improving developer productivity & happiness
  5. @rayrutjes What we are going to talk about • Search

    Store • Provide/Inject • Mixin • Computed setter/getter • Slots and Scoped slots
  6. @rayrutjes The Index component • An Index is like a

    table in your database • Each row is called a record in Algolia • Each search operation will target a single index
  7. @rayrutjes What are mixins “Mixins are a flexible way to

    distribute reusable functionalities for Vue components. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.” https://vuejs.org/v2/guide/mixins.html
  8. @rayrutjes Behavior • Is the core logic of your component

    • If needs to be adapted, guide users towards creating custom components • Provide common components out of the box
  9. @rayrutjes UI • The look & feel of the component

    • Always needs to be customize • -> translations • -> adapting look & feel to the existing styles
  10. @rayrutjes My tips regarding slots • Incredibly simple way for

    users to extend your components • Use them! • Expose at least the variables you use in your default implementation • Developers are sometime reluctant to create “custom components”, so slots are a friendlier alternative
  11. @rayrutjes Concepts & features • Search Store • Provide/Inject •

    The Component Mixin • Computed setter/getter • Slots and Scoped slots
  12. @rayrutjes Links • Vue InstantSearch project: https://community.algolia.com/vue-instantsearch/ • Why we

    built Vue InstantSearch: https://blog.algolia.com/laravel-vue-js-search/
  13. @rayrutjes Links • Vue InstantSearch project: https://community.algolia.com/vue-instantsearch/ • Why we

    built Vue InstantSearch: https://blog.algolia.com/laravel-vue-js-search/ • @rayrutjes on Twitter and GitHub