JS Ecosystem Overview

NodeJS

Runtime Environment for JS

built around V8 (Chrome)

basis for modern JS Development

Lets you run JavaScript on your machine - not just in the Browser

npm

package manager for JS Modules

contains over 500.000* plugins/tools/apps ...

handles your App dependencies in a clean way

Contains basically the whole ecosystem of JS

* source: www.modulecounts.com

babel

JS Compiler to make new JS Syntax compatible with older engines / browsers

customisable with many plugins

allows even special and new JS Features (e.g. JSX in React)

Use modern language features and still support old browsers!

webpack

Build tool to bundle your complete applications (JS, CSS, Assets etc.)
automatically resolves "imports" in JS which makes using modules easy
automates your whole build process

Reliably & automatically built your application with all needed plugins and assets

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'
};