MS Teams: WebApps Forår 2022
General: d. 04.02 kl. 9.10 - Introduktion

Goal for this Course?
WebTechnologies.docx (Overview 2021)
StateOfJs (2020) (JS Overview 2020)

LinkedIn Learning (Lynda.com): Create a linkedIn Learning Account (free for Zealand-students)
Udemy.com (not free, but the price is only about 10-20 euro per course)

Synopsis:
Synopsisdescription.html
Synopsis ideas

Examples:
Blazor.pdf
Jsoup.pdf
Crossplatformframeworks.pdf
ReactHooks.pdf

JavaScript
http://www.w3schools.com/js/default.asp

LinkedIn Learning courses:
You can find many good courses on LinkedIn Learning eg:
JavaScript Esential Training with Simon Allardice (Very basic introduction)
Introducing the JavaScript Language with Joe Chellman (Very basic introduciton)
JavaScript: Functions with Ray Villalobos (Medium)

ECMAscript, ES2015 (ES6), ES20XX
Video
JavaScript - Understanding the Weird Parts (the first 3.5 hours)
Learning ECMAScript 6 (with Eve Porcello)

Recommendation:
Udemy: JavaScript - Understanding the Weird Parts (Price ~ 11 euro, for the full 11 hours course)

New in ES2015 (ES6):
let
class
const
Arrow function "=>"
Template Literals (Template Strings) back-tick (` `) and String interpolation

ECMAscript 6 compability table

Anjana Vakil: Learning Functional Programming with JavaScript

Array-Helper-Methods:
MDN web doc, Moz://a:
forEach
map
filter
find
every
some
reduce

Notes:
JavaScriptAdvancedPart1.pptx
JavaScriptAdvancedPart2.pptx
JavaScriptAdvancedPart3.pptx
ExecutionEnvironment.docx (Word Dok in DK, Henrik H)
ArrayHelperMethods.zip (Word Dok in DK, Henrik H)

Examples (Code demonstated in the class):
Part1 - Hoisting.zip (VSCode)
Part2 - Prototype.zip (VSCode)

Examples/Solution (ArrayHelperMethods):
Part3 - ArrayHelperMethods.zip (VSCode)

Exercise 0:
If JavaScript is "new" to you (or you fell very rusty in JS)
Do the exercises in Codecademy:
Codecademy: https://www.codecademy.com/learn/introduction-to-javascript

Exercise 1:
Watch the video: JavaScript - Understanding the Weird Parts
(Recomandation: speed 1.25 and stop at 1:50)
Answer the questions - What is:

• Lexical Environment vs. Execution Context?
• The Global object?
• this?
• Hoisting?
• Function invocation and Execution stack?
• undefined?
• "undefined" vs "not defined"?
• "==" vs "===" when to use?

Write a short note and find some code-samples that demonstrate the term/concept

Exercise 2:
Watch the video: Learning Functional Programming with JavaScript

Look at the note: ArrayHelperMethods.zip and do the exercises:
ArrayHelperMethods.zip (Word Dok in DK)
ArrayHelperMethods.zip (Word Dok in Eng)
 

MS Teams: WebApps Forår 2022
General: d. 11.02 kl. 9.10 - Introduktion

JavaScript ( JS Advanced Part 4)

Callbacks
Closures
Promise
Concurrency and event loop
Asynchronious callbacks
Destructuring assignment
Spread Syntax [... ]

ES2017
Async/Await

Video (YouTube)
Philip Roberts: What the heck is the event loop anyway? (Understanding CallBacks, 26 min)
Techsith: JavaScript callback functions (15 min)
Techsith: JavaScript promises (13 min)

Webpages:
W3Shools: JavaScript Closures
DailyJS: I-never-understood-js-closures
MDN web docs: Concurrency model and Event Loop
Async JS: From Callbacks, to Promises, to Async/Await (Blog, by Tyler McGinnis)
https://tylermcginnis.com/async-javascript-from-callbacks-to-promises-to-async-await/

Moz://a-Hacks: Destructuring
MDN web docs: Spread Syntax

Notes:
Closures og Callback functions.docx (Word Dok in DK, Henrik H)
JavaScriptAdvancedPart4.pptx

Extra material:
Kyle Simpson: Advanced Async and Concurrency Patterns in JavaScript (Promises / Generators) (Skip the first 7 min. ;))
Arindam Paul - JavaScript VM internals, EventLoop, Async and ScopeChains (38 min)

Examples (Code demonstated in the class):
JavaScriptAdvanced.zip (Opdateret 11.02.22)

