Ace The UI Tech Round

Hi, I’ll be sharing my experiences with recent stints interviewing at top product based companies in India. There are innumerable blogs, videos covering in depth with most probable questions. I will attempt to highlight my experience with what the interviewer is looking for and how you can ace it up.

UI Task Round:

Typically an UI assignment which could be a home-takeaway ( 2–3 Days ) or to be done in company premise ( 2 hours ). Companies like Amazon, MS, Flipkart, GoJek Tech and the likes start their interview processes with this round. This is the best time to showcase your skill without any pressure. You can impress an interviewer with just little preparation. I would recommend to refrain using any library/framework, as the person evaluating may not have prior experience with the framework. Some companies explicitly force you to use Vanilla JS only. Even they not, Vanilla JS is the way to go in this.

• Use DOM efficiently.
• Small things can make it large impact.
• Use ES-6, classes in Javascript.
• Prepare a scaffolding before hand. Mostly companies allow you to use your laptop.

Divide your code in MVC structure. index.html would just reference to main.js. It should be responsible to get and set data. view.js should render view. It should call controller.js for all the events bound to UI. controller.js should hold the definition of events and should call model to set data, which eventually should re-render the view. In main.js , one could you use

• IIFE,
• DOM events,
• promises,
• ES6 import, export,
• use strict,
• event capturing,
• local storage to impress the interviewer with almost zero effort.

Practice fetch API calls. How to read and manipulate response. Use promises. You do not want to waste your time googling it about. You would be asked to maintain the state of the application typically on refresh. localStorage is the way to go. Make sure you have done it before. How to stringify the API response and parse it to JSON while reading from local storage.

Wonder how JIRA, Trello swiftly allows you to drag & drop?

dragDrop events. I bet not many would know about it. Practice a small app with those events. They are exciting to the first timers. Check this from Brad Traversy, it would help you get started. ES6 should all over your code. Refrain from using non ES6 syntax. Pitch in map, reduce, for of , for in loops.

Use Javascript to build your UI. This is something is not mandatory, but a good to have thing which shows your confidence in Javascript. Not everyone can effectively manipulate DOM. I would never forget the reaction of my interviewer when I did so, it definitely got me those extra brownie points. It just takes some practice and you’ll be good to go. It is just that we are just too much used to HTML, else almost everything can be achieved with JS as well.

How will you efficiently construct the DOM tree? How would you make sure while appending children to DOM, you do not reconstruct the DOM? document.createFragment is the way to go. Make sure to use it. Further reading: https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

Listing few things to take care which are on top of my head.

• Avoid console.logs / debugger in final submission code.
• Make sure you are comfortable using handling click, hover events.
• document.querySelector over document.getElementById . And you should know why.
• Indent your final code. Install Prettier in VSCode.
• Use let, const. Avoid global variables unless required.

All the best!