JS Ecosystem Overview

gulp

• gulpfile
• multiple tasks
• piping
• plain JS
• 3349 plugins

gulp.task('somename', function() {
  gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest(
        'build/minified_templates'
    ));
});

grunt

• gruntfile
• configuration separate
• 6304 Plugins

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: ''
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

JS Frameworks

What are JS Frameworks?

In it's core, all JS Framework do one big thing:

They handle DOM Manipulations for you.

In other Words:

They synchronize the state of JS-Objects with your HTML

Why do we need them?

• state handling is difficult
• testing DOM-State is hard
• DOM Manipulation is hard to do "right"
• allows component based development
• allows more declarative code

Angular

• the first REALLY popular JS Framework by Google

• AngularJS (old)
  Angular2/4/5 (new)

• offers a big toolkit for large applications

React

• JS Framework by Facebook

• uses special .jsx Files (JS + HTML in one File)

• Focuses on component based Development

• often combined with Redux

Ember

• complete solution (MVC)
• set of tools
• convention over configuration

Vue

• view framework
• easy to pick up
• no routing, state, etc.

Toolkits

jQuery

• DOM manipulation
• allrounder
• huge library
• many plugins

Lodash

• utility library
• performance improved
• modular importing
• especially arrays

Ramda

• functional programming
• atomic functions
• easy to read
• hard to learn

Typescript

• superset of Javascript
• needs compilation
• adds types and interfaces

// Correct
var user1 = {
    name: 'Arnold',
    age: 11
};

// user2.age is undefined
var user2 = {
    name: 'Lisa'
};

interface User {
    name: string;
    age: number;
}

// Correct
var user1: User = {
    name: 'Arnold',
    age: 11
};

// Throws compiler error
var user2: User = {
    name: 'Lisa'
};