Day 1, Session 1

Agenda:

• Meet and give overview

• Each participant should:

  • Add themselves and their git handle to the doc (if they want to)

  • Create a Git repository for their project

  • Clone https://github.com/openedx/frontend-template-application and copy into their new project

  • Configure devstack to allow api connection by adding localhost:8080 to devstack lms login redirect whitelist (https://github.com/openedx/edx-platform/blob/master/lms/envs/devstack.py#L307C36-L307C36)

“What is a UI?”

At its core, a User Interface (in our context), is the environment/framework through which a user interacts with our system. This comprises of a set of views that correspond to an internal data model, and allow updates updates to that model by interacting with elements within those views. The code that manages that interaction is referred to in this context as controller code.

MVC

MVC is a common framework for building and understanding User Interface development. Almost all User Interfaces that you are familiar with fall into this pattern, though some systems make it much easier to enforce this pattern in code, without adding much overhead to accomplish this.

Open

In all of my experience with User interface development across a large variety of toolkits, I can say that React development is the cleanest implementation of the MVC framework for UI development I have ever come across. Its components fit very cleanly into this paradigm (if you let them), and provide a high level of clarity and separation of concerns for your user interface.

• React presentational components are your view

  • These take a set of incoming data fields from the model and links to controller events

• A variety of systems can constitute your local model depending on needs, all of which can be directly queried through components in the view

  • React component state can be used for very localized state for a section of the user interface

  • Redux can be used for app-level state

  • Context can be used for re-useable state or state that needs to be bundled with its own controllers

  • React-Query can be used for static API data.

• React hooks form the basis of your controller code, providing the ability to fully separate the “behavior”/actions of a component from its presentational logic.

Event loop

We’ve discussed what a user interface is, but… How does it actually work? Many kinds of code are designed to run once, to completion. Possibly they loop, possibly they add in timeouts/delays. But “classical” programs (non UIs) do not have to exist in a sort of perpetual state of “waiting for interactions”, and so the process by which they do so can be confusing to people coming in from backend coding perspective.

The process through which User-Interfaces generally accomplish this, as well as how they manage asynchronous communication and events from the user, is referred to as an Event Loop.

Open

“Asynchronous programming” involves the idea of “waiting” for things in code without stalling the thread of the application.

The actual “program” running the UI, separate from any manual JS you write, is a constantly running loop. An “event loop”, if you will. This loop runs through any task that has been given to it in its current queue (sychronously), and then starts over, waiting for incoming instructions. User interface elements (controllers) will send events/requests into this loop, and when the loop reaches them, they will be executed.
As part of this, long-running behaviors tend to be outsourced by the event loop where possible to external processes, in order to avoid slowing down the entire app.

This will be somewhat relevant as we move forward in understanding React’s component update lifecycle.

Deep dive for further reading: https://medium.com/@mmoshikoo/event-loop-in-nodejs-visualized-235867255e81