Vorbereitungswoche 2

[larapollehn]

Tag 1

Lernziele

• Endlicher Automat für Frontend Entwicklung
• JavaScript
• TypeScript
• ReactJS
• Design patterns
• Xstate

TypeScript / JavaScript (1 Stunde)

• [ ] TypeScript pro tips / patterns https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680
• [ ] Proxy Design pattern https://refactoring.guru/design-patterns/proxy
• [ ] OOP Abusing https://refactoring.guru/refactoring/smells/oo-abusers

ReactJS (1 - 2 Stunden)

• [ ] Redux createStore https://redux.js.org/api/createstore
• [ ] Store API https://redux.js.org/api/store
• [ ] Redux Style Guide (very important) https://redux.js.org/style-guide/style-guide

Endlicher Automat (3 Stunden)

• [ ] Deterministischer endlicher Automat https://de.wikipedia.org/wiki/Endlicher_Automat
• [ ] SimpleClub https://www.youtube.com/watch?v=ztK5O0hT17s
• [ ] Beschreibe das mathematisches Modell für Endlichen Automat. Aus welchem Elementen besteht das Tupel. Beschreibe jedes Element jeweils.
• [ ] Was bedeutet ein Alphabet im Kontext von endlichen Automat? Was ist bedeutet eine Sprache im Kontext von endlichen Automaten?
• [ ] Wann akzeptiert ein Automat eine Eingabe? Wann wird eine Eingabe nicht akzeptiert?
• [ ] Unterschied zwischen vollständigen DEA und unvollständigen DEA?
• [ ] Wie kann man aus einem unvollständigen DEA einen vollständigen DEA machen?
• [ ] Mit welchen zweien Werkzeugen kann man ein Automatmodellieren?
• [ ] Zeichne bitte das folgende Automat
• [ ] Modelliere mit DEA eine Sprache, in der jedes Wort aus 0 und 1 besteht und
  • [ ] mit 0 beginnt und mit 1 endet
  • [ ] mindestens drei 1 beinhaltet
  • [ ] ein Teilstring 0101 beinhaltet
  • [ ] mind. 3 Zeichen lang ist und das dritte Zeichen 0
  • [ ] eine gerade Zahl von 0 beinhaltet.
• [ ] Wie hängen Zustanddiagramm und DEA zusammen?
• [ ] Endlicher Automat für Frontend Entwicklung https://blog.smartive.ch/what-state-machines-are-and-why-we-use-them-5ea55183be09

XState (3 Stunden)

• [ ] https://xstate.js.org/docs/tutorials/reddit.html#testing-it-out
• [ ] https://xstate.js.org/docs/tutorials/7guis/counter.html#modeling
• [ ] https://xstate.js.org/docs/examples/counter.html
• [ ] https://xstate.js.org/docs/examples/todomvc.html#todomvc-with-react
• [ ] https://xstate.js.org/docs/guides/start.html
• [ ] https://xstate.js.org/docs/guides/machines.html#configuration
• [ ] https://xstate.js.org/docs/guides/states.html
• [ ] https://xstate.js.org/docs/guides/statenodes.html
• [ ] https://xstate.js.org/docs/guides/events.html
• [ ] https://xstate.js.org/docs/guides/transitions.html#machine-transition-method

[larapollehn]

Tag 2

Lernziele

• Überblick über wichtige Technologien für Systemdesign neben HTTP Protokoll
• JavaScript
• TypeScript
• ReactJS
• XSTATE
• Design patterns

JavaScript/TypeScript (30 Minuten)

• [ ] Was ist JSDOC? Bitte etwas recherchieren
• [ ] Man kann mit einer Bibliothek aus JSDOC Dokumentationsseite automatisch generieren lassen https://github.com/jsdoc/jsdoc
• [ ] Lerne die Bibliothek Immutable kennen https://github.com/immutable-js/immutable-js
• [ ] Wie funktioniert NPM https://npm.github.io/how-npm-works-docs/index.html

