Flow of forms in Node.js and Express - node.js

Our lab makes many web experiments, all of which have a similar flow:
The user fills a form and submits. The form is validated, if it is OK then the posted values are logged and the user is sent to #2; otherwise the user is asked to fill it again.
The user answers a quiz. If the answers are correct then go to #3; otherwise fill again.
The user enters the actual experiment, which is a web-app - a chat-room, a flash game, etc. After the game is finished, go to #4.
The user fills another form and submits.
In the past I did this with JSP, but now we've moved on to NodeJS and Express, and I wonder if there is a general way to handle this and similar control-flows.

The question is very general, so in general the answer is Yes - you can do all that with node and express. Just register your routes with express (e.g. using app.get(URI, func)) and serve your dynamic and static content from node. There is ample material in the web on using express.

Related

Server-side validation for auto-saving multipage form

I'm currently building out a multipage form using Flutter (frontend) and Node/Express/MongoDB/Mongoose (backend) for which I would like to implement auto-saving as the user progresses through each page (ie. clicking the next button after each page saves form data to the DB).
I have client-side validation to ensure fields are filled out and in the correct format, but I believe server-side validation is more important to implement in the event the user bypasses the client-side. I was wondering if anyone had general design ideas/processes I could implement for this idea. Some ideas I have:
I'm thinking about sending a POST/PUT request to our server after each page, but I have no way of validating the incoming data server-side unless I create over 30 schemas for each of the pages. Each page has different questions so there isn't a single common validator I can use.
Another option was having a temporary object with all the fields, and only validate the object at the very end when the user clicks 'submit,' but this is bad UX design in my mind as any error may require the user to be set back to the 1st or 2nd page which is frustrating for sure.
My main concern is validating the incoming data on the server-side as well as the client-side, but I can't seem to think of a good way to do both in a clean manner. I believe this question is language-agnostic, but I added my tech stack just in case.
Any help would be greatly appreciated :)

Best practice to check if the user is logged in during the entire session

I'm using React on the front, nodejs + express for the back, mongodb , and passportJS for the auth, and express sessions to store the session information.
Whenever someone joins my website, react is sending a request to the backend to check if the user is logged in, and then if the user is logged in it will show adapted content. The problem is that whenever someone is logged in it will first show in the nav bar a button that says "log in" and only half a second later will it be updated to "log out" because the post request that says the user is logged will resolve. What is the best practice to solve this issue? at the moment I check if the user is logged in every single time that the user navigates to a new page and it does not sound like a best practice to me.
Try adding a loading state to your component. So instead of two states of login and logout, you will have login, loading, and logout.
This will allow you to add a new UI state for loading. Now it up to you to decide the UX.
UX Solution:
Some sites just put a giant loader and blocks the site till the app is loaded which works but is not that appealing.
A more modern solution is to use a skeleton loader. This will display a fake component while the application is loading (Note: NOT the whole sight needs to be in this skeleton state. It can be only the navbar while the rest of the application is displayed).
See AntD skeleton: https://ant.design/components/skeleton/

ExpressJs route redirect

I have a widget for user to get information regarding books. The UX of the widget changes according to the fact that the user is logged in or not. Now I have a route for logged-in user(say, /user/getBookInfo) to get the book information(which includes sending sms n email logic). For users who are not logged-in I have created a different route(say, /public/getBookInfo), which includes some additional processing too. However retrieving the book information, sms and email logic etc is already present in '/user/getBookInfo'. I don't want to duplicate this function.
One option is call res.redirect('/user/getBookInfo') from /public/getBookInfo . However I want to avoid the redirect in this way.
So My question is How can I reuse this logic in /public/getBookInfo without using redirect??
Probably the best way in a Node.js application is to make a separate module, and put the common logic there. Then you can require the module in both routing files.

Which technique is best suited for chat-like app

I want to develop a mobile app where a registered user can search among other registred users. User A can chat with user B. User A can view user B's profile. Upon this, user B have to be informed that user A is watching him.
So its some kind of chatroom where the server should be able to be notified when a user watched/contact another user, and let the latter know about this.
My first idea was to use node.js. But I begun to read a lot on XMPP-protocol. Do you think an XMPP-server would be more adequate to this kind of app? What I udnerstand you can customize your xmpp-server, write plugins so it can behave the way you want. Is this correct?
This is a perfect use case for socket IO using NodeJS. In fact, I have implemented exactly what you are describing with an iOS client and node backend in less than 50 lines of code. See https://github.com/MegaBits/SIOSocket for the iOS library, and http://socket.io/ for SocketIO.
XMPP is much heavier and verbose, and you'll be spending a lot of time parsing/building XML when you could just be communicating in JSON all the way. Take a look at my repo here:
https://github.com/alhill10/chatapp3/blob/master/View%20Control%20App/ChatView.m#L34
You can see on the viewDidLoad method it simply opens a websocket connection and listens for events from the server, then updates the tableview being used as a chat window with any new incoming messages in real time.
Then, look here https://github.com/alhill10/simplechat/blob/master/app.js for a simple example of the Socket IO backend that receives and relays the messages, as well as maintaining the state of current users online. You could trivially add in user authentication and .

How I can transform this scenario in GWT context

I have just started using GWT for web interface for our application.
My app has three different views for three different types of users. Each user has different type of interface (i.e. different navigation different menus etc).
There is one login page which will be index page of the application. The user shall enter the credentials and will be redirected to his/her section.
My problem is that how I can transform this scenario in GWT context. Weather I shall have four modules (i.e. one for login and other three for three type of users); weather there will be one module and I just have to change/load panels according to the user view type.
How shall I integrate these modules into one app? Weather I have to use JSP's to integrate these modules? Or these modules can be integrated by GWT to make a complete app.
Kindly help me in this regard.
Cheers
Raza
You could opt for having one module and via code splitting load the specific interface for the user.
Depending on your login procedure there a different ways to load the specific user interface. If the login is done in GWT code, so the login page is part of the application, then for example if the user logs in via a RPC call upon successful login a value is returned that indicates which user interface to start. Or if the login is done prior to loading the gwt page, for example if you use the standard webserver authentication, than the index page returned, which contains the gwt app, upon successfull login can already contain a variable generated in html which is than used to guide which user interface is loaded. These are just very generic ideas, but I hope you get the idea.
Regarding several modules. If you have 3 different modules, your build time also becomes 3 times as long, because GWT needs to generate 3 different applications.

Resources