javascript | Bogdan's blog https://blog.bogdancarpean.com Code and anything else. Fri, 23 Dec 2022 00:48:59 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 https://blog.bogdancarpean.com/wp-content/uploads/2022/12/icons8-pencil-drawing-96.png javascript | Bogdan's blog https://blog.bogdancarpean.com 32 32 Vue 3 is out – what should I do next? https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3-is-out-what-should-i-do-next https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/#respond Thu, 24 Sep 2020 03:00:34 +0000 https://blog.bogdancarpean.com/?p=389 Long-awaited version 3 of the popular Vue framework is finally released (after 6 months in beta and release candidate), packed with interesting new things for Vue developers. Named “One Piece” and hosted in a separate repo, vue-next, for a period of time (to avoid being confused with 2.x and also not to be picked by […]

The post Vue 3 is out – what should I do next? first appeared on Bogdan's blog.]]> Long-awaited version 3 of the popular Vue framework is finally released (after 6 months in beta and release candidate), packed with interesting new things for Vue developers.

Named “One Piece” and hosted in a separate repo, vue-next, for a period of time (to avoid being confused with 2.x and also not to be picked by npm install as @latest), the new version promises increased performance, smaller bundle size, and interesting new features to at least intriguing us for discovering more.

Let’s take a first look at what’s new to decide if we go all-in with the new version or wait for the moment.

Vue 3 introduces the Composition API, which addresses the biggest problem (*personal opinion) of Vue, the use of mixins. Mixins are a good way of abstracting code to make it more reusable, but they have some flaws: they hide the code – at some point, a method defined in the mixin is called into the component, but that method is nowhere to be found inside the component. So you start digging up, losing time tracing the method to debug. In the extreme case of mixins nested in other mixins, this job increases in complexity. Other downsides are possible namespace clash (when you define a method in your component with the same name as one in the mixin) and have side effects hard to trace and the possibility of adding too much code in the mixin that is only partly used in a component at the time, this way incorporating to much bloat in components. The new Composition API in Vue 3 is giving us a new way of defining reusable code in Composables, which are more concise and clear as structure, then import these building blocks to construct our components.

Vue 3 promises to be faster and to have a smaller bundle size. On Vue 2, one way of gaining performance was to transform stateful components in functional ones when you have a lot of them in the DOM, to save lost time on register/unregister when re-rendering. On Vue 3, the functional prop was taken out from components (only render functions from now on), but the difference in performance between functional components and stateful ones became negligible, so we are advised to use only stateful components (for the part of us that does not like to use render functions).

Another point that will increase the performance of a Vue 3 application is compiler-informed Virtual DOM. This means that at compile-time, the resulting render functions that go into the bundle are flagged when they contain runtime dynamically changing elements. This way, at runtime, the Virtual DOM is aware of the elements to look for changes and not waste time on watching static ones.

In Vue 3, tree-shaking of Vue internals has been added at compile time. This is a step further in the “progressive framework” approach, allowing us to transport in the bundle only the Vue internals we are actually using. More than this, we have the possibility to manually flag the compiler for the parts it can’t detect automatically for tree-shake.

The new proxy-based reactivity system will speed even further the runtime of our application (check the MDN docs on proxies to find more on this interesting topic).

Some other interesting new features can be found in Vue 3.

The new <teleport> component allows us to render a part of the component template somewhere else in the DOM than the containing component place. Very useful for triggering a modal or a spinner from inside of a component to a more generic point in the DOM (e.g. <body>). Or, when you have a hamburger button on a mobile collapsed layout header to be able to trigger the navigation list outside that layout component.

<suspense> is another component that acts as a wrapper for our component, allowing it to have an alternate template displayed until async operations are executed. Simply put, it allows us to show a loading template until the actual template is loaded and hydrated.

The new Vue 3 now supports multiple elements in the root of the <template>. This means no more wrapping all the elements in the template in one big <div> to avoid an error. Nice addition!!!

<v-model> has a new API in the form of <component v-model:key=”binding”>. This allows us to pass multiple v-model binding for the same component. Multiple two-way bindings on one component. Nice!!!

Filters have been removed from Vue 3 (these are the pipes for those coming, like myself, from the Angular world). From now on, to avoid confusion, only direct method binding {{ convertToCelsius (degrees) }}.

Some additions have been made to the Single File Components syntax. One is the new <script setup>, which is a shorthand to use instead of returning the setup function for the Composition API. The other interesting one is <style vars>, which allows us to pass CSS variables to the style sheet and this way to control dynamically the style at runtime.

For those of you wanting to tweak the framework or even to use parts of Vue to build their own framework, new modular internals of Vue 3 are here, replacing the monolith core of Vue from former versions.

Lastly, the wide use of TypeScript in Vue 3 allows you to have on the fly type inference in your component when you instantiate a variable. And if you already declare the type of your props, you’re already there.

