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

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

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>