It is safe to say that in 2021 user experience is crucial. And, subsequently, user interface and overall project design are just as crucial. User experience and intuitive design help your end-user to not only get the overall gist of your project but also build a connection to your brand, which, ideally, evolves into brand loyalty in the future.

The reasoning behind these simple, at face value, truths is actually quite fascinating if we were to get to the bottom of this. It all has to do with the natural evolution of the paradigm of the relationship between the seller and the buyer in the wider sphere of business and, more importantly, in the narrower sphere of marketing. At the moment, the customer’s position is much more convenient when compared to the seller’s one, due to the market’s oversaturation with demand. In layman’s terms, it is always possible for a customer to look elsewhere for similar, even if worth, goods and services.

That is why it is most important for a company to work over its image and overall presentation, especially when it comes to such constantly changing spheres as the web. And, coming full circle to the very beginning of our discussion means paying close attention to your project’s web presentation and user experience and interface.

Luckily, nowadays there are ways to simplify this whole ordeal with the help of such tools as the main “characters” of today’s article – Vuetify and its templates.

Things to Know About Vuetify: Vuetify Pros and Cons

What is Vuetify and what does it have to do with everything that we have talked about already? Vuetify is a complete UI framework that can be built on top of Vue. Thus, the beautiful pun in the name. But, although we always appreciate good wordplay, we digress. The main goal of Vuetify is to provide developers with the ability to create richer and more engaging user experiences in a more effortless manner. And that is not its only advantage. One of the best things about Vuetify is its mobile-first approach to design, meaning that any app builds on this framework works on any device, be it phones, computers or tablets, right out of the box.

But that’s not where Vuetify’s pros end. Let’s take a look at them with the following rundown:

• Vuetify is open-source, giving you, as a developer, to inspect and study from other developers and vice versa.

• Vuetify’s components are reusable. Being based on Vue, Vuetify consists of components, rendering every part of your or anybody’s projects reusable. This fact, in turn, significantly simplifies unit-testing, readability and overall usage of your code.

• Vuetify possesses a large variety of components. And, being a Material Design component framework, we cannot see it as anything, but an advantage.

• Vuetify browser compatibility is vast. As Vuetify is a progressive framework, projects built with it are compatible with a wide variety of different browsers, such as:

• Chrome;
• Edge Insider;
• Edge;
• Firefox;
• Safari 10+;
• Internet Explorer and Safari 9. However, this pairing is only supported with polyfill.

• Vuetify has a large community. And that’s a great fact, taking into consideration the above-mentioned fact that all of the Vuetify components are reusable, as it means that your chances of not only getting competent help from fellow developers on any emerging issues but also finding worthwhile components that you will be able to use on your projects.

• Vuetify documentation is outstanding. This advantage is pretty self-explanatory. The documentation Vuetify boasts is just as good as its paternal Vue. This allows new developers to get into working with it easier and quicker.

But every coin has two sides, meaning that Vutify is not perfect by any stretch of imagination. Let’s take a peek at Vuetify’s cons:

• Vuetify is a Material Design Framework. This is not, necessarily, a disadvantage by any means, but if you, as a developer, is not a fan of it this can be perceived as such.

• Vuetify’s customization can be somewhat challenging. But, once again, this is not a full-fledged disadvantage, as it mainly concerns developers, who are new to Vuetify and haven’t yet got a firm grip on all of its inner machinations.

So, as you can see, Vuetify not only possesses much more advantages than disadvantages, which, in their own right can be dismissed pretty easily but also is a useful and worthwhile tool for your project UI creation and improvement. Now, let’s pay our undivided attention to the other main character of today’s article – Vuetify Templates.

Top 9 Examples of Vuetify Templates

As we’ve already mentioned, Vuetify components are highly reusable. The reusability of Vuetify components, as well as the open-source nature of this framework, are such great features that they alone make Vuetify Templates so significant. In short, as a developer, you can easily create tons of beautiful Material design apps and projects just by taking good parts of different Vuetify templates of your liking, thus creating something of a highly functional Frankenstein’s Monster. And that’s not even taking into account the vast library of UI components, which we, in fact, consider one of the best on today’s market. But once again, we digress.

That is why we consider that it is quite the time to list a number of such beautifully crafted templates in order to show them to you and ignite your imagination to repurpose their components for your apps and projects. Or, maybe, you would simply find a template deserving of being used on your project. So, here we go!

1. Vue Material Template Full by Flatlogic