The last thing to mention is that Vue 3 will stay on @next tag until somewhere the end of 2020 when a coordinated switch of all components to @latest will be made. Also, a minor release of Vue 2.7 is scheduled for Q1/2021, having all the 3.x backward compatible features included and the migration build for 3.x. At that point, 2.7 will enter LTS for 18 months.

Now that we have a clearer picture of what Vue 3 brings to the table, we ask ourselves what to do next? And as usual, there are few different answers to this question, depending on the current state of your application.

If you have a small application(s) that work fine and have no benefit from using the above-mentioned changes, just keep them on 2.x.

If you start a new application with Vue, start it directly on Vue 3, this way you have all the new benefits of the framework and your application is future proof for what’s to come for a longer period of time. The only drawback in this situation is that some of the submodules are not yet on stable releases, but I think most are stable enough (beta or RC) to be usable and soon stable.

If your application is a complex one and you were already thinking of some refactoring, could be the time to start architecting for the transition to Vue 3 and by the time you figure it out, hopefully, all the pieces will be in place for a fast migration and the benefits brought by Vue 3.

Else, if you have a complex application that is working fine now, you will want to wait a bit for the migration build to be in place and do a two-step migration to Vue 3 using this build as an intermediary step.

Either way, hope you will enjoy the new iteration of the framework and happy coding!

 

The post Vue 3 is out – what should I do next? first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/feed/ 0 Javascript for of index https://blog.bogdancarpean.com/javascript-for-of-index/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-for-of-index https://blog.bogdancarpean.com/javascript-for-of-index/#respond Mon, 01 Jun 2020 16:36:25 +0000 https://blog.bogdancarpean.com/?p=376 Starting with ECMA 6 we have a new loop iterating statement in the form of for…of. This helps us to loop thru an iterable object (array, string, map, set…) in a simpler fashion than the classic for loop. To achieve this, we are going to use the entries() method of the Array: for (const [index, […]

The post Javascript for of index first appeared on Bogdan's blog.]]> Starting with ECMA 6 we have a new loop iterating statement in the form of for…of. This helps us to loop thru an iterable object (array, string, map, set…) in a simpler fashion than the classic for loop.

To achieve this, we are going to use the entries() method of the Array:

for (const [index, element] of myArray.entries()) {
  console.log(index, element)
}
The post Javascript for of index first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/javascript-for-of-index/feed/ 0 Fetch data needed on component’s template in Vue before render https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/?utm_source=rss&utm_medium=rss&utm_campaign=fetch-data-needed-on-components-template-in-vue-before-render https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/#respond Thu, 01 Aug 2019 06:00:10 +0000 http://blog.bogdancarpean.com/?p=311 Let’s say in your Vue app you have a component that needs to fetch some data in order to display it on the template. This component needs this data on creation in order to be able to bind it on the template. Let’s take the following example: <template> <div class="container"> <p>Name: {{name}}</p> <p>Age: {{age}}</p> </div> […]

The post Fetch data needed on component’s template in Vue before render first appeared on Bogdan's blog.]]> Let’s say in your Vue app you have a component that needs to fetch some data in order to display it on the template. This component needs this data on creation in order to be able to bind it on the template.

Let’s take the following example:

<template>
  <div class="container">
    <p>Name: {{name}}</p>
    <p>Age: {{age}}</p>
  </div>
</template>
<script>
data():{
  return{
    name: null
    age: null
  }
}

created():{
  fetchUser().
    then(res => {
     this.name = res.data.name
     this.age = res.data.age 
    }
    )
}
</script>

In this example, we have a Vue Component that needs to fetch the user name and age before being able to create the template and display them. We use the lifecycle hook created() to fetch the data in the component. This will finally work, because of the reactive nature of Vue, but we are going to have an error in the console telling us that name is undefined. This happens because when we navigate to the component and this one gets rendered, the value of the variables is not yet fetched, the component rendering first the template, then executing the script. So we get the error on the console, then the script is run, data is fetched and displayed.

Let’s see how to do that without having the error on the console:

<template>
 <div class="container" v-if="dataFetched">
   <p>Name: {{name}}</p>
   <p>Age: {{age}}</p>
 </div>
</template>
<script>
data: {
  return {
    name: null
    age: null
    dataFetched: false
  }
},

