NextTick API in Vue.js

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM not yet updated
      console.log(document.getElementById('counter').textContent) // 0
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

In the above program, we are changing the state of count by doing count++. But this will not update the DOM instantly rather the vue.js frameworks collects this information in the backend. After the whole execution of increment() method, It will update the DOM asynchronously.

But the problem is document.getElementById('counter').textContent) returns 0 in the increment() method. so if someone wants to use DOM element immediately, which is not possible in Vue.js directly. That’s where we have to use nextTick global API. nextTick allows you to execute code after you have changed some data and Vue.js has updated the virtual DOM based on your data change, but before the browser has rendered that change on the page.

We can pass the callback function to the nextTick(callback(){}) which can be triggered after the successful DOM update. You can either pass a callback as an argument, or await the returned Promise.

import { nextTick } from 'vue'

export default {
  methods: {
    increment() {
      this.count++
      nextTick(() => {
        // access updated DOM
      })
    }
  }
}

Why Not SetTimeout ?

Some people would think, why not setTimeOut!. We can also use setTimeOut But the problem is When you invoke setTimeout…

setTimeout(function() { 
    // access updated DOM
}, 100);

then the browser would have a chance to update the page, and then your callback would get called. So the UI will render the old record first and then the new record will come. It’s not look good right. But with the help of nextTick() we can change the DOM value before being render into the screen. That’s the beauty of this API in Vue.js

Summary

nextTick() can be used immediately after a state change to wait for the DOM updates to complete. We should not use setTimeOutto update the DOM rather should prefer nextTick()

The post When to use NextTick API in Vue.js appeared first on Program Easily.

Test container is a third party Java library which offers to test or validate anything that can run in a Docker container. For Example, we can create lightweight database instances of  MySQL, PostgreSQL or Oracle database to test our data access layer code (DAO , Repositories). Similarly we can test our AWS cloud services like server less apps without actually using the cloud. We can do this with the help of LocalStack, a fully functional local AWS cloud stack.

Local Stack

LocalStack is a cloud service emulator. We can able to run AWS applications like Lambda, S3 entirely on your laptop or machine without connecting to a remote cloud provider.

Why It is needed ?

We can able to connect to AWS services like S3 from Java using their SDK’s. But here the problem is, if we wants to validate our code then we are need to connect cloud sandboxes using AWS SAM or anything like that. And While we access the cloud services, It is billable as well. Secondly we can not write unit test or integration test for this sources in a efficient way which would be a another downside of it. So In this article, we are going to learn to write unit testing for AWS S3 services with the help of Local stack and Test containers. Let’s dive into that. Cheers.

Prerequisite

• Java
• Maven
• Docker

Create a Spring initializer project

First, I am creating basic spring initializer project with Spring boot starter, Spring boot test and AWS SDK maven dependencies.

<dependency>
            <groupId>com.amazonaws</groupId>
            <artifactId>aws-java-sdk</artifactId>
            <version>1.11.163</version>
</dependency>

Creating AWS S3 Client

Second, now I am creating AWS S3 client with simple upload object functionality. Here I am validating whether the bucket is exist or not, followed by uploading an object into the S3 storage system.

package awsservicestutorial.client;

import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.model.ObjectMetadata;

import java.io.IOException;
import java.io.InputStream;
import java.net.URLConnection;
import java.nio.file.Files;
import java.nio.file.Path;

public class AwsS3Client {

    private final AmazonS3 amazonS3;

    public AwsS3Client(final AmazonS3 amazonS3) {
        this.amazonS3 = amazonS3;
    }

    public void uploadObject(final String bucketName, final Path path) throws IOException {

        isBucketExists(bucketName);

        final String filename = path.getFileName().toString();

        final ObjectMetadata metadata = new ObjectMetadata();
        metadata.setContentType(URLConnection.guessContentTypeFromName(filename));
        metadata.setSSEAlgorithm("AES256");
        metadata.setContentLength(Files.size(path));

        try(final InputStream stream = Files.newInputStream(path)){
            amazonS3.putObject(bucketName, filename, stream, metadata);
        }
    }

    private void isBucketExists(final String bucketName) {
        if(!amazonS3.doesBucketExist(bucketName)) {
            throw new IllegalStateException(String.format("Bucket %s does not exist", bucketName));
        }
    }

}

Local Stack and Test Container Dependencies

Add the following dependency to your pom.xml for using local stack and test container libraries.

        <dependency>
            <groupId>org.testcontainers</groupId>
            <artifactId>localstack</artifactId>
            <version>1.17.6</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.testcontainers</groupId>
            <artifactId>junit-jupiter</artifactId>
            <version>1.17.6</version>
            <scope>test</scope>
        </dependency>

Here I am using Junit-5 for unit testing the application. It is up to to decide whether Junit 5 or 4. We can do this with Junit 4 as well.

AWS S3 Client – Local Stack – Test Container – Create Unit Test

Creating unit test with local stack is really very simple. we just need to create local stack instance. This instance can act as AWS S3 services with the help of test container and docker. It will create a exact AWS mock in local or in our CI environment. This will reduce a lot money, since we don’t need to interact AWS cloud services during local development and testing.

package awsservicestutorial;

import awsservicestutorial.client.AwsS3Client;
import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.AmazonS3ClientBuilder;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.springframework.test.context.junit.jupiter.SpringExtension;
import org.testcontainers.containers.localstack.LocalStackContainer;
import org.testcontainers.junit.jupiter.Container;
import org.testcontainers.junit.jupiter.Testcontainers;
import org.testcontainers.utility.DockerImageName;

import java.io.IOException;
import java.net.URISyntaxException;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Optional;

@Testcontainers(disabledWithoutDocker = true)
@ExtendWith(SpringExtension.class)
class AwsServicesTutorialApplicationTests {
    private static final String BUCKET_NAME = "test-bucket";
    @Container
    public final static LocalStackContainer LOCAL_STACK_CONTAINER =
            new LocalStackContainer(DockerImageName.parse("localstack/localstack:0.12.16"))
                    .withServices(LocalStackContainer.Service.S3).withEnv("DEFAULT_REGION", "us-east-1");
    private AmazonS3 amazonS3 = AmazonS3ClientBuilder.standard()
            .withEndpointConfiguration(LOCAL_STACK_CONTAINER.getEndpointConfiguration(LocalStackContainer.Service.S3))
            .withCredentials(LOCAL_STACK_CONTAINER.getDefaultCredentialsProvider()).build();

    private AwsS3Client awsS3Client;

    @BeforeEach
    public void beforeEach() throws IOException, InterruptedException {
        LOCAL_STACK_CONTAINER.execInContainer("awslocal", "s3", "mb", "s3://" + BUCKET_NAME);
        awsS3Client = new AwsS3Client(amazonS3);
    }

    @AfterEach
    public void afterEach() throws IOException, InterruptedException {
        LOCAL_STACK_CONTAINER.execInContainer("awslocal", "s3", "rb", "s3://" + BUCKET_NAME, "--force");
    }

    /**
     * First assert whether localstack is running!
     */
    @Test
    public void test_isLocalstackRunning() {
        Assertions.assertTrue(LOCAL_STACK_CONTAINER.isRunning());
    }

