JavaScript technologies

Introduction

Horváth, Győző
senior lecturer
horvath.gyozo@inf.elte.hu

Financed from the financial support ELTE won from the Higher Education Restructuring Fund of the Hungarian Government

Table of Content

  • Prerequisites
  • JavaScript in the wild
  • Evolutions
  • Syllabus

Prerequisites

Previous courses

  • The basics of programming
  • Web development 1.
  • Web development 2.

Prerequisite knowledge

  • HTML
  • CSS
  • JavaScript
    • ECMAScript 3
    • DOM basics
    • Event handling
    • Important HTML5 APIs
  • PHP
    • templates for generating output
    • handling input, form processing
    • persisting data (file)
    • session handling
    • authentication (log in/out)

Scope of the course

Introduce modern paradigms in web developments on the basis of the prerequisite knowledge.

Introduce modern JavaScript tools in web development.

Using JavaScript both on the client and server side leading to full-stack JavaScript development.

JavaScript in the wild

Usage of JavaScript

  • browsers
  • servers
  • databases (MongoDB, SAP Hana)
  • task runners (Grunt, Gulp, Broccoli)
  • shell scripting
  • embedded systems (Arduino)
  • desktop environments (Windows, Gnome3)
  • desktop applications (Atom, VSCode)

Evolutions

Evolution of the JavaScript language

ECMAScript standards

  • 1997: 1. version
  • 1999: 3. version
  • 2009: 5. version (ES5)
    • bug fixing
    • minor changes, improvements
  • 2015: 6. version (ES6, ECMAScript 2015)
    • major improvements
    • modern features

Evolution of browsers

  • 1996-1999: 1st Browser War
    • Netscape vs IE
  • 1999-2008: 2nd Browser War
    • alternate browsers
  • 2008-: 3rd browser war
    • speed and efficiency

Evolution of web tools

From Firebug to complex development pipelines

  • alerts
  • console
  • debugger
  • package managers
  • task runners
  • transpilers and compilers
  • remote debugging
  • headless environments
  • sandboxing

Evolution of text editors

  • Notepad++
  • Eclipse
  • Netbeans IDE
  • Sublime Text
  • WebStorm
  • Atom
  • Visual Studio Code

Evolution of frameworks

  • 2006: jQuery
  • 2011: Backbone.js
  • 2012: Ember.js
  • 2013: AngularJS
  • 2014: React
  • 2015: Flux-like frameworks

Evolution of architectures

  • jQuery + plugins
  • module pattern (Crockford)
  • MVC, MVP, MVVM, MV*
  • Separate modules connected with an event bus
  • Two-way binding
  • Unidirectional data-flow
  • Component-based architectures

Evolution of view abstractions

  • DOM
  • jQuery
  • templates
  • virtual DOM
  • components

Syllabus

  • Language as a tool
  • Tools in web development
  • Client side
  • Server side
  • Database side
  • Live applications

Language as a tool

  • Objects in JavaScript
  • Functions
  • ES5 features
  • Some ES6 features

Tools in web development

  • package managers
  • module loaders
  • task runners
  • transpilers

The client side

  • Native/naive solutions
  • jQuery
  • templates
  • Backbone as a basic abstract layer around state and views
  • Marionette: refining Backbone views
  • Virtual DOM
  • React
  • Flux
  • Redux

The server side

  • Node.js basics
  • Express.js
  • Typical web tasks in Express
    • generating output
    • handling input
    • persist state
    • session handling
    • authentication
  • REST APIs

The database side

  • NeDB
  • MongoDB

Live applications

  • Websockets
  • Socket.io