/typescript-react-for-java-developers

Crash course for Java Backend Developers to Full-stack Developers. 24 hrs / 3 days.

Frontend development with TypeScript and React for Java backenders

Crash course for Java Backend Developers to Full-stack Developers. 32 hrs / 4 days

Attendee prerequisites

  • Java Backend Developer experience up to 3 yrs.

Training Objectives

Prerequisites

Hardware

  • RAM ≥ 8Гб
  • Wi-Fi with Internet access

Software

Network Access

  • github.org :443 :80

Agenda

Training introducing and focusing (0.5 hrs)

  • Schedule
  • Trainer
  • Training overview
  • Rules

Hands-on: teams and their demand (0.5)

  • Pairs forming and introduction
  • Attendees prerequisites check
  • Topics focus demand from attendees
  • Additional topics demand form attendees

ES/TS runtime architecture (1.5)

Node.js as JVM

  • Node.js goals
  • Node.js architecture
  • Node.js limitations

Demo

  • "Hello World" with JavaScript and Node.js

Browser as target OS

  • Emdedding ES into HTML page
  • Browser DOM as target OS API
  • Browser events
  • DOM manipulations
  • Style manipulations

Demo

  • "Hello World" with ES and browser

Sound-check (0.5)

Hands-on

  • Fork training repo and clone this fork
git clone --branch master --depth 1 https://github.com/eugene-krivosheyev/typescript-react-for-java-developers
  • Open project with IDEA

Demo

  • Application architecture overview
  • Application full build and run demo

SPA application architecture (1.5)

SPA goals

  • Why SPAs?
  • Limitations

HTML and CSS overview

  • Core HTML
  • DOM overview
  • HTML containers

SPA layout overview

  • SPA architecture
  • CORS technology

React components

  • Why React?
  • React components overview
  • React Virtual DOM architecture
  • React Router

Hands-on iteration 00: Analysing application HTML and CSS assets (0.5)

Given

  • HTML and CSS assets

When

  • Team change application screens background color

Then

  • Team understand SPA layout architecture

TS SPA building and running (1)

TS SPA building

  • NPM as Maven
  • NPM dependencies management
  • NPM build cycle
  • Main build goals
  • TS to JS transpiling issues

TS SPA packaging

  • Stand-alone packaging
  • Packaging with back-end application

Hands-on iteration 01 (0.5)

SASS (1)

  • SASS overview
  • SASS builders
  • Bootstrap intro
  • DB WebADK standard components lib

Hands-on iteration 02 (0.5)

TS SPA Code quality and debugging (0.5)

TSLint tool

  • TSLint as Java static code analysis tools
  • Running tslint within build

Debug

  • Debugging web app with Chrome
  • TS debugging with IDEA
  • Browser hot reloading
  • Backend stubs

Hands-on iteration 03 (0.5)

TS Syntax Overview against Java key features (1.5)

Packages and JARs

  • Namespaces
  • Modules system

Classes and interfaces

  • Classes
  • Properties
  • Inheritance
  • Interfaces
  • Generics

Objects

  • Basic and complex types
  • Instance/Object

Methods

  • Functions
  • Arguments
  • Arrow functions

Variables

  • Local variables and scope

Excepions

  • Exceptions

Hands-on iteration 04 (1)

TS Type System (1.5)

Basic Types

  • Introduction
  • Boolean
  • Number
  • String
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null and Undefined
  • Never
  • Object

Advanced Types Overview

  • Intersection Types
  • Union Types
  • Type Guards and Differentiating Types
  • Nullable types
  • Type Aliases
  • String Literal Types
  • Numeric Literal Types
  • Enum Member Types
  • Discriminated Unions
  • Polymorphic this types
  • Index types
  • Mapped types
  • Conditional Types

Decorators

  • Decorator
  • Factory

Hands-on iteration 05 (1)

React with TS (1.5)

Setting up TS + React project

Router

  • Add React Router dependency
  • Implement routes

Components

  • React Component
  • Props and Types
  • Cross-component communication
  • Functional/stateless components
  • Class/stateful components
  • Implementing higher-order components
  • React Hooks

Hands-on iteration 06 (1)

Async backend communication (1.5)

Asyncronous operations

  • TS parallelism model
  • Promices
  • async/await

WebSockets architecture

  • WebSockets and how it works
  • Blocking / non-blocking interactions over WS

HTTP clients overview

  • typescript-http-client
  • typed-rest-client
  • axios

REST API calls with typed-rest-client

  • Type safety
  • API overview
  • Errors handling

Hands-on iteration 07 (1)

Redux & Saga (1.5)

Functional design overview

  • Functional design

Redux

  • Redux architecture
  • Provider
  • Store
  • Action Creator
  • Reducer
  • Action Type
  • Selector

Redux-Saga

  • Saga architecture
  • Helper
  • Effect
  • Generator
  • Dispath
  • Error

Hands-on iteration 08 (1)

Testing SPA (1)

Autotests overview

  • Structure
  • Test Data
  • Scope
  • Test Doublers

Testing with Jest

Testing with enzym/react-testing-library/redux-saga-test-plan

Hands-on iteration 08 (1)

Final Retro (0.5/0.5)

Given

  • Knowledge got from training
  • Skills got from training
  • Artifacts got from training

When

  • Team retro

Then

  • Objectives fullfiled, burndown
  • Insightes
  • 𝚫+
  • Stated next actions