I have two different account types that can do different things in a Single Page Application. Should I turn it into a Multiple Page Application?

Question

In my new SPA (Single Page Application), I have teachers, which can make tests, and students, which can take tests, subscribe to teachers, and view their grades. This means that in JavaScript, they will both have very different actions they can do. But the HTML and CSS, incidentally, are very similar. My goal is to make the code maintainable and not have a slow load time. Obviously, I don't want to continue to do what I am currently doing, which is lumping the student and teacher code together and only calling what is needed. I'm thinking I will either

• Create two pages, with each having their own (student/teacher).js/css files and common.js/css files
• Continue to use one page, conditionally load Vue components for the different things students and teachers can do, and have different js/css files that will also be loaded conditionally.

I prefer the second option but I think that the page might be slowed because the app will have to wait for the first common files to load, then wait for authentication by the server to determine whether if a student or teacher account is logged in, and then load more css/js files.

Does anybody have a recommendation, or something different I should do?

Answer 1

If both groups — Sudents and Teachers — will consume the same app in the end, I'd definitely go the way of building one SPA. Especially Vue (and folks like React, Angular etc.) makes it easy to build customizable components. So your current user might have a role or type (student or teacher) and you might have pure teacher components, e.g. a grading component and pure student components, e.g. a submission component. But you might also have shared components, e.g. for messaging.

The term SPA is not adding constraints in regards to what you want to achieve. You can make it as multi-purpose as your data model requires. The term refers to the way of delivering your static files to the client (browser).

Answer 2

One thing to be careful of is if you create two pages and decide to make a change will you end up needing to make that change in two places?

Teachers will want to see what the students will see so you have good reasons to keep that code together. What you don't want is students seeing answers or editing the questions. That code should be able to work with the code both see.

As for authentication, both teachers and students need it. If take a test I want to get credit for it. So you're going to need that to work in a timely manner whatever you do.