Henrik Høltzer (heho)
Webprogramming - WebApps with Angular and other JS-frameworks

Semester: 4.sem., Spring 2020
Email: heho@zealand.dk

Education guidelines and Objectives for the course
Resources:
lynda.com: https://www.lynda.com/Web-training-tutorials/88-0.html
Get a free School-Account to Lynda.com.


NB: The plan is preliminary and will properly be changed during the semester! (Last updated: April 14, 2020)

Week
Topics
Literature/Material
Exercises/Notes
5
29/1
Welcome

Introduction to the Course

 

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

Prerequisites survey


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)


 

 

 

5
29/1
JavaScript (JS Basic)
JavaScript (JS Advanced Part1-2)
Global Environment
Global Object
Execution Context
Hoisting
Types
Object/Functions
Function statement/Function expression
Self-invoking functions

JavaScript (JS Advanced Part3)
Array-Helper-Methods:
forEach
map
filter
every
some
reduce

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)
Learning ECMAScript 6 with Eve Porcello (More advanced)


ECMAscript, ES2015 (ES6), ES20XX

Video
JavaScript - Understanding the Weird Parts (the first 3.5 hours)
What is ECMAScript 6? (ES6, Transpiling, BabelJS, new features ...)

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
ArrayHelperMethods.zip (Word Dok in DK, Henrik H)


Examples (Code demonstated in the class):

ES2015Test (VSCode)
JavaScriptBasic (VSCode, Updated: 03/02/2020)

Examples/Solution (ArrayHelperMethods):
JavaScriptSamples (VSCode Updated: 04/02/2020)


Exercise:
Do the exercises in Codecademy:
Codecademy: https://www.codecademy.com/learn/introduction-to-javascript

Exercise:

ArrayHelperMethods.zip (Word Dok in DK)
ArrayHelperMethods.zip (Word Dok in Eng)
 


6
5/2

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
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 Callbacks.zip (Word Dok in DK, Henrik H)
Closures and Callbacks.docx (Word Dok in Eng, Henrik H)
ExecutionEnvironment.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 (VSCode Updated 04/02/2020)

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

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

7
12/2
React

Up and running
Components
JSX
Props
States
LifeCycle methods
EventHandlers
Request Handling async/await

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 (New 12/02/2020)
How to pass props to components in React
https://www.w3schools.com/react/default.asp (New 12/02/2020)

Note:
React.pptx

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

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
component-test-src.zip (Clock)

8
19/12
  No lessons in this course Exercise:
Read the tutorial from W3School: https://www.w3schools.com/react/default.asp
Notice: Don't install create-react-app !!! we will use npx

After you have read the tutorial - open the Pics App: pics.zip (uses axios: npm install --save-dev axios) and try to figure out how it works!

PicsOverview.docx
9-10

Redux

Actions / Action Creators
Reducers
Store
Dispatching Actions


React-Redux
connect( )

Provider

Note:
How to share React projects: ReactAppFiles

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

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

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

Exercise:
ReduxExercise
ReactReduxExercise1
ReactReduxExercise2

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

11 React Router
react-router-dom
<BrowserRouter>
<Route>
<Switch>
<Link>
<NavLink>



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

React-Router v4 - Dynamic Routing (Philosophy):
https://reacttraining.com/react-router/core/guides/philosophy
Super! - Good explanations that elaborate on the above:
https://tylermcginnis.com/react-router-philosophy-introduction/

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://tylermcginnis.com/react-router-pass-props-to-link/

React-Router - <NavLink>

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


Exercise:

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

 

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


NOTICE:
The School is closed, but the course will continue! - Online!.
I will use Microsoft Teams (use your easj.edu mail for login)
I have invited you to the Team: WebApps Spring 2020 and I will go Online for the first time: Wednesday, March 18. at 9:30 am
12 Redux Thunk

Redux Thunk with axios

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):
blog.zip

React-Redux-Router-Overview.-Movie.docx
React-Redux-Thunk-Overview.docx

Behind-the-scenes-of-Redux-Thunk.docx (New 26/03/2020)

Exercise:
ReduxThunkExercise1

Solutions:
ReduxThunkExercise.zip (formular1 - under construction)

MandatoryAssignment (Eng)
MandatoryAssignment (DK)

Video from the online session March 18.:: https://web.microsoftstream.com/video/15d800f4-0b52-495b-9f3b-0814f2ba9f08

NOTICE:
The next online session will be: Wednesday, March 25. at 9:15 am in MS Teams WebApps Spring 2020 - Channel:'Angular'

