Talks
Speakers
Events
Topics
Sign in
Home
Talks
Speakers
Events
Topics
Leaderboard
Use
Analytics
Sign in
Suggest modification to this talk
Title
Description
RailsConf 2017: React on Rails by Jo Cranford Eighteen months ago, our fairly typical Ruby on Rails app had some mundane client side interactions managed by a tangle of untested JQuery spaghetti. Today, new features are built with React, CSS modules, and a far better UX. With ES6 front end code, processed with Babel, compiled (and hot-reloaded in development) with Webpack, and tested with Jest – all within the same Rails application. Come along to this talk to hear how we migrated our app a piece at a time to use technologies that don’t always sit naturally alongside Rails. I will cover technical implementations and lessons learned.
Date
Summarized using AI?
If this talk's summary was generated by AI, please check this box. A "Summarized using AI" badge will be displayed in the summary tab to indicate that the summary was generated using AI.
Show "Summarized using AI" badge on summary page
Summary
Markdown supported
In the talk "React on Rails" presented by Jo Cranford at RailsConf 2017, the speaker shares the journey of migrating a Ruby on Rails application from a jQuery-based front end to a modern, React-driven user interface. The story begins with a typical Rails application that had become cluttered with untested jQuery code, which presented challenges in maintaining and scaling the application. Over time, the need for a better user experience and more efficient coding practices drove the team to adopt React and other modern JavaScript technologies. **Key Points Discussed:** - **Background of the Application:** The speaker introduces Colt Tram, an online application for employee engagement surveys, which initially relied on jQuery and Bootstrap for its frontend development. jQuery's ease of use allowed rapid development but led to unmanageable spaghetti code. - **Evolution of Front-End Technologies:** As JavaScript evolved, new frameworks emerged, and the speaker outlines the shortcomings of jQuery in a more complex application environment, as well as the shift towards component-based architecture with React. - **Adopting React:** The transition to React was motivated by its one-way data flow, virtual DOM, and the ability to incrementally introduce components without a complete overhaul of existing code. This approach was facilitated by hiring a React expert, which was crucial for a smooth transition. - **Integration with Rails:** The speaker details the technical implementation, including integrating Babel for ES6 support, using Webpack for asset management, and ultimately replacing Sprockets with Webpack to allow for more advanced JavaScript coding and maintainable CSS modules. - **Testing with Jest:** The team adopted Jest for unit testing their React components, which improved code quality and allowed for the introduction of new testing paradigms like shallow rendering and snapshot testing. - **Front-End Development in Practice:** The use of Redux for state management, react-router for navigation, and CSS modules for styling were introduced to enhance the user experience and application performance along the way. The speaker emphasizes the benefits of functional programming principles adopted through React, resulting in cleaner and more maintainable code. - **Lessons Learned:** Throughout this journey, the speaker highlights the importance of treating front-end code as a first-class citizen, fostering a culture of better coding practices, and the ongoing need for a shared component library to maintain consistency across the application. **Conclusion:** The presentation concludes with reflections on the evolution of their front-end architecture and the importance of user feedback, acknowledging that while challenges remain, the transition to React has significantly improved both development processes and user interaction with the application. The speaker encourages others undergoing similar journeys to embrace modern frameworks like React while learning from their experiences.
Suggest modifications
Cancel
