Modern-JavaScript-Explained-For-Dinosaurs

First part based on the article of Peter Jang, Modern JavaScript Explained For Dinosaurs

This repository will implement the article and link to the corresponding commits/branches. You should be able to read along the article and follow the corresponding branches.

To see the current master branch in action you need to run

npm i && npm start

The second part will add some more common development tools to the mix until you created your first real modern webapp.

Using JavaScript the “old-school” way

Branch: oldSchool

Showing how you do things with works with browser only, meaning no need for an httpd style server.

Some changes I added had been to override console.log to output to a div on the html.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
    </head>
    <body>
        <h1>Hello from HTML!</h1>
        <div>Console.log here:</div>
        <div id="log"></div>
        <script>
            // https://stackoverflow.com/questions/20256760/javascript-console-log-to-html
            (function () {
                var logger = document.getElementById('log');
                console.log = function (message) {
                    if (typeof message == 'object') {
                        logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
                    } else {
                        logger.innerHTML += message + '<br />';
                    }
                }
            })();
        </script>
        <script src="index.js"></script>
    </body>
</html>

Using a JavaScript package manager (npm)

Branch: npm

No special changes besides the names.

Diff git diff 001_oldSchool..002_npm

Using a JavaScript module bundler (webpack)

Branch: webpack

No special changes besides adding bundle command to package.json. npm run bundle

Diff git diff 002_npm..003_webpack

Transpiling code for new language features (babel)

Branch: babel

No special changes.

Diff git diff 003_webpack..004_babel

Using a task runner (npm scripts)

Branch: scripts

No special changes besides to show how to link scripts in npm and implement "standard" target start and bundle.

Diff git diff 004_babel..005_scripts

Want more examples

part2 will explain how to add things like linting, testing many more.

scherler / modern-javascript-explained-for-dinosaurs Goto Github PK