Design patterns (30 Minuten)

• [ ] Dispensables https://refactoring.guru/refactoring/smells/dispensables
• [ ] Iterator Design pattern https://refactoring.guru/design-patterns/iterator

ReactJS/Redux (1 - 2 Stunden)

• [ ] Configure your store https://redux.js.org/recipes/configuring-your-store
• [ ] Usage with TypeScript https://redux.js.org/recipes/usage-with-typescript
• [ ] Using Object Spread Operator https://redux.js.org/recipes/using-object-spread-operator
• [ ] Reducing boilerplate https://redux.js.org/recipes/reducing-boilerplate
• [ ] Redux Undo https://redux.js.org/recipes/implementing-undo-history
• [ ] Immutable.JS https://redux.js.org/recipes/using-immutablejs-with-redux
• [ ] https://reactjs.org/docs/context.html
• [ ] https://reactjs.org/docs/higher-order-components.html

XState (3 Stunden)

• [ ] https://xstate.js.org/docs/guides/hierarchical.html
• [ ] https://xstate.js.org/docs/guides/parallel.html
• [ ] https://xstate.js.org/docs/guides/actions.html
• [ ] https://xstate.js.org/docs/guides/guards.html#guards-condition-functions
• [ ] https://xstate.js.org/docs/guides/context.html
• [ ] https://xstate.js.org/docs/guides/activities.html
• [ ] https://xstate.js.org/docs/guides/communication.html#the-invoke-property

Websocket kennenlernen (45 Minuten)

• [ ] Unterschied zwischen Polling und Server-sent-Events?
• [ ] WebSocket Überblick https://sookocheff.com/post/networking/how-do-websockets-work
• [ ] Demonstration mit JavaScript https://blog.teamtreehouse.com/an-introduction-to-websockets
• [ ] Was sind die wesentliche Unterschiede zwischen WebSocket und HTTP?
• [ ] Wie ist die Performanz zwischen WebSocket und HTTP? Erst überlegen dann Link clicken https://blog.feathersjs.com/http-vs-websockets-a-performance-comparison-da2533f13a77
• [ ] Besuche Socket.io https://socket.io/ und versuche damit etwas zu spielen. Lese die Dokumentation.
• [ ] Für was könnte man WebSocket verwenden, was man HTTP nicht einsetzen kann?
• [ ] Sollte man mit WebSocket Video Stream? Erst überlegen dann googlen
• [ ] Wo in tinylink könntest du dir einen Use Case vorstellen?

[larapollehn]

Tag 3

Lernziele

• Überblick über wichtige Technologien für Systemdesign neben HTTP Protokoll
• JavaScript
• TypeScript
• ReactJS
• XState
• Design patterns

JavaScript/TypeScript (90 Minuten)

• [ ] https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Concepts
• [ ] https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing
• [ ] https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals
• [ ] https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises
• [ ] https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
• [ ] https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach

Design patterns (45 Minuten)

• [ ] Technical debt https://refactoring.guru/refactoring/technical-debt
• [ ] When to refactor https://refactoring.guru/refactoring/when
• [ ] How to refactor https://refactoring.guru/refactoring/how-to
• [ ] Change preventers (bitte alle 3 lesen) https://refactoring.guru/refactoring/smells/change-preventers

ReactJS/Redux (2 Stunden)

• [ ] Isolate Redux Sub-Apps https://redux.js.org/recipes/isolating-redux-sub-apps
• [ ] Redux Code Splitting https://redux.js.org/recipes/code-splitting
• [ ] Basic Reducer Structure https://redux.js.org/recipes/structuring-reducers/basic-reducer-structure
• [ ] Splitting reducer logic https://redux.js.org/recipes/structuring-reducers/splitting-reducer-logic
• [ ] Refactoring reducers https://redux.js.org/recipes/structuring-reducers/refactoring-reducer-example
• [ ] https://redux.js.org/recipes/structuring-reducers/using-combinereducers
• [ ] https://redux.js.org/recipes/structuring-reducers/beyond-combinereducers
• [ ] https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape
• [ ] https://redux.js.org/recipes/structuring-reducers/updating-normalized-data
• [ ] https://redux.js.org/recipes/structuring-reducers/reusing-reducer-logic
• [ ] https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns
• [ ] https://redux.js.org/recipes/structuring-reducers/initializing-state