    @Test
    public void test_uploadObjectSuccess() throws URISyntaxException, IOException {

        awsS3Client.uploadObject(BUCKET_NAME, createPath());
        Assertions.assertTrue(amazonS3.doesObjectExist(BUCKET_NAME, "sample.csv"));
    }

    @Test
    public void tes_uploadObjectError() throws IOException, InterruptedException {

        LOCAL_STACK_CONTAINER.execInContainer("awslocal", "s3", "rb", "s3://" + BUCKET_NAME, "--force");
        Assertions.assertThrows(IllegalStateException.class, () -> awsS3Client.uploadObject(BUCKET_NAME, createPath()));
    }

    private Path createPath() throws URISyntaxException {
        return Optional.ofNullable(ClassLoader.getSystemResource("sample.csv").toURI())
                .map(Paths::get)
                .orElseThrow(IllegalArgumentException::new);
    }

}

• First, I am validating whether the local or CI machine having docker environment.
• Second, @Container creates the local stack container instance and mimic the AWS S3 as we are providing S3 as a service here. If you are using Junit-4, then you must use @ClassRule annotation here.
• During beforeEach() method, we are just creating the bucket in the S3 where as afterEach() method deletes the bucket after each test execution.
• You will need to create sample.csv file under test/resources directory for uploading into local stack S3.
• During upload test, once the file upload has been done, we can assert that using amazonS3.doesObjectExist method, whether the file has been successfully uploaded or not.
• And also we are validating after deleting the the bucket, whether it is throwing IllegalStateException exception or not.
• Finally In this way, we tested our AWS S3 client class effectively without connecting into AWS services.

AWS S3 Client – Local Stack – Test Container – Code Sample

• https://github.com/programeasily/aws-services-tutorial/blob/main/src/main/java/awsservicestutorial/client/AwsS3Client.java
• https://github.com/programeasily/aws-services-tutorial/blob/main/src/test/java/awsservicestutorial/AwsServicesTutorialApplicationTests.java
• https://github.com/programeasily/aws-services-tutorial

The post AWS S3 Client – Local Stack – Test Container appeared first on Program Easily.

             1. By Literal in Java

             2. By New Keyword

String Literal in Java

String Literals are very special in Java. We can create String object using double quotes as followed,

String message = "Hello ! I am a string";

The above code calls the intern() method of string first. Then the intern checks whether the same object is exists in pool or not!. If it is exist, it will return the same object reference. Otherwise It will create the new object in the pool and return the new object reference. Ultimately the string literal should be fast if we compare with new keyword since it will not create the new objects every time.

By New Keyword

We can create String object using new keyword as followed,

String message = new String("Hello ! I am a string");

The above code creates two string objects. It will create one object in Heap Memory directly and other in String Pool Area. And the reference will points to heap memory object.

Caution in String Compare

We have to use equals method of string to compare two strings always, not ==. Because == compares only the memory locations. But the equals method compare the memory location as well as the content of the stored objects.

String a = "Hello";
String b = "Hello";

// since literals re-use existing objects from the pool
System.out.println(a == b) // true

String c = new String("Hello");

// new keyword always creates new objects in the heap
// And == compares the memory locations not the exact
// content of the objects
System.out.println(a == c) // false

// Always use equals for comparison
// String class equals method checks the content of the 
// object as well
System.out.println(a.equals(c)) // true

Why String is Immutable

The rule to create any immutable object is, it’s state can not be changed after it is created. And String class designed to follow this rule. Even we could create N number of objects by following this rule. Let’s come to the point, why string is immutable ? The most correct answer is probably: Because the java language authors or designers figured it was a good idea. So that It will provide lot of benefits to us, Let’s see one by one.

Security

We have been mostly using string object in network connections, database connection URLs, usernames/passwords and etc. It it were mutable, we can change these parameters and runtime And which creates security issues.

Synchronization And Concurrency

We can say an object is thread safe, when multiple threads are operating on it but none of them is able to corrupt its state and object hold the same state for every thread at any point in time. Making String immutable automatically makes them thread safe by default thereby solving the synchronization issues.

Caching

when compiler optimizes your String objects, it sees that if two objects have same value (a=”test”, and b=”test”) and thus you need only one string object (for both a and b, these two will point to the same object)

Hash Code Caching

String object caches its hash code at the time of object creation which makes it the great candidate for hashing related operations because hash code doesn’t need to be calculated again which save us some time. This is why String is mostly used as Hash Map keys

Class Loading

We have been using String as an arguments for class loading. If mutable, it could result in wrong class being loaded (because mutable objects change their state).

Summary

1. Usually we design classes as immutable for them being thread safe and to optimize performance and memory consumption.

2. Security and Efficiency to be the primary design goals, then immutable strings are a means to meet those goals.

3. immutable objects in java are like copy-by-value, you can have 2 references to a String, but you should consider them 2 separate Strings since it’s immutable, and working with one of them won’t affect the other.

You May Also Like

• Java 8 Interview Questions for Experienced

The post String in Java – String Literal, String Pool, String Objects appeared first on Program Easily.

Pinia is a library store for Vue.js. It will work with Vue.js 3 as well as Vue.js 2. Pinia holds the state and business logic which is not bounded with component object trees. In other words, I would say it creates a global state where everybody can read and write the data. Pinia has three area’s as follows,

1. State
2. Getters
3. Action

We can assume and compare these things with data, computed and methods in components.

Why Pinia (A Store)

Store will have the data that can be used everywhere in our application. Meanwhile we should avoid the local data in the store which can be added in the component instead. Pinia is a choice if your application needs to access the global state values.

Features of Pinia

• Hot module replacement
  • Modify your stores without reloading your page
  • Keep any existing state while developing
• Plugins: extend Pinia features with plugins
• Proper TypeScript support or autocompletion for JS users
• Server Side Rendering Support
• Devtools support
  • A timeline to track actions, mutations
  • Stores appear in components where they are used
  • Time travel and easier debugging

Full Tutorial

Installations

You can install pinia with the help of NPM or Yarn as follows,

npm install pinia
or
yarn add pinia

Inject Pinia with CreateApp

Here we are going to have only one store for the application. So we have to create its instance and inject the same in VUE createApp. You can call it a root store.

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

So what createPinia does here ?. It creates the entity which holds the state for our application. And It’s global state where one can read and write as well. It has three concepts or property’s

1. state
2. getters
3. actions

(You can assume this three components with data, computed and methods)

Create the Store

First we need to create the store template. We can create a store template using defineStore() and it requires a unique name. We may use this template across our application.

import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useStore = defineStore('main', {
  // other options...
})

Second we need to use this store template inside the setup() function so that it will create the store. We have to call useStore() as follows,

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // you can return the whole store instance to use it in the template
      store,
    }
  },
}

Once the store is created you can access its properties like state, getters and actions.

State

The state is the heart of the system. It is a function that returns the initial state of the application.

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // arrow function recommended for full type inference
  state: () => {
    return {
      // all these properties will have their type inferred automatically
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

We can access the store to read and write its data through store instance, and we can reset it to the initial state as well

const store = useStore()

store.counter++

store.$reset()

Getter

We can define the getters property in defineStore() template. I would say, it is a replacement for computed values.

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // automatically infers the return type as a number
    doubleCount(state) {
      return state.counter * 2
    },
    // the return type **must** be explicitly set
    doublePlusOne(): number {
      // autocompletion and typings for the whole store 
      return this.doubleCount + 1
    },
  },
})

