Heavily cached pages generated by Drupal, user authentication and personalized components augmented by a React frontend library with a focus on scalability, maintainability, and future proofness.
VIRTUAL AND INTERACTIVE
Building a scalable and interactive experience for virtual events
By offloading authentication and personalization from Drupal to small, high-performant and cacheable React components, we built a virtual community experience with the future in mind.
The Challenge
Build an interactive virtual event experience to handle tens of thousands of users from around the world, that could scale to become part of the new face of Autodesk’s virtual community.
The Solution
The Result
Personalized
experience for real-time presentations and conversations
100,000
virtual attendees
200+
countries and seven languages
The Background
In 2020, with the coronavirus pandemic all but eliminating in-person events, Autodesk University conferences needed to go virtual. Autodesk University (AU) is Autodesk’s educational community, established around an annual conference in Las Vegas and expanded through global participation.
This main event would be the first to move online and would be held as a digital conference in November 2020. An estimated 60,000+ attendees would participate.
And the goal was to have attendees, who could register for the conference free of charge, be able to:
And the goal was to have attendees, who could register for the conference free of charge, be able to:
- Stream a 24-hour live broadcast with different programming for different geographic regions
- Watch all 700+ classes — which speakers would pre-record — as on-demand content
- Attend 350+ live Q&As which would be scheduled by speakers who were preparing classes as instructional demos and hands-on labs
- Participate in meetups and other community events
Community & Connection
Besides these key additions, the intent was to put a higher emphasis on community features throughout the website so that attendees can connect with each other.
This included supporting seven languages.
This included supporting seven languages.
"They [Relevant Bits] were a key part in making sure that we were able to deliver the platform’s core features and support the conference event."– Alodia Cano, Product Manager, Autodesk
STRATEGY 1
Create a scalable virtual experience
Given the platform's personalized nature, every page needed to be rendered on every request, causing significant stress on the entire system. To scale, we needed to depend on Drupal for content management while simultaneously finding a way to serve from cache as much as possible.
“Performance was by far our top priority. Load testing began months before launch and continued until a few weeks before launch. Above all else, we had to meet or exceed performance goals for the event to proceed as planned."Edward de Groot – CEO, Relevant Bits
Update the log-in process
With these changes, only content editors and administrators were allowed to log in to Drupal. Everyone else used the newly built React library to authenticate with Autodesk's single sign-on service.
Cache website content
With Drupal tuned to generate static content only, we made sure we had the most efficient CDN caching in place for the entire website content. We optimized API endpoints used by our React library to serve cached data whenever it’s feasible.
Decouple Drupal
In order to provide a much higher degree of scalability, we decoupled user authentication and personalization from Drupal, allowing us to deliver the same pages to all users using a long-term cache and a global, distributed CDN.
Test. Test. Test.
We load tested to ensure the site could handle 60,000+ visitors. Good thing, because more than 100,000 attended! Even with the increased volume, the site performed as it was designed
Use the existing React library
This and other new features were an advancement of our existing community-focused React library, which already provided community features like recommending content, commenting, following people, and more.
STRATEGY 2
Personalize the virtual experience for every user
For a long time before the conference we had been working on a React library to provide community features in a scalable way. With that foundation in place we were able to rapidly roll out new components that showcased speakers, activity by attendees, and featured events — all geared towards the industry of the visitors.
Give attendees better control
By developing a new microservice, conference attendees could manage their schedule. We built several components which utilized this data. For example, attendees were able to see their upcoming events on the homepage of the conference.
Reuse existing React library
Prior to the conference, we had been working on a React library to provide community features in a scalable way. With that foundation in place we were able to rapidly roll out new components that showcased speakers, activity by attendees, and featured events — all geared towards the industry of the visitors
STRATEGY 3
Design a platform that is easily maintained
With help from the fantastic Dev-Ops teams at Autodesk, the entire system was built on an efficient CI/CD system, making things very manageable.
Use Drupal for static content
Our new approach was to use Drupal only for outputting static content, but we still needed to design a system that allowed creating page layouts with static and dynamic content mixed together in a flexible way.
Ensure content editing is easy
Content editors still logged-in directly to Drupal to update content, so we managed to mitigate any changes to how they operated and managed the site.
Develop method for dynamic content
We came up with a way for content editors to add the dynamic components onto the pages they managed, allowing them to configure properties which affected how the components behaved.
“Strategically, we had to decide what the best approach was — the most scalable approach, the most secure approach. And then we had to distribute the work across the three teams that were doing the development work."Nic Brincat – Agile Project Manager, Relevant Bits
STRATEGY 4
Coordinate virtually across multiple teams
It might sound cliché, but working on a project this big — and under aggressive deadlines — requires incredible teamwork. AU 2020 was no exception. We partnered with three separate development teams, in addition to Autodesk's own internal team, to evaluate and execute upon the most critical details.
Stretched between San Francisco and Budapest, there were few hours each day when the project wasn't being worked on.
Stretched between San Francisco and Budapest, there were few hours each day when the project wasn't being worked on.
STRATEGY 5
Build for future growth
The highlight of this project was certainly the offloading of authentication and personalization from Drupal to small, high-performant and cacheable React components and scalable microservices.
By introducing the new microservice and progressively adding decoupled components to pages, we set the platform up for future growth.
As the development of the site continues, we’re able to gradually replace functionality and components with solutions that are more focused on scalability, performance, and rich user experience.
By introducing the new microservice and progressively adding decoupled components to pages, we set the platform up for future growth.
As the development of the site continues, we’re able to gradually replace functionality and components with solutions that are more focused on scalability, performance, and rich user experience.
Check out the Recap
Autodesk provides an overview of the conference on their blog. Take a look at session recordings, presentations, and more from AU 2020.
An Ongoing Partnership
Beginning in 2018, we started with AU’s website launch project. As the trust grew, so did the projects. We continue to partner with Autodesk on a number of efforts and greatly value our ongoing relationship.
We want to build something great with you.
Relevant Bits is a strategic design and development team, brought together by the desire to do better and be better. Tackling projects that require an innovative, cooperative, and technical approach, Relevant Bits partners with companies that want to solve complicated problems. From manufacturing and retail to community education, Relevant Bits leads projects from initial