Xstate (2 Stunde)

• [ ] https://xstate.js.org/docs/guides/actors.html
• [ ] https://xstate.js.org/docs/guides/delays.html
• [ ] https://xstate.js.org/docs/guides/final.html
• [ ] https://xstate.js.org/docs/guides/history.html
• [ ] https://xstate.js.org/docs/guides/ids.html
• [ ] https://xstate.js.org/docs/guides/interpretation.html
• [ ] https://xstate.js.org/docs/guides/typescript.html#using-typescript

MongoDB kennelernen (45 Minuten)

• [ ] CAP Theorem https://de.wikipedia.org/wiki/CAP-Theorem
• [ ] Besuche MongoDB https://www.mongodb.com/nosql-explained
• [ ] MongoDB Review https://www.infoworld.com/article/3300619/review-mongodb-takes-on-the-world.html
• [ ] Stärke und Schwäche von MongoDB http://alronz.github.io/Factors-Influencing-NoSQL-Adoption/site/MongoDB/Results/Strengths%20and%20Weaknesses/
• [ ] PostgreSQL vs MongoDB. Was sagen andere Entwickler? https://dev.to/ben/postgresql-vs-mongodb-30b1

[larapollehn]

Tag 4

Lernziele

• Überblick über wichtige Technologien für Systemdesign neben HTTP Protokoll
• JavaScript
• TypeScript
• ReactJS / Redux
• Design patterns

Design patterns (1 Stunde)

• [ ] https://refactoring.guru/design-patterns/chain-of-responsibility
• [ ] https://refactoring.guru/design-patterns/state
• [ ] https://refactoring.guru/refactoring/techniques/simplifying-conditional-expressions

JavaScript / TypeScript (1 Stunde)

• [ ] https://flaviocopes.com/chrome-devtools-tips/
• [ ] https://www.keycdn.com/blog/chrome-devtools
• [ ] https://www.w3schools.com/js/js_errors.asp
• [ ] https://stackify.com/node-js-error-handling/

Redux / ReactJS (2 Stunden)

• [ ] https://redux.js.org/advanced/advanced-tutorial

Frontend engineering (1 Stunde)

• [ ] https://kevtiq.co/blog/scalable-front-end-architecture/
• [ ] https://blog.codeminer42.com/scalable-frontend-1-architecture-9b80a16b8ec7/
• [ ] https://www.outsystems.com/blog/posts/5_atomic_rules_for_starting_your_scalable_front-end_architecture/

ElasticSearch kennenlernen (45 Minuten)

• [ ] Was bedeutet für dich Indizierung (In Anlehnung auf PostgreSQL Index)?
• [ ] https://www.essentialsql.com/what-is-a-database-index/
• [ ] Wofür ist ein Such Feature notwendig bei einem digitalen Produkt?
• [ ] Lerne Elasticsearch kennen? https://www.ionos.de/digitalguide/server/konfiguration/elasticsearch/
• [ ] Überlege, wo könntest du ElasticSearch einsetzen?
• [ ] Ein Beispiel, wie man eine Suchmaschine für seine eigene Website einrichten kann https://www.elastic.co/blog/how-to-build-great-react-search-experiences-quickly
• [ ] Sowohl ElasticSearch als auch MongoDB setzen auf JSON. Was sind die Unterschiede zwischen beiden? https://medium.com/@ranjeetvimal/elasticsearch-vs-mongodb-631f410cd31
• [ ] Kann man mit PostgreSQL eine Suchmaschine implementieren? Selbst überlegen. Es gibt keine falsche Antwort
• [ ] Meinung von anderen https://www.quora.com/When-does-it-become-necessary-to-use-Elastic-Search-currently-using-PostgreSQL
• [ ] Überlege, wie du Elasticsearch bei tinyurl integrieren kann?

[larapollehn]

Tag 5

Lernziele

• Überblick über wichtige Technologien für Systemdesign neben HTTP Protokoll
• JavaScript
• TypeScript
• ReactJS
• Design patterns

Design patterns (2 Stunde)

• [ ] https://refactoring.guru/design-patterns/history
• [ ] https://refactoring.guru/design-patterns/criticism
• [ ] https://refactoring.guru/design-patterns/why-learn-patterns
• [ ] https://refactoring.guru/design-patterns/classification
• [ ] https://refactoring.guru/refactoring/techniques/moving-features-between-objects
• [ ] https://refactoring.guru/refactoring/smells/couplers
• [ ] https://refactoring.guru/design-patterns/adapter

ReactJS (2 Stunden)

• [ ] https://reactjs.org/docs/accessibility.html
• [ ] https://reactjs.org/docs/profiler.html
• [ ] https://reactjs.org/docs/portals.html
• [ ] https://reactjs.org/docs/events.html
• [ ] https://reactjs.org/docs/test-utils.html
• [ ] https://reactjs.org/docs/test-renderer.html
• [ ] https://reactjs.org/docs/how-to-contribute.html
• [ ] https://reactjs.org/docs/codebase-overview.html
• [ ] https://reactjs.org/docs/implementation-notes.html
• [ ] https://reactjs.org/docs/design-principles.html
• [ ] https://github.com/i18next/react-i18next

WebRTC kennenlernen (45 Minuten)

• [ ] Lerne P2P kennen https://www.digitalcitizen.life/what-is-p2p-peer-to-peer
• [ ] Was ist der Unterschied zwischen P2P und Server-Client-Architektur?
• [ ] Recherchiere, wie Online Video Konferenz Applikationen aufgebaut werden
• [ ] Welche Schwierigkeit stellst du dir vor bei Video Konferenz? Wo könnte der Flaschenhals liegen wenn man WebSocket für VideoÜbertragung nimmt?
• [ ] Lerne WebRTC kennen https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
• [ ] Bisschen mehr WebRTC http://www.voipcloud.at/was-ist-webrtc/

[ghost]

Tag 6

Lernziele

• JavaScript
• TypeScript
• Design patterns
• Plattformen für Programmierer kennenlernen

Design patterns (90 Minuten)

• [ ] https://refactoring.guru/design-patterns/prototype
• [ ] https://refactoring.guru/design-patterns/abstract-factory
• [ ] https://refactoring.guru/design-patterns/factory-method
• [ ] https://refactoring.guru/refactoring/smells/bloaters
• [ ] https://refactoring.guru/refactoring/techniques/organizing-data

JavaScript / TypeScript (1 Stunde)

• [ ] https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Numbers_and_dates
• [ ] https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Meta_programming
• [ ] https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Modules
• [ ] https://developer.mozilla.org/de/docs/Web/JavaScript/EventLoop
• [ ] https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Iteration_protocols
• [ ] https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Strict_mode
• [ ] corejs kennenlernen https://github.com/zloirock/core-js
• [ ] Drama um corejs https://entwickler.de/online/javascript/newsjs-corejs-updates-npmbomb-579924298.html

Plattformen (1 Stunde)

• [ ] https://entwickler.de/
• [ ] https://dev.to/
• [ ] https://www.reddit.com/r/cscareerquestions/top/?t=all
• [ ] https://www.reddit.com/r/SoftwareEngineering/top/?t=all
• [ ] https://www.reddit.com/r/computerscience/top/?t=all
• [ ] https://www.reddit.com/r/programming/top/?t=all