React

React is a new way of creating DOM elements in the front end, particularly those that are dynamic, with JavaScript event handling.

Plan

  1. Announcements
  2. Review
  3. Quiz Questions
  4. Breakout sessions

Announcements

  • Go to Ruhlman!
    • particularly L043 from 2:40-4:00
    • No OH tomorrow
  • I have transferred assignment grades from Gradescope to Sakai.
    • Please check for accuracy and completeness
    • Talk to me about any missing work.
  • Grading Status
  • Presentations one week from today
  • We will meet on LDOC
    • (10) LER
    • (40) Ethics discussion. I'll send out a poll for topics

React Review

We'll switch to the reading to look at some of that material.

  • Integrates HTML and JS into reusable components
  • JavaScript in the front end is okay; more than 99% of screen-reader users surveyed had JavaScript enabled.
  • Web scrapers may be left out

IDs (Keys)

We often need to have keys to uniquely identify an entity.

  • email addresses are often good for people (users), but you often want to keep those hidden from other users.
  • having the user come up with a screen name can sometimes be frustrating for them.

Generating IDs

ID's are often preferable to user data for unique identification. For example, events in an event calendar. Makes for a nice, compact URL:

/event/12345

Using the name of the event may create frustration in users.

  • LDOC Party
  • LDOC Party 2023
  • LDOC Party 2023 in Munger
  • LDOC Party 2023 in Munger #17

Plus, spaces and other non-alphanumeric characters can be problematic in URLS. Worse, you're probably restricted to English and other western languages. So, numbers have some advantages.

Two approaches to generating a numeric ID:

  1. Use the _id that MongoDB generates
    • advantage: free and easy
    • disadvantage: the numbers are big and ugly. E.g. https://cloud.mongodb.com/v2/62d5b81f4ed1da6a1a289ba5
  2. Keep a counter document in the database collection
{counter: 42}

Update the counter atomically, returning the new value:

// increment the counter document
let result = await staff.findOneAndUpdate({counter: {$exists: true}},
                                          {$inc: {counter: 1}}, 
                                          {returnDocument: "after"});
// console.log('found', result);
console.log('updated counter value', result.value.counter);

I'll demo the code in ~cs304node/apps/counters

So, you could use it like:

app.post('/insert', (req, res) => {
    let db = await Connection.open(mongoUri, DB)
    let staff = db.collection(STAFF);
    let result = await staff.findOneAndUpdate({counter: {$exists: true}},
                                              {$inc: {counter: 1}}, 
                                              {returnDocument: "after"});
    let uid = result.value.counter;
    staff.insert({uid: uid, name: req.body.name});
    return res.redirect('/');
});

Breakouts

  • You can work on your project draft