NUSMods R - The Engineering Behind

Over the period of a year from Jul 2016 to Jul 2017, NUSMods saw over 2.5 million sessions, over 250,000 users (including returning users) and over 9 million pageviews, peaking at the start of semesters. Freshmen often have difficulty understanding the module and bidding system but with NUSMods the process is made much smoother. Many seniors recommend freshmen to use NUSMods to plan their modules. Even exchange students use NUSMods and they often exclaim that they wished they had such a platform back in their own university. The immense popularity and usefulness of NUSMods and the impact that NUSMods has on the school population drives us to keep innovating and making NUSMods better. Another goal of NUSMods is to provide a platform to encourage students to experiment and create original community-engaging work via the NUSMods API.

Today we are very excited to be releasing a new version of NUSMods for everyone to use. This release is NUSMods’ third version since the project was originally started in 2012 by Beng, founder and creator of NUSMods. NUSMods R has been in development for over a year and will finally be available for use thanks to the hard work of a team of young and talented developers from School of Computing. NUSMods is a student-initiated project driven by the needs of students and desire of individuals to solve common university life problems with technology. The NUSMods core team has put in a tremendous amount of time and effort over the past year during both semester period and holidays to make this possible. Many thanks to the people involved in the development of NUSMods R - Zhang Yi Jiang, Li Kai, E-Liang Tan, Ng Zhi An, and Yangshun Tay.

The new version brings about some much needed enhancements such as multi-platform compatibility, performance improvements, increased customizability, and solves many of the pain points of the previous version. We redesigned the user interface, rethought the user experience, rewrote the entire code base and removed a number of features that were not commonly used among students so that your usage experience will be greatly enhanced. We have plenty of other things to ship, but done is better than perfect; we can’t wait to put the new release in your hands. Here are some of the highlights in the new release:

Timetable Overhaul

The previous timetable was written in 2014 when v2 was released. While its implementation was robust and it worked, it wasn’t mobile responsive and was tougher to improve upon. Yangshun took the chance to overhaul the timetable in terms of implementation, design and user experience, writing a reusable timetable component that looks great on both desktop and mobile devices while retaining its snappy performance.

One major change we made was to kill Drag and Drop, which, unfortunately, was not suitable on mobile for scrollable interfaces. To change lessons in NUSMods R, tap on a lesson to view alternative slots, then select your intended slot. Killing Drag and drop and reverting to good old tap and select allowed us to keep the interactions across the various supported platforms consistent. Drag and drop is also not great when there are many alternative slots and you just want to view them without changing your existing selection.

We have received feedback from some students who preferred a vertical orientation for the timetable because it was more similar to Google Calendar/iCal. We contemplated switching to a vertical orientation but feared upsetting those who preferred and were used to the horizontal version. To make everyone happy, we now allow you to toggle the timetable orientation! Implementing this was a technical challenge for us and we are pretty proud of the approach we took to solve it.

Lastly, we now let you customize the colors of the lessons on the timetable. No longer do you need to refresh the page repeatedly just to get a colour combination that you like before exporting the timetable. You may also hide certain modules from the timetable if you wish. Dark mode is not forgotten either.

Many thanks to Yangshun Tay, Zhang Yi Jiang, Li Kai, Ng Zhi An and E-Liang Tan for their work on the timetable.

Module Finder and Module Pages

The module finder has been one of the unique selling points of NUSMods. We allow students to filter modules according to a list of criteria that CORS does not allow you to, such as by levels, number of MCs, lecture and tutorial timings so that you can find the perfect module that lets you have a three-day week. Yi Jiang revamped the module search experience such that it is now much faster and you can easily find a module that meets your criteria, by filtering with keywords which match module descriptions and titles. Did I also mention that the module finder page works really well on mobile?

On the module page, Li Kai rewrote the module Prequisite Tree section with a custom implementation we thus removed the need for D3, a large charting library, shaving off over 100kb in payload size sent to clients. Yi Jiang put the whole page together and redesigned the CORS Bidding Statistics section such that the data was grouped by rounds and faculty, making it easier to read.

Many thanks to Zhang Yi Jiang, Li Kai and Ng Zhi An for their work on the Module pages.

Venues

The venues feature is one of my favourite features in NUSMods and probably one of the most underrated ones. The venues feature shows you what class is going on right now (or really, any time of the week) for a particular venue, and the venues data is reverse engineered from the lesson timetables of all the modules. In NUSMods v2, the venues timetable was a separate component and did not have colours. Although E-Liang was new to the NUSMods code base, he ported the Venues page extremely quickly, reusing the main timetable component and at the same time, improving the design of the page.

Yi Jiang also ported the venue availability feature, so that you can find unoccupied venues to crash during your long breaks between lessons.

Many thanks to E-Liang Tan and Zhang Yi Jiang for their work on the Venues pages.

Performance and Infrastructure

