Communication

React is being used as the frontend framework, the accompanying files lives mostly in static (and in templates/index.html). JSON is used as the primary communication format between Flask and React. We will not extensively use the jinja templating system outside of ensuring the dependencies are linked correctly.

Here's a step-by-step breakdown of frontend/backend communication in the expected typical use case:

• User sends a request to go to www.ourwebsite.com
• Flask receives request, interprets route as “/“, and renders index.html, returning that to the user’s browser
• index.html loads React and the front end interface, now running on the user’s side
• React wants information from the database to display.

JSON is an easy format for React to work with (and flask has some nice built-in support for it). So:

• React sends a request to get information in JSON form from /initial

• Flask interprets the route and executes the get_initial_json function

• get_initial_json does its python-y stuff to get all the info from the database we need for initial display into a dictionary

• get_initial_json returns the information in JSON format by passing the dictionary of data through jsonify

• React receives the data and proceeds to interpret and display it.

• Now, user clicks on a displayed politician.

• React responds by going to display a profile page and making a request to /pol/<pol_id> expecting a JSON response

• Flask interprets the route and executes the associated get_pol_json function.

• get_pol_json does whatever it wants to compile any information we want displayed on a politician’s profile, storing it all in a dictionary

• Flask then returns the dictionary to React via jsonify which can display/interpret the information it receives

This dictionary may then contain other objects that must be requested, such the different bills associated with bill_ids that were sent by get_pol_json. So React then makes a request to /bill/<bill_id> and waits for a JSON dictionary with any information to be returned, like the bill’s name and text.

So essentially for every “thing” that we want the site to fetch and display information about, we create a route and a function in Flask that creates a dictionary of the information and returns it through jsonify.

So you can now create these functions and routes and build the dictionaries.