We are not going to make a secret of it: the very first Vuetify Template was made by us and we are more than proud of it. Even more: Vue Material Template Full is not just a template, but, actually, a fully-fledged admin dashboard, so it is safe to say that you will be able to find quite a lot of interesting components to use in your own project. And even though you are able to do it, consider using it on your projects in its entirety, because it is not just an admin dashboard, but an exceptional one at that.

This powerful and eye-pleasing admin dashboard will be a great fit for your project, especially if it is of the eCommerce variety. It is fully optimized, frequently updated, fully in-tune with and adaptable to any modern devices. Vue Material Template also contains within itself three color skins, dark mode, forms, charts, maps and tons of other great widgets that will assure a speedy start to your project’s great dashboard creation.

More details

2. ArchitectUI Dashboard Vue PRO

ArchitectUI Dashboard Vue PRO has a plethora of different components (more than two hundred, to be more accurate) that will help you save your time and effort on developing your own projects. Powered by the latest technologies, nine different color schemes and handy documentation, this template Vuetify Template is very much deserving of your attention.

More details

3. Veluxi template

Compared to the two previous Vuetify templates on this list, Veluxi definitely stands out, because its main goal is not to manage the admin side of things, but rather to be a collection of versatile landing pages, aimed at serving a number of different businesses. Agencies, educational, medical, fashion companies, mobile apps, etc. – you name it – Veluxi is ready to be of service in this sphere.

The customization process is easy and comfortable with Veluxi, even if you are a beginner level web developer, as it offers eleven variations that you can tailor to your needs and preferences. This Vuetify Template also packs a punch when it comes to the specialties department, having such cool features as animations, parallax effect, a dark mode and around one hundred components and many-many more.

More details

4. Vue Material Laravel Template by Flatlogic

Once again, we present you with our pride and glory called Vue Material Admin. Built with Laravel PHP framework (hence the name) as a backend, this Vuetify Template is more than deserving of your attention, as it is going to be a great basis for any web app imaginable and we, actually, built this template, partnered with the creators of Vuetify library.

Moreover, Vue Material Laravel Template is packed to the brim with different cool features, like being deployable via Composer, JWT based authorization, three color themes, dark modes and customizable layouts. And that’s not mentioning tons and tons of reusable components.

More details

5. MaterialPro

If you are a great fan of Lightning McQueen from Pixar’s “Cars” and you are all about speed, then MaterialPro Vuetify Template deserves your undivided attention, as it has all the must-haves and some more for you to experience a speedy admin realization. 

Another great thing about MaterialPro is its proneness to tinkering and creative adjustments from your side, while all of its materials still work in perfect unison. And, after all, it is just a versatile Vuetify Template, as it has six dashboards, three hundred user interface components, predefined widgets, lots and lots of charts and tables, range sliders and forms and many-many more different things for you to explore and experiment with.

More details

6. Vuse

Simply put, Vuse Vuetify Template is just cool. But, to elaborate, it is not only slick and beautiful to look at. It is also quite versatile, as it includes such features as lazy loading, code splitting, navigation, 27 custom pages, two workable applications and 35 other exceptionally useful widgets. Moreover, Vuse’s documentation is precise and helpful, which is never a bad thing. Summarizing, this Vuetify Template can be best compared to this cool kid on the block from your childhood that does everything perfectly and effortlessly.

Source

7. Bamburgh

If you need to set up your admin panel as quickly as possible – pay your attention to Bamburgh – a full-blown Vuetify template with UI kit. This great entry allows you to forget about the tedious coding and designing process, because all the components in Bamburgh are packed and ready to be deployed at any given moment.

And we, of course, can not talk about such a Vuetify Template, as Bamburgh, without mentioning the great widget it possesses: 

• Six ready-made apps, like chat, contacts, email, event calendars and more;

• A number of page layouts;

• A number of UI elements (badges, avatars, navigation, cards, modals, tooltips and many more at your disposal).

So, as you can see, Bamburgh is not just a fun thing to say out loud, but also a versatile and capable Vuetify Template to fasten the process of admin panel establishment.

More details

8. Zero

If what you look for to improve your business’ web presentation are the slickness and careful craftsmanship – then look no further than Zero, as this multi-purpose, responsive and gorgeous to look at Vuetify Template.

What is also great about Zero, given how slick it actually looks, is the effortlessness with which you can tinker around it, add and remove features you need or don’t want. All of that’s not mentioning more than forty components, ten sample pages, six months’ worth of free updates and pixel-perfect design that are already in the bundle. But wait, there is more, as, despite such a plethora of specialities, Zero will still show the highest numbers when it comes to fast loading speed and searching.

