Angular, React, Vue JS Interview Questions

https://github.com/chvenkat668/vuejs-interview-questions

https://github.com/chvenkat668/reactjs-interview-questions

https://github.com/chvenkat668/angular-interview-questions

React Useful Open Source Libraries

REACT-PERMISSIBLE

https://brainhubeu.github.io/react-permissible/

Making the permission management for components easier.

<PermissibleRender
  userPermissions={['ACCESS_DASHBOARD', 'ACCESS_ADMIN']}
  requiredPermissions={['ACCESS_DASHBOARD', 'ACCESS_ADMIN']}
>
  <AccessGranted/>
</PermissibleRender>

react-virtualized

https://github.com/bvaughn/react-virtualized#documentation

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Join the official Slack chat at react-virtualized.now.sh.

REACT-Timline - 9000 

https://github.com/BHP-DevHub/react-timeline-9000/

http://bhp-react-timeline-9k.s3-website-ap-southeast-2.amazonaws.com

A performance focused timeline component in react

REACT-carousel

https://brainhubeu.github.io/react-carousel/

Feature-rich, react-way react component that does not suck, same like slick.js

REACT-Error-boundary

https://github.com/bvaughn/react-error-boundary

This component provides a simple and reusable wrapper that you can use to wrap around your components. Any rendering errors in your components hierarchy can then be gracefully handled.

import ErrorBoundary from 'react-error-boundary';

<ErrorBoundary>
  <ComponentThatMayError />
</ErrorBoundary>

Introduction to GraphQL

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

A GraphQL service is created by defining types and fields on those types, then providing functions for each field on each type. For example, a GraphQL service that tells us who the logged in user is (me) as well as that user's name might look something like this:

type Query {
  me: User
}

type User {
  id: ID
  name: String
}

Along with functions for each field on each type:

function Query_me(request) {
  return request.auth.user;
}

function User_name(user) {
  return user.getName();
}

Once a GraphQL service is running (typically at a URL on a web service), it can be sent GraphQL queries to validate and execute. A received query is first checked to ensure it only refers to the types and fields defined, then runs the provided functions to produce a result.

For example the query:

{
  me {
    name
  }
}

Could produce the JSON result:

{
  "me": {
    "name": "Luke Skywalker"
  }
}

Learn more about GraphQL—the query language, type system, how the GraphQL service works, as well as best practices for using GraphQL to solve common problems—in the articles written in this section.

ADVANTAGES OF GRAPHQL

GraphQL offers many benefits over REST APIs. One of the main benefits is clients have the ability to dictate exactly what they need from the server, and receive that data in a predictable way.

For example, imagine you have the following schema:

type Query {
  me: User
}

type User {
  id: ID
  name: String
  city: String
  state: String
  friends: [User]
}


Copy

Now let’s say that you just needed to get a User‘s name. If you had a REST API, you would typically receive the entire User object back in your response. This leads to overfetching and can result in performance issues. With GraphQL, you only receive the data you explicitly request.

Here’s what our User name query would look like:

{
  me {
    name
  }
}


Copy

And here’s what our response would look like:

{
  "me": {
    "name": "John Doe"
  }
}


Copy

Another big benefit is the ability to retrieve many resources in a single request. Continuing with our example schema, imagine we want to also fetch the names of our User‘s friends as well. For a traditional REST API, we would probably need to make an additional request to a /friends?id=X endpoint, passing in our User‘s ID.

We can simply append our friends property to our query and receive all our names in a single request:

{
  me {
    name
    friends {
        name
    }
  }
}


Copy

And here’s what our response would look like:

{
  "me": {
    "name": "John Doe"
    "friends": [
        {
            "name": "Jane Doe"
        },
        {
            "name": "Jim Doe"
        }
    ]
  }
}


Copy

Another benefit is that it is strongly-typed which allows API consumers to know exactly what data is available, and in what form it exists. According to the docs: “Every GraphQL service defines a set of types which completely describe the set of possible data you can query on that service. Then, when queries come in, they are validated and executed against that schema.”

DISADVANTAGES OF GRAPHQL

While GraphQL has many advantages over traditional REST APIs, there are several key disadvantages as well.

One disadvantage is queries always return a HTTP status code of 200, regardless of whether or not that query was successful. If your query is unsuccessful, your response JSON will have a top-level errors key with associated error messages and stacktrace. This can make it much more difficult to do error handling and can lead to additional complexity for things like monitoring.

