UI Frameworks

There are different approaches and UI frameworks available for developing a website or web applications whether it’s a static or dynamic. In the recent years, the magic and effectiveness of JavaScript is garbing more and more attention than ever. Apart from the new HTML5 element tags, JavaScript and it’s APIs are the main barebone of the HTML5 development which means, JavaScript has become inevitable and future for web development.
At this stage JavaScript is used on both client- and server-sides and helps to design flavorful interfaces, enrich web apps with numerous functions and features, modify web pages in real time and much more.
JavaScript web frameworks can become a silver bullet for quick web app development. They serve as a skeleton for single page apps, allow developers to worry less about code structure or maintenance while focusing on creation of complex interface elements, and expand opportunities of JS and plain HTML.

Top UI Frameworks

1. Angular.js :
Most used JS framework for single page applications development and it boasts the largest community of developers. ‘Angular2’ comes with a long list of features that enable building everything, ranging from web to desktop and mobile.

2. React.js :
In MVC (Model-View-Controller) pattern. React.js acts as “V” and can be smoothly integrated with any architecture. Due to the usage of virtual DOM it provides a great performance boost, comparing to Angular 1.x.

3. Vue.js :
Vue 2.0 was introduced in 2016 and it took the best from Ember, React and Angular, putting all that into a handy package. It is proved to be faster and leaner, comparing to React and Angular 2.0.Vue.js offers two-way data binding (seen in AngularJS), server-side rendering (like in Angular2 and ReactJS), Vue-cli (scaffolding tool for quick start) and optional JSX support.

4. Ember.js :
Ember features two-way data binding, like Angular.js, keeping both view and model in sync for all the time. Applying Fastboot.js module it ensures prompt server-side rendering of DOM, improving performance of complex UIs.Emberjs is commonly usable for complex feature-rich web applications and website. Among the top users are Chipotle, Blue Apron, Nordstrom, Kickstarter, LinkedIn, Netflix and many others.

5. Ext JS :
Sencha Ext JS provides everything a developer needs to build data-intensive, cross-platform web applications. Ext JS leverages HTML5 features on modern browsers. ExtJS features 115+ high-performance, pre-tested and integrated UI components including calendar, grids, charts and more.

UI Frameworks Interview Questions

1. What is the difference between classes and ID’s in CSS?
Ids are unique. Each element can have only one id. Each page can have only one element with that id Classes are not unique. You can use the same class on multiple elements. You can use multiple classes on the same element

2. What is a closure, and how/why would you use one?
Closures are inner functions inside of an outer function. They have their own local scope and has access to outer function’s scope, parameters (but NOT arguments object), and they also have access to global variables.
Closures is a neat way to deal with scope issues. Reasons we use Closures is because Javascript is a function-level scope rather than as with other languages, block-level scope and Javascript is an asynchronous/event driven language. Example that Closure is frequently used is jQuery (ex. click()).

3. What does a doctype do?
Document Type Declaration, aka. DOCTYPE, is an instruction code that associates a particular SGML or XML document with a Document Type Definition, aka. DTD.
DTD, aka. document type definition is a set of markup declarations that define a document type for an SGML-family markup languages, e.g. SGML, XML, HTML. It defines the legal building blocks of these documents. Basically, DOCTYPE tells the browser how to render the web page, i.e. in standard mode or quirks mode in web.
Before HTML5, there are many DOCTYPE declarations with various DTDs, like HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset. However, HTML5 is not SGML-based, use the DOCTYPE only for mode selection, seems useless but required.

4.What is the difference between classical inheritance and prototypal inheritance?
Class Inheritance: instances inherit from classes (like a blueprint — a description of the class), and create sub-class relationships: hierarchical class taxonomies. Instances are typically instantiated via constructor functions with the `new` keyword. Class inheritance may or may not use the `class` keyword from ES6.
Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or `Object.create()`. Instances may be composed from many different objects, allowing for easy selective inheritance.
In JavaScript, prototypal inheritance is simpler & more flexible than class inheritance.

5. What are the differences between == and ===?
he simplest way of saying that, == will not check types and === will check whether both sides are of same type. So, == is tolerant. But under the hood it converts to its convenient type to have both in same type and then do the comparison. === compares the types and values. Hence, if both sides are not same type, answer is always false. For example, if you are comparing two strings, they must have identical character sets. For other primitives (number, boolean) must share the same value.

6. What are the differences between null and undefined?
It is clear that undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.
null === undefined // false
null == undefined // true
null === null // true

7. Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
You usually put the tags in between the to prevent Flash of Unstyled Content which gives the user something to look at while the rest of the page is being parsed. Since Javascript blocks rendering by default, and the DOM and CSSOM construction can be also be delayed, it is usually best to keep scripts at the bottom of the page.
Exceptions are if you grab the scripts asynchronously, or at least defer them to the end of the page.

8. What’s the difference between a relative, fixed, absolute and statically positioned element? Static is the default type of positioning. When elements don’t have a position specifically set, they default to static.
The relative positioning is interesting because if you just give an element position:relative it will initially seem to do nothing. In order to see a relatively positioned element move you also need to tell it where to go using one of the following top: XXX ; bottom: XXX; left: XXX; right: XXX;. When you begin to move around a relatively positioned element, two things happen. First, you will see the element move off from the side specified, so if you wrote top:50px; the element will move 50px off from the top, or basically down. When you do this though, it doesn’t affect any other static elements around it. So like above, if there’s a static element below your relative one, and you move the relative element down by 50px, the two will overlap, but there is essentially a placeholder where the relatively positioned div originally was. Again, this means that it does not affect any other static elements around it An absolutely positioned element is actually removed from the DOM and positioned based on its nearest relatively positioned parent element i.e. unlike a relatively positioned element which doesn’t affect other static elements, when you give an element position:absolute it’s like it no longer exists. This means that other static elements will move up to fill in the space where the absolute element would have been. The position of the absolute element is determined by its parent elements. If all of the parent elements are either static, or there are none, then the element is positioned based on the <body>.

9. How do you serve a page with content in multiple languages?
If you wanted to include a passage in French on your page you would need to use the ‘lang’ attribute to mark the change in language. The ‘lang’ attribute can be used with almost every HTML element, making it very easy to change languages within a page. <blockquote lang=”fr”>

10. What’s the difference between standards mode and quirks mode?
Quirks mode is the default compatible render mode of web pages if the browser can’t detect the doctype of the page. It differs from browser to browser due to different implementations of old-school rendering engines. In the Standards mode the browsers try to give documents the specification-wise correct treatment to the extent implemented in a particular browser. Firefox, Safari, Chrome, Opera (since 7.5), IE8, IE9 and IE10 also have a mode known as “the Almost Standards mode”, which implements the vertical sizing of table cells traditionally and not according to the CSS2 specification. Standards mode, cutting edge validation : <!DOCTYPE html> You willfully want the Quirks mode : No doctype

UI Frameworks

For thousands of similar UI Frameworks Questions, download EduThrill…

Experience the thrill of challenging people around the world on UI Frameworks Questions!

App Store Google Play