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/

Transcript

1. Raymond RUTJES - @rayrutjes Full stack engineer Building Vue InstantSearch
2. @rayrutjes About me • Self-taught developer • Couple of web agencies • Freelancing • Ran my own company > 5 years • Happy member of Algolia
3. @rayrutjes About me • Self-taught developer • Couple of web agencies • Freelancing • Ran my own company > 5 years • Happy member of Algolia
4. What is Vue InstantSearch?
5. @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
6. @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
10. @rayrutjes What we are going to talk about • Search Store • Provide/Inject • Mixin • Computed setter/getter • Slots and Scoped slots
11. The Search Store
12. @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
14. @rayrutjes
15. Provide / Inject
18. Mixin
19. @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
23. Computed setters/getters
25. Re-usable Components
26. Component = Behavior + UI
27. @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
28. @rayrutjes UI • The look & feel of the component • Always needs to be customize • -> translations • -> adapting look & feel to the existing styles
31. Slots and Scoped slots
36. @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
37. Wrap up
38. @rayrutjes Concepts & features • Search Store • Provide/Inject • The Component Mixin • Computed setter/getter • Slots and Scoped slots
39. @rayrutjes Links • Vue InstantSearch project: https://community.algolia.com/vue-instantsearch/
40. @rayrutjes Links • Vue InstantSearch project: https://community.algolia.com/vue-instantsearch/ • Why we built Vue InstantSearch: https://blog.algolia.com/laravel-vue-js-search/
41. @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
42. Thank you Raymond RUTJES - @rayrutjes Full stack engineer