3. Data model.

• Definition
• Keyboard
• Row
• Key
• keyboardData/en.js
• Data source
• Conclusion

Definition

A data model is a set of JS objects that describes all data inside an app and covers all its logic.

In the previous chapter we made an HTML/CSS mockup of our app.

The mockup with a clear HTML element structure is a basis to design the data model, because we can see there:

• element nesting
• repetitive patterns

You can see, that our mockup is build from repetitive rows. And inside each row there are repetitive keys. So we need a data structure with repetitive rows with nested repetitive keys.

Keyboard

Keyboard is an array ¹ of rows.

const keyboard = [row1, row2, row3]

Row

Row is an array with keys.

const row1 = [key1, key2, key3, ...]

Key

Key is an object ² with the structure:

const key = {
    code,
    label,
    main,
    shifted
}

Only code is required. Other properties are optional.

code identifies a key position on a physical keyboard. This code is the same for keyboards in all languages.

label is the text on the key if it doesn't match with main or code. For “Escape” label is “Esc”, for “Space” it is an empty string.

main is the value returned after key pressed: 1, 2, q.

shifted is the value returned after key pressed while holding shift key !, @, Q.

We don't always specify all these props, because we don’t need them, or we can get them from other props. E.g. Tab has only code, because it doesn’t have a returned value main or shifted, and its label are the same as the code. Escape has label: Esc because we want to display on the key shorter version of the code: 'Escape'. And it hasn’t also main and shifted.

keyboardData/en.js

Inside root project folder make a new folder keyboardData and create there a file ³ en.js:

keyboardData/en.js

const keyboard = [
    [
        { code: 'Escape', label: 'Esc' },
        { code: 'F1' },
        { code: 'F2' },
        { code: 'F3' },
        { code: 'F4' },
        { code: 'F5' }
    ],
    [
        {
            code: 'Backquote',
            main: '`',
            shifted: '~'
        },
        {
            code: 'Digit1',
            main: '1',
            shifted: '!'
        },
        {
            code: 'Digit2',
            main: '2',
            shifted: '@'
        },
        {
            code: 'Digit3',
            main: '3',
            shifted: '#'
        },
        {
            code: 'Digit4',
            main: '4',
            shifted: '$'
        },
        {
            code: 'Digit5',
            main: '5',
            shifted: '%'
        }
    ],
    [
        { code: 'Tab' },
        {
            code: 'KeyQ',
            main: 'q',
            shifted: 'Q'
        },
        {
            code: 'KeyW',
            main: 'w',
            shifted: 'W'
        },
        {
            code: 'KeyE',
            main: 'e',
            shifted: 'E'
        },
        {
            code: 'KeyR',
            main: 'r',
            shifted: 'R'
        }
    ]
]

export default keyboard

The whole keyboard data model is a 2 dimensional array.

You can get any row from keyboard by index:

const row = keyboard[rowIndex]
//rowIndex is 0, 1, ..., 6

You can get any key from keyboard by 2 indexes

const key = keyboard[rowIndex][keyIndex]
//keyIndex is 0, 1, .., 16

Data source

Where to get the data from?

main, shifted and label are written on keys on physical keyboard.

How to get code will be explained in the chapter 8: "keydown event handling".

Conclusion

We need to have this data model in front of our eyes as well as HTML/CSS mockup to design the app in a modular way. We will create small components that are responsible for each logical part of the app. And before we do that, it's important to know which data will be passed to these components.

Differences between old code and new code

Entire code after the chapter 3

1. Array is a collection of similar data elements. ↩

2. An object is like a code description of a real life objects, e.g. employee = { age: 30, name: 'John Doe', position: 'driver' }. age is a property. 30 is a value of property age. So object is a property-value set. We can read properties by dot employee.age (30), or brackets employee["name"] (John Doe). ↩

3. A file with extension *.js and keyword export in it is called ES6 module, or just module. You can import its code from another *.js file with keyword import. ↩