DEV Community: Adenekan Wonderful

What are these things called generator functions* ?

Adenekan Wonderful — Tue, 26 Nov 2019 13:45:44 +0000

In this lessons, we are going to explore one really great new ishhhh that was introduced into the javascript ecosystem and native to javascript now, moreover we most times say that its a function that resembles async/await

Fun Fact — Async Await is actually built on generators 😆

Now don’t get me wrong its not exactly ASYN / AWAIT its got almost a different flare to it, but its very similar in the sense that in async / await functions we AWAIT our Asynchronous events (our promised based events) where we pause the execution inside of our Asynchronous whenever we see the await call.

Well, our generator functions are very similar in the sense that they also pause their executions whenever they see a specific key inside of their function and that key is called a yield. now in other, for us to use this or achieve this there is a special syntax we actually have to declare our old school way of defining our function decorator but this time with a star beside it like this.

//codes here  
function* gen(){  
  // code goes here  
}

Now let's get to understand these things better, let's declare two console.log’s and see something here

//codes here  
function* gen(){  
  console.log('Hello There');  
  console.log('I am a generator'); 
}   
// Now i'd declear my gen function to a const  
const gfunc = gen() 
// this would return undefined    
//when i call gfunc in the console i get these weird suspended and they are called a generator object  
/* gen {<suspended>} __proto__: 
Generator [[GeneratorLocation]]: 
VM275:1 [[GeneratorStatus]]: 
"suspended" [[GeneratorFunction]]: ƒ* gen() 
[[GeneratorReceiver]]: Window [[Scopes]]: Scopes[3] 
**/

Now I know you might be a lot surprised at what's happening and why it's not doing our regular function executions where we would see our logs and all, but here is what we do on it, we call a .next() on it, and what .next() does is that I would resume the execution inside of our function, so at the point where we invoked it for the first time we instantiated this generator object that actually is aware of the code inside of our function but the execution inside of the gen() function is paused.
I know this might be a lot but it's easy what we do, in other to resume this function we just call the .next() on the gfunc const so until we call .next() on our function might not be able to run the execution
gfunc.next()

//Now this returns some things I want you to take note of   
Hello There I am a generator   
{  value: undefined,   done: true }

Now we get our log and an additional object and this object contains our value prop and a done property, now the done property tells us if there is any code to still run and in our case, there is none so we get true. now lets clear this up and go into something a bit advance

function* gen(i){  
   yield i;   
   yield i + 5; 
}  
cosnt gfunc = gen(10)

so now what we have done is that we have a gen() function that takes in I as an argument and then we yield the argument we parse in, and the argument plus 5 then we declared a const and gave it a value of 5. are we good? YES! so when we call a gfunc.next() let's see what we get.

gfunc.next()
//returns 
{
    value: 5, 
    done: false
}

so now we see that the value property in the object is the initial yield we mapped in the function and the done is false, why? now that's because we are not done playing our execution in the function meaning that there is more in the function it only paused after our first yield, now let's see what happens when we do .next() again

gfunc.next()
//returns 
{
    value: 10, 
    done: false
}

now we see that the value property in the object now contains our updated value and our done property is still false, now this is because in our yield function we never declared a return value and this is required so our generator function can know when to stop the execution. so now if we add a return value we see that our done returns true like this

function* gen(i){ 
   yield i; 
   yield i + 5; 
   return 20; 
}
cosnt gfunc = gen(10)
// first execution
gfunc.next()
//returns 
{
    value: 5, 
    done: false
} 
//second execution
gfunc.next()
//returns 
{
    value: 10, 
    done: false
} 
//final execution 
gfunc.next()
//returns 
{
    value: 20, 
    done: true
}

Now you see that we have our done value as true after the execution is done. this is primarily the base use of generator functions if you want to stash multiple executions but you want to control when you want to pause and play the execution. think of it as

An ability to pause functions

I think we should stop here for now. so the key thing you need to remember is, wherever we see yield that means our code is paused at that point even if its an Asynchronous code just like async / await.

I know that we have spent a lot of time talking about generator functions but then if you don't still understand, you can go over the article over and over again or I’d but in some great resources to aid your learning. see you in my other articles 😊

Vue.js Quickstart Tutorial by @code_wonders

Adenekan Wonderful — Wed, 23 May 2018 11:47:21 +0000

Vue.js Quickstart Tutorial by @code_wonders

What is Vue.js
Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In the following you can find a list of features:

Reactive Interfaces
Declarative Rendering
Data Binding
Directives
Template Logic
Components
Event Handling
Computed Properties
CSS Transitions and Animations
Filters

The Vue.js 2 core library is very small in size (only 17 kB). This ensures that the overhead which is added to your project by using Vue.js is minimal and your website is loading fast.

The Vue.js website is available at: https://vuejs.org/

How to use Vue.js
There are different ways to include Vue.js in your web project:

Use CDN by including tag <script> in HTML file
Install using Node Package Manager (NPM)
Install using Bower
Use Vue-cli to setup your project

In the following we’re going to the Vue-cli to setup a new project and install the Vue.js 2 library.

Using Vue-cli

First, we need to install Vue-cli. The commend line interface is available as an NPM package. Make sure that Node.js and the npm command is available on your system and use the following command to install the Vue CLI globally on your local system:

$ npm install -g vue-cli

Having installed the client successfully the vue command becomes available. Now we're able to initiate a project by using this command in the following way:

$ vue init webpack learningVue