Today's program:

  • I'm going online in the Channel: 'Angular' at 9.15 and starts by providing a brief status update.
  • Then comes a brief review of the React-Thunk
  • Next, I will give an introduction to Angular.
  • Finally - Exercises (with a little online help from me in the Teams Channal: Help-Channel)
13

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 7 Event Types for Event Binding (New 30/03/2020)
Why you should NEVER use Redux with Angular (New 30/03/2020)


Todd Motto: https://toddmotto.com/
Victor Sakin: https://vsavkin.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)
AngularExercise3-SimpleCalculator-refactor.zip (SimpleCalculator.zip)
AngularExercise4-MovieInputOutput.zip (MovieInputOutput-Solved.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) Run: npm update (its an Angular 7 project) (New 30/03/2020)
5) Start the server by running: ng serve -o
(Don't forget to stop the server after use with: CTRL + C )

 

 

NOTICE:
Wednesday, April 1. at 9:15 am in MS Teams WebApps Spring 2020 - Channel:'Angular continue' - Cancelled/Postponed
15 No Lessons Easter Holidays  

NOTICE:
The next online session will be: Wednesday, April 14. at 9:15 am in MS Teams WebApps Spring 2020 - Channel:'Angular continue'

Today's program:

  • I'm going online in the Channel: 'Angular' at 9.15 and starts by providing a brief status update.
  • Then comes a review of Angular and a review of AngularExercise2-4
  • Next, I will give an introduction to Angular Routing and RxJS.
  • Exercise: AngularExercise5 and AngularExercise6 (with a little online help from me in the Teams Channal: Help-Channel)
16 Angular (continue)
Ajax & RxJS

Web-Architecture
Webservice



Links (RxJS):
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 (New 02/04/2020)

Links
Enable cross-origin resource sharing
Enabling Cross-Origin Requests in ASP.NET Web API 2

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

MyFirstAngularApp-Overview.docx (New 30/03/2020)
SimpleCalculatorRefactored-Overview.docx (New 30/03/2020)
MovieInputOutput-Overview.docx (New 31/03/2020)
MovieRouter-Overview.docx (New 31/03/2020)
MoviesHttpServiceRxJS-Overview.docx (New 14/04/2020)

Exercise: (Angular)
AngularExercise5-Routing.html
AngularExercise6-HttpService.html

Solutions:
AngularExercise5-Routing.zip (MovieRouter-Solved..zip)
AngularExercise6-HttpService.zip (F1SimpleHTTPServicel.zip)

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: *

 

 

Good subjects for synopsis:
PWA (Service Workers)
GraphQL
NodeJS
Express
Mongoose
MongoDB

WebSocket
SignalR

   
Wednesday, April 22. from 9:15 to 14.45
Notice:
If you need help or you are ready to demonstrate your mandatory assignment for me - write and tag me in the chat (help-channel)
17 Mandatory Assignment Supervision

Notice:
The Assignment has to be approved by me in MS Teams, no later than Wednesday, April 22, 2020 at 14:45.

18-22 Synopsis

Specialization in one of your electives
The report must be handed in no later than Wednesday 27. May 2020 at 11.00 am in Wiseflow

Synopsisdescription
Synopsis ideas (New 18/03/2020)

Supervision - Booking Sheets

24 Exam: Examination meetinglist  

 

Extra materials:

Responsive web design (RWD)

Bootstrap 4

Responsive Web Design (RWD)
Ethan Marcotte: A List Apart
In this article, from May 2010, Ethan Marcotte define the term “Responsive Web Design” for the first time – he cited fluid grids, flexible images, and media queries as three “technical ingredients” of RWD.

Kezz Bracey: The State of Responsive Web Design
In this article, from Jan 2015, Kezz Bracey give an up-to-date description of “Responsive Web Design”.

More to read about RWD:
This Is Responsive There you can find responsive design patterns, more responsive resources, and responsive news.

Mediaqueri  There you’ll find a huge showcase of responsive websites (perfect if you need some inspiration).


Bootstrap
Links (Bootstrap):
Bootstrap: http://getbootstrap.com/
How to add a Navigation bar to your app:
https://www.youtube.com/watch?v=23bpce-5s8I ( Bootstrap 4 Navbar Concepts ) NEW!



Free themes for Bootstrap
Bootstrap CDN: http://www.bootstrapcdn.com/#bootswatch_tab

W3schools: Bootstrap get started
http://www.lynda.com/Bootstrap-training-tutorials/1421-0.html

Google
Test tool: Mobile-friendly Test

Examples (Code demonstated in the class):
BootstrapTest.zip (Bootstrap 3 - VSCode)
Bootstrap4Test.zip (Bootstrap 4 - VSCode)
BootstrapLynda.zip(VSCode)


Examples
(Responsive and not Responsive):
A good responsive website (New York Times)
https://www.youtube.com/watch?v=YRZqSKp71mI

 

Exercise: (Lynda.com)
Bootstrap 4: Essential Training with Ray Villalobos
Watch the video, redo the demonstrated stuff and do the Challenge.




More about: HTML/CSS/JS

HTML:
30 Must-See HTML5 tutorials ...
HTML CSS BOOK

HTML5 Video player: http://videojs.com/
HTML Video Tutorial: http://www.mrc-productivity.com/techblog/?p=722
HTML5 Geolocation: http://www.mrc-productivity.com/techblog/?p=714
HTML5 Canvas: http://www.mrc-productivity.com/techblog/?p=718

CSS:
CSS Selectors: Class vs ID: http://www.tizag.com/cssT/cssid.php

CSS-Grid (Layout with Grid and Media-Queries)
MDN: Grid template areas
MDN: Realizing common layouts using CSS Grid Layout
Tony Thomas: A Beginners Guide to CSS Grid Layout

 

JavaScript:
Webucators JavaScript Tutorial: http://www.learn-javascript-tutorial.com/
JavaScript cheat-sheet: http://firstsiteguide.com/javascript-cheat-sheet/

Debugging JavaScript
Chrome DevTools (Ctrl Shift I)

JavaScript Debugging:
http://www.w3schools.com/js/js_debugging.asp


Object Oriented JavaScript
Introduction to Object-Oriented JavaScript

JavaScript Objects
http://www.w3schools.com/js/js_objects.asp
http://www.w3schools.com/js/js_object_definition.asp


JavaScript Hoisting
https://www.w3schools.com/js/js_hoisting.asp

 

 

 

DOM4: W3C Recommendation 19 November 2015
https://www.w3.org/TR/dom/

What is the DOM:
https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F

 
  NPM (Node Package Manager)
Video (Lynda.com)
Up and Running with NPM with Ray Villalobos

Kennedy, Hugh; DeVay, Paul
"Understanding npm"Nsight. Retrieved 22 July 2016
 
  Asynchronous Programming:
https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop

ReactJS
Lynda.com:
Learn React.js: The Basics with Eve Porcello
Building a Web Interface with React.j with Ray Villalobos

RxJS
Reactive extensions for JS (RxJS) and reactive programming
 
Extra
JQuery

JQuery
Links (JQuery):
http://jquery.com/
http://jqueryui.com/

jQuery.com Tutorial:
http://try.jquery.com/

W3Schools JQuery Tutorial:
http://www.w3schools.com/jquery/

JQuery Tutorial / Best practice
http://www.learn-jquery-tutorial.com/BestPractices.cfm#.USx5vB1WySp

Lynda.com:
http://www.lynda.com/jQuery-tutorials/jQuery-Essential-Training/183382-2.html


Slides:

JQuery.ppt
Codeschool_try_jquery.pdf
JQuery-essentials-slideshow

Examples (Code demonstated in the class):
JQuerySelectTest.zip (VSCode)


Exercise:
Do the tutorial at TRYjQuery: http://try.jquery.com/
Do the tutorial at CodeCademy: https://www.codecademy.com/courses/web-beginner-en-bay3D/2/1
  Extra material (if you want to go futher with MEAN and/or FireBase)

NodeJS
Introduction to Node with Ryan Dahl

Lynda.com:
Up and Running with Node.js with Alexander Zanfir
Building a Website with Node.js and Express.js  with Ray Villalobos
Node.js Essential Training with Alex Banks

MongoDB
https://www.mongodb.org/
MVA: You've Got Documents! A MongoDB Jump Start
Code School: The Magical Marvels of MongoDB

MEAN
Code School: Become a MEAN Stack Developer

FireBase
https://firebase.google.com/
https://www.youtube.com/user/Firebase?hl=da
 
 

TypeScript
Anders Hejlsberg: Introducing TypeScript
Anders Hejlsberg: What's new in Typescript
Classes: http://www.typescriptlang.org/docs/handbook/classes.html
Interfaces: https://www.typescriptlang.org/docs/handbook/interfaces.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 (Lynda.com)
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-TypeScript.zip

 

 

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

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