beforeRouteEnter(to, from, next) {
  fetchUser().
    then(res => {
      next(vm => vm.setUser(res.data)
    })
},

methods: {
  setUser(user){
    this.name = user.name
    this.age = user.age
    this.dataFetched = true
  }
}
</script>

To achieve this, we first use the beforeRouteEnter() guard of the Vue Router that is called before the Router navigates to our component route. This guard has three parameters: to, from and next. From is an object containing the information about the route we are navigating from, also the parameters passed by route, to is the information about the route we are navigating to, next() is the function we call after we executed all we need on the guard to pursue the navigation.

But moving the fetch logic from the lifecycle hook to the guard alone won’t solve our problem because fetch is an asynchronous operation that will start on the guard, then next is called, leading to template rendering before data being fetched and virtually the same error on console.

To achieve this, we use a trick. We declare a boolean in the component, let’s say dataFetched, that we instantiate to false and we use it to trigger with v-if the render of the container div only when the data is fetched. We set the variable to true in the setUser method in the component after data is fetched, this way preventing the render of the template and the error on the console.

Happy coding!!!

The post Fetch data needed on component’s template in Vue before render first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/feed/ 0 Deepcopy of JavaScript Objects and Arrays using lodash’s cloneDeep method https://blog.bogdancarpean.com/deepcopy-of-javascript-objects-and-arrays-using-lodashs-clonedeep-method/?utm_source=rss&utm_medium=rss&utm_campaign=deepcopy-of-javascript-objects-and-arrays-using-lodashs-clonedeep-method https://blog.bogdancarpean.com/deepcopy-of-javascript-objects-and-arrays-using-lodashs-clonedeep-method/#respond Fri, 12 Jan 2018 14:08:06 +0000 http://blog.bogdancarpean.com/?p=182 While developing JavaScript applications, often we need to make copies of Objects or Arrays containing Objects. Then we want to work with those copies without affecting the original objects. In a common scenario, we are going to deal with a simple, one level Object (an Object without other Objects nested inside), like in the following […]

The post Deepcopy of JavaScript Objects and Arrays using lodash’s cloneDeep method first appeared on Bogdan's blog.]]> While developing JavaScript applications, often we need to make copies of Objects or Arrays containing Objects. Then we want to work with those copies without affecting the original objects.
In a common scenario, we are going to deal with a simple, one level Object (an Object without other Objects nested inside), like in the following example: 
let originalObject = {name: 'Bunt', type: 'dog'};

Then, we want to make a copy of the originalObject. In ES6, we are going to do something like this:

let copiedObject = Object.assign({}, originalObject);

This will create the copiedObject with all the properties and respective values of the originalObject. Now, if we want to change a value in the copiedObject, this will not change also the value into the originalObject:

copiedObject.type = 'cat';

console.log(originalObject.type); // will print 'dog'
console.log(copiedObject.type); // will print 'cat'

Now, what is going to happen if we have a nested Object inside our Object, doing the same operations?

let originalObject = {name: 'Bunt', details: {type: 'dog', color: 'brown'}};

let copiedObject = Object.assign({}, originalObject);

copiedObject.details.type = 'cat'; 

console.log(originalObject.details.type); // will print 'cat' 
console.log(copiedObject.details.type); // will print 'cat'

As you can see, when you change the value of a property in the nested Object of copiedObject, that change is perpetuated to the same property of the nested Object in originalObject. You’ll ask why that happened? Because JavaScript passes the primitive values (string, number, etc.) as value-copy and the compound values (Objects, Arrays, Functions) as reference-copy to the value of the primitives on that Object. This way, when we copied the Object containing the nested Object, we have created a shallow copy of that object, meaning that the primitives found at the first level of the Object have values that are copied, thus when we change them into the copiedObject, they are not going to change in the originalObject while all other property found in a nested object will have the value passed as a reference to the same property value into the nested Object of originalObject, thus when we change its value, we actually change the value of the reference, resulting on both nested Objects having the modified property value.

Now, what’s the solution to deep copy an Object or Array, meaning that we want to have a copy free of references at all nested levels so we can change the values inside without the fear of breaking the original?

The first solution you are going to find is to serialize the Object to a JSON, then parse back that JSON to a JavaScript Object, practically passing the Object thru a string that will clean up the Object tree from the references nested inside by recreating a new Object with copied properties and values from the original one.

let copiedObject = JSON.parse(JSON.stringify(originalObject));

But this is a controversial solution. Why? Because this is going to work fine as long as your Objects and the nested Objects only contains primitives, but if you have objects containing functions, this won’t work. Neither for Date.

So, what’s the working solution? We are going to use lodash’s cloneDeep method to deep copy the Object. Lodash is an excellent JavaScript utility library for those not knowing it yet. The cloneDeep method will iterate all levels of the original Object and recursively copying all properties found.

The example I will give here is in Angular. Since we don’t want to carry all the bundle of lodash to the client, we are going only to import the cloneDeep method.

First, let’s install lodashinto our project:

yarn add lodash or npm install lodash

Once installed, we are going to use in our component:

import * as cloneDeep from 'lodash/cloneDeep';

...

clonedObject = cloneDeep(originalObject);

Importing cloneDeep will add to your build 18kb, a fair price to pay in order to have a reliable deep copy solution for you Objects.

I added a demo app on Github here.

Interested in Angular? Join our Angular Montreal Meetup.

The post Deepcopy of JavaScript Objects and Arrays using lodash’s cloneDeep method first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/deepcopy-of-javascript-objects-and-arrays-using-lodashs-clonedeep-method/feed/ 0