SAP UI Architect Interview Questions – Angular

1) XSS attack types?
XSS is a web-based attack performed on vulnerable web applications.
In XSS attacks, the victim is the user and not the application.
In XSS attacks, malicious content is delivered to users using JavaScript.

An XSS vulnerability arises when web applications take data from users and dynamically include it in web pages without first properly validating the data. XSS vulnerabilities allow an attacker to execute arbitrary commands and display arbitrary content in a victim user’s browser. A successful XSS attack leads to an attacker controlling the victim’s browser or account on the vulnerable web application.

There are 3 types of XSS ( 2 server side and 1 client side)

Stored XSS (Persistent XSS)
An attacker uses Stored XSS to inject malicious content, most often JavaScript code, into the target application. If there is no input validation, this malicious code is permanently stored (persisted) by the target application, like in a database.
When a victim opens the affected web page in a browser, the XSS attack payload is served to the victim’s browser as part of the HTML code. This means that victims will end up executing the malicious script once the page is viewed in their browser.

Reflected XSS (Non-persistent XSS)
the attacker’s payload has to be a part of the request that is sent to the web server. It is then reflected back in such a way that the HTTP response includes the payload from the HTTP request. Attackers use malicious links, phishing emails, and other social engineering techniques to lure the victim into making a request to the server. The reflected XSS payload is then executed in the user’s browser.

DOM-based XSS
DOM-based XSS is an advanced XSS attack. It is possible if the web application’s client-side scripts write data provided by the user to the Document Object Model (DOM). The data is subsequently read from the DOM by the web application and outputted to the browser.A DOM-based XSS attack is often a client-side attack and the malicious payload is never sent to the server. This makes it even more difficult to detect for Web Application Firewalls (WAFs) and security engineers who analyze server logs because they will never even see the attack.

2) CORS , how to manage? How to secure the requests? explain Proxy concept
A website from one origin cannot access resources from a foreign origin, and to make that possible, CORS comes into the picture. In short, CORS is standard of sharing cross-origin resources. This allows restricted resources on a web page to be requested from another domain.

A proxy, in general, is a server or a service which can introduce additional layers in our communication to obfuscate or modify content, based on the configuration. In the context of web development, our primary goal to use a proxy is to avoid CORS (Cross-Origin Resource Sharing) “issues” which occur because the browsers enforce Same-Origin Policy to protect the users from XSS among several other types of attacks.

3) What is Virtual polymorphism ?
Static polymorphism is polymorphism that occurs at compile time, and dynamic polymorphism is polymorphism that occurs at runtime (during application execution).
Object-oriented programming languages, allows you to implement multiple methods within the same class that use the same name but a different set of parameters. That is called method overloading and represents a static form of polymorphism.

Within an inheritance hierarchy, a subclass can override a method of its superclass. That enables the developer of the subclass to customize or completely replace the behavior of that method.
It also creates a form of polymorphism. Both methods, implemented by the super- and subclass, share the same name and parameters but provide different functionality.

4) Sql query for each products total price sold in a quarter ?
Here is the simple queries to get total price of each product sold in a quarter

select ProductID, count(*) x ProductPrice as TotalPriceSales from Orders where DATE BETWEEN '01/01/2019 00:00:00' and '03/30/2019 11:59:59'  group by ProductID

select ProductID, sum(ProductPrice) as TotalPriceSales from Orders where DATE BETWEEN '01/01/2019 00:00:00' and '03/30/2019 11:59:59'  group by ProductID

5) Factorial number function use any previous cached number data if exist ?

Memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Memoizing in simple terms means memorizing or storing in memory. A memoized function is usually faster because if the function is called subsequently with the previous value(s), then instead of executing the function, we would be fetching the result from the cache. So in this case we can use Memoization technic as that return values are the same for same inputs every time

let cache = [1];
function factMemoize(key) {
if (!cache[key]) {
cache[key] = key * factMemoize(key – 1)
} else { // just to demo cache:
console.log(“cache hit:”, key)
}
return cache[key]
}

