Advanced Web Technologies

Datum
18/01/2021 - 22/01/2021
Ganztägig
Kalender-Import: iCal

Veranstaltungsort
ETC Trainingcenter
Modecenterstrasse 22, 1030 - Wien




Für dieses Seminar werden folgende Kenntnisse empfohlen:

In dem Seminar „Advanced Web Technologies“ lernen Sie aktuelle Werkzeuge für die Webentwicklung zu nutzen. Wir lernen Node.js gezielt als Runtime unseres Developer Toolset einzusetzen, Pakete dynamisch über NPM zu laden, und unsere Lösungen, auch für ältere Browser kompatibel, mit Webpack zu bündeln.
Bei den eingesetzten Sprachen, JavaScript und TypeScript, legen wir Wert darauf, modernen Syntax zu verwenden und vermitteln aktuelle Konzepte wir Reactive Programming, sowie modulares, und funktionales Programmieren.
Wir vermitteln die neuesten Skills im Bereich responsive UI Design, auch am Beispiel von Bootstrap 4, und stellen aktuelle JavaScript Frameworks wie Angular, Vue.js und React vor. Wir behandeln die Themen Real Time Applications, Offline Verfügbarkeit und Nutzung von HTML APIs wie Gelolocation, Gerätezugriff.

Nach Abschluss dieses Seminars haben die Teilnehmer einen guten Überblick über modernes „Full-Stack-Development“

  • VS Code und Github nutzen
  • Modernes JavaScript & TypeScript schreiben
  • Node.js verstehen und einsetzen
  • Windows Subssystem for Linux 2 (WSL 2) for Developers
  • Verstehen des Reactiv Programmierpatterns mit RxJS
  • Implementieren eines Resposive User Interfaces mit CSS Grid & Flexbox
  • Verwenden von Bootstrap 4
  • Designing & Implementing Api’s & Graphs
  • Kennen von aktuellen JavaScript Frameworks: Angular, Vue.js, React
  • Implementieren von Real Time Anwendungen
  • Unterstützen von Offlineverfügbarkeit
  • HTML 5 APi’s & Device Access
  • Verwenden von Tokenbasierender Authentifizierung
  • Integration Sozialer Netzwerke und Dienste: Facebook & Paypal

Neue Themengebiete werden anhand von Folien, Demos und durchgängigen Beispielen erarbeitet. Am Ende jedes Tages gibt es ca. 2 Std „Lab of the day“ mit Aufgabenstellung, dazugehöriger Lösung und der Möglichkeit, diese zu diskutieren. Alle Beispiele werden über Github verteilt – als Editor setzen wir Visual Studio Code ein. Wir verwenden Branches, um schnell, und vor Allem übersichtlich zwischen den verschiedenen Entwicklungsstadien wechseln zu können.
 
Dieses Seminar richtet sich an:

  • Web-Entwickler, die ihr Wissen vertiefen und sich mit den aktuellen Webtechnologien vertraut machen wollen

Using VS Code

  • Visual Studio Code Essentials (Settings, Keybinding, …)
  • Useful Extensions Visual Studio Code
  • Using Online Editors: Stackblitz

 
Introduction to Git & GitHub

  • Git’s Role in modern CI / CD
  • Using GitHub – Repos, Basic Commands, Branching & History
  • Creating Issues and Linking them to Code
  • Forking, Pull Requests & Git Flow
  • Repo Documentation using Markdown
  • Introduction to Github Actions

 
Using modern JavaScript

  • History of ECMA Script Standards
  • ES6 Array Helpers & Utility Functions
  • Classes, Inheritance
  • Global Scope, Modules, Exports- und Imports
  • Async Operations using Fetch Api, Promises & Async Await

 
Introduction to TypeScript

  • TypeScript Overview & Language
  • Debugging using Source Maps
  • Types, Functions & Enums
  • Using 3rd Party Libraries & Type Definitions
  • Objects, Classes, Interfaces, Enums
  • Ensuring Code Quality using TSLint & Prettier

 
Node Based Development Basics

  • Node.js Role in modern Web Development
  • Node Basics & Configuration
  • Package Management using NPM & Yarn
  • Task Automation using NPM- & Gulp Scripts
  • Creating Webpack Bundles
  • Ensuring Browser Compatibility using Polyfills & Shims
  • Creating & Publishing NPM Packages

 
Windows Subsystem for Linux 2 (WSL 2) for Developers

  • Why WSL 2 / Introduction & Benefits
  • WSL 2 & Docker Desktop Configuration
  • VS Code Extensions that support WSL 2
  • Configuring & Hosting Websites using NGINX
  • Understanding & Building Docker Containers
  • Using Kubernetes on your local Developer Machine

 
Designing & Implementing Api’s & Graphs

  • Rest Api’s Overview
  • Client Side vs Server Side Data Models
  • Using Swagger to Design / Document the Api
  • Implementing Api’s using Common Frameworks (Node.js, .NET Core, NestJS)
  • Implementing Graphs using GraphQL & Appllo Server

 
Implementing a Responsive User Interface

  • Understanding Mobile First
  • Understanding Media Queries and Responsive Breakpoints
  • Units: px, % versus rem, em, vh
  • Effective HTML using Emmet
  • Syntactically Awesome Style Sheets Basics (Sass)
  • Sass Mixins, Partials & Imports
  • Style Isolation using Shadow Dom & Web Components
  • Understanding & and sing Flexbox & CSS Grid
  • Web Fonts & Icons
  • Introduction to Bootstrap

 
Overview current JavaScript Frameworks

  • Angular Introduction
  • Angular – Hello World
  • React Introduction
  • React – Hello World
  • Vue.js Introduction
  • Vue.js –Hello World

 
Understanding Reactive Extensions for JavaScript – RxJS

  • Understanding & using the Benefits of Reactive Programming
  • Functional Programming & Immutability
  • Observer, Observable, Subject
  • Observable Operators

 
Introduction to Real Time- & Offline Apps

  • Use Cases for Real Time Apps
  • Common Real Time Libraries
  • Implementing Real Time Apps 
  • Understanding Offline First
  • Local Storage, Indexed DB & Web SQL
  • What are Progressive Web Apps (PWA)
  • Progressive Web Apps Hello World

 
HTML 5 APi’s & Device Access

  • Overview Device Access & HTML Apis
  • Geolocation & Media Capture
  • Device Orientation Events
  • Other APIs (Battery Status, Vibration, Bluetooth …)

 
Introduction to Token Based Authentication

  • Classic vs Token Based Authentication
  • OpenID Connect, JSON Web Tokens (Jwt) & oAuth
  • Using Social Authentication

 
Consuming Common Social Services

  • Facebook Introduction
  • Consuming Facebook Graph
  • Using the Paypal SDK

Kategorien


Mehr Artikel

News

TeamViewer kauft Linzer Xaleon

Das 2018 gegründete Linzer SaaS-Unternehmen Xaleon (vormals Chatvisor) wurde an das DAX-Unternehmen TeamViewer verkauft. Das Customer-Engagement-Lösung für mehr Kundenzufriedenheit ist dem Käufer einen zweistelligen Millionenbetrag zuzüglich eines signifikanten vierjährigen Cash-Earn-Outs wert. […]