Commit f8a7208b authored by micha's avatar micha
Browse files

progress

parent 6a16ae06
<!-- Course Image --> <!-- Course Image -->
![](./assets/images/Reactive-architecture-and-ux-patterns_angular_michael-hladky.png) ![](docs/assets/images/Reactive-architecture-and-ux-patterns_angular_michael-hladky.png)
<!-- Course Title --> <!-- Course Title -->
# Reactive Architecture and UX Patterns # Reactive Architecture and UX Patterns
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<!-- Course Description --> <!-- Course Description -->
<!-- Course Description Intro Images --> <!-- Course Description Intro Images -->
![](./assets/images/Reactive-architecture-and-ux-patterns_secondary_angular_michael-hladky.png) ![](docs/assets/images/Reactive-architecture-and-ux-patterns_secondary_angular_michael-hladky.png)
<!-- Course Description Text --> <!-- Course Description Text -->
......
# [EPISODE_NAME] - Theory
## Intro
<!--
General usage, type transformations, behaviour
-->
## Marble diagram
![[EPISODE_NAME]-[DIAGRAM_NAME]](../assets/images/episode-one_diagram1.png)
## Example Snippet
<!--
The snippet should
- include all used imports
```typescript
import { Observable, from } from 'rxjs';
import { map } from 'rxjs/operators';
```
- use typings as little as possible
- use the `$` convention
- name sources `source$`, `source1$`, `sourceA$`
```typescript
const source$ = from([1, 2, 3]);
```
- name resulting compositions `result$`, `result1$`, `resultA$`
```typescript
const result$ = source$.pipe(
...
);
```
- should have one operator per line in the `pipe` section
```typescript
source$.pipe(
map(...),
filter(...)
);
```
- if possible, should have comments in the same line
```typescript
source$.pipe(
map(...), // transformation here
filter(...) // only valid emissions
);
```
- should have subscribe block in the same line
```typescript
result$
.subscribe(
...
);
```
- should have an observer object as it's most clear
```typescript
result$
.subscribe({
next(num: number) { console.log(num); }
});
```
- should have emissions comma separated and in the same line. The type should be clearly visible
```typescript
result$
.subscribe({
next(v) { console.log(v); } // false, 1, 'two', '3', {}, []
});
```
- name resulting subscriptions `subscription`, `subscription1`, `subscriptionA`
```typescript
const subscription = result$
.subscribe({
...
});
```
-->
## Example explanation
# Workspace Folder:
Following workspace structure is assumed:
**Root structure**
```
├── root
│ ├── ...
│ ├── docs
│ │ ├── assetc
│ │ │ ├── images
│ │ │ │ ├── img1.png
│ │ │ │ └── img2.png
│ │ │ └── overview.md
│ ├── angular.json
│ └── package.json
└───src
│ ├── app.component.ts
│ ├── app.menu.ts
│ ├── app.routes.ts
│ └─── app.module.ts
└───projects
├── episode-1
│ ├── src
│ │ ├── lib
│ │ ├── docs
│ │ │ ├── assets
│ │ │ │ └── images
│ │ │ │ ├── img1.png
│ │ │ │ └── img2.png
│ │ │ └── episode-1.overview.md
│ │ ├── exercises
│ │ │ ├── session-1
│ │ │ │ ├── docs
│ │ │ │ │ ├── assets
│ │ │ │ │ │ └── images
│ │ │ │ │ │ ├── img1.png
│ │ │ │ │ │ └── img2.png
│ │ │ │ │ ├── session-1.tyeory.md
│ │ │ │ │ ├── session-1.exercise.md
│ │ │ │ │ └── session-1.solution.md
│ │ │ └── session-[n]
│ │ ├── episode-1.component.ts
│ │ ├── episode-1.menu.ts
│ │ ├── episode-1.routes.ts
│ │ └── episode-1.module.ts
```
# Episode Structure:
Following episode details are assumed:
**episode-one structure**
```
libs
└───episode-one
│ │ README.md
│ │ ...
│ └───src
│ └───lib
│ │ index.ts
│ │ episode-one.routes.ts
│ │ episode-one.module.ts
│ │ episode-one.menu.ts
│ │ …
│ └───exercise
│ │ episode-one.theory.md
│ │ episode-one.exercise.md
│ │ episode-one.solution.md
│ │ episode-one.exercise.component.ts
│ │ episode-one.solution.component.ts
│ │ …
│ └───assets
│ │ slides.pdf
│ │ episode-one.theory.mp4
│ │ episode-one.exercise.mp4
│ │ episode-one.solution.mp4
│ │ …
│ └───images
│ image-one.png
│ image-two.png
│ …
└───episode-two
└───episode-three
└───...
```
## `exercise` folder
### `episode-one.theory.ts`
# Course/Series Structure:
Following course/series details are assumed:
**course-one structure**
```
apps
└───course-one
│ │ README.md
│ │ ...
│ └───src
│ └───app
│ │ app.module.ts
│ │ app.routes.ts
│ │ app.menu.ts
│ │ app.component.ts
│ │ ...
│ └───assets
│ course-one.heading.png
│ …
└───course-two
└───course-three
└───...
```
TODO:
Content für ersten 3 Kapitel (bis einschließlich Top 10 Operatoren)
<!-- Course Image -->
![](docs/assets/images/Reactive-architecture-and-ux-patterns_angular_michael-hladky.png)
<!-- Course Title -->
# Reactive Architecture and UX Patterns
<!-- Course Tagline -->
#### Getting the tools and understanding to craft fully reactive angular applications!
<!-- Course Description -->
<!-- Course Description Intro Images -->
![](docs/assets/images/Reactive-architecture-and-ux-patterns_secondary_angular_michael-hladky.png)
<!-- Course Description Text -->
## Overview
Welcome to my course! My name is Michael and I will lead you through this course.
The title of this course is reactive architecture and UX patterns.
As those are pretty broad terms let be elaborate a bit on the scope and target audience.
## Level of this Course
First the level. For this course, you definitely need some fundamental knowledge about RxJS,
and you should use it regularly in your Angular projects.
General terms like subscription handling, multi-casting, or hot/cold Observables should at least ring a little bell.
If this is not the case no big deal. As this, in an online course, you can consume it as fast or slow as you like.
It's all about fun and explores new things, so the most important to enjoy! :)
## Content and Learning Goals
This course starts with the fundamentals of the different operator groups we will use,
and points out some interesting details.
With that in mind, we will start to work on our first patterns.
Exercises we will master are:
- Combining streams
- Overview of combination the operators
- Deriving state from HTTP calls
- Prevent over fetching with simple Http Caching
- Editing and user-controlled opt-In updates
- Optimize View updates and Performance
- Comparison of the combination patterns
- Reactive State-Management
- State aggregation
- Model vs ViewModel
- Sharing state and instances
- Lazy-ness and component initialization
- Immutability and gotchas in operators
- Higher-Order Operators
- Overview of the different flattening strategies
(merge, concat, exhaust, switch)
- Usage in the user Interface
- Usage in business logic or data layer interaction like effects/epic of REDUX
- Resilience and Error-Handling
- HTTP error handling
- In-depth understanding of error handling
- How to encapsulate error-prone code
- Offline caching and polling with exponential backoff
- Comparison of the different retry & repeat mechanisms
Let’s jump right in and start with the first section.
# forkJoin
Learn about forkJoin by combining HTTP request.
# `forkJoin` creation function - Theory # forkJoin behavior and gotchas
This exercise is about combining data coming from multiple HTTP Endpoints into one single set of data. This exercise is about combining data coming from multiple HTTP Endpoints into one single set of data.
Combination operators or creation functions enable us to process emissions Combination operators or creation functions enable us to process emissions
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment