INF397 Full Stack Technologies View Schedule Print

Frontend Overview

The browser

  • has been evolving for more than 20 years
  • recognizes the multitudes of interests that exist within a web application
  • is mostly open, transpent and easy-to-use
  • privides a built-in IDE for debugging and analysing your application

Parts of an web app's frontend:

  • Html, Css, JavaScript
  • Tests, Documentation
  • Configuration and Localization strings
  • Images, Sounds, Videos, Fonts
  • and all the supporting infrastructure


  • DOM, Rendering, the Event loop
  • Networking (Ajax) - Headers, Query Params, etc
  • Web APIs: History, Routing, Storage, Caching
  • Web APIs: Geolocation, Canvas, Audio
  • Security
  • Tracking, Analytics and Ads
  • Web Components, Web Workers, Web Assembly

Displaying a static page

Displaying a scripted page

Technical trade-offs:

  • Single Page vs Reloading
  • Server side vs Client side rendering
  • Newer features vs older browsers suppot
  • Resource bundling vs no build step
  • Various tools and framework choices
  • Various design and usability choices

Application structure

Model-View-Controller vs Components

Two-way binding vs Unidirectional data flow

Frontend Frameworks

  • Angular
  • Aurelia
  • Polymer
  • React
  • Vue

and many others


  • Code injection (XSS)
  • Malicious communication (Tracking)
  • Data Leak / Loss (Phishing)
  • Dark patterns

Course Schedule:

week 1 03.02.2017 History of the web Fullstack Principles Development Processes Agile Processes DevOps Basics Git
week 2 10.02.2017 Frontend Overview Backend Overview Network Overview Testing JavaScript Overview JavaScript Tooling
week 3 17.02.2017 Web Architectures RESTful principles SOLID principles Web Components Continuous Integration
week 4 24.02.2017 Databases basics Using APIs Deployment Automation Monitoring In-class project consultations
week 5 17.03.2017 Project presentations
Final Test
Course Retrospective and Q&A