NUSMods R

NUSMods v2.0 was launched in July 2014. 2 years have passed and with the emergence of ES6, React, Redux, Webpack and Babel, it’s probably nice to incorporate some of these new tools into NUSMods and also fix some of the long-standing issues in the current NUSMods.

Problems with the current NUSMods:

• Timetable page (along with some other pages) is not mobile friendly. It’s hard to change the timetable on mobile.
• Rendering uses a mix of jQuery and Backbone/Marionette Views. Ideally we shouldn’t use jQuery at all and views should be a function of the state.
• Doesn’t support lessons with non-half hour interval timings (there were lessons that end at 2359).
• Current approach of theming is not very scalable. A lot of overrides have to be done just for the dark mode.
• CSS is in a mess.
• No JS / CSS styles enforced
• No tests 😂

What the newer version can potentially include:

• ES6, React, Redux, Webpack and Babel combo
• UI Library:
  • React:
    • Declarative UI makes the code easier to follow
    • Utilize virtual DOM diff-ing for efficient DOM updates
    • React Hot Loader makes development easier
• Flux State Management:
  • Redux:
    • The de facto flux choice out there
    • Single state tree - Which is very suitable because changes are made to the timetable from a few places (search bar, module page, timetable page)
  • Undo / redo functionality is easier to implement
• Build System
  • Webpack 2.0
    • Hot module reload
    • Code splitting (Many people do not need to access the other pages like Venues / News / Apps)
    • Tree shaking
  • Brocoli and Rollup are not mature enough yet at the moment.
• Babel
  • Cuz es6 is kool
• Mobile friendly editable timetable using CSS Flexbox
  • Proof of concept: http://v3.nusmods.com
• Progressive Web App Features
  • Might be able to replace the need for a native web app
  • Offline capabilities with service workers
• CSS
  • Use Bootstrap 4 or other CSS framework if suitable.
  • Adopt a CSS architecture (OOCSS / BEM / SMACSS)
  • PostCSS
  • CSS modules (Personally not in favour but can consider)
  • Use rem instead of px. It’s something that Bootstrap 4 is already doing.
• Types
  • TypeScript / Flow
• Linting
  • JavaScript: ESLint
  • CSS: Scss Lint
• Write tests
  • Karma / Ava
• Better separation of timetable resolution business logic and timetable views, can potentially reuse the timetable resolution logic in a a react native app and swap out the views for react native versions.

New Feature Requests:

• Adding your own unofficial timeslot
• Partially hiding a module (tutorial / lecture / etc)

Would love to hear from the rest about what they think and what other new features we can include. Any ideas / feedback? @ahbeng @ngzhian @xinan @xbili

[li-kai]

Hello NUSMODS team. I’ve been working independently on a mobile friendly module planner at www.modify.sg The project utilizes es6, Webpack, Airbnb es6 linter and adheres to BEM style of CSS. The only catch is it uses Vue instead of React, but the two are pretty similar. Here’s the github project: www.github.com/li-kai/modify

The reason I didn’t work on NUSMODS was because my version helps NTU students too. But since it’s open source, you guys can adapt it!

[yangshun]

Hey @li-kai , that’s so inspiring! “Modify” is definitely an ideal result we would like to achieve. Your version is truly a joy to use on mobile (: Could you share more about your design choices (tech and UI) so that we can learn from your implementation? Particularly I would like to find out why you chose Vue over React (: