Use ES6 JavaScript syntax (require, import etc.) in your Front end project.

In this tutorial, we will be using advanced JavaScript syntax in our app to maintain code as per latest standards and use Node.js require to import npm modules in our front-end project.

Why do you need to upgrade?

When I started writing JavaScript before 4 years, things were totally different. We use jQuery a lot, use script and link tags to include JS and CSS files in our application, and replace our file every time when we need to update it.

Consider this line,

<script type="text/javascript" src="jQuery.js"></script>

You need to update this file if you have been using it locally. Else, you need to change versions manually when you need to.

Consider this below,

import jQuery from “jQuery”;

Can you see the transformation? You don’t need to update manually at any cost. Just npm update will update all your modules in your application. No separate commands or works for anything. You can bring in amazing tools and utilities from the broader JavaScript ecosystem in a modular way.

So, when things are changed, why don’t your front end application? Yes, it’s time to upgrade yourself.

While in Rome, be a ____? Yes, you should when you use JavaScript in today’s world.

Prerequisites

1. Node.js & NPM (NPM comes with Node.js, you don’t need to install it separately)
2. Browserify (Let’s install it later, don’t do it now)
3. Watchify (Let’s install it later, don’t do it now)

Let’s Code

Install all your prerequisites.

Create a directory, navigate and initialize your project using NPM by issuing the below command.

$ mkdir es6-app
$ cd es6-app
$ npm init

Fill in your details. Refer the below image for more info.

Package.json configuration.

You can leave fields empty and hit enter when you don’t have values to fill. This is just a reference and let’s concentrate on our application right now.

Now in your es6-app root directory, you can see a file called package.json created with the configurations provided by you and a create an index.js file in your project or whatever you have given in the entry field during initialisation.

Let’s install the npm module called reading-time to calculate the reading time of the content like the one you see on Medium and our other prerequisites.

In your root directory, issue the following commands.

$ npm i browserify watchify --save
$ npm i reading-time --save

Now you can see node_modules folder created in your root directory and the dependency entry in the package.json file.

Install the dev dependencies required for your file conversions.

$ npm i babel-core babel-preset-es2015 babelify --save-dev

You have installed all the dependencies needed.

Now, in your index.js file, add the following code.

import readingTime from "reading-time";
window.calcRT = ev => {
 var stats = readingTime(ev.value).text;
document.getElementById("readingTime").innerText = stats;
};

Here, you have imported the reading-time npm module which you have installed and getting a sample text from the user to calculate the reading time.

Note: You are using import keyword in your JavaScript file.

Browsers are yet to upgrade themselves to use these syntaxes and when browsers do this in the near future, we don’t know what will be the ES version.

We need to transpile index.js file so that we can use the converted versions in our browser.

Add the following browserify presets (dependencies) in your package.json file. (Refer the project when you need help)

"browserify": {
        "transform": [
            [
                "babelify",
                {
                    "presets": ["es2015"]
                }
            ]
        ]
    }

along with the other configs and replace the scripts config with the below one.

"scripts": {
        "build": "browserify index.js -o dist/bundle.js",
        "watch": "watchify index.js -o dist/bundle.js -v"
    }

It’s time to transpile. Issue the following command to transpile the file.

$ npm run build

Now your file is transpiled and created in a folder called dist. Now let’s add this converted file in our HTML file.

Create a html file called index.html in your root project and add the following contents to it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ES6 - App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
    <script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>
    <section class="section">
        <div class="container">
            <div class="level">
                <h1 class="title is-4 level-item has-text-centered">
                    Welcome to ES6 - APP
                </h1>
            </div>
            <div class="level">
                <h1 class="subtitle is-5 level-item has-text-centered">
                    Learn to use &nbsp;<a href="http://es6-features.org/">ES6 syntaxes</a>&nbsp; in your front-end application
                </h1>
            </div>
            <br>
            <div class="level">
                <p class="level-left level-item">Type your text to calculate the reading time</p>
            </div>
            <div class="level">
                <textarea class="textarea" onkeyup="calcRT(this)" placeholder="Add your text ..."></textarea>
            </div>
            <div class="level">
                <div class="level-left">
                    <p>Reading time:&nbsp;</p>
                    <p class="has-text-info" id="readingTime">0 min read</p>
                </div>
            </div>
            <div class="level">
                <div class="level-left">
                    <p>Medium Tutorial:&nbsp;</p>
                    <a target="_blank" href="https://medium.com/full-stack-web-development-from-scratch-to/use-es6-javascript-syntax-require-import-etc-in-your-front-end-project-5eefcef745c2">
                     Use ES6 JavaScript syntax (require, import etc.) in your Front end project.
                    </a>
                </div>
            </div>
            <div class="level">
                <div class="level-left">
                    <p>Source code:&nbsp;</p>
                    <a target="_blank" href="https://github.com/balasubramanim/es6-app">
                     GitHub - es6-app
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

That’s it. You have created your front end project using advanced JavaScript syntax. I hope this will definitely act as a reference for your upcoming build.

Now, you need to automate your build process. Run the following command instead of npm run build to watch and update the file as soon as it gets updated.

$ npm run watch

You have automated your process successfully.

If you have any queries, let me know in the comments section. Show your appreciation by holding the claps icon as much as you love.

Final project can be found here.

Play with the es6-app @ https://balsu.me/es6-app/

Thank you.