‘Member HTML Login Forms?
‘Member circa 2010 when we used a pretty simple approach to implement the Login function in our web-applications? It was so awesome! HTML Form elements gave us everything we need: attributes to specify the server-side handler, input controls for username, password and “remember me” checkbox, submit button. HTML5 allowed us to ensure that the fields are not empty without relying on JavaScript code. The implementation of a server-side handler of a form submitting depended on the underlying technology but it also was very simple — if a username or password were incorrect, a browser was instructed to paint the login form again along with the error message, otherwise it was redirected to one of the main pages of a web-app. The beauty was in that the client-side was fundamental — we simply didn’t need anything else. Indeed the frameworks like ASP.NET provided helpers à la Login control but in the end it boils down to the same HTML forms.
If a prehistoric developer had been frozen in 2010 and then thawed out in 2016, he would discover the whole new world. Imagine that he met a modern react.js ninja who tried to explain the way we are using to implement login forms in 2016.
React components and containers. We now wrap login forms in the React Components in order to integrate Login function into React apps. The sample below was copied from React Redux Universal Starter Kit project.
And it’s not enough! Some guy convinced us to keep apart presentational and container components, so we bring this separation even for such a simple function as Login. It’s funny that there is no single recipe but a wide range of solutions for doing that, here are few examples:
- Using redux-form which is the decorator that wraps a form in a Higher Order Component (whatever it means), like it’s done in the full code for the Login Form shown above.
- Introducing a container for Login form, like the one in relax project:
- Adding the “handler” of login form, then wrapping it with the help of react-redux, just like it’s done in React Redux Universal (isomorphic) bundle project:
I guess that at this point the facial expression of the prehistoric developer would be close to what is shown in the Toy Story picture, but there are more things to explain.
Single Page Apps and Reactive State. We don’t let browser send the login form by using its native capabilities. Not anymore. We are obsessed with the idea of hosting the whole application on a single page and simultaneously pretending that it contains multiple pages by having total control over browser’s history which requires manual submitting of a login form’s data. Therefore we intercept the submit event of a form and pass the entered username and password further to the login request, but in order to obtain these values we don’t refer to the corresponding DOM elements(as we would normally do with jQuery). No sir. It is indeed possible, but the React documentation calls it “escape hatch” and suggest not to overuse it. Instead we used so-called “controlled text inputs” that on every keystroke raise the change event whose handler updates the state object which is used to re-paint the input box. The snippet of code below copied from gelatinous-toboggan project:
It seems like we overwrite the native browser’s implementation of the input element‘s behavior time and again(One more example). Though some delinquents bypass this practice:
Prehistoric developer: do you have the time machine in 2016 so that I can escape from this madness?
Don’t get me wrong, I am not trying to discredit react.js. It’s great for solving the problems that it was invented to solve effectively. The issue is react and redux concepts — presentational and container components, controlled forms, state management are applied for each and every piece of functionality, even for very simple one like Login form, which only contributes to the complexity of the code and its size and performance, but does not solve the problem more effectively. The art of keeping it simple which is the paramount quality for a professional developer gradually vanishes and I will be happy if this article or previous one makes one developer to consider alternative approach to building the complex structures with no apparent reasons for his next project. Thanks for reading!