More details

9. Alpha

Talk about irony, as the last Vuetify Template on this list is named after the first letter of the Greek alphabet. But, naturally, being last on our list does not mean that it is the worst one. On the contrary, Alpha is exceptional if what you look for is a beautiful front-end template. We mean, just look at the picture!

But visual pleasantness is not all Alpha can offer. It also has an abundance of useful features, such as sticky headers, filterable portfolio, pricing plans, social media buttons and anything you can imagine your business-oriented project can need. Alpha is an exemplary Vuetify Template that excels at practicing all the latest trends of the modern web market.

More details

How to Create aWeb Application with Flatlogic Platform

There are exactly 5 easy steps to undertake.

1. Enter a Name for Your Project

2. Choose Your Project’s Stack

Pick the front-end, back-end and database your project is going to work on.

3. Pick a Design

Just pick a ready-made design for your project. No sweat, nice and easy.

4. Create a Database Schema

Unleash your back-end mastery to create a perfect Database Schema for your project swiftly and effortlessly. Or simply choose a ready-made Schema from a number of suggested ones.

5. Review and Generate the App

Just check if everything is a-okay with the choices you’ve made and press the “Create Project”. And that concludes our dive into the astounding world of Vuetify and Vuetify Templates. What is left to say here is the fact that Vuetify is the tool to use if you want your project to not only succeed in this oversaturated and rough web market of today but also look good while doing it. Vuetify Templates will help you ease this process.

That’s it for today! Have a great day and feel free to read more articles in the Flaltogic blog!

Suggested Articles

• Ways to Make an Ecommerce Store on Node.js in 2021 |Guide for Beginners
• Top 10 Vue Templates to Choose in 2021 | FrontEnd Matters!
• New React Templates in the Family of Flatlogic Dashboards

The post Top 9 Vuetify Templates for Web Developers appeared first on Flatlogic Blog.

First, we refer to the state and props definitions, then look at two different types of components: stateful and stateless. People who are in search of a fast answer can jump straight into a brief comparison abstract and look through the table with briefing memos about the differences between state and props.  

Enjoy reading! 

Props and state definition

Props are a JavaScript object that React components receive as an arbitrary input to produce a React element. They provide a data flow between the components. To pass the data (props) from one component to another as a parameter:

For a class component you need to define the custom HTML attributes to which you assign your data and then pass it with special React JSX syntax: 

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const greeting = 'Welcome to React';
 
    return (
      <div>
        <Greeting greeting={greeting} />
      </div>
    );
  }
}
 
class Greeting extends Component {
  render() {
    return <h1>{this.props.greeting}</h1>;
  }
}
 
export default App;

To receive props class components need to use JavaScript keyword this.

For a functional component props are passed as an argument to a function:

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const greeting = 'Welcome to React';
 
    return (
      <div>
        <Greeting greeting={greeting} />
      </div>
    );
  }
}
 
const Greeting = props => <h1>{props.greeting}</h1>; // here an arrow function receives props with the name greetings
 
export default App;

In our example, our data was a string variable. But props can be anything: integers, objects, arrays, and even React components.  

State:

State is a JavaScript object which contains data that influence how the component looks at a certain point in time. The second part is what makes the state different compared to props. State is just a snapshot of the app in a time. Every user interaction with your app may lead to changes in the underlying state and in the whole UI as a result. State changes over the lifetime of a React component. Examples of state:

For a class component you need to call the class constructor inside the React component:

import React, { Component } from 'react';
 
class Button extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 1 };
  }
  render() {
    return (
      <button>{this.state.counter}</button>
    );
  }
}
export default Button;

For a functional component you need to use useState Hook:

import React from 'react';
 