Exercise:
ClosuresOpgaver.zip (Word Dok in DK)
PromiseOpgaver.zip (Word Dok in DK)

ClosuresExercise (Word Dok in Eng)
PromiseExercise (Word Dok in Eng)

Recommendation:
Udemy: Modern React with Redux [2020 update] (Price ~ 12 euro, for the full 47.5 hours course)

Video (YouTube)
Mosh: Learn React - React Crash Course 2019
Techsith: React
freeCodeCamp: Lean React.js - Full Course for Beginners - Totorials 2019

React
Links (React):
https://reactjs.org/
JSX In Depth
Functional vs class components in React
How to pass props to components in React
https://www.w3schools.com/react/default.asp

Note:
React.pptx

Examples (Code demonstated in the class):
jsx.zip
card.zip
season.zip
pics.zip (uses axios: npm install --save-dev axios)
PicsOverview.docx

Notice:
The zip files contain only src and public folders, i.e. to run the projects you must first install the project. Unzip the project in your React folder. Open VSCode, navigate to your new project folder and install the project (type: npm install in the terminal vindow) and run the project with npm start.

Exercise:
ReactExercise1 (Basic - JSX)
ReactExercise2 (Clock)
ReactExercise3 (Movie-input-output)

Solutions:
React-movie-input-output-solved.zip
React-movie-input-output-moviedb.zip (som ovenstående men med TheMovieDb istedet for Mock-data)
component-test-src.zip (Clock)

React Redux

Note:
How to share React projects: ReactAppFiles

Redux
https://redux.js.org/introduction/getting-started

• Core Concepts
• Three Principles
• Actions
• Reducers
• Store

Very interesting article explaining the relationship between Redux reducers and the Array-Method .reduce( ):
https://medium.com/@thejasonfile/the-redux-reducers-and-reduce-puzzle-ecc935191fbf

React Redux
https://react-redux.js.org/introduction/quick-start

• connect( )
• Provider
  

Examples (Code demonstated in the class):
ReactCounterAppOverview.docx
React-Redux-Songs-Overview.docx
counter.zip (Redux)
songs.zip (React-Redux)

Exercise:
ReduxExercise
ReactReduxExercise1
ReactReduxExercise2

Solutions:
color.zip (ReduxExercise) (Vanilla js uden React)
react-redux-counter-solved.zip (ReactReduxExercise1)
React-Redux-Count-Overview.docx
react-redux-movie-input-output-solved.zip (ReactReduxExercise2)

React Router v4 (v5+v6)
https://blog.pshrmn.com/entry/simple-react-router-v4-tutorial/
https://reacttraining.com/react-router/web/guides/quick-start

React-Router - Dynamic Routing (Philosophy):
https://reacttraining.com/react-router/core/guides/philosophy

A Complete Guide to React Router: Everything You Need to Know (by Tyler McGinnis) (Updated!)
https://ui.dev/react-router-tutorial

URL Rarameters with React Router (Blog, by Tyler McGinnis)
https://tylermcginnis.com/react-router-url-parameters/

Pass props to React Router's Link component (Blog, by Tyler McGinnis)
https://ui.dev/react-router-v4-pass-props-to-link (Check also v6)

React-Router - <NavLink>

Redux Thunk
https://github.com/reduxjs/redux-thunk
https://daveceddia.com/what-is-a-thunk/
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60

Lodash: https://lodash.com/

Examples (Code demonstated in the class):
react-router.zip

Exercise:
ReactRouter.docx (finish the drawing, with references)
ReactRouterExercise1 (basic)
ReactRouterExercise2 (movie-router)

Solutions:
ReactRouter(solution).docx
ReactRouterExercise1.zip (basic)
ReactRouterExercise2.zip (movie-router)

Examples (Code demonstated in the class):
blog.zip

React-Redux-Router-Overview.-Movie.docx
React-Redux-Thunk-Overview.docx
Behind-the-scenes-of-Redux-Thunk.docx

Exercise:
ReduxThunkExercise1

Solutions:
ReduxThunkExercise.zip (formular1 - under construction)

TypeScript (Updated!)
Anders Hejlsberg: Introducing TypeScript
Anders Hejlsberg: What's new in Typescript

TypeScript for JavaScript programmers:
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

The TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html

Classes: https://www.typescriptlang.org/docs/handbook/2/classes.html
Objects: https://www.typescriptlang.org/docs/handbook/2/objects.html
Overloading TypeScript functions: https://visualstudiomagazine.com/articles/2015/11/01/overloading-typescript-functions.aspx
Modules (imports and exports): https://www.typescriptlang.org/docs/handbook/modules.html

