AJAX Angular CSS CSS3 HTML HTML5 JavaScript jQuery NodeJS UI Uncategorized VueJS

SAP – UI Architect – Angular Interview Questions and Answers

List and explain XSS attack types?

Cross-site scripting (XSS) is a code injection attack that allows an attacker to execute malicious JavaScript in another user’s browser.

XSS attacks are of three types:

  • Persistent XSS, where the malicious string originates from the website’s database.
  • Reflected XSS, where the malicious string originates from the victim’s request.
  • DOM-based XSS, where the vulnerability is in the client-side code rather than the server-side code.

Methods of preventing XSS

  • Encoding, which escapes the user input so that the browser interprets it only as data, not as code.
  • Validation, which filters the user input so that the browser interprets it as code without malicious commands.

What is CORS , how to manage? How to secure the requests?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

two response headers are most important for security:  

  • Access-Control-Allow-Origin specifies which domains can access a site’s resources. For example, if ABC Corp. has domains and, then its developers can use this header to securely grant access to’s resources. 
  • Access-Control-Allow-Methods specifies which HTTP request methods (GET, PUT, DELETE, etc.) can be used to access resources. This header lets developers further enhance security by specifying what methods are valid when XYZ accesses ABC’s resources. 

As CORS can lead to multiple security vulnerabilities , so instead of allowing CORS use a trusted server as a proxy / reverse proxy and allow all requests/resources to be served  from that dedicated server.

What is Virtual polymorphism ?

Polymorphism is the ability for objects of different classes related by inheritance to respond differently to the same member function call.

virtual function allows a programmer to call a function and let the program determine dynamically which version of the function to use.
To enable this type of behavior, the function will be declared in the base class as a virtual function and then be redefined in each of the derived classes.
To declare a virtual function, precede the function’s prototype with the keyword virtual in the base class.
Combination of both Virtual Function with polymorphism concept is called Virtual Polymorphism.

Write a Sql query for products table to get total price of products sold in a quarter ?

  SUM(price) as total_count
  FROM products
  WHERE `date` >= startdate AND `date` <= enddate
  GROUP BY productname

Write a Sql query for products table to get total price of products sold in a quarter ?

To calculate any factorial in real-time, you can speed it with a cache, saving the numbers you’ve calculated before.