Then we can access and use the getters inside the template as follows,

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

<script>
export default {
  setup() {
    const store = useStore()

    return { store }
  },
}
</script>

Actions

Actions are the replacement for the methods. We can add our actions in the defineStore() template. Unlike getters, we can write asynchronous operations inside action. It will useful for creating API calls for our business logic

import { mande } from 'mande'

const api = mande('/api/users')

export const useUsers = defineStore('users', {
  state: () => ({
    userData: null,
    // ...
  }),

  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // let the form component display the error
        return error
      }
    },
  },
})

Summary

• Pinia is a store library for Vue, it allows you to share a state across components/pages.
• Compared to Vuex, Pinia provides a simpler API with less ceremony, offers Composition-API-style APIs, and most importantly, has solid type inference support when used with TypeScript.
• The formula is Create the template -> create the store with state, getters and actions and use across the application.

The post Pinia – The Vue Store Library appeared first on Program Easily.

• React
• Angular
• Vue.js

are the declarative and component based rich frameworks. These three are perfect and stand by their super features as well. But What you will choose ? That’s the question here. And the answer is, it all depends. Yes, it depends upon your use cases, projects and requirements. Still in struggle to pick one, then this article for you. Let’s take a deep dive into it.

Vue vs React vs Angular

What Should I Choose Between React, Angular and Vue.js

We can create and update dynamic web pages using JavaScript. Though JavaScript is good, it is really difficult sometimes to build a complex website. You have to work with DOM and manipulate Data. Oh!! It’s not the best way right. Even frameworks like jQuery couldn’t solve such problems. So these frameworks segregate the process into four modules,

1. Core Library
2. Virtual DOM
3. Data
4. Components

Virtual DOM acts as a shallow DOM of the web pages. I would say that the Virtual DOM will respond while we change the Data. It will maintain the old data and compare the same with new one while we refresh it. So it will update the actual DOM, whenever there is a difference in old and new data. We are calling this Reactive feature. You don’t have to worry about the traditional DOM update process, rather you can concentrate more on your business data. Design the UI as a component and pass the data dynamically into it. Core Library will have all common library files for the utilities. These are all the fundamental features of these modern frameworks. This really makes our work simple and helps to build responsive rich applications.

Vue vs React vs Angular – Survey

Survey of most popular web frameworks – Year 2021

LINK – https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-web-frameworks

React

React is the most popular and has more than 183k GitHub stars. React is not a new language; rather I would say it is just a JavaScript framework. Anyone who knows JavaScript, is able to adapt themselves over a short period. It was created by Facebook and made open source later. So it has a large DEV Community as well. It is really simple to approach people. You could clarify your questions and concepts easily.

When to prefer React Over Angular and VUE

• • React is simple to learn. Over a short period you can adapt to it. Whereas Angular is a type-script based language and will take time to learn about the inbuilt framework functionalities.
  • React follows one way data flow which helps to identify the state change easily. Whereas angular follows Bi-directional data flow. This makes it harder to control the data flow.
  • Angular uses traditional DOM. So it needs to rewrite the whole HTML tree when we change the data ( To compromise this they are using a change detection mechanism). React Virtual DOM is much faster than angular traditional DOM. It will not rewrite the entire HTML tree when we change the data.
  • Most people prefer React. Oh this is a really nice one right!
  • React has a larger DEV Community than Vue.js. You can clarify the doubts easily here.
  • If you love JSX templates over HTML templates you would prefer React. But most people won’t prefer JSX syntax.
  • You can use React with React native as well for mobile application development. This will help to write some common functionalities.
  • If you are going to depend on a lot of third party dependencies, then you can prefer React.

VUE

Vue.js is an open source JavaScript Framework. It was created by Evan You and maintained by active core team members along with him. Vue.js is used mainly to create rich single page applications and user interfaces. Believe me, Vue.js has 194k stars more than React in GitHub. It is one of the growing languages. And it is very simple to learn. Whoever knows JavaScript, then can easily adapt themselves to learn VUE in a very short time.

When to prefer VUE over React and Angular

• Vue.js is very simple and easier than React as well. The single file components contain HTML, CSS and Script in the same file which makes developer friendly component design.
• Size of the Vue.js runtime library is very small. Even lightweight than React.
• If you love HTML templates and CSS over JSX, then VUE is your language.
• In React when the component state changes, it will trigger the re-render for the entire component sub-tree, taking that component as root. But in VUE, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes.
• React also follows one way data flow like React. When you update the parent component, it will re-render all it’s children.
• Code readability is better compared to React and Angular.

Angular

Angular is a type script based open source front end framework. It was created and maintained by google. Angular is a choice for most large companies since it has been used to develop enterprise-grade applications. It is having 79.k stars by today. Angular uses traditional DOM. So it needs to rewrite the whole HTML tree when we change the data ( To compromise this they are using change detection mechanism).

When to prefer Angular Over React and VUE

• Angular has an in-built Material toolset which offers a lot of components. It makes it easier to design the rich design in a fast manner.
• Angular also has a large DEV community which makes solving the problem easier.
• It is well suited for enterprise level application development since it is a framework (Whereas React and VUE are libraries).
• Angular has a lot of inbuilt tools and modules which offers us not to depend on external libraries.
• Angular follows bi-directional data flow. It has both pros and cons. And this makes the development a little bit easier.
• Angular uses a change detection mechanism to detect the state change. So even if it updates the entire tree of real DOM, it effectively matches the performance of Virtual DOM operation.

Vue vs React vs Angular – Summary

I would say, all three frameworks are good. The matter is which one suites our requirement,

1. If you want to learn quickly, you are going to create a simple website UI, you don’t want any community support and want to use HTML and CSS to design then I will prefer VUE.
2. React can be preferred when you want to learn quickly, you are going to create a simple or medium UI with community support and third party dependencies .
3. If you going to create enterprise level application, then Angular is your choice.

The post Vue vs React vs Angular appeared first on Program Easily.

export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}

Let’s take a deep dive into that with this post. If you are not familiar with Vue.js components, You should read Components in Vue 3  first.

One way data flow – Props in Vue 3

Props follows one way data flow with it’s child component property. As a result, when we update the value of parent props, it will flow down and update the child property as well. At the same time it will not do vice versa. If you want to update the component state, the flow should start from the parent and all props in the child component will be refreshed with the latest value. We are having event emit concept to reverse back from child to parent in Vue.js.

export default {
  props: ['foo'],
  created() {
    // ❌ warning, props are readonly!
    this.foo = 'bar'
  }
}

Suppose if you want to change the prop in the child component based on business scenario, you can transform the same using computed in Vue.js

