NUSMods R

[yangshun]

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

[ngzhian]

I've been working on webpack for a while now #287 . I think it's ready to be shipped to staging and tested. (I don't have a good way to verify that the move to webpack actually works, except to put it on staging and manually QA the important features). I think once webpack is shipped, we can more easily move to features like babel, react (with jsx), postcss - it's going to be a simple config change.

IMO the priority should be to clean up the usage of jQuery, move as much into Backbone/Marionette views as possible, so that we can more easily move into React. (I am probably very wrong here because I have little exp in Backbone/Marionette)

I'm all for CSS cleanup, and someone who has experience with CSS architecture should decide on one and we can all work on migrating towards that. (No point discussing too much, decide and move on)

I'm very excited about PWA, service workers stuff, and would be interested in owning that component. This can probably be done independent of everything, e.g. we can use SW to cache the json data files from NUSMods.

[thebengeu]

@ngzhian I propose collaborating on a wiki entry or google docs to figure out prioritization, what's a good way to collaborate on this huge list, sequencing such that it can be done more iteratively, and what tasks can be parallelized.

[ngzhian]

@ahbeng sounds good, prefer google docs :) https://docs.google.com/document/d/1AqwQTOv-pvOVwxEt-jIW-aYRfoxIGqGGnHw0z8vu7YY/

[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 (:

[li-kai]

@yangshun Thanks for the praise! I'll go over the design choices first. On mobile, the one thing that is valuable is screen estate. It is very hard to fit the entire thing in the viewport.

• Vertical view: 3 days in the viewport makes it comfortable to look at as the details aren't cramped. It's also what many top mobile calendar apps are doing (Sunrise, Google Cal)
• Scrolling shadows: You can see some shadows around the edges, these act as affordances to tell the user to scroll left and right.
• Clicking: Drag and drop is not intuitive on mobiles, even worse when user has to drag to the edge to scroll. This is further made worse by modules such as GER1000. In addition, clicking also felt easier user experience wise.
• Floating action button: As space is taken up by the timetable, many did not know to scroll down to search and add modules. The FAB solves that.
• No top search bar: When I was a new user, the two search bars made it confusing.

Techwise: VueJS's learning curve is much lower than React. If you make it easy to learn, others are much more likely to contribute. VueJS is also a little faster than React, but that's icing on the cake.

Dependency: Localforage is the only real dependency I have other than VueJS. This is important as localstorage is not reliable on iOS as they clear it whenever the memory's low. Also if you want service workers, localstorage will not work.

Btw, I'm a student at NUS too. I'm just starting year 2. I would love to work on V3 with you guys!

[thebengeu]

Brilliant work @li-kai! [=

Have a lot to comment but not much time at the moment, weekend maybe - we should get a discussion going on UX redesign too in the google doc. Drag and drop definitely isn't the way to go on mobile.

I think we should share the doc with the community when ready.

[li-kai]

It's released! This is a nice little piece of history for me, glad to be the one closing this.