Single Page Applications

JS Modulsystem

Recap

VueJS
Components

  • Manual dependency management
  • Order of declaration
  • Global scope
<!-- 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 }
	]
}

Connection to SPA

  • SPA: "Big" browser applications
  • Organization of code
  • Reusability / Modularity needed

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
Loader Format
Node.JS CommonJS
RequireJS AMD
SystemJS all

Module bundler

  • Bundle modules at build time
  • Examples:
    • Browserify
    • Webpack
Bundler Format
Browserify CommonJS
Webpack all

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

DEMO TIME!

Single Page Applications - JS Modules

By Thomas Eizinger

Single Page Applications - JS Modules

  • 91
Loading comments...

More from Thomas Eizinger