function Counter() {
  const [count, setCount] = React.useState(1);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
export default Counter;

State breathes life into your application and is a thing that makes your application dynamic and interactive. State could be Boolean, integers, strings, or complex JavaScript objects.

Stateful and stateless components

Stateless Component may contain only props, no state. Such a component can be associated with a function: it receives input ( ‘props’ object) and returns the result (React element). Stateless components are used when you want to represent the props and the component doesn’t need to be interactive. They are easy to use and easy to test.  

Stateful Component may contain props but has to have state. A stateful component owns its state and can change it. When the component changes state, it re-renders. Stateful components help when the app needs to respond to user input and actions. They provide a dynamic user interface through client-server communication and help to create interactive pages. Traditionally functional components are stateless, while class components feature manipulations with state. However, it has changed with the introduction of Hooks for functional components. State was one of the key advantages of class components, but nowadays Hooks added state management and lifecycle methods to functional components, so they are also can be called stateful components. You can read more about class and functional components in this article. 

Brief comparison

Let’s begin with facts that are common both for props and state. 

• React components re-render if props or state have changed. Any update from anywhere in the code triggers an automatic re-render of the appropriate part of the User Interface. 
• Props and state are JS objects, which means they both contain as many properties and methods as we need. 
• The same combination of props and state must produce the same output. This type of component is deterministic. 

Here is a brief comparison between state and props.

State vs. props – detailed comparison

State has to have the initial value, while props can be empty

State can’t exist without the initial value. When the component becomes stateful you need to declare the first value of state directly. 

In class components using constructor():

class CalmDown extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      currentState: "not-panic",
    }
  }
} 

In functional component we set the initial value via Hook useState()

import { useState } from 'react';
 
function TimeToPanic() {
    // Declare a new state variable, which we'll call "mood"
    const [mood, changeMood] = useState(‘calm’); // we declare a new state variable “mood” with the initial value equal to 0
 
  return (
    <div>
      <p>You feel {mood}</p>
      <button onClick={() => changeMood(mood=’the panic’)}>
        Click me
      </button>
    </div>
  );
}

In the example above changeMood is a method that allows us to update the mood’s state. The component can get the initial state from the parent component. The initial state for props is not a necessary staff. We can pass an empty value or set the default value when the props are empty.

function CatComponent(props) {
    return <div>{props.catName} Cat, Eye Color: {props.eyeColor}, Age: {props.age}</div>
}
CatComponent.defaultProps = {
    catName: "Sandy",
    eyeColor: "deep blue",
    age: "120"    
}
 
const cat = <CatComponent catName="Milk"/>

CatComponent renders the following string: “Milk Cat, Eye Color: deep blue, Age: 120”. Since we pass empty values for props attributes eyeColor and age the component uses the default values for them, while the attribute catName returns the value we have previously assigned. If CatComponent is called without the default values, it will simply render “Milk Cat, Eye Color: , Age:”

Both props and state initial values received from parents override default values defined inside a Component.  

Props are immutable, while state is mutable

One significant limit to props is that they are read-only from inside the component. There is no way in React for a component to set a new value for its incoming props. That brings us to the concept of pure components that don’t change their inputs and return the same result for the same props. Trying to change the props will throw an error, so the following block of code will not work:

function Add(props) {
 if (typeof props.n2 === 'undefined') {
   props.n2 = 0
 }
 return (
   <div>
     {props.n1} + {props.n2} = {props.n1 + props.n2}
   </div>
 )
} // TypeError: Cannot add property n2, object is not extensible

That is totally consistent with the role props play: they just pass data from component to component. Although a component is not allowed to change its props, it is responsible for the props of its child components down the component tree. 

On the other hand, state is mutable. A stateful component changes its state every time users interact with the app. Furthermore, a stateful component is responsible for management only its own state and has no impact on child components (a parent component can only set the initial state of its children components, we discuss it further below). We can say that state of every component is private. There are some rules on how to use and modify state correctly: 

• No direct modification: command this.state.name = ‘me’; is allowed only for the initial initialization of state, in render() method we need to use setState()
• State updates may be asynchronous setState() callbacks all happen together at the end of the state update phase in React, not immediately after that particular update happens. That may lead to confusion.

The role state and props play

Here we come to the difference in concepts of these two objects. 

The role of state: 

• Make the components interactive
• Provide users with an opportunity to modify the state
• Track data values over the lifetime of the component 
• Update the UI when the state has been changed 
• React when the time passes (interval or timeout)

The role of props: 

• To display static non-interactive components and data
• To pass data from a component to component

An additional role of state that should be mentioned is fetching remote data. The component fetch data after it is mounted, so state allows us to update the component once the data from a third-party resource comes.

State can be passed as props to child components

The state of one component can be passed as a prop to child components. There is no difference for the child component whether the incoming prop is state of the parent components or a simple prop. The component gets the data and uses it in rendering – that is all. If the incoming props change (doesn’t matter because of the changes in parent component state or because the props were changed) the child component re-renders.So props and state are interrelated. We can pass state as props within the rendermethod of the parent component:

class CalmDown extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      currentState: "do not panic",
    	}
	}
      render() {
    	return <div>Just remember: {this.state.currentState}</div>;
	<MyChild mood = {this.state.currentState}/>
      }
} 
class MyChild extends React.Component {
  return <h1>Hello! I {this.props.mood}</h1>;
  }
}
}

The parent’s state value of currentState becomes the child’s this.props.mood. For MyChild component mood props is immutable. If we need to change the props in the child component, we need to change the state in the parent component:

this.setState({ currentState: ‘PANIC!’})

And then React passes the new value to MyChild component and re-render both elements. 

If we want to change the name of the prop, we should create a child event and parent callback. Guess that we have an event called onNameChanged in the child that passes newMood as an argument to the event callback. Let add a callback handler and the event handler to the parent:

MyChild mood ={this.state.currentState} onNameChanged={this.handleMood} />
handleMood: function(newMood) {
   this.setState({ currentState: newMood });
}

And then we set a new name for child prop. We didn’t bend the rule that data should go from parent components to child components (downwards). The mood prop is managed by the parent CalmDown component, only the parent can change the prop for child components and pass it once again. Basically, it is the way how React components communicate with each other and how props are passed. They go downwards from parent to child components. And the state of the parent can become the prop of the child.

Usage of state and props in higher-order components

To build a higher-order class component we have to use state, while the same component in terms of functionality that is built with functional components requires props only. 

Higher-order components are functions that take a component as an input and transform it not into UI, but another component. 

Let’s build a login higher-order class component with a form where we input email and password and the component returns the answer whether such a user is registered in the app or not.

import React from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
 
class Example extends React.Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired,
    };
 
    constructor(props) {
        super(props);
 
        this.state = {
          email: 'admin@flatlogic.com',
          password: 'password',
        };
 
        this.doLogin = this.doLogin.bind(this);
    }
 
doLogin(e) {
        e.preventDefault();
        this.props.dispatch(loginUser({ email: this.state.email, password: this.state.password }));
    }
 
isLogin () {
    return this.props.isAuthenticated
}
 
render() {
return (
<form onSubmit={this.doLogin}>
        <button type="submit">Login</button>
</form>
       );
    }
}
 
function mapStateToProps(state) {
    return {
        isAuthenticated: state.auth.isAuthenticated,
    };
}
 
export default withRouter(connect(mapStateToProps)(Login));
functional components:

We use state to take user input data and only after that step can we call the higher-order function isAuthenticated with state as an argument.  

Let’s examine exactly the same component in terms of functionality, but built using props only:

import React from "react";
import { useDispatch, useSelector } from "react-redux";
 
const Login = () => {
  const dispatch = useDispatch();   const isAuth = useSelector(store => store.auth.isAuth)
 
 
  const  doLogin = () => {
    if (isAuth) {
     // some async logic
    }
  }
 
  return (
   <form onSubmit={() => dispatch(doLogin())}>
        <button type="submit">Login</button>
    </form>
  );
};
 
export default Login;

Our new component has fewer lines of code but provides the same functionality. Thus, to make a login form we have to build higher-order functions with state in class components. In functional components we use Hook useDispatch() and constants (props).

So when to use state and props?

Hope that we shed some light on the difference between the two React concepts. However, there is one more question left: 

When are we supposed to use props and when resort to state? 

Some basic rules: 

1. Components without state are preferable. State increases the common complexity of the app, makes the render result less predictable and testing less steady. Although you can’t avoid using state in the app because state is the basis for building interactive apps in React, just make sure that your app has as many Stateful components as possible. 
2. A wide-spread pattern of building apps is to make several stateful components on top of the hierarchy and create stateless components under them, passing all necessary information and staff via props from parents to child components. The point here is to isolate the logic of interaction on the top of the app in parent stateful components and to transfer the responsibility of rendering data to child stateless components. 

When we should use stateless components: 

1. When we need to display the data
2. When we build a non-interactive element in the UI
3. When we have a stateful component above, we should check whether it’s possible to use state from above rather than introduce a new local state

When we should use stateful components: 

1. When the component is supposed to accept user input 
2. When we build an interactive UI element 
3. When the component needs to work with data that it can’t get as props from parent components
4. When we work with fetching data

Thanks for reading!

You might also like these articles:

• React.js vs. React Native. What are the Key Differences and Advantages?
• 14 Great Admin Panel Themes for E-commerce
• What Is React Template? React Template Definition

The post What is The Difference Between State and Props in React? appeared first on Flatlogic Blog.