export default {
  props: ['size'],
  computed: {
    // computed property that auto-updates when the prop changes
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}

Note

However, when passing arrays and objects as props, Vue.js will not prevent mutation of it’s nested properties. Because objects and arrays are passed by reference. Firstly, you should avoid such mutations as a best practice. Secondly, if you need this scenario in-deed, the child can emit an event and the parent listens to it and performs the mutation.

Static and Dynamic Props

The static props are nothing but just assign the static values like below,

<Blog title="I am a static prop example" />

You can also assign dynamic values to props with the help of  v-bind or its : like below

<!-- Dynamically assign the value of a variable -->
<Blog v-bind:title="post.title"></Blog>
// OR
<Blog :title="post.title" </Blog>

Passing other different values to prop

We can pass Numbers, Boolean, Arrays as well as Object to a props value.

// Number
<!-- Even though `42` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.  -->
<Blog :likes="42" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :likes="post.likes" />

// Boolean
<!-- Including the prop with no value will imply `true`. -->
<Blog is-published />

<!-- this is a JavaScript expression rather than a string. -->
<Blog :is-published="false" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :is-published="post.isPublished" />

// Array
<!-- this is a JavaScript expression rather than a string. -->
<Blog :comment-ids="[234, 266, 273]" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :comment-ids="post.commentIds" />

// Object
<!-- this is a JavaScript expression rather than a string. -->
<Blog
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<!-- Dynamically assign to the value of a variable. -->
<Blog :author="post.author" />

Validation – Props in Vue 3

There are three ways of prop validations available in Vue.js. If the validation fails, then Vue.js will warn us in the browser’s JavaScript console. This is really needed to define the component and the application developers are aware of the intention of the component as well.

1. Type validation
2. Mandatory or not (Required)
3. Custom validator

export default {
  props: {
    // 1. Type Validation
    //  (`null` and `undefined` values will allow any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // 2. Mandatory validation with default value
    propC: {
      type: String,
      required: true,
      default: "Hello"
    },
    // 3. Custom validator
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
}

In setup Hook – Props in Vue 3

The setup function is the entry point of the Composition API in Vue.js. The first argument of the setup function is the props argument. Props inside the setup function are reactive by nature.

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

If you destructor the props object, it will lose the reactivity. So we should avoid changing the props object there. But if you really need to destructor the props, you can go for toRefs() and toRef() API.

import { toRefs } from 'vue'

export default {
  setup(props) {
    // turn `props` into an object of refs, then destructure
    const { title } = toRefs(props)
    // `title` is a ref that tracks `props.title`
    console.log(title.value)

    // OR, turn a single property on `props` into a ref
    const title = toRef(props, 'title')
  }
}

Special Feature – Boolean Casting

When we use Boolean props , it has a special casting rule. It is similar to the native Boolean attribute in any programming language. Let me show you with below example,

<!-- equivalent of passing :disabled="true" -->
<MyComponent disabled />

<!-- equivalent of passing :disabled="false" -->
<MyComponent />

// The casting rules for Boolean will apply regardless of type appearance order for below example as well
export default {
  props: {
    disabled: [Boolean, Number]
  }
}

Name Casing in Props

When we declare props in Vue.js we have to follow camelCase. It will avoid to use quotes when we dealing them as property keys, and makes as valid JavaScript identifiers.

export default {
  props: {
    greetingMessage: String
  }
}
// using the “Mustache” syntax (double curly braces)
<span>{{ greetingMessage }}</span>

So when we pass the props values to the child component , we can use camelCase. But Here the convention is kebab-case similar to the one below.

<MyComponent greeting-message="hello" />

Summary

In Conclusion,

• Firstly, we are having props as attributes for Components in Vue.js. Props provides additional information about the components.
• Secondly, props follows one way data flow with it’s child component property. When we update the value of parent props, it will flow down and update the child property as well. At the same time it will not vice versa.
• In Vue.js 3, The first argument of the setup function is the props argument. Props inside the setup function are reactive by nature.

The post Props in Vue 3 appeared first on Program Easily.

Java edition 8 is a major release after the 6th edition. In this article we are going to refresh the concepts which will help us to improve the interview experience. Let’s take a deep dive into it.

Java 8 Interview Questions for Experienced

1. Features of Java 8

• Lambda Expressions – Lambda expressions are anonymous functions or methods without the name
• Functional Interface – It is a single abstract method (SAM) interface, i.e. interface with only one abstract method.
• Default Method – the default implementation of the method and we can override it in the concrete class if required.
• Method Reference – It will just refer to the existing method with name. An easy way of referring to a method of a functional interface.
• Stream – a sequence of elements involved with sequential and parallel aggregate operations. The operations are composed into a stream pipeline.
• Optional – A wrapper object which may or may not contain a non null value.
• Static methods in interface – Static methods makes it easier to organize the helper methods in our libraries. We can create static methods specific to an interface in the same interface rather than in a separate class.
• Nashorn – The Nashorn engine is an implementation of the ECMAScript. Nashorn Java API allows us to write Java Applications as scripts which can be interpreted by the Nashorn engine.

2. What are functional interface

Java 8 introduced the concept of functional programming with the help of functional interfaces. It is a single abstract method (SAM) interface, i.e. interface with only one abstract method. So one abstract method is responsible for one particular functionality. @FunctionalInterface annotation is used to indicate that the interface is a functional interface. This annotation is not mandatory. It just let the compilers to throw the error incase if we maintain more than one abstract method in the interface.

Note that, we can create the functional interface instances with the help of lambda expressions, method references or constructor references.

3. Some Predefined functional interfaces

• Consumer – a function that accepts a single input argument and returns no result.
• Function – a function that accepts one argument and produces a result.
• Predicate – Represents a predicate (boolean-valued function) of one argument.
• Supplier – a function that does not accept input and produces a result.

4. What is lambda expression

Lambda expressions are anonymous functions or methods without the name. We can replace the anonymous class implementation with the help of lambda expressions after Java-8. We can pass functionality as an argument to another method here. Some of the key points are,

• Function without a name
• Anonymous function
• Executes on demand
• Applied only to functional interface
• Standalone, does not belong to any class

The Lambda expression syntax consists of the following,

1. A comma separated list of parameters enclosed in parentheses
2. The Arrow token, ->
3. A Body, which consists of a single expression or a statement block.

// single parameter and single expression example,
p -> p.getGender() > 25 && p.getGender() <= 18

// multiple parameter example,
( a, b ) -> a + b;

// statement block example,
p ->{
     return  p.getGender() > 25 && p.getGender() <= 18 ;
}

5. What is default method

Before Java 8, interfaces allowed abstract methods only. From Java-8, we can do the abstract method implementation in the interface itself. Let’s say the default implementation of the method and we can override it in the concrete class if required.

The idea behind the default method is that the java-8 team wants to introduce new abstract methods in the old utility libraries. If they do so, it will provide compiler error to all it’s implemented classes. So the default method was introduced to ensure backward compatibility. It enables you to add new methods to the old interfaces with the compatibility of it’s older versions of those interfaces.

6. What is Method Reference

Sometimes we want to create the lambda function(anonymous function) that does nothing but call an existing method. Here we are having the super shortcut called method reference. It will just refer to the existing method by name, an easy way of referring to a method of a functional interface.

// a lambda expression does nothing but call an existing method
Arrays.sort(rosterAsArray,
    (a, b) -> Person.compareByAge(a, b)
);

// Using method reference
// refer to the existing method by name
Arrays.sort(rosterAsArray, Person::compareByAge);

7. What is Optional

A wrapper object which may or may not contain a non null value. We can use optional to handle null values after Java-8. If value is not null, isPresent() will return true and get() will return the value.

// Creates the optional object
Optional.of(argument);

8. What is Stream

A Stream is not a data structure that stores elements. It does not hold any data(No Storage). Whereas, is a sequence of elements involved with sequential and parallel aggregate operations. The operations are composed into a stream pipeline. The Stream pipeline consist of below components,

• A source (array, collection, generator function, an I/O channel)
• Zero or more intermediate operations (each intermediate operation transform a stream into another stream)
• A terminal operation (produces a result or side-effect)

Here the important information is, you can have a number of intermediate operations and computation on the source data which is performed only when the terminal operation is initiated. Streams are Lazy and source elements are consumed only as needed.

9. Stream vs Collection

10. Intermediate operation vs Terminate operations in Stream

Stream operations are divided into intermediate operations and terminal operations. They are combined to form a stream pipeline. Intermediate operations return a new stream. It’s always lazy, meaning that executing intermediate operations such as filter() does not actually perform. But creates a new stream. When terminal operation is initiated, the traversal of all intermediate operations will be executed. Terminal operations such as Stream.forEach may traverse the stream to produce the final result. After the terminal operation is performed, the stream pipeline is considered as consumed and can no longer be used.

11. map vs flatmap

map – Transforms the stream by applying the given function to all the elements of its stream. It is an intermediate operation.

// transforms all elements to uppercase
Stream.of("apple", "meta", "google")
        .map(mapper -> mapper.toUpperCase()).collect(Collectors.toList());
// output
[APPLE, META, GOOGLE]

flatMap – flattening the resulting elements into a new stream. One-to-many transformation to the elements of the stream.

List<Integer> list1 = Arrays.asList(1,2,3);
        List<Integer> list2 = Arrays.asList(4,5,6);
        List<Integer> list3 = Arrays.asList(7,8,9);
        // flatten the elements into a single list
        List<Integer> result = Stream.of(list1, list2, list3)
        .flatMap(list -> list.stream()).collect(Collectors.toList());

// output
[1, 2, 3, 4, 5, 6, 7, 8, 9]

12. findFirst vs findAny vs anyMatch vs allMatch vs noneMatch

findFirst – To find the first element of the stream. It will return the Optional object with either the first element or the empty optional object. This is a terminal operation.

Optional<String> first = Stream.of("apple", "meta", "google").findFirst();
System.out.println(first.get());
// output
apple

findAny – To find any element of the stream. It will return the Optional object with any one of the elements or the empty optional object. This is also a terminal operation.

Optional<String> any = Stream.of("apple", "meta", "google").findAny();
System.out.println(any.get());
// output
apple

anyMatch – Returns true if any one of the elements evaluates true with the provided predicate. If the stream is empty or all elements evaluate false with the provided predicate then it will return false.

boolean any = Stream.of("apple", "meta", "google").anyMatch(predicate -> predicate.equals("apple"));
System.out.println(any);
// output
true

allMatch – Returns true if all the elements evaluate true with the provided predicate. If the stream is empty then it will return true without evaluating the predicate.

boolean allMatch = Stream.of("apple", "meta", "google").allMatch(predicate -> predicate instanceof String);
System.out.println(allMatch);
// output
true

noneMatch – Returns true if no elements evaluate true with the provided predicate. If the stream is empty then it will return true without evaluating the predicate.

boolean noneMatch = Stream.of("apple", "meta", "google").noneMatch(predicate -> predicate.equals("facebook"));
System.out.println(noneMatch);
// output
true

13. skip vs limit vs count

skip – discards the first N elements of the stream. If the stream contains less elements than N ,then it will return an empty stream. This is an intermediate operation.

List<Integer> skipList = Stream.of(10,20,30,40,50).skip(2).collect(Collectors.toList());
System.out.println(skipList);
// output
[30, 40, 50]

limit – returns only the first N elements of the stream. It will throw an exception if the N is negative. This is also an intermediate operation.

// first skip the list, and then limit from it
List<Integer> limitList = Stream.of(10,20,30,40,50).skip(2).limit(2).collect(Collectors.toList());
System.out.println(limitList);
// output
[30, 40]

count – returns the count of elements in the stream. This is a terminal operation.

Long count = Stream.of(10,20,30,40,50).skip(2).limit(2).count();
System.out.println(count);
// output
2

14. map vs filter vs forEach vs sorted

map – a transformation operation. Returns a new stream after applying the given Function to all the elements of this stream. This is an intermediate operation.

<R> Stream<R> map(Function<? super T, ? extends R> mapper);
// Transformation operation
List<String> strings =  Stream.of("apple", "meta", "google")
        .map(mapper -> mapper.toUpperCase()).collect(Collectors.toList());
// output
[APPLE, META, GOOGLE]

filter – Returns a new stream which matches the given predicate(the predicate should evaluate true). This is also an intermediate operation.

Stream<T> filter(Predicate<? super T> predicate);
// Filter operation
List<Integer> filterList = Stream.of(10,20,30,40,50)
                .filter(predicate -> predicate > 25).collect(Collectors.toList());
// output
[30, 40, 50]

forEach – Performs the action for each element of this stream. This is a terminal operation.

void forEach(Consumer<? super T> action);
// Just performs an action of its element
Stream.of(10,20,30,40,50).forEach(action -> System.out.println(action));
// output
10
20
30
40
50

sorted – Returns a new stream after sorting the elements based on the provided Comparator. This is an intermediate operation.

// Default sorting is ascending without Comparator
List<Integer> sortedList1 = Stream.of(4,2,3,1).sorted().collect(Collectors.toList());

// Based on provided Comparator 
List<Integer> sortedList2 = Stream.of(4,2,3,1).sorted(Comparator.reverseOrder()).collect(Collectors.toList());

// output - sortedList1
[1, 2, 3, 4]
// output - sortedList12
[4, 3, 2, 1]

15. groupBy vs mapping

groupBy – groups the elements based on the classification function and returns the result in the map. The key should be the grouping element and value should be the list.

The following will classify Person objects by city:

Map<String, List<Person>> peopleByCity = personStream.collect(Collectors.groupingBy(Person::getCity);
 
The following will classify Person objects by state and city, cascading two Collectors together:

     Map<String, Map<String, List<Person>>> peopleByStateAndCity =personStream.collect(Collectors.groupingBy(Person::getState,
                                        Collectors.groupingBy(Person::getCity)));

mapping – When we do collect with reduction operation, we can transform the element by applying the mapping function to each input before accumulation. In the below example, the Person object transforms to last name during the accumulation.

Map<City, Set<String>> lastNamesByCity
            = people.stream().collect(
              groupingBy(Person::getCity,
                         mapping(Person::getLastName,
                                toSet())));

16. Reduction operations

A reduction operation takes a sequence of input elements and combines them into a single summary result. For example, finding the sum or accumulating elements into a list. The stream classes have multiple forms of general reduction operations called reduce() and collect(). And we are having reductions forms such as sum(), max(), or count().

int sum = 0;
for (int x : numbers) {
      sum += x;
}

// Above operation can be implemented using reduction
int sum = numbers.stream().reduce(0, (x,y) -> x+y);

Mutable reduction accumulates input elements into a mutable result container such as a Collection or StringBuilder, as it processes the elements in the stream.

17. stream vs parallel stream which one should use

Parallel stream has a higher view compared to sequential stream. But Parallel stream needs threads which takes a significant amount of time. I would prefer to use sequential streams by default and we can go for parallel ones if

• having large amount of items to process
• having the performance problem
• we don’t already run other process in a multithreaded environment

Meanwhile, note that parallel streams will not solve synchronization problems if predicates and functions in the process uses a shared resource. Here, we have to ensure that all are thread-safe. So whenever we use parallel streams, we should worry about side effects.

18. why static method introduced in Interface with Java 8

Static methods make it easier to organize the helper methods in our libraries. We can create static methods specific to an interface in the same interface rather than in a separate class. We can also ignore public modifiers since all methods are implicitly public in the interface. At the same time you should be careful that the interface has to be clear and does not create additional clutter in the API.

Even the JDK code has Collectors – static factory methods, and a Collector interface at the same time. Those methods could be merged into the Collector interface, but that would make the interface more clunky.

19. Date API’s in Java 8

LocalDate – a date in ISO format(yyyy-MM-dd). LocalDate provides a lot of utility methods to perform various data operations.

LocalDate localDate = LocalDate.now();

LocalDate.of(2015, 02, 20);

LocalDate.parse("2015-02-20");

LocalTime – a time without the date. LocalTime also provides lot of utility methods.

LocalTime now = LocalTime.now();
LocalTime sixThirty = LocalTime.of(6, 30);
LocalTime sixThirty = LocalTime.parse("06:30");

LocalDateTime – a combination of date and time. We can use this while we need the combination of date and time.

LocalDateTime.now();
LocalDateTime.of(2015, Month.FEBRUARY, 20, 06, 30);
LocalDateTime.parse("2015-02-20T06:30:00");

ZonedDateTime API – If we need a zone specific date and time we can go for a ZonedDatTime class. Here the ZoneId used to represent different zones.

ZoneId zoneId = ZoneId.of("Europe/Paris");
ZonedDateTime zonedDateTime = ZonedDateTime.of(localDateTime, zoneId);
ZonedDateTime.parse("2015-05-03T10:15:30+01:00[Europe/Paris]");

Period and Duration – The Period provides a quantity of time in terms of year, month and days. The Duration provides the quantity of time in terms of seconds and nanosconds.

20. Nashorn Engine in java 8

The Nashorn engine is an implementation of ECMAScript. It was developed in the Java language as the Nashorn project. The Nashorn engine is included in the JDK in Java 1.8. Nashorn Java API allows us to write Java Applications as scripts which can be interpreted by the Nashorn engine.

You May Also Like

• Basic Git Commands – Part 1
• React Best Free Admin Dashboard Template in 2021

The post Java 8 Interview Questions for Experienced appeared first on Program Easily.

Petite Vue.js is a JavaScript library which creates the DOM based mutates in places. This will deal with the HTML elements directly similar to Alpine.js. It uses Vue.js template and reactivity modules to update the DOM elements dynamically when the data changes. So here in this Petite Vue Introduction with Example article we are going to look at more details and use cases of petite vue.js in detail. Let’s take a deep dive into it.

Petite Vue Introduction with Example

Petite Vue.js available in CDN network. So we can take it from directly as follows,

<html>

<script src="https://unpkg.com/petite-vue" defer init></script>

<!--process only below element (v-scope specfied elements) -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">do increment</button>
</div>

</html>

In the above example, count is a reactive one. While you click the button, count changes( data changes ) and it updates the DOM. Reactivity achieved right !. Note that here we are using some more terms, that we described below,

• We are using defer to execute the script after the HTML parsing operations.
• init plays a major role here. init is a custom element that tells petite vue.js to automatically mount the application. You can find this logic from  https://github.com/vuejs/petite-vue/blob/main/src/index.ts#L9
• v-scope will be used to denote the area where the petite vue.js controls the page. Petite Vue.js processes only the v-scope specified element with its child elements.

Without Auto Init

In addition, if you don’t want the auto init , remove it from the script tag. But you have to do it manually to the end of the body as follows.

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

Root Scope – Global Data Object

We can pass the optional data object to createApp()  function. This will act as a global data and available to all expressions.

<html>

<script src="https://unpkg.com/petite-vue"></script>

<!-- global data object passed to createApp available -->
<div v-scope>
  <p>{{ name }}</p>
  <p>{{ reverseName }}</p>
  <button @click="addNumber">Add Number to Name</button>
</div>

<script>
    PetiteVue.createApp({
    // available to all expressions and act as reactive data
    name: 'Program Easily',
    number: 0,
    // getters
    get reverseName() {
      return this.name.split("").reverse().join("");
    },
    // methods
    addNumber() {
      this.name = this.name + ' ' + this.number++
    }
  }).mount()

</script>

</html>

In the above example, we are using variables, getters and methods as global data to all expressions. We can use these values inside v-scope elements. It will maintain reactivity, when you change the data, it will update the DOM elements. You can check the full working example below,

Create Components – Petite Vue Introduction with Example

Creating components using Petite vue.js is a little bit different. We have to create a reusable function that will return the literal object. The returned object will be available as props inside the template. And you need to specify the template with the $template key in the return object. There are two ways to provide the template value.

1. Template String.
2. ID selector to template element.

<html>

<script src="https://unpkg.com/petite-vue"></script>

<template id="pe-btn">
    <div :style="{ margin: '8px'}">
        <button :style="{ padding: '8px', color: color, fontSize: size + 'px' }"> {{ label }} </button>
    </div>
</template>

<div v-scope :style="{ display: 'flex' , justifyContent: 'center'}">
<div v-scope="peBtn({label: 'Red Button', color : 'red', size: '20'})"></div>
<div v-scope="peBtn({label: 'Green Button', color : 'green', size: '20'})"></div>
<div v-scope="peBtn({label: 'Yellow Button', color : 'yellow', size: '20'})"></div>
</div>

<script>

// reusable function that will return the literal object
function peBtn(props){
    return {
        $template: "#pe-btn",
        label: props.label,
        color: props.color,
        size: props.size
    }
}

PetiteVue.createApp().mount()

</script>

</html>

In the above example, we are creating the button component. The button component has three props namely label, color and size. Likewise you can create your own components with n number of props. When you wish to use your component you have to give v-scope attribute to the parent element. So that Petite Vue.js listen and process those elements. You can check the full working example below,

Reactive Modules – Petite Vue Introduction with Example

Already we have seen the createApp() module which is used to mount the application. In addition Petite Vue.js provides a reactive module ( from @vue/reactivity ). Using a reactive module, we can create a global store. The data inside this store will act as reactive data and available throughout the application. Let us check with below example,

<html>
  <script src="https://unpkg.com/petite-vue"></script>
  <!-- local data object -->
  <div
    v-scope="{ 
      localName: 'Local PE', 
      localNumber: 0,
      get reverseName() {
        return this.localName.split('').reverse().join('')
      },
      addNumber() {
        this.localName = this.localName + ' ' + this.localNumber++;
      },
     }"
  >
    <h2>Global</h2>
    <!-- using global reactive data object -->
    <p>Name : {{ store.globalName }}</p>
    <p>Reverse Name : {{ store.reverseName }}</p>
    <button @click="store.addNumber">Add Number to Global Name</button>
    <h2>Local</h2>
    <!-- using local reactive data object -->
    <p>Name : {{ localName }}</p>
    <p>Reverse Name : {{ reverseName }}</p>
    <button @click="addNumber">Add Number to Local Name</button>
  </div>
  <script>
    // global reactive store
    const store = PetiteVue.reactive({
      globalName: "Global PE",
      globalNumber: 0,
      // getters
      get reverseName() {
        return this.globalName.split("").reverse().join("");
      },
      // methods
      addNumber() {
        this.globalName = this.globalName + " " + this.globalNumber++;
      },
    });
    // pass reactive object to createApp, so that it will act as global store
    PetiteVue.createApp({ store }).mount();
  </script>
</html>

In the above example, we are creating a global store using reactive objects. And we are creating local data objects using v-scope value. The global store data available throughout the application. At the same time, local data objects are accessible only inside the respective v-scope element. Here the state will maintain that Add number to Global Name  will change the global records. The same way Add number to Local Name will change the local records.  You can check the full working example,

Summary

• Petite Vue.js is a JavaScript library which creates the DOM based mutates in places.
• It uses Vue.js template and reactivity modules to update the DOM elements dynamically when the data changes.
• v-scope will be used to denote the area where the petite vue.js controls the page. Petite Vue.js processes the child elements only inside the v-scope specified element.
• Petite Vue.js provides a reactive module ( from @vue/reactivity). Using a reactive module, we can create a global store.
• And it’s a new one. So let’s wait and will see the full features of Petite vue.js

References

• https://github.com/vuejs/petite-vue
• https://www.npmjs.com/package/petite-vue

The post Petite Vue Introduction with Example appeared first on Program Easily.

However, sometimes logically, we need one component which could be a child to its parent component, But the component HTML div should not be nest to its parent. Meanwhile we need to place it somewhere else in the DOM. Little bit confusing right.

Generally the HTML tree structure will be the same as component tree structure. But if you want to change one component div’s parent somewhere else in the DOM, we can go for teleport in Vue.js. It is an advanced feature introduced in Vue.js 3. If you are not familiar with Vue.js You can refer to our page Vue Let’s go to the topic in detail.

Teleport

Teleport will change the parent element of a component. Note that teleport will move actual DOM nodes instead of recreating it. This will maintain the same component instance. Teleport has two attributes.

1. to – String
2. disabled – Boolean

to – string is a prop denoting a target parent element where the teleport will move it’s content. It is a mandatory prop. This prop can be a valid query selector, or an HTML element (Example : body).

<teleport to="#to-parent-id" /> 
<teleport to=".to-parent-id" /> 
<teleport to="[to-parent-data-teleport]" />

disabled – boolean is a prop which disables the teleport operation. This is an optional Boolean prop. If we apply the disable prop, this will not move the teleport content to the target element. At the same time it will render the elements where you specified the teleport tag just like normal components. A great example for this use case is, streaming the video in either pop up or normally like below,

<teleport to="#popup" :disabled="popupOrInline">
  <video src="./my-movie.mp4">
</teleport>

Teleport in Vue 3 with Example

Generally, we can achieve the same operation without teleport also. If we need to change the positions of the elements but quickly ,the process becomes difficult. But teleport makes the work simple for us. In our example, we are going to teleport a component to HTML  #toPlace div. Firstly we are creating Teleport component as follows

// TeleportComp.vue
<template>
  <div>
    <teleport :to="teleportTo" :disabled="disableTeleport">
      <TeleportChild:imagePath="imagePath" />
    </teleport>
  </div>
</template>

<script>
import TeleportChild from "./TeleportChild.vue";
export default {
  components: {
    TeleportChild,
  },
  props: {
    teleportTo: {
      type: String,
      default: "body",
    },
    imagePath: String,
    disableTeleport: Boolean,
  },
};
</script>

Secondly we are creating the TeleportChild.vue component as follows,

// TeleportChild.vue
<template>
  <img
    :src="imagePath"
    alt="Teleport child Text"
    :style="{ width: '100%', height: '100%' }"
  />
</template>

<script>
export default {
  props: {
    imagePath: String,
    altText: String,
  },
};
</script>

In the above example,  we are using the child component TeleportChild.vue inside the Teleport Component. Note that here, logically TeleportChild.vue component will remain as child for TeleportComp.vue component even when it’s position changed (But actually not). Moreover the Vue.js Dev-tools also will have the same component hierarchy structure. Now we are creating the TeleportDemo.vue file to check the behaviors. Here we are enabling teleport operation based on disableTeleport flag.

// TeleportDemo.vue
<template>
  <div id="toPlace"></div>
  <div :style="{ width: '200px', height: '200px' }">
    <button class="btn" @click="onClickBtn">
      {{ disableTeleport ? "Move to toPlace" : "Come Back" }}
    </button>
    <TeleportComp
      teleportTo="#toPlace"
      imagePath="logo_transparent.png"
      :disableTeleport="disableTeleport"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import TeleportComp from "../components/teleport/TeleportComp.vue";
export default {
  components: {
    TeleportComp,
  },
  setup() {
    let disableTeleport = ref(true);
    const onClickBtn = () => {
      disableTeleport.value = !disableTeleport.value;
    };
    return {
      onClickBtn,
      disableTeleport,
    };
  },
};
</script>
<style scoped>
#toPlace {
  width: 200px;
  height: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
}
.btn {
  background-color: #4999f5;
  border: none;
  color: white;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover {
  background-color: #0417c0;
  color: white;
}
</style>

In the above example, if disableTeleport is set to true, then the teleport component acts as a normal component. if disableTeleport is set to false, the teleport component will be moved to #toPlace div element. Teleport will not change the hierarchy of component tree structure logically. But the effect will reflect in the HTML DOM. Now the image element moved to #toPlace element. You can check the full working example below,

Multiple Teleport in Vue 3 with Example

Now we are going to see multiple teleport operations. Here the same target element will have multiple teleport components. When we move the teleport components, It will follow the moving order and append to the target element.

<teleport to="#toPlace">
  <div>A</div>
</teleport>
<teleport to="#toPlace">
  <div>B</div>
</teleport>

<!-- result-->
<div id="toPlace">
  <div>A</div>
  <div>B</div>
</div>

In the above example, the #toPlace element will have A,B div elements on teleport operation. Now we are creating TeleportMultipleDemo.vue file where we are moving two teleport components to same #toPlace target element. You can refer the full working example below

Summary

• Teleport will change the parent of a component. Note that teleport will move actual DOM nodes instead of recreating it.
• Even though teleport changes the parent elements, it will maintain the instances of components.
• If disabled flag is given, it will render the elements where you specified the teleport tag just like normal components.
• The same target element will have multiple teleport components.

Reference

• https://v3.vuejs.org/guide/teleport.html#teleport
• https://v3.vuejs.org/api/built-in-components.html#teleport

The post Teleport in Vue 3 with Example appeared first on Program Easily.

React Templates are web pages which are already developed and well tested User Interfaces(UI Page) using React.js. Creating applications from scratch always has some side effects. Instead of that, we can use the Standard Templates which are already built and used by thousands of customers.

Long ago, we used plain HTML and CSS to design the web pages. But today by evolution, we are all using rich front end libraries and frameworks to design the web pages. Among them, React.js is one of the top programming libraries which makes web developers work simple. React Applications are user friendly, rich in UI, and much responsive due to reactivity features.

React Best Free Admin Dashboard Template in 2021

Admin Templates is the most popular topic among React templates. We can use admin templates for below features,

• Maintaining the website
• Installation
• User Creation and Management
• Monitoring
• Configuring website
• Traffic and Performance

Advantages

• Save time and money
• More choices in the market
• No need of professional designer
• Already used by thousands of customers

For instance, Today we are going to see the

React Best Free Admin Dashboard Template in 2021

Material Dashboard React (Creative Tim)

Material Dashboard React is a free Admin Template which was released three years ago. It was one for the most downloaded react.js admin template from the partner Creative Tim. It uses Material-UI v4.1.0 Framework and provides good material effects, ripples, animations and transitions. We can use five color filter choices for sidebars and card headers. We can also change the background image of the sidebar also.

• Rank – 1
• Rating – 4.90/5
• Downloads – Greater Than 100k
• Reviews – Greater Than 500
• Responsive – Fully Responsive
• Technologies – HTML5, React.js, Material UI
• License – MIT

Live Preview  Free Download / Docs

Light Bootstrap Dashboard React (Creative Tim)

Light Bootstrap Dashboard is a free admin template which was released three years ago. It was the second most downloaded react.js admin template from the partner Creative Tim. This template has a simple admin dashboard which is built on top of Light Bootstrap Dashboard and React.js. In Addition, we can use this template for project management systems like CMS and CRM also. We can use six colors for the sidebar and it provides ways to change the background color also.

• Rank – 2
• Rating – 4.90/5
• Downloads – Greater Than 65k
• Reviews – Greater Than 330
• Responsive – Fully Responsive
• Technologies – HTML5, React.js, Sass, Bootstrap
• License – MIT

Live Preview  Free Download / Docs

React Material Admin (Flat Logic)

React Material Admin is a free admin template which was released two years ago. It is one of the most downloaded React.js admin templates from the partner Flat Logic. This template is built with Material UI framework and provides fully responsive rich design. It has Charts, Basic Tables, Notification Bar and we can extend this template to start building a Front end Sass, E-Commerce, IoT Dashboard and much more. Instead of  jQuery and Bootstrap, it uses React 16 built with React hooks and React context.

• Rank – 3
• Rating – 4.5/5
• Downloads – Greater Than 9.5k
• Responsive – Fully Responsive
• Technologies – HTML5, React.js, Sass, Material UI
• License – MIT

Live Preview  Free Download / Docs

Black Dashboard React (Creative Tim)

Black Dashboard React is a free admin template which was released two years ago. This template is built on top of Bootstrap 4 and it looks amazing. Black dashboard comes with both dark mode and light mode. The Dark mode is one of my choices among the React.js admin templates. We can create thousands of combinations using over 16 features components. The great advantage of this plugin is that it comes with good colors for eyes.

• Rank – 4
• Rating – 4.90/5
• Downloads – Greater Than 28.5k
• Reviews – Greater Than 160
• Responsive – Fully Responsive
• Language – HTML5, React.js, Sass, Bootstrap 4, Sketch files.
• License – MIT

Live Preview  Free Download / Docs

Free Bootstrap Admin Template (Core UI)

Core UI provides rich responsive free open source apps. It is 100% Bootstrap built with react hooks instead of jQuery. Cross browser compatibility is the special feature of bootstrap admin template. No design skills required for creating the responsive application. The Free version comes with a login page, register page, 404 page, 500 page. In addition Core UI provides plugins, editors and google maps with pro version.

• Rank – 5
• GitHub Stars – 3.3k (By June 2021)
• GitHub Fork – 1.4K (By June 2021)
• Responsive – Fully Responsive, Cross browser support
• Technologies – HTML5, React.js, React Hooks, Bootstrap 5
• License – MIT

Live Preview  Free Download / Docs

Notus React (Creative Tim)

Notus React is a free admin template which was released 8 months ago. This template uses Tailwind CSS and React UI Kit. Notus React made by Creative Tim and you will love the Tailwind CSS. We can extend this template and build components on top of this. It provides more than 100 components, giving us ways to combine and create the beautiful pages. Every element in Notus has multiple states for colors, styles and focus.

• Rank – 6
• Rating – 5/5
• Downloads – Greater Than 5.9k
• Responsive – Fully Responsive
• Technologies – HTML5, React.js, Tailwind CSS
• License – MIT

Live Preview  Free Download / Docs

Admin Dashboard (MDB)

Admin Dashboard from MDB is an open source free admin template with different styles of dashboards, data presentations and components. This template is built on top of Bootstrap 4 with React.js and Material Design. Cross browser support, frequent updates, community support, flex box support and Sass support are the most valuable features of MDB. MDB contains more than 500 material elements, 600+ material icons and 74 CSS animations.

• Rank – 7
• GitHub Stars – 43 (By June 2021)
• GitHub Forks – 51 (By June 2021)
• Responsive – Fully Responsive
• Technologies – HTML5, React.js, Sass, Bootstrap 4 and Material Design
• License – MIT

Live Preview  Free Download / Docs

Argon Dashboard Material UI (Creative Tim)

Argon Dashboard Material UI is a free open source admin template which was released 3 months ago. It is the latest and emerging admin template from the partner Creative Tim. Argon Dashboard built on top of Material UI features with many components. This will help to create amazing websites at very low budgets. It has over 100 components with pre-built examples.

• Rank – 8
• Rating – 5/5
• Downloads – Greater than 2.2k
• Responsive – Fully Responsive
• Technologies – HTML5, React.js, Material UI, Sass, Sketch Files, Adobe XD files, Figma Files
• License – MIT

Live Preview  Free Download / Docs

One Free React Template (Flat Logic)

One Free React Template is a free open source admin template which was released a year ago(2020). This template is a flat logic new emerging product built with React.js 16 and Bootstrap 4. One Free made with three colors, white, orange and grey. We can use this template mainly for building analytics and data. Beautiful charts, deep background, flat logic typography and icons, google maps integrated are the most valuable features of one free admin template.

• Rank – 9
• Rating – 4.71/5
• Downloads – Greater than 2.5k
• Responsive – Fully Responsive
• Technologies – HTML5, React.js, Bootstrap 4, Sass
• License – MIT

Live Preview  Free Download / Docs

React Dashboard (Flat Logic)

React Dashboard Template is a free open source admin template which was released 3 years ago. Firstly this template is built on top of React.js, Redux, GraphQL and Bootstrap. In addition we can use React Dashboard for CMS, CRM, SASS and E-Commerce. Server side rendering, Charts, Tables, Notification Bar and Authentication are the most valuable features of the React Dashboard template. It is a fully documented template and Fully Responsive.

• Rank – 10
• Rating – 4.4/5
• Downloads – Greater Than 6.5k
• Responsive – Fully Responsive
• Technologies – HTML5, React.js, Redux, Sass, GraphQL
• License – MIT

Live Preview  Free Download / Docs

You May Also Like

• React Courses

Summary

In Conclusion of React Best Free Admin Dashboard Template in 2021,

• React.js is one of the top programming libraries which makes web developers work simple.
• React Templates are web pages which are already developed and well tested User Interfaces(UI Page) using React.js.
• My favorite one is Black Dash Board React which comes with Dark Mode and Light Mode.

The post React Best Free Admin Dashboard Template in 2021 appeared first on Program Easily.