Video (LinkedIn Learning)
TypeScript Essential Training with Jess Chadwick

TypeScript Playground

Understanding ES6 Modules
import
export

WebPack 2
What is Webpack?

Video (Lynda.com)
What is Webpack?

Exercise: (Install: Node + npm, Git and TypeScript)
Install Node + npm (download: https://nodejs.org/en/)
Verify that it works by running: node -v

Install Git (download: https://git-scm.com/)
Verify that it works by running: git --version

Install the TypeScript compiler globally by issuing:
npm install -g typescript
Verify the compiler works by running
tsc -v

Exercise: (Typescript)
Exercise1-TypeScript.html
Exercise2-TypeScript.html

Solutions:
Exercise1-TypeScript.zip
Exercise2-v2-typescript.zip (Updated!)

Exercise: (Webpack)
Exercise3-Webpack.html (Extra exercise - only if you have time left)

Solutions:
Exercise3-Webpack.zip (JS-Modules)

12
25/3

Angular Intro

Angular

Component interaction (Input/Output)

Routing & Navigating

Angular
Henrik Høltzer: Angular - the PIXI Book (draft - under construction)
Slides:
Angular.pptx
Introduction to Angular.ppt
Angular-Input&Output.ppt
Angular-Routing.ppt

Video (Youtube Links):
Mosh: Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch Mindspace: Angular 2 Tutorial - Complete Introduction - Angular 2 CLI Setup, ...
JavaBrains: Angular 6

Links (Angular):
angular.io: Learning Angular
angular.io: Angular Architecture overwiew

angular.io: Component interaction
angular.io: Routing&Navigation
Victor Sakin: Angular Routing

The Ultimate Angular-cli Reference

Useful List of Angular 13 Event Types for Event Binding
Why you should NEVER use Redux with Angular

Todd Motto: https://toddmotto.com/
Victor Sakin: https://vsavkin.com/

Angular Expo is a beautiful showcase of websites, applications and experiments using the Angular JavaScript framework:

Angular Expo : https://angularexpo.com/

Exercise: (Angular)
AngularExercise1-FirstApp.html
AngularExercise2-SimpleCalculator.html
AngularExercise3-SimpleCalculator-refactor.html
AngularExercise4-Movie-InputOutput.html
AngularExercise5-Routing.html

Solutions:
AngularExercise1-FirstApp.zip (MyFirstAngularApp)
AngularExercise2-SimpleCalculator.zip (SimpleCalculator.zip)
AngularExercise3-SimpleCalculator-refactor.zip (SimpleCalculator(2).zip)
AngularExercise4-MovieInputOutput.zip (MovieInputOutput-Solution.zip)
AngularExercise5-Routing.zip (MovieRouter-Solved..zip)

Notice:
The solution zip-file don't contain the node_modules. If you want to try the solution:
1) Just unzip the file in your VSCode/Angular folder
2) Open VSCode an navigate to the new folder
3) Run: npm install in the integrated terminal window
(don't foget it takes some minuttes to generate the project).
4) Start the server by running: ng serve -o
(Don't forget to stop the server after use with: CTRL + C )

Links (RxJS):
Angular University - RxJS and Observables for Beginners:
https://blog.angular-university.io/functional-reactive-programming-for-angular-2-developers-rxjs-and-observables/

RxJS: http://reactivex.io/rxjs/
Andre Staltz: The introduction to Reactive Programming you've been missing
Interactive diagrams of Rx Observables: http://rxmarbles.com/
RxJS Observable - push vs pull: https://rxjs-dev.firebaseapp.com/guide/observable

Examples (Code demonstated in the class):
MovieHttpServiceRxJS.zip

MyFirstAngularApp-Overview.docx
SimpleCalculatorRefactored-Overview.docx
MovieInputOutput-Overview.docx
MovieRouter-Overview.docx
MoviesHttpServiceRxJS-Overview.docx

Exercise: (RxJS)
https://www.rxjs-fruits.com/subscribe (level 1-14)
Hint til 5 & 6: Benyt includes og substring

Exercise: (Angular)
AngularExercise6-HttpService.html


Notice:
If you are using Crome and have your webservice on your localhost, the "same origin policy" prohibits you accessing your data. You can disable the same origin policy on Google's Chrome browser by closing Chrome an open it from the cmd with: --disable-web-security (C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security - on my computer)
see: stackoverflow: disable same origin policy in chrome

or install: Allow-Control-Allow-Origin: *