DEV Community: kennyrafael

How JavaScript is making our life easier day by day

kennyrafael — Wed, 10 Mar 2021 05:23:27 +0000

Nowadays, JavaScript is a must for any developer working with web technologies. Even those focused on back-end have to touch the client-side one time or another, and maybe you are a Node developer so you basically breath JS.

The point is, doesn't matter your position, you probably faced ugly codes and thought: "Really, that's how I must write this?"

Well, people are working to make it better, and probably we are at the best spot so far, also TypeScript is being great, allows us to do amazing stuff, but let's see some cool things our old friend JavaScript is providing us.

** None of the following features are compatible with IE. But who cares? ¯\_(ツ)_/¯

Nullish coalescing

Usually, when you need to define a variable, but the value can't be null or undefined, the alternative is to resort to a ternary if you want to provide a default value:

const person = { name: 'Richard', age: 21 };
const age = person.age ? person.age : 'Age not determined';
console.log(age); // Output: 21

Let's see how it works now!

const person = { name: 'Richard', age: 21 };
const age = person.age ?? 'Age not determined';
console.log(age); // Output: 21

The nullish coalescing operator (??) is a logical operator that handles both null or undefined values, and returns the right-hand side operand when its left-hand operand is null or undefined.

If you have a situation where you have to consider false values as well, not only null or undefined, then you can try OR operator (||). Following our previous example, let's say that we need to guarantee that name must exists and can't be empty ('') and age can't be 0 (We start at zero I know, it's just an example... =P). Then we do:

const person = { name: '', age: 0 };
const name = person.name || 'This person has no name';
const age = person.age || 'Age not determined';
console.log(name); // Output: 'This person has no name'
console.log(age); // Output: 'Age not determined'

Logical nullish assignment

Imagine that you need to assign a value to a property, but only if this property is null or undefined:

const person = { name: 'Richard', age: 21 };
const person2 = { name: 'Michael', lastname: 'Glass', age: 21 };

person.lastname ??= 'Banks';
console.log(person.lastname); // Output: Banks

person2.lastname ??= 'Kimber';
console.log(person2.lastname); // Output: Glass

Optional chaining

I had nightmares with situations like this, sometimes you are working with a deep object and you have to access some property, but not only the attribute you need might be undefined, but its parent nodes as well, so you have to do a beautiful if like this:

const sector = { 
    role: {
        manager: {
            name: 'Alex'
        }
    }
};

const manager = sector.role && 
                sector.role.manager &&
                sector.role.manager.name ? 
                sector.role.manager.name : '';

How painful is that? Hopefully, we can do something different now:

const sector = { 
    role: {
        manager: {
            name: 'Alex'
        }
    }
};

const manager = sector.role?.manager?.name ?? '';

Exactly, just by adding the operator ? before each property, you don't need to expressly validate each reference in the chain. undefined is returned if a reference is nullish. Works with functions as well:

let result = someInterface.nonExistingMethod?.();
console.log(result); // Output: undefined

Conclusion

That's not all, I definitely recommend you to check the oficial docs, JavaScript is getting better every day, changes are becoming available to fast, so make sure you are up to date always!

That's all folks, see you in the next post.

You should be using Vue Class Component

kennyrafael — Wed, 17 Feb 2021 01:32:56 +0000

Intro

For those who, like me, arrived at Vue from Angular, probably miss some aspects and prefer others. I particularly prefer Vuex toNgRx when it comes to state management, but something that I never liked about Vue is the creation of components, where those with greater complexity become increasingly difficult to understand. At this point, Angular uses what we can call class-style syntax, where its components are classes with attributes, methods, etc. While in Vue, we use a JS object to create an instance of Vue according to its specifications.

This is the main advantage of using the Vue Class Component library, you transform your components into classes, which allows you to better organize your code, and more. With it you can create custom Decorators, extend other components and/or mixins and use additional Hooks when using Vue Router.

Here, we will cover only the basics, the idea is in the future to create an article on Vue-Property-Decorator that complements the usage of this library.

Installation

To create a project using Vue Class Component from scratch, you just need to follow Vue CLI steps, make sure to manually select your project features, add TypeScript then opt to use class-style component syntax.

Considering an existing project just install the library:

$ npm install --save vue vue-class-component

$ yarn add --save vue vue-class-component

You must ensure that the Vue core is also installed, since Vue Class Component depends on it.

If you are using TypeScript, change your tsconfig.json adding experimentalDecorators: true. If you're using Babel, do the following:

$ npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

Then configure .babelrc:

{
  "plugins": [
    ["@babel/proposal-decorators", { "legacy": true }],
    ["@babel/proposal-class-properties", { "loose": true }]
  ]
}

Then you are good to go.

Example

So, below you can see a regular Vue component:

export default {  

  components: { },
  props: { },  

  data () {  
    return {  
      message: 'Hello World!'  
    }  
  },
  computed: {  
    reversedMessage () {  
      return this.message.split('').reverse().join('')  
    }  
  },
  methods: {  
    changeMessage (val) {  
      this.message = val  
    }  
  },

  created () { },  
  mounted () { },  

}

As mentioned before, our component is a JS object that will turn into a Vue instance, so we must follow some rules.

data must be a function that returns an object if you want to reuse this component in other places (and you probably will).
computed has properties with functions, but sometimes properties with an object containing one or two other functions (getters/setters).
methods is a object with functions
The object also contains components that will be included, properties provided by a parent component and methods that are hooks automatically triggered on our component's life cycle.

What about Vue Class Component?

@Component({  
  components: { },  
  props: { },  
})  
export default class extends Vue {  
  message = 'Hello World!'

  get reverseMessage () {  
    return this.message.split('').reverse().join('')  
  }

  changeMessage (val) {  
    this.message = val
  }

  created () { }
  mounted () { }
}

Vue Class Component provides a decorator where we can define the components and the properties of our component, which makes sense, since they are one-time configurations.
data values are expressed as properties of the class
You can use get/set accessors to create computed values
Everything else is defined by member functions of the class (life cycle hooks, methods)

Important

It is not necessary to refactor your entire app to use this library. You can do it gradually or only with new components. Compatibility between components stays the same, you can include Class Components in standard components and vice versa.

Conclusion

Even though it is a very simple example, it is possible to observe a much more elegant code using Class Components, for those who like Angular or for the back-enders on duty, it is a much more familiar way of working with Vue.

If you are interested, you can check the original documentation for more.