factorial = (function() {
    var cache = {},
        fn = function(n) {
            if (n === 0) {
                return 1;
            } else if (cache[n]) {
                return cache[n];
            return cache[n] = n * fn(n -1);
    return fn;

Types of requests which can be handled through browser?

HTTP, HTTPS, FILE, and FTP protocols are supported by most of the commonly used browsers.

What is promise? Advantages of it ?

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

Advantages of promises are

  • Callbacks will never be called before the completion of the current run of the JavaScript event loop.
  • Callbacks added with then() even after the success or failure of the asynchronous operation, will be called, as above.
  • Multiple callbacks may be added by calling then() several times. Each callback is executed one after another, in the order in which they were inserted.
  • One of the great things about using promises is chaining.

How to improve the Performance of webpage?

  • Reduce External HTTP Requests
  • Minify CSS, JS and HTML
  • Compress Components with Gzip
  • Optimize Your Images
  • Add CSS at top/header section
  • Add JS at bottom section
  • Reduce DNS Lookups
  • Use CDN and Cache
  • Make Fewer HTTP Requests
  • Avoid empty src or href
  • Add Expires Headers
  • Avoid CSS Expressions
  • Avoid URL Redirects
  • Remove Duplicate JavaScript and CSS
  • CleanUP the unecessary code
  • Configure Entity Tags (ETags)
  • Reduce the Number of DOM Elements
  • Avoid HTTP 404 (Not Found) Error
  • Do Not Scale Images in HTML
  • Make favicon Small and Cacheable

IF Request/Response taking too much time than How to keep alive the request ?

A Request/Gateway Timeout response code indicates that the server did not receive a complete request from the client within a specific period of time tracked by the server.
You can set custom timeout for your http request in the second parameter of http.get() method:
$http.get(‘request-path’, {timeout: 300000});
This will set timeout to 300 seconds = 5 minutes. Increasing it to something much larger should help.
req.setTimeout(0) for no timeout for all requests
Another solution is doing a long polling or short polling to keep alive the request.

DB 2 queries same record update? How to manage? How to intimate the second request to update itself?

Use SQL transaction statements like BEGIN and COMMIT to avoid concurrent updates to same record.
You may have additional field which indicates that column is being edited. When first user starts work, the field would be updated. The second user would query object with ‘on hold’ status and your code would handle this.

Lot of requests , how to manage?

  • Use CDN for optimized content delivery
  • Use Cache Layers like memcache , redis etc..
  • Use Load Balancing techniques for Application Servers / Cache Layers
  • Use Master / Salve configuration for DB Servers

Same application, for 2 different companies but for all users, request to come, how to manage?

Use Proxy / Reverse proxy configuration along with a flag specific to company to manage the requests to handle internally from different servers.

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, with a given sequence of arguments preceding any provided when the new function is called.
fun.bind(thisarg[, arg1[,arg2[,….]]]) allows us to set the this value of a function manually. Instead of simply calling a function like fn(), we use, passing in the object we want this to equal as the parameter.
call also allows us to pass in parameters to the function being called. Anything given after the object to be bound to thiswill be passed along to the function.

Function.apply works the same exact way as call, except instead of passing in arguments one by one, we pass in an array of arguments that gets spread into the function.

In call method parameter will be passed separately. whereas in apply you can pass parameters as Array arguments.

Globalization or internationalization , how to do in angular?

Internationalization (i18n) is the process of developing products in such a way that they can be localized for languages and cultures easily. Localization (l10n), is the process of adapting applications and text to enable their usability in a particular cultural or linguistic market.
internationalizing an application means abstracting all of the strings and other locale-specific bits (such as date or currency formats) out of the application. Localizing an application means providing translations and localized formats for the abstracted bits.
AngularJS supports i18n/l10n for date, number and currency filters.
Localizable pluralization is supported via the ngPluralize directive.
All localizable AngularJS components depend on locale-specific rule sets managed by the $locale service.

How to avoid same button multiple clicks  ?

There are multiple ways to avoid multiple clicks of a same button

  • Once the click event is fired , disable the button till event response is processed
  • Unbind the click event on first click event
  • Provide a time interval for between the same object click event
JavaScript PHP

How to run production mode in vue.js with laravel ?

How to run production mode in vue.js with laravel  ?   

Method 1 :

In Laravel , Vue.js is included through NPM package and will be compiled as part of webpack in node stack. so while executing the npm assets compile command we need to mention it to compile in production mode. here is the command. 
npm run production  
Method 2 : 
In Laravel, Add an environment variable in laravel configuration and based on the load the Vue Configurations in the run time.

Environment Variable Creation Guide refer :

Define :


In any of the scripts file make sure to add conditional execution of vue.js configurations as below :
if (process.env.MIX_ENV_MODE === 'production') {
    Vue.config.devtools = false;
    Vue.config.debug = false;
    Vue.config.silent = true; 


AJAX JavaScript

Chart JS canvas dynamic draw chart and clear using AJAX based JSON data

Chart.js  :  How to Clear canvas after drawing a chart based on the dynamic data received from AJAX based JSON response data ?

Normally  if you try to draw a new dynamic chart after an AJAX request based on the JSON data received than the the graph starts jumping around and gets fuzzy between the grid lines. This issue happens every time when the JSON data has changing datasets based on the AJAX cal request. 

To sort out this issue , you need to destroy the chart before redrawing with new dataset. 

create a global variable and use that variable while creating chart :


and use this variable to assign chart instance, before assigning the chart instance make sure to check if any previous chart instance is available with the global variable, if exist than clear and destroy the chart distance : 
createChart: function() {
var ctx = document.getElementById(myChart); // check if any existing chart instance data is available and destroy
if(this.myChart instanceof Chart){
} //draw new chart
this.myChart = new Chart(ctx, {
type: this.chartData.type,
I have taken the vue.js implementation with chart.js as the example in above scenario.