Another disadvantage is the lack of built-in caching support. Because REST APIs have multiple endpoints, they can leverage native HTTP caching to avoid refetching resources. With GraphQL, you will need to setup your own caching support which means relying on another library, or setting up something like globally unique IDs for your backend.

This leads us to the final disadvantage: complexity. If you have a simple REST API and deal with data that is relatively consistent over time, you would be better off sticking with your REST API. For companies that deal with rapidly-changing data, and have the engineering resources to devote to rearchitecting their API platforms, GraphQL can solve many of the pain points experienced with REST APIs.

GraphQL provides an interesting solution to common hurdles faced when using REST APIs. While using GraphQL has several downsides, if you find yourself working with rapidly-changing data at scale, it could be a great solution for your business. To learn more about, check out the docs. And if you’re looking for a more fully-fledged GraphQL solution, Apollo provides an easy way to get started on both the client and server-side.

Tutorial Ref: https://www.tutorialspoint.com/graphql/graphql_tutorial.pdf

10 Year Challenge: How Popular Websites Have Changed

Ref: https://www.arun.is/blog/10-year-challenge/

Google

The most noticeable change in Google is its redesigned 2015 logo. 10 years ago, it still had the logo that remained unchanged from 1999 to 2010. Aside from that, the site has certainly become less visually cluttered and dare I say, more minimal.

YouTube

10 years ago, YouTube was only 2 years into its life as a Google subsidiary. It has clearly undergone the flattening and simplification the rest of the web has experienced over the last decade.

Amazon

While Amazon has added nearly $800 billion to its market cap and countless product lines and services over the last decade, the site seems to have become simpler, hiding most things behind menus.

Facebook

Facebook is well-known for being data-driven in its design decisions and not changing things that aren’t broken. Its home page is a perfect example. Little has changed aside from its 2015 redesigned logo.

Reddit

Reddit actually survived most of the last 10 years with few visual changes until mid-2017 when the current design was announced and mid-2018 when it started to roll out to large groups of users.

Wikipedia

Wikipedia’s familiar circular language picker has changed little in the last decade aside from the list of languages represented.

Yahoo

Yahoo may be a new shade of purple and may have a new logo, but it still maintains its jam-packed layout.

Twitter

It’s easy to forget that back in 2009, Twitter was still competing with Facebook, Myspace and others in the hot social networking arena. I find it funny that it had to explain what it did in so many words. Now it’s a household name not requiring any explanation and the homepage is simple and to the point.

eBay

In the last 10 years, eBay has shed a lot of color in its user interface and has tried to position itself as both an e-commerce site and a way to make money.

Imgur

10 years ago, Imgur was little more than an image host built for Redditors by a college student. Fast forward and it’s now one of Alexa’s top 20 most-visited sites in the US.

The New York Times

The New York Times website has visually become more and more like a print newspaper, with simple flat lines, black text and a 4-column layout.

Craigslist

Craigslist is well-known for changing very little since its founding in 1995. I was expecting to see almost no change in the last 10 years, but I’m surprised to see more white space, bigger text, and a better use of space.

IMDB

IMDB has stripped away quite a bit over the last 10 years to focus mostly on video content, awards, and openings.

CNN

CNN, just like the New York Times, has a simpler layout with more visual hierarchy and larger text.

Microsoft

The Microsoft of 2009 was a completely different company. Just look at the labels on the navigation bar in 2009 and 2019. They show how much the company has shifted its focus from technical software to tools for consumers’ lifestyles.

Apple

10 years ago, the iPhone App store was 6 months old and was celebrating 500 million app downloads. Now, the store has sold more than 130 billion apps. That’s 260 times as many. The main site has a new design language with larger type and full-width imagery.

Walmart

Walmart has simplified its site just like many others with more whitespace and less content.

Github

10 years ago, Github was nearly 1 year old and was quickly building its following that would later cement it as the default place for hosting open source repositories.

Zillow

It seems like Zillow has focused its homepage on just the few most common use cases while moving everything else to the header and footer.

Yelp

Yelp is another example of focusing on the most popular use case, finding a restaurant nearby.

Stack Overflow

Stack Overflow still has its listing of top questions, but it has dedicated quite a bit of its homepage to converting new users.

Etsy

In the last 10 years, Etsy has shifted to be not just a marketplace for handmade items, but an e-commerce site for also finding vintage, custom or unique items.