Applying Lessons from React JS Conf at Social Tables
By Judy Jow and Ricky Vetter
Social Tables is a DC area startup that provides collaborative planning tools for the hospitality industry. We started out as a Rails app and transitioned to full-stack JavaScript as we built out our platform. We strive to use new and exciting technologies as we continue to develop our applications. We’ve been working with React for over 6 months and so far it’s been fantastic. When Facebook announced React JS Conf, we were excited to be able to attend, contribute, and bring back new ideas to make our applications even better. Here is a rundown of what we learned, and how we will be applying it at Social Tables.
FixedDataTable
http://conf.reactjs.com/schedule.html#making-your-app-fast-with-high-performance-components
One of the most popular parts of our main application is Attendee Manager. Event coordinators are able to upload guests lists and use this tool for tagging, seating and relationship building. It is currently built as a giant React table, which has caused diminished performance at higher attendee counts in the thousands. Facebook’s first open source React component seems like a pretty obvious solution to this problem and is one that would be quick to implement.
Immutable.js
http://conf.reactjs.com/schedule.html#immutable-data-and-react
http://conf.reactjs.com/schedule.html#refracting-react
Immutability was a huge theme at React JS Conf. One of the biggest promises of React is the ability to maintain a smooth-running app, even when it handles huge amounts of data. Immutability takes this promise and gives developers better ways to optimize it. Immutable.js is one solution for immutability in JavaScript and it looks pretty fantastic. It closely mirrors ES6 syntax which is a is a huge advantage in ensuring that the syntax will stay natural and intuitive.
At Social Tables, our app is very front-end heavy with lots of creations, updates, and deletions. Whether you’re an event planner rearranging tables and seating guests or an internal designer drawing a hotel’s floor plan, our data is constantly changing. Although our changes are numerous, they are normally just small changes to an event or a floor plan, which is why immutability is so important. We know that the event or floor plan has changed but we also know that only one tiny portion of it has changed. Immutability would give us a way to quickly resolve what specifically has changed so that we can limit re-rendering to the smallest scope necessary to update an event or floor plan.
React Native
http://conf.reactjs.com/schedule.html#react-native
React Native was the keynote on both days of React JS Conf. It looks pretty incredible and attendees got early access to the code to be able to play around with it. What strikes me as telling is that Jafar Husain, the Cross-Team Technical Lead at Netflix, gave a talk about how they basically implemented React Native in house completely separately from Facebook’s implementation. The beauty of React is not that it has a virtual DOM, it’s that it can diff and create a view of anything.
Social Tables is still looking at building out a mobile team, a process which we have historically outsourced. React Native means that there is less of a bridge between web and mobile, that there can be more JavaScript, and that our current development team only needs minor additions to be able to build incredible native experiences for our mobile users.
Internationalization
When Social Tables first started out, our main customers were local to the DC area and the United States. Because we were rapidly developing and pushing new features, internationalization was not a top priority. But as we’ve continued to expand globally to countries and customers whose native language is not English, internationalization has become a huge concern. In the summer of 2014, we completed an internationalization project to translate our app into Spanish and French. For new development in React, react-intl gives us an easy way to continue making our app friendly to our international customers.
React Router
http://conf.reactjs.com/schedule.html#react-router-increases-your-productivity
Our main app (Venue Mapper and Attendee Manager) is a single-page application which doesn’t use client side routing. There’s no concept of state for the user. When the page first loads, the user is always in venue-mapper mode where they can continue diagramming their event. If the user wanted to send a link to his or her customer to see attendee manager, the user would have to instruct the customer how to get to the list of attendees. Being able to provide deep links in the application would be a huge win for us and our customers, but isn’t really feasible until more of our app is written in React. That being said, many of the newer projects that we are taking on use React Router and we are really excited to provide our customers deep links.
Most Exciting for ST
We’re most excited about how we can improve our customer service. Helping our customers and ensuring that they have a fantastic experience creating events is incredibly important to us. Being able to use things like serializable state provided by immutable data and persistent URLs provided by React Router mean that we can more quickly find and address problems that our customers are having.
