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
- 563