On the July 8th edition of React Wednesday, we spoke with Cory Webb and Nathan Smith of Reaktiv Studios – a VIP WordPress partner. This duo created an application called Be a Speaker which is built with React. We spoke of the tool, development techniques, development philosophies, and took a dive into the React code powering the site and posted the recording on YouTube.
Be A Speaker at matches conferences with speakers. Conference organizers can list their event for free. In the listing is the event, a link to the speaker application process, topic tags, and other helpful information.
Speakers can find events of interest in a single place, which can help conference organizers spread the word beyond their social media and email channels.
Cory and Nathan built the site out of a desire to help events find speakers, and speakers find events. Cory enjoys speaking at WordCamps and came up with this idea while searching for WordCamps to attend.
Technical Details
The Be a Speaker application is partially WordPress and partially React. The React parts are used for interactivity, sorting, and filtering. WordPress stores the event data via a custom post type. WordPress generates the administration screens and functions automatically so the team did not have to build those parts bespoke. The stored data is made available to React via the WordPress REST API.
The React portion of the app is well structured. It is designed to let the data drive the output. For example, when the event data list loads, the React app inspects the data and pulls out relevant topics and location info to allow filtering. This is one of many choices that informed the robust design, which can grow over time without requiring front-end code changes.
Nathan said “front-end is the inverse of a multi-headed hydra.” Then he explained that the front-end is the single point where the user interacts. The front-end could connect to multiple “bodies,” such as WordPress, Ruby on Rails, Node, or anything else that speaks JSON. By designing the front-end to adapt to future complexities, the back-end can potentially change over time.
The team uses React Table by Tanner Linsley, which provides a set of helpful React hooks for column sorting and accessibility markup attributes. React Table can be used to make a traditional <table> output, or could even be applied to a custom implementation using flexbox and <div>.
We talked a bit about hooks like useReducer and useContext. Nathan gave a crisp overview of how to best use these built-in hooks, whereas in the past one might have used Redux. By having a centralized place to store app state, UI components can be free from passing around prop changes through the tree..
What is a Render Function?
Nathan is also a big fan of using a conditional Render function. This is an abstraction to allow for rendering (or not!) of markup based on truthiness. This technique shortcuts a bit of logic that a React developer would normally use for this purpose. In the screenshot below, you can see how this works at the UI level. Here is a link to the code sample that is being the Render component shown below.
“If you can’t feed a scrum team with 2 pizzas, it’s too large…”
…is a good segue into the topic of how to participate in open source. Building something to scratch one’s own itch is a great way to start a useful project. The internet is vast, with millions of developers. The solution you build for your own situation may also be useful to someone else. Rather than compare your open source ideas against huge projects like React, or Angular, it is more useful to think locally. Nathan advocates the idea of “take a penny, leave a penny” on a galactic scale.
How you can help
Add events you learn about to the Be a Speaker site. There are definitely inefficiencies in how speakers find events. Events usually have a fixed period of time where the event is soliciting ideas for sessions. It is up to the speaker to find the event site before the call for speakers deadline has expired.
Conversely, event organizers are always pushing for the best speakers and content, but can only do so much promotion until they reach network saturation. By having a registry of sorts for events, both parties can more easily find one another.
Helpful Links
- Website: https://beaspeaker.at
- Twitter: @beaspeaker_at
- Classnames https://www.npmjs.com/package/classnames
- Render example: https://ui.reaktivstudios.com/storybook/?path=/story/render–example
