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

Instantsearch.js V2, past present and future

Instantsearch.js V2, past present and future

InstantSearch.js V2 is about to be released. With this presentation you'll discover why and how Algolia invests so much in UI libraries, as well as the new features of InstantSearch.js V2.

This presentation was given for the first publicly on June 23rd 2017 at the Algolia Search Party in their Paris office.

Transcript

  1. Alexandre Stanislawski @bobylito InstantSearch.js V2 Software engineer #AlgoliaSearchParty

  2. InstantSearch.js V2 About me > Software engineer at Algolia >

    One of the first 2 dev on instantsearch.js > Lead of InstantSearch.js #AlgoliaSearchParty Alexandre Stanislawski
  3. InstantSearch #AlgoliaSearchParty Alexandre Stanislawski

  4. #AlgoliaSearchParty Alexandre Stanislawski @bobylito

  5. InstantSearch.js V2 #AlgoliaSearchParty Alexandre Stanislawski @bobylito Started in 2015

  6. InstantSearch.js V2 Well received! 1700+ live implementations 2200+ commits 42

    contributors 1600+ GitHub stars 111 releases 633 upvotes on Product Hunt #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  7. InstantSearch.js V2 Family is growing #AlgoliaSearchParty Alexandre Stanislawski @bobylito

  8. “ InstantSearch.js V2 Search is its own domain of expertise

    #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  9. InstantSearch.js V2 > Translate the concepts of search into UI

    > Package the UX best practices Why InstantSearch #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  10. InstantSearch.js V2 Key concepts #AlgoliaSearchParty Alexandre Stanislawski @bobylito

  11. searchBox menu hits

  12. InstantSearch.js v2 #AlgoliaSearchParty Alexandre Stanislawski @bobylito

  13. InstantSearch.js V2 > from your feedback > from our experience

    with the other libraries > from our internal usage We’ve learned a lot... #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  14. InstantSearch.js V2 > The customisation is too limited > The

    learning curve is steep beyond the basics > Some API choices are blocking us Key learnings #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  15. InstantSearch.js V2 > A new API for customization: the connectors

    > New documentation > Overall improvements New features #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  16. InstantSearch.js V2 Connector - example 1 / 3 #AlgoliaSearchParty Alexandre

    Stanislawski @bobylito
  17. InstantSearch.js V2 Connector - example 2 / 3 #AlgoliaSearchParty Alexandre

    Stanislawski @bobylito
  18. InstantSearch.js V2 Connector - example 3 / 3 > The

    markup is different > Not doable in v1 > Can be done with the menu connector in v2 <div>item 1<div> <div>item 2<div> <div>item 3<div> <div>item 4<div> <select> <option>item 1</option> <option>item 2</option> <option>item 3</option> <option>item 4</option> </select> #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  19. InstantSearch.js V2 > Let the user customize the widgets completely

    > Separate behavior and rendering > This is a refactoring not a new set of options Connectors in a nutshell #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  20. InstantSearch.js V2 Without connectors Widget factory + Templates Widget instances

    search.add(widget) #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  21. InstantSearch.js V2 With connectors Connector Rendering Widget factory Widget instances

    search.add(widget) + #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  22. InstantSearch.js V2 New documentation #AlgoliaSearchParty Alexandre Stanislawski @bobylito

  23. InstantSearch.js V2 > Some breaking changes. Guide: how to migrate

    > New internal implementation of the slider widget > A proper default theme > New way to test widgets “à la story book” > Lighter build > Updated the searchFunction implementation Improvements #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  24. InstantSearch.js V2 > Give you more power to customize widgets

    > Simplify the library to new users > Make the core more future proof Summing up #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  25. The (near) future #AlgoliaSearchParty Alexandre Stanislawski @bobylito

  26. InstantSearch.js V2 > Stabilize the core (as started in v2)

    > Modernize the stacks (test, build…) > Add more guides and content to the documentation 2.1 #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  27. > Bring more features from the engine into the UI

    > Do not be in your way > Provide consistency across InstantSearch projects Guidelines for the future InstantSearch.js V2 #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  28. The release candidate is live on NPM and jsDelivr: -

    https://community.algolia.com/instantsearch.js/v2 - https://yarnpkg.com/en/package/instantsearch.js Documentation is also available: - https://community.algolia.com/instantsearch.js/v2/ Show us what you’re doing with InstantSearch.js v2 on the community forum (http://discourse.algolia.com) InstantSearch V2 is available now InstantSearch.js V2 #AlgoliaSearchParty Alexandre Stanislawski @bobylito
  29. Thank you Questions? Alexandre Stanislawski @bobylito Software engineer #AlgoliaSearchParty