Introduction to SPA
Mykhailo Churilov
Senior JS Developer
History
Tim Berners-Lee
WWW
1989 (1991)
Brendan Eich
JavaScript
1995
Ajax: A New Approach to Web Applications 2005
(Jesse James Garrett)
var r = new XMLHttpRequest();
r.open("POST", "webservice", true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
console.log(r.responseText);
};
r.send("a=1&b=2&c=3");
DOM manipulation
Animation
Events
Promises
AJAX
JSON parsing
Cross-browser support
$.ajax({
url: "webservice",
type: "POST",
data: "a=1&b=2&c=3",
success: function(d) {
console.log(d);
}
});
2008
V8 engine optimization
Common.js
(AMD)
Internet Birth 1991
JavaScript 1995
AJAX 2005
jQuery 2006
Google Chrome 2008
Node.js 2009
AMD 2009
SPA: WTF?
HTML/CSS/JS/JSON
Separate client/server
Pure data communication
Client side templating
NO page reloads
Quality Over Quantity
No page refresh
Mobile preffered
Scaling
Long pageload
Higher risks
Web Frameworks
There is no silver bullet...
Data binding
Routing
Structure
Templating
Performance
Building Tools
Why we need them?
Concatination
Minifying
Template caching
CSS compiling
Image spriting
Running tests
So...
Automation
Grunt
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['**.js'],
options: JSON.parse(require('fs').readFileSync('./.jshinrc'))
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};
Grunt
Grunt
Gulp
var jshint = require('gulp-jshint');
var gulp = require('gulp');
gulp.task('jshint', function() {
return gulp.src('**.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});Gulp
Gulp
NPM
"devDependencies": {
"jshint": "latest",
},
"scripts": {
"lint": "jshint **.js"
}NPM
Bower
front-end package manager
npm start
npm test
bower i
gulp less
gulp images
gulp fonts
gulp vendors
gulp lint
gulp js
gulp views
// Rebuild only files that change
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
gulp.task('default', function() {
return gulp.src('sass/*.scss')
.pipe(watch('sass/*.scss'))
.pipe(sass())
.pipe(gulp.dest('dist'));
});Q & A
(function() {
'use strict';
angular.module('linked', ['angularLinkedLists'])
.controller('LinkedController', LinkedController);
function LinkedController() {
this.data = [{
id: 213,
title: 'Ukraine',
}, {
id: 1,
title: 'Andorra'
}, {
id: 34,
title: 'Great Britain'
}, {
id: 75,
title: 'United States'
}];
this.selected = [this.data[0]];
this.updateOnServer = updateOnServer;
function updateOnServer() {
console.log('updateOnServer');
};
};
})();<div ng-controller="LinkedController as link">
<h2>Data out of directive</h2>
<pre>{{ link.data }}</pre>
<pre>{{ link.selected }}</pre>
<h2>Data in directive</h2>
<linked-lists data="link.data"
selected="link.selected"
selection-updated="link.updateOnServer()"
filterable>
</linked-lists>
</div>Introduction to SPA
By Mikki Churilov
Introduction to SPA
Building modern single page application for reality
