App Structure and Authentication UI

[00:00 - 00:11] In the previous chapters we have seen how reagent, reactor outer and ratum work . In this chapter we will use those concepts and implement a login page.

[00:12 - 00:19] We will not go through the actual code in the video. Please refer to the chapter text to follow these steps.

[00:20 - 00:36] Once you are done building the login component and you can see it running in your browser, you can come back to this video and see the repellent action. You might want to review the chapter on endrepell if you are having a hard time connecting your repell to your editor.

[00:37 - 00:46] I have my code running in the browser. I have the source open in VS code and VS code is also connected to the browser via repell.

[00:47 - 01:03] Since repell is a bi-directional bridge between the runtime and the editor, I can read the state of the browser right inside my editor. Not just that, I can also modify the state inside my editor and the changes will reflect in the browser.

[01:04 - 01:14] In this comment, I set the email and password and you can see how the UI changes. Comments like these are called rich comments.

[01:15 - 01:26] They document the workflow and can be committed to Git. This makes it really easy to interact with the browser without leaving your editor leading to a fast feedback cycle.

[01:27 - 01:34] The entire scope of JavaScript is available inside your editor. For example, you can alert a message.

[01:35 - 01:49] You can also inspect third party libraries which is helpful to figure out the method started exposes. In this chapter, we implemented concepts about reagent and reactor and built the outline of our login page.

[01:50 - 01:53] We also saw the repell in action in the browser runtime.