Aside from enhancing the product itself, we have channeled a fair bit of effort in improving the developer experience and app infrastructure. We believe that taking a step back and improving on our tools will enable to move even faster in the long run and iterate quickly on the product. NUSMods R makes use of the latest and greatest tools out there - React, Redux, Jest, Flow, webpack, Yarn, Babel, etc. Most of these tools are built by Facebook and have an awesome developer experience.

While developing, we encountered some performance issues with our development tools and used/built some tools to solve them:

• Slow webpack boot up time. Solved by integrating the webpack DLL plugin, restricting webpack loader search space and caching Babel and ESLint parsing artifacts.
• Slow Flow boot up time. Solved by not checking node_modules directory on boot with the help of flow-scripts written by Yangshun.
• Cache ESLint result across runs.

Li Kai extracted the best parts of create-react-app webpack’s configurations and integrated it into our webpack configurations. He also integrated Netlify so that every pull request is automatically deployed for previewing. This allows pull request reviewers to test the changes online without having to patch and test locally.

Many thanks to Li Kai and Yangshun Tay for their work on the performance and infrastructure aspects of NUSMods R.

Better Engineering

With many years of experience in building and maintaining NUSMods, we were well aware of the problems with the existing code and set to solve them in the rewrite. NUSMods R was rewritten with better engineering practices, performance and code maintainability in mind.

Team members come and go and the current team represents the third generation of developers since NUSMods’ inception. Hence, it is especially important to write future-proof code that withstands the test of time and changing members. Front end developers with a fair amount of experience but are new to the NUSMods code base should be able to understand the code easily and add new features with the confidence that they won’t break existing functionality. We have also enforced a code review process so that the team is aware of what each other is working on and any design mistakes are caught earlier, at a stage where they are the least costly to fix. Lastly, we hope that we won’t have to rewrite NUSMods ever again and instead, evolve it incrementally as new technologies emerge.

In a nutshell, our code had to be:

1. Readable and documented
2. Easily onboard new developers
3. Robust and well-tested
4. Good performance - load fast and run fast
5. Easily improved with newer technologies

With these considerations, we evolved our engineering stack:

Why we are using what we are using:

• React is great for writing modular, encapsulated UI and is extremely hot these days in the front end scene. A functional and declarative UI paradigm results in fewer hops in logic and makes our code more predictable.
• As a non-trivial interactive application, Redux came in very handy in keeping our data in sync for different parts of the application.
• React and Redux code are also generally easy to test because they are nicely layered with clear separation of concerns.
• Jest made testing fun and easy to do, with a watch mode and snapshot testing.
• CSS Modules fixes the problem of global namespace in CSS and lets you write styles that are local by default and encapsulated to your component.
• ESLint standardized our coding style so as to improve code readability and reduce the amount of stylistic nits during pull request reviews.
• Flowtypes (although annoying at times), allowed us to add static types to our code so that bugs can be caught earlier during development rather than during runtime.
• webpack enabled us to create modular and optimized bundles of code for deployment.

We’re pretty happy with the tech stack we have chosen and strongly believe that we have made the right choices in achieving our goal of better engineering.

NUSMods R By the Numbers

• 9 contributors to the code
• 404 commits made
• 116285 lines of code added. 44606 lines of code removed
• 393216 ways to customize your timetable (assuming a normal workload of 5 modules)
• Initial load time of 885ms
• Bundle size of 605 KB (after Gzip)
• Test coverage of 44.54% (We know it needs improvement, we’re working on it. Help is welcome!)

We’ve already heard from many voices about NUSMods R while it was in beta, and here’s what they have to say:

Get your school life in order with NUSMods R

- Ng Zhi An, Software Engineer, Google

The only working planner

- Yeo Quan Yang, Security Engineer, Apple

NUSMods helped me find a girlfriend

- Soon Chun Mun, Software Engineer, Google

Not all heroes wear capes

- Yangshun Tay, Front End Engineer, Facebook

Best in class in a monopoly market 🌝

- Karen Ang, Ex-Software Engineering Intern, Google

NUSMods made me get stalked by random NUSWhispers commenters

- Ang Yen Ling, Poster Girl, NUSMods

To Infinity and Beyond

NUSMods R marks a major milestone for us and is a huge improvement in terms of both product and engineering. This would not have been possible without the dedication of the NUSMods core team and hard work they have put in over the past year. Moving forward, NUSMods will be led by a new generation of student developers from School of Computing - Li Kai, Zhang Yi Jiang and E-Liang Tan. There is still a ton of work left to be done, such as further improving the performance and writing more tests. We also intend to revamp the API using GraphQL so as to batch API requests on the client. This journey is 1% finished. Do reach out to us if you are interested in contributing to or collaborating on the project.

With this release, we hope that students of NUS enjoy using NUSMods more than ever and also hope to inspire budding developers with our engineering culture and practices!