// only hits cache at the end
console.log(“6! = “, factMemoize(6))

// second call benefits from cache:
console.log(“8! = “, factMemoize(8))

6) Types of protocols & requests which can be sent through browser ?

HTTP, HTTPS, FILE, and FTP protocols based requests can be sent through browser.

HTTP defines a set of request methods to indicate the desired action to be performed for a given resource.
Following HTTP requests are supported by browser :

GET
The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

HEAD
The HEAD method asks for a response identical to that of a GET request, but without the response body.

POST
The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

PUT
The PUT method replaces all current representations of the target resource with the request payload.

DELETE
The DELETE method deletes the specified resource.

CONNECT
The CONNECT method establishes a tunnel to the server identified by the target resource.

OPTIONS
The OPTIONS method is used to describe the communication options for the target resource.

TRACE
The TRACE method performs a message loop-back test along the path to the target resource.

PATCH
The PATCH method is used to apply partial modifications to a resource.

7) What is promise? Advantages?
JavaScript promises let your async call return a value like synchronous function, that value is an object that promises success or failure value.
ex:
get(“/someURL”)
.then(“some processing”)
.catch(e => console.log(“Error 1”))

Advantages :
Better error handling
Reduced coupling
Improved readability
Better definition of control flow of asynchronous logic

The promise constructor takes one argument, a callback with two parameters, resolve and reject. Do something within the callback, perhaps async, then call resolve if everything worked, otherwise call reject.

8) what is Multi tenancy?
Multi-tenancy is an architecture in which a single instance of a software application serves multiple customers. Each customer is called a tenant. Tenants may be given the ability to customize some parts of the application, such as color of the user interface (UI) or business rules, but they cannot customize the application’s code.

9) how do you improve the Performance of webpage?
there are multiple ways to improve the performance of webpage ,

Reduce / Optimize image size
Reduce the number of HTTP requests
Load JavaScript asynchronously
Clean up the HTML/JS/CSS Document
Minify CSS, JS and HTML
Enable Prefetching like Link Prefetching , DNS Prefetching , Prerendering etc..
Increase Speed With a CDN and Caching
Enable compression / Implement Gzip Compression
Lazy Load of content/images
Combine the files ex: CSS sprites

10) Request/response taking too much time? How to keep alive the request ?
HTTP persistent connection, also called HTTP keep-alive, or HTTP connection reuse, is the idea of using a single TCP connection to send and receive multiple HTTP requests/responses, as opposed to opening a new connection for every single request/response pair.
Enabling the keep-alive header allows you to serve all web page resources over a single connection. Keep-alive also reduces both CPU and memory usage on your server.

11) In DB, 2 queries same record update? How to manage? How to intimate the second request to update itself?
Locking performed within the DB server itself to manage contention for table contents by multiple sessions. This type of locking is internal because it is performed entirely by the server and involves no other programs.

Row-Level Locking

MySQL uses row-level locking for InnoDB tables to support simultaneous write access by multiple sessions, making them suitable for multi-user, highly concurrent, and OLTP applications.

Table-Level Locking

MySQL uses table-level locking for MyISAM, MEMORY, and MERGE tables, permitting only one session to update those tables at a time. This locking level makes these storage engines more suitable for read-only, read-mostly, or single-user applications.

Using Transactions – commit queries

Here it is to use a transactional database (so there’s no clashes)

Tentative Allocation
To do a tentative allocation of the data to you that expires after some length of time (e.g., 10 minutes for kiosks) that gives you enough time to pay. If the (customer-visible) transaction falls through or times out, the data allocation can be released back into the pool.

12) Lot of requests , how to manage?
There are three main strategies for handling the load:

The site can invest in a single huge machine with lots of processing power, memory, disk space and redundancy.
The site can distribute the load across a number of machines. [like load balancer ]
The site can use some combination of the first two options.

13) Same application, for 2 different companies but for all users, request to come, how to manage?
The incoming requests for pages are spread across all of the machines in one of two ways:

The Domain Name Server (DNS) for the site can distribute the load. DNS is an Internet service that translates domain names into IP addresses. Each time a request is made for the Web server, DNS rotates through the available IP addresses in a circular way to share the load. The individual servers would have common access to the same set of Web pages for the site.

Load balancing switches can distribute the load. All requests for the Web site arrive at a machine that then passes the request to one of the available servers. The switch can find out from the servers which one is least loaded, so all of them are doing an equal amount of work. This is the approach that HowStuffWorks uses with its servers. The load balancer spreads the load among three different Web servers. One of the three can fail with no effect on the site.

14) Bind, apply and call difference in angular ?

The bind() method creates a new function that, when called, has its this keyword set to the provided value.
let helloLeo = greeting.bind(customer1);
helloLeo(‘Hello’);

The call() method calls a function with a given this value and arguments provided individually.
The method Call invokes the function and allows you to pass in arguments one by one using commas.
ex: greeting.call(customer1, ‘Hello’);
The method Apply invokes the function and allows you to pass in arguments as an array.
ex: greeting.apply(customer1, [‘Hello’, ‘How are you?’]);

call() and apply() serve the exact same purpose. The only difference between how they work is that call() expects all parameters to be passed in individually, whereas apply() expects an array of all of our parameters.

The main differences between bind() and call() / apply() is that the call() / apply() method:

• Accepts additional parameters as well
• Executes the function it was called upon right away.
• The call()/ / apply() method does not make a copy of the function it is being called on.

Call and Apply are interchangeable. You can decide whether it’s easier to send in an array or a comma separated list of arguments. Bind is different. It always returns a new function.

15) Globalization or internationalization , how to do in angular?

Internationalization is the process of designing and preparing your app to be usable in different languages. Localization is the process of translating your internationalized app into specific languages for particular locales.

Angular simplifies the following aspects of internationalization:

Displaying dates, number, percentages, and currencies in a local format.
Preparing text in component templates for translation.
Handling plural forms of words.
Handling alternative text.
For localization, you can use the Angular CLI to generate most of the boilerplate necessary to create files for translators, and to publish your app in multiple languages. After you have set up your app to use i18n, the CLI can help you with the following steps:

Extracting localizable text into a file that you can send out to be translated.
Building and serving the app for a given locale, using the translated text.
Creating multiple language versions of your app.

i18n pipes
Angular pipes can help you with internationalization: the DatePipe, CurrencyPipe, DecimalPipe and PercentPipe use locale data to format data based on the LOCALE_ID.

Template translations
The i18n template translation process has four phases:
Mark static text messages in your component templates for translation.
Create a translation file: Use the Angular CLI xi18n command to extract the marked text into an industry-standard translation source file.
Edit the generated translation file: Translate the extracted text into the target language.
Merge the completed translation file into the app. To do this, use the Angular CLI build command to compile the app, choosing a locale-specific configuration, or specifying the following command options.

–i18nFile=path to the translation file
–i18nFormat=format of the translation file
–i18nLocale= locale id
The command replaces the original messages with translated text, and generates a new version of the app in the target language.

You need to build and deploy a separate version of the app for each supported language.

The Angular i18n attribute marks translatable content. Place it on every element tag whose fixed text is to be translated.
 ex: <h1 i18n> Hello i18n! </h1>

Pluralization :
Pluralization categories include (depending on the language):

=0 (or any other number)
zero
one
two
few
many
other
After the pluralization category, put the default English text in braces ({}).

ex: Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}

16) how to avoid same button multiple clicks ?
There are multiple ways to handle this

• disable the button after the first click
• The standard way to avoid multiple clicks is to save the last clicked time and avoid the other button clicks within time span
• Detect the double click and just return false
• Debounce Events :
  With the click event we can call event.preventDefault(); and event.stopPropagation();. These two lines prevent the click event from bubbling up to the parent component. SO using certain span of time we can debounce or delay the event for next click.