UI Developer Interview questions

Part 2 — General UI questions

1. What is the difference between transpilers and compilers?

Compiling is the general term for taking source code written in one language and transforming into another. Example: Java to bytecode. C compilers and Javac of JDK are examples for Compilers.

Transpiling is a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction. Example: ES6+ to ES5, Typescript to JS. Babel is an example for transpiler.

For more information : Compiler vs Transpiler

2. What is same origin policy?

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious documents.

Two pages have same origin if “scheme/host/port tuple” are same. So google.com:8080 and google.com:9090 are of different origin.

• How can you bypass this policy?

Using CORS or JSONP. To view the difference between two visit my previous post.
Angular applications in development uses Proxy. It acts as a middleman between your server and the back-end server and reroute the API call to back end server.

3. What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. It is implemented by passing the below header.

Access-Control-Allow-Origin: *

4. Have you ever used any task runners or package managers? What is the difference between these two?

Task runners ans package managers are integral part of modern web applications.

Package Managers

Package managers simplify installing and updating project dependencies.

• npm — Node Package Manager, helps you to manage all the libraries your software relays on. You would define your needs in a file called package.json and run npm install in the command line. Default directory for dependencies is node_modules.
• bower is like npm, but builds flattened dependencies trees (unlike npm which do it recursively).Sometimes bower and npm are used together for front-end and back-end respectively (since each megabyte might matter on front-end). Default directory for dependencies is bower_components
• Yarn: A new package manager for JavaScript published by Facebook recently with some more advantages compared to NPM. And with Yarn, you still can use both NPM and Bower registry to fetch the package. If you’ve installed a package before, yarn creates a cached copy which facilitates offline package installs.

Task runners

They are primarily command-line tools for automation. The repetitive tasks like minification, compilation, unit testing, linting can be done by task runners automatically.

• Grunt: You can create automation for your development environment to pre process codes or create build scripts with a not very simple config file.
• Gulp: Automation just like Grunt but instead of configurations you can write JavaScript with streams like it’s a node application.
• webpack: Similar to Grunt, webpack is also based on configurations from webpack.config.json. It has a inbuilt webpack-dev-server with hot reloading of changes which allows you to forget about all JS/CSS watchers.

Module Loaders

Module loaders will convert the javascript modules from many formats (AMD, CommonJs, ES6)to a browser-understandable format.

• browserify: It lets you require(‘modules’) in the browser by bundling up all of your dependencies.
  Other examples: SystemJs, RequireJS and es6-module-loader

Webpack is not just a task runner but also a module loader.

5. With the advent of SPA (Single Page Application), Server Side Rendering has became famous. Can you explain pros and cons of server side and client side rendering?

Server-side pros:

• Search engines can crawl the site for better SEO.
• The initial page load is faster.
• Great for static sites.

Server-side cons:

• Frequent server requests.
• An overall slow page rendering.
• Full page reloads.
• Non-rich site interactions.

Client-side pros:

• Rich site interactions
• Fast website rendering after the initial load.
• Great for web applications.

Client-side cons:

• Low SEO if not implemented correctly.
• Initial load might require more time.
• In most cases, requires an external library.

6. Can you explain the new fetch API and it’s difference between the XHR?

fetch is a new way to do AJAX requests. It returns a promise as response.

fetch

• missing a builtin method to consume documents
• no way to set a timeout yet
• can’t override the content-type header of the response
• no way to track the progress

XHR

• there’s no way to not send cookies apart from using the non-standard mozAnon flag
• can’t return FormData instances
• doesn’t have an equivalent to fetch's no-cors mode

7. Can you compare Reactjs and Angular 2+?

React vs Angular

if you have experience in Vue.js or other frameworks, be familiar with their differences also.

8. What is the difference between Shadow Dom and Virtual Dom?
(Intended only for people who have experience in Angular and Recat)

Virtual DOM

Virtual DOM is an abstraction of the actual DOM.

• It’s a full representation of Actual DOM. Its most important feature is in fact grouping of changes and doing a single re-render instead of many small ones.
• Advantage: performance
• Used by : react

Shadow DOM

Shadow DOM is part of the Web components API and its not created by Angular.

• Shadow DOM come in smaller pieces. That means that it is not a full representation of entire DOM.
• Advantage: Encapsulation
• Used by : Angular

9. Can you compare the three hybrid mobile application platforms- React Native, Ionic and Nativescript?
(Intended only for people who have experience in mobile development)

• Ionic Uses Apache Cordoava. It provide’s a web view, which is a browser view without browser.
  Nativescript and React Native uses native components from respective OS. So it is faster.
• React Native is for react whereas Ionic and Nativescript uses Angular.

10. What are some possible performance improvement mechanisms?

Javascript

• Minify JS for smaller file sizes.
• Asynchronous loading of JS: Use defer and async tags.
• Use the HTTP/2 protocol.
• Use CDN.
• Caching
• Avoiding pitfalls with closures
• Avoiding with.
• Avoiding browser memory leaks- caused by circular dependency of js
• Manipulate element fragments before adding them to DOM
• Place JavaScript at the bottom of the page

HTML and CSS

• SVG animations instead of bitmap images
• FOIT — Flash of Invisible Text at the initial load can be avoided by using a normal font initially till custom font downloads
• Lazy load JS and CSS
• Prefetching
• Reduce redirects
• Use sprites for images

11. What is the difference between Http2 and http 1?

HTTP 2.0 is a binary protocol that multiplexes numerous streams going over a single (normally TLS-encrypted) TCP connection.

The contents of each stream are HTTP 1.1 requests and responses, just encoded and packed up differently. HTTP2 adds a number of features to manage the streams, but leaves old semantics untouched.
The main advantages are headers compression, priority and more intelligent packet streaming management.

12. What is the difference between Websocket and SSE (Server Sent Events)?

SSE

• One way communication
• Simple HTTP protocol
• Maximum open connections limit
• Ideal use case : Twitter feed, stock ticker feeding

Web Scokets

• Two way communication
• Native support in most of the browsers
• Implemented using TCP
• Use case example: Chat

13. What are the servers that you have used in your career? Can you differentiate between nginx and apche?

Nginx is an open source web server written to address some of the performance and scalability issues associated with Apache.

Apache is great for dynamic content and processes whereas nginx is good for static content.
Apache has a limitation in connections and nginx was designed to solve the C10K problem. The architecture of connection handling is different.
Apache is known for its power and Nginx for speed.
Both can be combined together- Nginx in front of Apache as a reverse proxy. This will allow Nginx to to handle all requests from clients.

For a detailed description please refer Apche Vs ngInx

Microsoft IIS is another web server.

Git

Basic commands of git:

• git init : Initialize a local directory as git repository
• git remote add origin <server> : Add the server
• git add . : add all files to staged changes/to next commit
• git add <path/filename> : add only that file to next commit
• git commit -m”<commit message>” : Save the changes to local repository
• git remote -v : List remote Repos
• git checkout <b> :Switch to branch
• git checkout -b <b> : create b and switch
• git branch :list branches
• git branch -d <branchname> : delete branch
• git merge <branchname> : merge to current branch
• git diff : Show changes between commits, commit and working tree, etc
• git tag 1.0.0 <commitID> : tag a changeset
• git log : lists the commits
• git clone <repository URL> <folder name> : Clone a remote repository
• git commit — amend : Change the last commit

14. What is the difference between git pull and git fetch ?

git pull = git fetch + git merge

Other topics:

• HTTP Headers
• HTTP Status codes
• HTTP Verbs

Before you go…

If you enjoyed this story, make sure to follow me so you don’t miss my updates!

Liked this story? Don’t forget to“clap” and share to help others find it. Thank you.

You might also like Part 1- Javascript