My JS Journey: A Promise in a Browser

In this example, I’m going to explain how to fork a GitHub repository—or copy someone else’s—as well as implement a simple promises app. As an added bonus, I threw in using a Class. The code to fork is my JavaScript browser skeleton.

Forking a Repository

In GitHub:

In the upper right, Click the Fork.

In iTerm:

Once you have your local GitHub repository, you can follow the instructions for cloning I outlined in Promises. For more on forking, see this GitHub article.

To install all the node packages, run:

npm install

Then build:

npm run build

To see it run, open index.html. When you click the Get Message button, the Message should dislpay “Hello.”

Screen Shot 2017-04-03 at 09.37.37

Adding A Class

Because I like classes, I implemented one, so you can see how that works with respect to export.

First, implement the class by changing src/hello.js as follows:

class Hello {
  static hello(){
    return 'Hello';
  }
}

export default Hello;

Modify src/index.js to import the class:

import Hello from './hello.js';

var sayHello = function () {
  return Hello.hello();
}

document.getElementById('msgBtn').addEventListener('click', function () {
    var message = sayHello();
    document.getElementById("message").innerHTML = message;
});

Build the project.

npm run build

Load or refresh index.html:
Screen Shot 2017-04-03 at 09.37.37
Checkin the code.

Adding Promises

This example is basically the same as the CLI one I described in Promises. The major difference, of course, is this one is in the browser. Promises let you ensure the order of asynchronous events, such as file reading. In my example, I retrieve the text ” world” after a timeout, and append it to “Hello” from the origin example. It’s contrived, but it shows how a promise works.

Modify src/hello.js as follows:

class Hello {
  static getWorld() {
    return new Promise((resolve) => {
      setTimeout(() => resolve(' world'), 500);
    });
  }

  static hello(){
    return new Promise((resolve) => {
      this.getWorld().then(result => {
        resolve('Hello' + result);
      });
    });
  }
}

export default Hello;

Modify src/index.js to resolve the promise returned from Hello.hello():

import Hello from './hello.js';

const sayHello = (message) => {
document.getElementById("message").innerHTML = message;
};

document.getElementById('msgBtn').addEventListener('click', () => {
Hello.hello()
.then(res => sayHello(res));
});

Build the code and refresh index.html. It should now display “Hello world” instead of simply “Hello.” You might be able to see the half-second lag on getting the message. That’s the timeout.

Screen Shot 2017-04-21 at 12.59.10

Check the code in.

In Conclusion

Promises in ES6 are not difficult, although they can be cumbersome if there are a lot of nested Promises. The new—and, as of yet, not completely supported—ES7 feature, async/await, is meant to simplify nested Promises. I’ll write about that in a future post. You can find the Browser Promise code in my github repository, promises-browser.

Copyright ©2014-17 Ramona Ridgewell. All rights reserved.

Advertisements
This entry was posted in #Education, AmWriting, Coding, Education, JavaScript, Programming, Science, Women, Writing and tagged , , , , , , , , . Bookmark the permalink.

One Response to My JS Journey: A Promise in a Browser

  1. Pingback: An Accessible and Usable GitHub Repository | RamonaRidgewell

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s