Recap

VueJS
Components

<!-- custom VueJS files --> 
<script src="app/stores/taskStore.js"></script>
<script src="app/components/taskRowComponent.js"></script>
<script src="app/components/addTaskBoxComponent.js"></script>
<script src="app/components/taskListComponent.js"></script>

const taskListComponent = {
	template: `
		<div class="content">
			<router-view></router-view>
			<task-row v-bind="task" v-for="task in tasks"></task-row>
			<div class="row">
				<div class="col-12 right bold">{{ sum }} mins</div>
			</div>
		</div>`,
	data: function(){
		return {tasks: taskStore.tasks}
	},
	methods: {
		addTask: function(newTask){
			this.tasks.push(newTask);
		}
	},
	computed: {
		sum: function(){
				return this.tasks.reduce((pv, cv)=>pv+cv.minutes, 0);
		}
	}
};

var taskStore = {
	tasks: 
	[
		{ label: "Katze gefüttert", minutes: 30 },
		{ label: "SQL Server installiert", minutes: 180 }
	]
}

Today's lesson

• JavaScript Ecosystem
   
• History of JS Modules
   
• Module loaders vs. module bundlers

Ecosystem

NodeJS

• no browser
• "server-side"
• npm
• package.json

Browser

No modules

Originally live-script

NodeJS

var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
}).listen(8080); 

Modules

• Unit of code with certain functionality
• Shareable => Reusability
• Dependencies

Modules/1.x

CommonJS working group

AMD

Asynchronous module definition

Module formats

var multiply = require("multiply")

function square(number) {
    return multiply(number, number)
}

exports.default = square

define(
    "square", 
    ["multiply"], 
    function(multiply) {
    	return function(number) {
            multiply(number, number)
        } 
    }
)

Module loaders

• Load modules at runtime
• Examples:
  • Node.JS
  • RequireJS
  • SystemJS

Module bundler

• Bundle modules at build time
• Examples:
  • Browserify
  • Webpack

AMD

• verbose
• declarative
• asynchronous

CommonJS

• concise syntax
• imperative
• synchronous
• easy to use

AMD vs. CommonJS

EcmaScript 6

to the rescue

import { multiply } from "multiply";

export default function(number) {
    return multiply(number, number)
}

• declarative (statically analyzable)
• concise syntax
  • more powerful than CommonJS
  • not as verbose as AMD
• module name defined by filename
• combines CommonJS and AMD

SystemJS?

"Configurable module loader enabling dynamic ES module workflows in browsers and NodeJS."
 

• Implementation of the ES6 module loader API
• Programmatic API