We're telling vue to initiate a new project and use the webpack template. We also give the project the name learningVue. Executing the command brings up a few questions on the command line as you can see in the following screenshot:

The project is created in the folder learningVue. Change into that directory with the following command:

$ cd learningVue

Start installing the dependencies by using npm again:

$ npm install

After having completed the installation of packages you can start the web server in development mode by using npm in the following way:

$ npm run dev

This will start the server on port 8080 and the application output is displayed in the browser automatically:

Later, if you want to build for production you can use the following command instead. In this case a dist folder is created containing the files needed for productive deployment.

$ npm run build

Project Structure
Let’s take a look at the initial project structure which is available in folder learningVue:

In the project root folder you can find files and folders. Let’s examine the most important ones. The package.json files contains all the dependencies of your project. By using the command npm install before we have made sure that the dependencies listed in package.json are installed into the node_modules folder of the project.

The file index.html contains the following HTML code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vueapp01</title> </head> <body> <div id="app"></div>  </body> </html>

This file is the starting point of your application. Note that within the body section a <div> element is available which has the id property set to string app. This element is used as a placeholder for the output which is generated by Vue.js.

Next take a look at file main.js in folder src. That's the place where the Vue application is initialized:

import Vue from 'vue' import App from './App' new Vue({ el: '#app', template: '<App/>', components: { App } })

On top of the file you can find two import statements:

import Vue from 'vue': Vue is the main class of the framework
import App from './App': App is the root component of out application

By using the new keyword a new instance of the main framework class Vue is created. The constructor takes an object as a parameter which contains three properties:
el: By assigning the string #app to this property we're defining that the output of the Vue application should be rendered to the <div id="app"></div> element in index.html.

template: The template contains the HTML code which is used to generate the output of the Vue.js application.
components: List of Vue.js components which are used in the template.
The template only consists of one element: <App/>. Of course this is not a standard HTML element. This is the element which is assigned to App component. In order to be able to use <App/> in the template the App component is also listed in the object which is assigned to the components property.

So let's see what's inside the App component implementation in file App.vue:

<template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template>
<script> import Hello from './components/Hello' export default { name: 'app', components: { Hello } } </script>
<style> app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

As in every Vue.js 2 single-file component the App implementation is split up into three parts:

: Component's template code
: Component's script code
: Component' CSS code

Let’s focus on the the first two sections template and script. The script section is making a default export of an object declaraing the component named app. Again, the components property is used to declare that another component (Hello) is required by App. This subcomponent is used in the template code of app and implemented in file hello.vue in folder components. In order to be able to use the Hello component in App it’s also needed to include the corresponding import statement on top of the script section.

The implementation of component Hello looks like the following:

<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> <br> <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> </ul> </div> </template>
<script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>

style scoped h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } /style

The component configuration object is exported as default. This time the component configuration object contains a data method. This method returns an object which represents the component’s model. Properties defined in the model object can be used in the component’s template by using the interpolation syntax. In the example from above the model object has only one property: msg. The string which is assigned to this property is included in the component’s template by using:

<h1>{{ msg }}</h1>

The interpolation syntax required double curly braces to include model data in the template.

Using Standard Directives
Let’s adapt the Hello component implementation to learn more about the usage of Vue.js standard directives.

v-for
The v-for directive makes it possible to render an element multiple times based on source data. You can use this directive to iterate over an array and at the array data to the output. First add an array to the object which is returned by the data method:
users: [ {firstname: 'Sebastian', lastname: 'Eschweiler'}, {firstname: 'Bill', lastname: 'Smith'}, {firstname: 'John', lastname: 'Porter'} ],
Then use the v-for directive to include a list in the output printing out the firstname and lastname value of each array element:

<div> <ul> <li v-for="user in users"> {{user.firstname}} {{user.lastname}} </li> </ul> </div>

v-model
The v-model directive creates a two-way binding on an input element or a component. Make sure to define a property in your data object which should be used as the binding target:
input_val: ''
Then use the directive to bind the value of an input element to that property:
<div> <input type="text" v-model="input_val"> </div>
With that binding established we’re getting two effects:
everytime the user enters a value in the input field the value of input_val is updated accordingly
If we change the value of input_val in our program the value which is displayed in the input element is updated as well

v-text
By using the v-text directive the text content of an element is set. We can use it as an alternative to the {{ … }} syntax if the complete text content should be set. E.g. we can use this directive to output the input_val value to the user:
Input Value:

Summary
The complete code of the adapted Hello component implementation should now look like the following:
<template> <div class="hello"> <h1>{{ msg }}</h1> <hr /> <div> <ul> <li v-for="user in users"> {{user.firstname}} {{user.lastname}} </li> </ul> </div> <hr /> <div> <input type="text" v-model="input_val"> </div> <div> Input Value: <span v-text="input_val"></span> </div> <hr /> <div> <button class="btn btn-primary" v-on:click="counter++">You've clicked this button {{counter}} times!</button> </div> </div> </template>
<script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App', users: [ {firstname: 'Sebastian', lastname: 'Eschweiler'}, {firstname: 'Bill', lastname: 'Smith'}, {firstname: 'John', lastname: 'Porter'} ], input_val: '', counter: 0 } } } </script>

<style scoped> h1, h2 { font-weight: normal; } ul { list-style-position: inside; } a { color: #42b983; } </style>
The result can be seen in the following screenshot:

Article credit to CodingTheSmartWay.com