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.

const focus = {
  mounted: (el) => el.focus()
}

export default {
  directives: {
    // enables v-focus in template
    focus
  }
}

We can use above directive in the template like below,

<input v-focus />

This is a simple example, we can do lot more with this directives. But, here it will focus the input element assuming you haven’t clicked elsewhere on the page. Let’s take the deep dive into it.

Global Directive Registration

In the above example, we are using local registration. In addition, similar to components, we can globally register custom directives in the application instance. So that we can use the directives through out the application in the templates.

const app = createApp({})

// make v-focus usable in all components
app.directive('focus', {
  /* ... */
})

However, we can prefer to use custom directives only when the desired functionality can only be achieved via direct DOM manipulation. Otherwise we could use v-bind because they are more efficient and server-rendering friendly.

Custom Directives in Vue 3 – Hooks

The directive object is providing lot of optional hook functions. For Instance, we would use this hooks to manipulate the DOM, read the old value, component instance and vnode representation as well.

const myDir = {
  // called before bound element's attributes
  // or event listeners are applied
  created(el, binding, vnode, prevVnode) {
    // see below for details on arguments
  },
  // called right before the element is inserted into the DOM.
  beforeMount() {},
  // called when the bound element's parent component
  // and all its children are mounted.
  mounted() {},
  // called before the parent component is updated
  beforeUpdate() {},
  // called after the parent component and
  // all of its children have updated
  updated() {},
  // called before the parent component is unmounted
  beforeUnmount() {},
  // called when the parent component is unmounted
  unmounted() {}
  }
}

Hook Arguments

• el – We can use el to manipulate the DOM
• binding – it is an object having lot of properties
  • value – the value of the directive. Example, v-my-directive=”VALUE”
  • oldValue – the old value of the directive. only available in beforeUpdate and updated
  • arg – the argument of the directive. Example, v-my-directive:foo
  • instance – the instance of the component
  • dir – the definition object of directive
  • modifiers – the modifier object. Example v-my-directive:foo:bar. Here  the modifiers object would be { foo: true, bar: true }
• vnode – The V Node representation of the element
• prevNode – The element of previous render. Only available in the beforeUpdate and updated hooks

Consider the below example,

<div v-example:foo.bar="baz">

// we can represent above directive as below object

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* value of `baz` */,
  oldValue: /* value of `baz` from previous update */
}

// binding value as JavaScript object literal

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
}

Dynamic Argument in Directives

We can also pass dynamic argument to the directives. This is one of the special feature of directive. For example,

<div v-example:[arg]="value"></div>

// Here the directive argument will be reactively updated 
   based on arg property in our component state.

Most important this here is , other than el, we should not modify other read-only properties. If you want so, you can follow this dataset

Function Shorthand

If we wants only mounted and updated behavior of custom directives, then we can use function shorthand there.

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // this will be called for both `mounted` and `updated`
  el.style.color = binding.value
})

Custom Directives in Vue 3 – on Component

As similar to DOM elements, we can use custom directives on component as well. Here It will apply to a component root element. Note that, sometimes the component may have more than one root node. If so, it will ignore the directives and a warning will be shown. Above all, it is not preferable to use custom directives on component.

<MyComponent v-demo="test" />

<!-- template of MyComponent -->

<div> <!-- v-demo directive will be applied here -->
  <span>My component content</span>
</div>

With Directives

In Addition, we can apply custom directives to v-node using withDirectives as follows,

import { h, withDirectives } from 'vue'

