Algolia Search Party is a monthly Meetup we organize around a common theme that makes fellow devs’ lives easier. Topics have included Laravel, static websites and, this month, React and some cool things you can do with it.

Since the talks were useful and well received, we are sharing summaries and videos with you.

Ives van Hoorne flew in from the Netherlands to share his work on CodeSandbox. The idea for CodeSandbox came when Yves was trying to help some friends with code, but had no easy way to share projects. Because mentally parsing and running code in their heads was cumbersome and error-prone, Ives decided to invent a collaboration tool.

CodeSandbox UI is a split view. On the one side you have your code, and on the other you have a live preview of the code. Whenever you update the code, the preview automatically reloads. The nice thing about this view is that you can load a full project, require any `npm` dependency and run it directly in the browser.

Technically, CodeSandbox is written in React and is made of two different apps. One is for handling the code editor, the other is for running the preview. Both apps are running on different subdomains so a live preview cannot hijack your CodeSandbox credentials. Whenever code is updated in the editor, CodeSandbox will compile/transpile it and send it to the live preview for execution. Any errors generated are then sent back and displayed in a more human-friendly way. As Ives put it: “Humans will be reading the code and humans are visually focused.” UI is just one way that CodeSandbox is improving the developer experience.

An example: the Webpack visualization UI built on top of webpack-dashboard. It gives you a clear visual representation of your bundles and their respective sizes. CodeSandbox also goes further than displaying what the error is; it also explains what went wrong and how to fix it. For simple errors like a missing dependency, it even provides a one-click button to add the dependency.

Algolia plays a role in the quest to provide the best DX, as we provide the search into all the `npm` packages via the index we built and maintain for Yarn (available for anyone to use). CodeSandbox uses it for discovery of packages as well as autocomplete when adding a `require`. We can’t help but quote Yves: “I’ve seen search. Algolia is not search, it’s instant results”. Because of that speed, Algolia can be used directly in the UI, and it took Yves only one day to integrate it.

Ives finished his talk with more ideas about how he could use Algolia to improve the DX of CodeSandbox—further including the re-use of the indices in DocSearch to provide contextual documentation help directly from the editor. This would remove one more step for users and allow them to stay in the zone for longer. Another idea would be to improve the error display by automatically searching for the error and displaying the documentation about it. We love the ideas and will work with Ives to make them happen!

CodeSandbox is open source and the code is available at https://github.com/CompuIves/codesandbox-client.

Aurore Malherbes, a mobile developer specialized in React Native presented an exercise she does with any new member joining her team: recoding Redux from scratch to understand how it works.

Aurore’s talk was inspired by Dan Abramov’s Redux course on egghead.io. Redux itself is not hard, but to use it correctly one needs to actually understand it — and the best way to understand it is to build it.

Aurore’s talk was clear,explaining step-by-step in 15 minutes how the state, subscribe and dispatch all fit together to form the Redux event loop. I won’t be repeating everything Aurore explained in her talk and would instead suggest watching the video with explanations so clear it would do them injustice repeating them “on paper”.

Last but not the least, our own Marie Thuret talked about unique challenges mobile search presents: screen size, connection speed, low connectivity and more, as well as how to overcome them with our React InstantSearch library

 

InstantSearch packages a set of UI components on top of the Algolia API, that include all the best practices you see above. All those components are open source and extensible, letting you add your own custom logic.

Marie ended her talk with a live demo of implementing a mobile search using our React-flavored version of InstantSearch. Step by step, from the search bar to the infinite scrolling of results, including the highlight. In less than 5 minutes, you too can have a working search. Check it out!

…to our speakers and the audience; both made the evening super enjoyable and informative. We hope to see you at one of our community events next time, and meanwhile, stay tuned to this space for interesting talk summaries and more.

The post What Can’t React Do? appeared first on Algolia Blog.