I have been working on a prototype for the edX marketing site to move rendering from client-side to server-side. (Note that the marketing site is separate from the LMS.) The goal is to decrease the time to first paint—time users must wait to actually use our site. Today that time can range from 2s for a decently-powered device in the United States to 12s for low-powered devices in India. While I initially set out solely to test server-side rendering (SSR), it became clear almost immediately that we could save a lot of money—approximately 90% of our Drupal hosting fees—by moving to a serverless deployment architecture. Below are a few notes I have compiled over last couple weeks.
Around this time I also listened to an Interview with Yan Cui this weekend on the conversion work he did at a startup, prompting my investigation into serverless deployments. The interview/blog are interesting because he provides good detail around both now and why the company made this change.
The source code for this prototype is available at https://github.com/clintonb/edx-marketing-site-frontend. It is deployed to AWS.
I used Claudia.js to deploy since it met my immediate needs. In the future, it might be worth exploring Serverless framework since it is cloud provider-agnostic and may offer a few additional features.
Additionally, I also make use of edx-bootstrap, but styling is not my primary focus for this prototype.
- Render the instructor page on the server.
- Deploy in a serverless manner (e.g. no EC2)
- Support internationalization (i18n) for the Spanish language.
- Cache responses on a CDN.
- Style pages to exactly mimic edx.org.
This diagram represents the current deployment architecture. Static assets—CSS and JS—sit in an S3 bucket. The server lives on Lambda.
There is also a CloudWatch scheduled event that makes a call to the Lambda function every 15 minutes to help avoid cold starts and longer load times for initial users.
In the future we may explore deploying completely to S3 for a site that is truly serverless. (I had success with this for an earlier Django-based prototype.)
The links below show a single instructor’s page. The data is real. If you want to see another instructor, change the path to one on the marketing site. For example, to view Anant’s page change, https://www.edx.org/bio/anant-agarwal-0 to http://edx-test.clintonblackburn.com/bio/anant-agarwal-0. Want to see it in Spanish? Either change your browser’s language or prepend
/es to the path: http://edx-test.clintonblackburn.com/es/bio/anant-agarwal-0.
- Enrollment buttons
- Prices displayed on program—MicroMasters, Professional Certificate, XSeries—detail pages
- Username/links in the navigation bar
Some at edX agree with my assessment of isomorphic JS and React. Some do not. We will continue to debate the merits of React for the site in its current form and its eventual evolution. Regardless, I see more serverless deployments in our future for our smaller, less-dynamic, services such as the marketing site and credentials service.