// a custom directive
const pin = {
  mounted() { /* ... */ },
  updated() { /* ... */ }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

Summary

In Conclusion,

• Firstly, the custom directive brings some execution on the elements. We can define custom directive as an object containing lifecycle hooks similar to those of a component.
• Use custom directives only when the desired functionality can only be achieved via direct DOM manipulation.
• You would pass dynamic argument to the directives. This is one of the special feature of directive.

References

• https://vuejs.org/guide/reusability/custom-directives.html#introduction
• https://vuejs.org/guide/extras/render-function.html#custom-directives

The post Custom Directives 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.

Basic Git Commands – Part 1

git init

We can use the  git init command to create a new empty git repository or to convert an existing project into a git project in your local. It will create a .git directory in the current working directory which contains all the metadata like refs/heads, objects, refs/tags etc.

$ git init
Initialized empty Git repository in D:/git-basic/first/.git/

However ‘ D:/git-basic/first ‘ is the local path where we have initialized the project.

git clone

We can use the git clone command to clone a remote repository to a new local repository. This will make the repo available in our local system. Technically this will act as a remote repository URL for our project.

git clone <URL>

$ git clone https://github.com/programeasily/git-basic.git
Cloning into 'git-basic'...
remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 6 (delta 0), reused 6 (delta 0), pack-reused 0
Receiving objects: 100% (6/6), done.

git status

It describes the status of the current working directory. git status shows state of current working directory and staging area. It shows files that are not tracked by git, changes that are staged , which are not staged and deleted files.

$ git status
On branch master
Your branch is up to date with 'origin/master'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        programEasily.java

nothing added to commit but untracked files present (use "git add" to track)

git stash

git stash removes the uncommitted changes in a working directory and makes the directory clean. When one has to switch branches we can use git stash. It cleans the working directory and makes a head point to the last commit.

$ git stash
Saved working directory and index state WIP on master: 9a2ef8f hii

git branch

git branch command create a new branch from the master branch, delete an existing branch and list the branches. Let us see one by one.

create new branch

Firstly, one can use the git branch <newBranchName>  command to create a new branch. Branching is the integral part of the Git version control mechanism. New branch can be created with any branch as reference. The default branch in Git is master.

git branch git-basic-ver1

delete branch

Secondly, we can use git branch -d <branchName>  to remove the branch locally. This will remove the branch only if the changes are committed and pushed to remote repo.

$ git branch -d git-basic-ver1
Deleted branch git-basic-ver1 (was 9a2ef8f).

If your branch contains commits that have not been merged or pushed to remote repo one need to use git branch -D <branchName>. This will force the branch deletion.

list branch

View the local branches in your repository using the git branch.

$ git branch
git-basic-ver1
* master

To show the branches in a remote Git repository, one need to use git branch -r.

$ git branch -r
  origin/master

To list the local and remote branches to a repository

$ git branch -a
  git-basic-ver1
* master
  remotes/origin/master

git checkout

We can use the checkout command to switch from the current active branch to another. While we switch the branch, it may ask to stage and the staged files, commits might be lost.

git checkout  <branchname>

$ git checkout git-basic-ver1
Switched to branch 'git-basic-ver1'

One can also create and switch to a new branch using the git checkout command.

$ git checkout -b git-basic-ver2
Switched to a new branch 'git-basic-ver2'

Here It will add untracked files to the new branch unless there is no conflict.

git fetch

git fetch operation will download new data (commits, refs, branches etc) from remote repository to local repository. A fetch command will never make any change to the local repository. It just provides a view of changes made in remote repo.

$ git fetch origin

git pull

git pull does the function of fetch command and additionally integrates the downloaded new data from remote repo with the local repository. git pull should be performed in a clean repo with no uncommitted changes. Since it integrates remote repo changes with local directory merge conflicts may occur which should be taken care.

In the other words, we can say git pull can refer to the combination of git fetch followed by a git merge.

$ git pull
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details.

    git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

    git branch --set-upstream-to=<remote>/<branch> git-basic-ver2

git version

In order to check the current version of git, you can use git --version command.

$ git --version
git version 2.30.0.windows.2

git add

In order to add the changes from the local workspace to the staging area, we can use the git add command. It prepares the changes for the next commit. It does not make changes to the remote repository. These changes can include new, existing or deleted files and directories. 

git add <filePath>

With the git add command you have to specify the file or directory path one needs to add to the staging area. You can add single as well as multiple paths.

$ git add basic/programEasily.java

git commit

This command commits the changes added in the staging area. One uses immediately after the git add command. It can be done with a commit message which helps to understand what this commit is all about easily in future.

git commit -m “message”

Note that, It will records every commit in the master branch.

$ git commit -m 'ver1 code'
[git-basic-ver1 e95c217] ver1 code
1 file changed, 1 insertion(+)

This git command does not commit the changes to the remote repository, but adds to the local one.

git push

git push command moves the local commit changes to the remote repository. This will make the commits recorded in the master branch and changes can be used by remote the repository users.

git push <branchName>

You should be cautious while pushing the changes to the remote repository because it will overwrite the previous contents.

$ git push Enumerating objects: 7, done. 
Counting objects: 100% (7/7), done. 
Delta compression using up to 4 threads Compressing objects: 100% (2/2), done. 
Writing objects: 100% (4/4), 336 bytes | 168.00 KiB/s, done. Total 4 (delta 0), 
reused 0 (delta 0), pack-reused 0 
To https://github.com/programeasily/git-basic.git 9261bc4..e95c217 git-basic-ver1 -> git-basic-ver1

git amend

We can use the git amend command to edit the recent commit. It adds new changes with the commit in the staged area and in addition it will create a new commit replacing the old one.

git commit –amend ‘message’

$ git commit --amend -m 'changes'
[git-basic-ver1 6439b3e] changes
 Date: Mon Jun 14 11:37:08 2021 +0530
 1 file changed, 1 insertion(+), 1 deletion(-)

git diff

It compares and shows differences between commits, branches or changes made in the working directory since the last commit etc.

git diff –  shows changes done in the working directory since the last commit.

$ git diff
diff --git a/basic/programEasily.java b/basic/programEasily.java
index 33545ed..b175a51 100644
--- a/basic/programEasily.java
+++ b/basic/programEasily.java
@@ -1 +1 @@
-sample1
+This is a sample file.
\ No newline at end of file

git reset –hard

Removes the changes in the operated repository. In other words, it will remove the changes in the working directory of the staging index and roll back to the previous commit. Since, it is the most unsafe reset, once performed cannot be undone.

$ git reset --hard
HEAD is now at 6439b3e changes

set username and email

git config –global user.name

it shows the username for your git repository installed in your system. Any change or commit you perform will be recorded in this name.

$ git config –global user.name rachel

git config –global user.email

It helps to view the git user email recorded in your system.

$ git config –global user.email rachel@gmail.com

In addition, if one has to change the email use ,

$ git config –global user.email <email>

One can change the username and email for a particular project by removing –global from above commands.

Summary of Basic Git Commands – Part 1

• In conclusion of Basic Git Commands – Part 1, we have seen some of the most commonly used git commands.  We will be using these commands commonly in the daily life of a developer.
• In the coming sections we will see about some other useful git commands.

You may Also Like

• https://programeasily.com/vue/
• https://programeasily.com/2021/06/20/react-best-free-admin-dashboard-template-in-2021/

The post Basic Git Commands – Part 1 appeared first on Program Easily.