Test 2

You are tasked with finding the right web server platform that adheres to the following requirements: You want to manage the server software on your own, but the platform should provide you with the ability to retrieve computational resources and capacity on the fly when explicitly calling endpoints of the platform. What server concept we heard about in the lecture is the closest related to this description?

Infrastructure as a service (IaaS) → retrieving new virtual server capacity can be scripted

Platform as a Service (PaaS) → Application runtimes, no ability to interact with infrastructure

Software as a Service (SaaS) → inability to manage server software

Given the following request to your API: https://localhost/frame/oak.jpg?quality=large

An implemented endpoint:

app.get('/frame/:style.:ending', (req, res) => {
if(!req.query.quality) {
return res.sendStatus(404);
}
res.sendFile(path.join(__dirname, "../resources/frame/" + req.query.quality, `${req.params.
style}.${req.params.ending}`));
});

Which of the following answers captures best what is going on?

Our endpoint responds to/frame-requests with a static file that contains the received: name, file type (ie. jpg), quality (ie. large).

If the request query does not contain a value for?quality=then we respond with the not found status404.

Else we respond with the found file<style>.<ending>from the directory../resources/frame/<quality>/.

What is a session cookie?

A cookie calledsessionthat is used to create stateful Web-Applications.

What is middleware (as part of backend abstractions/Node.js)?

Enables backend-templating and conversion of http-requests to javascript objects and vice versa:

Backend$\rarr$Frontend stringifies javascript-objects to JSON

Backend$\larr$Frontend converts request bodies to javascript-objects

• more precisely

  The middleware sits between the backend and frontend as a sort of pipeline that can manipulate requests and responds. (Anything that calls app, like app.use(), app.get(), Routing is also a form of middleware!)

  With next() we can call the next middleware function in the pipeline.

  The conversion of requests to json objects happens in the first pipeline step with use(req.json())

What are declarative frontends?

Using templates instead of imperatively defining DOM changes command by command.

Using binding to define relationships between DOM and data.

In the following component, we see the use of a computed property. What is wrong in this example?

<template>
<label>From <input type="text" v-model="range.min"></label>
<label>To <input type="text" v-model="range.max"></label>
{{ randomInRange }}
</template>
<script>
export default {
name : 'RandomNumber',
data : function {
return {
range : {
min: 4,
max: 8
}
}
},
computed : {
randomInRange : function() {
Math.floor(Math.random() * (range.max - range.min + 1)) + range.min
}
}
}
</script>

The computed randomInRange function does not return what it computed- which therefore can not be binded to the template.

Also range.max and range.min should be this.range.max and this.range.min

Which one of these concepts in frontend abstractions best describes data binding in templates where changes in the input can also influence the model?

Two-Way Bindingv-model= The same as one way binding + emitting events.

You are given a Vue component called " FromToRange " that contains one input field.

Below, we want to use that component and bind it to the " range " object in our model (data) in a way that when min or max in the model change, the form input takes the form `${min}-${max}` within the FromToRange component (so if we set the object in data to range: { min: 4, max: 8 } , the input in the component should display " 4-8 ").

And, vice-versa, when the form input in the " FromToRange " component changes, the values of the " range " objects also change (so if the user types " 9-14 " into the form input, the object in data is set to range: { min: 9, max: 14 } ).

<template>
<FromToRange />
</template>
<script>
import FromToRange from "@/components/FromToRange";
export default {
components : {
FromToRange
}
data : () => {
return {
range : {
min : 0,
max: 0
}
}
}
}
</script>

Which of the following answers describes a best practice solution to enable reactive and bidirectional binding for this component in Vue?

????

Given the following code that uses HTML/JavaScript with DOM and Event Handling:

<html>
<body>
<input type="range" id="numSlider" oninput="updateValue(this.value)">
<input type="text" id="numInput" onchange="updateValue(this.value)">
</body>
</html>

function updateValue(value) {
const span = getSpan('mm');
if(isNaN(value)) {
document.body.removeChild(span);
return;
}
document.getElementById('numSlider').value = value;
document.getElementById('numInput').value = value;
span.innerText = `${value * 10} mm`;
}function getSpan(id) {
let el = document.getElementById(id);
if(!el) {
el = document.createElement('span');
el.id = id;
document.body.appendChild(el);
}
return el;
}

Which of the following Vue components is the equivalent to this code above that most closely follows declarative rendering with bidirectional binding?

One that:

Here is an endpoint in Node.js:

app.post('/users/:id', (res,req) => {
switch (req.query.method) {
case 'addBlogPost':
// add a post to the user's blog
...
return res.sendStatus(200);
case 'deleteBlogPost':
// delete a post from the user's blog
...
return res.sendStatus(204);
default:
return res.sendStatus(400);
}
});

What REST principle is violated here?

This is not a resource-oriented API! The query contains a method to execute functions on the server. This is an RPC interface.

It violates the 4.1. principle: Uniform Interface - Identification of Resources.

A web service API from a webshop offers a /user endpoint. When retrieving a specific user, the JSON representation also contains a reference/links to orders from the user.

Which REST principle closest fits this description of aiding exploration in web services?

4.4 Hypermedia as the Engine of Application State (HATEOAS)

What is the advantage of using a state management system, such as VueX, over simply changing global state?

Managing a shared global state between all components instead of direct access to a global state means:

Your web service depends on a database. For development you have a local instance of the database running on localhost. When deploying your application to production, you connect to an external database server. What backend abstraction would you use to manage the database credentials within your code?

In Node.js I would use external variables to pass the configuration data to the program like so:

const	db	=	require('db')
db.connect({
host:	process.env.DB_HOST,
username:	process.env.DB_USER,
password:	process.env.DB_PASS
})

Other ways to pass configuration to the program (pass parameters, read from configuration file, etc.)

const	port	=	process.argv.length	>=	3	?	+process.argv[2] : 3000;