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

Semester: 4.sem., fall 2017
Email: heho@easj.dk

Education guidelines and Objectives for the course


NB: The plan is preliminary and will properly be changed during the semester! (Last updated: September 21, 2017)

Week
Topics
Literature/Material
Exercises/Notes
35
Welcome
Introduction to the Course

HTML5/CSS3
Semantic tags:
<nav>, <section>, <article>, <footer> ....
Flexible box model
(-webkit)
More CSS3 Features

Rounded corners
Shadows
Gradients
Alpha (transparencies)
Animation with transitions


Intro.ppt

Goal for this Course?
One example of a solution from last semesters Mandatory Assignment:
http://movieman-kvd.herokuapp.com

Prerequisites survey

Visual Studio Code (VSCode)
Links (VSCode):
Download: https://code.visualstudio.com/
Beginner's Guide: https://channel9.msdn.com/Blogs/raw-tech/Beginners-Guide-to-VS-Code

Html

Links (Html):
http://www.w3schools.com/htmL/
HTML5 (53 short Videos from TheNewBoston) (especially video no. 9-19)
Drive into HTML5
HTML5 Rocks
30 Must-See HTML5 tutorials ...
HTML CSS BOOK

CSS(Cascading Style Sheets)
Links (CSS+CSS3):
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/css/css3_intro.asp

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

Video:
HTML4+CSS2
HTML4 and CSS2 (46 short Videos from TheNewBoston)

Lynda.com:
http://www.lynda.com/HTML-training-tutorials/224-0.html

Lynda.com is also a good site for you to lean more at home (if Web programming has your interest - and of course is has, otherwise you have chosen a wrong elective! ^^)

Get a free School-Account to Lynda.com.

Note:
If Basic Html and CSS is new for you - take a turn with the exercises at codecademy.

Codecademy:
https://www.codecademy.com/learn/learn-html-css

Alternativ or suplement to Codecademy:
Buckys great videos about basic XHTML and CSS: https://www.thenewboston.com/videos.php?cat=40

or W3School:
https://www.w3schools.com/


If you allready know some HTML/CSS - look at Lynda.com and find som tutorial that gets your interest.

Exercise:
MyFirstMovie - HTML/CSS


Examples (Code demonstated in the class):
TestHTML4.zip (VSCode)
TestHTML5.zip (VSCode)
SemanticTag.zip (VSCode)
FlexibleBoxModel.zip (VSCode)
RoundedCorner.zip (VSCode)

36 JavaScript
HTML DOM(Document Object Model)

JavaScript
Links (JavaScript):
W3Schools JavaScript Tutorial: http://www.w3schools.com/js/default.asp
Webucators JavaScript Tutorial: http://www.learn-javascript-tutorial.com/
JavaScript: 40 small Videos from Bucky and TheNewBoston.org: https://www.thenewboston.com/videos.php?cat=10
JavaScript cheat-sheet: http://firstsiteguide.com/javascript-cheat-sheet/

Slides:
Introduction to JavaScript (pdf)

Lynda.com:
http://www.lynda.com/JavaScript-training-tutorials/244-0.html

Links (DOM - Document Object Model):
W3Schools HTML DOM tutorial:
http://www.w3schools.com/js/js_htmldom.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


Examples (Code demonstated in the class):
HTML-Calculator.zip(VSCode)


Note:

If JavaScript is new for you, start watching JavaScript Esential Training with Simon Allardice (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Welcome/81266/87513-4.html

If you need a very basic introduction you could also watch: Introducing the JavaScript Language with Joe Chellman (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Introducing-JavaScript-Language/123563-2.html

Later you should watch: JavaScript: Functions with Ray Villalobos (Lynda.com): http://www.lynda.com/JavaScript-tutorials/JavaScript-Functions/148137-2.html

If JS allready is well know for you -watch: Up and Running with ECMAScript 6 with Eve Porcello (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Up-Running-ECMAScript-6/424003-2.html



Exercise:
a) Do the exercises in Codecademy:
Codecademy:http://www.codecademy.com/tracks/javascript

The most importen lessons is:
Unit 2: "Introduction to Funcions in JS"
Unit 6: "Arrays and Objects in JS"
Unit 8: "Introduction to Object II"

You don't need to fulfill the rest of the lessons (many are very simple for a C# or Java programmer)


Exercise:
Make your own simple HTML-Calculator, with html, css and js in seperate files.

37

Debugging JS

JavaScript Objects


More HTML5
querySelectorAll
<video>
<audio>
<embed>
Geolocation
<canvas>

JQuery

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

More HTML5/CSS3
Links (more HTML5):
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

Nice Web-based drawing Tool using the Canvas element:
http://muro.deviantart.com


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

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

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

TheNewBoston:
https://www.thenewboston.com/videos.php?cat=32

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

 

Exercise:
Use Chrome DevTools to debug your simple HTML-Calculator
Add a debugger-statement in Add(), Sub(), .. functions, Run your application in Chrome and start Chrome DevTools (Ctrl Shift I) - can you inspect the values?)


Examples (Code demonstated in the class):
HTML-Calulator.zip (VSCode)
JavaScriptObjects
(VSCode)
HTML5Stuff.zip
(HTML5 Media tags)
Geolocation.zip (Geolocation with simple HTML5 and Google Maps API)


Exercise:
Add some the new HTML5 features:
Video, Audio, Embeded YouTube and Geolocation to your Web-page.




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

38 Responsive web design (RWD)

Bootstrap

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/

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
Bootstrap Tutorial For Beginners: https://www.youtube.com/watch?v=no-Ntkc836w

Codecademy
Make a website: Bootstrap

CodeSchool
Blasting off with Bootstrap (not for free, only the first part)

Google
Test tool: Mobile-friendly Test


Slide:
Bootstrap3.pdf

Examples (Code demonstated in the class):
BootstrapTest.zip (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 3: Essential Training with Ray Villalobos
Watch the video, redo the demonstrated stuff and do the Challenge.

Bootstrap 3: Advanced web development
Watch the video - chap 2:

  • Adding basic navigation
  • Creating dropdown
  • Automating dropdown with jQuery

Do some more experiments by your self.


39   No lessons in this course  
40

ES2015 (ES6)

NodeJS
NPM
GIT

TypeScript

ECMAscript, ES2015 (ES6), ES20XX

Video (Lynda.com)
What is ECMAScript 6? (ES6, Transpiling, BabelJS, new features ...)

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

Understanding ES6 Modules
import
export

ECMAscript 6 compability table

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


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

Examples (Code demonstated in the class):
ES2015Test (VSCode)


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

41

WebPack 2
Angular

 

Extra material (if you want to go futher with JS)
Links (A deeper dive into JS - behind the sceens?):
Techsith: JavaScript callback functions
Philip Roberts: What the heck is the event loop anyway? (Understanding CallBacks)
Arindam Paul - JavaScript VM internals, EventLoop, Async and ScopeChains
Anjana Vakil: Learning Functional Programming with JavaScript
Kyle Simpson: Advanced Async and Concurrency Patterns in JavaScript (Promises / Generators) (Skip the first 7 min. ;))

W3Shools: JavaScript Closures
Techsith: JavaScript promises


WebPack 2
What is Webpack?

Video (Lynda.com)
What is Webpack?

Angular
Henrik Høltzer: Angular - the PIXI Book (draft - under construction)
Slides:Introduction to Angular.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, ...


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

The Ultimate Angular-cli Reference


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


Exercise: (Webpack)
Exercise3-Webpack.html

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


Exercise: (Angular)
Exercise4-Angular-FirstApp.html
Exercise5-Angular-SimpleCalculator.html (updated)
Exercise6-Angular- SimpleCalculator-refactor.html (updated)

Solutions:
Exercise4-Angular-FirstApp.zip (MyFirstAngularApp)
Exercice5-Angular-SimpleCalculator.zip
Exercise6-Angular-SimpleCalculator-refactor.zip (src-SimpleCalculator-refactor-Sol.zip) (updated)

Notice:

The solution zip-file only contains the src-file. If you want to try the solution:
1) Open VSCode and create a new project by running: ng new 'NameOfTheProject' in the integrated terminal window
(don't foget it takes a some minuttes to generate the project).
2) Extract the downloaded solution zip-file folder.
3) Delete the content of the src folder (except the file: tsconfig.app.json) in your new project and replace with the content of the downloaded folder.
4) Navigate to the new folder: cd 'NameOfTheProject' and start the server by running: ng serve -o
(Don't forget to stop the server after use with: CTRL + C )

 

Mandatory Assignment

42   Autumn Holiday  
43

Angular (continue)

Component interaction (Input/Output)

Routing & Navigating


JSON

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

Slides:
Angular-Input&Output.ppt

Angular-Routing.ppt

Exercise: (Angular)
Exercise7-Angular-Movie-InputOutput.html (updated)
Exercise8-Angular-Routing.html (updated)

Solutions:
Exercise7-Angular-Movie-InputOutput (src-MovieInputOutput-Sol.zip) (updated)
Exercice8-Angular-Routing (src-Routing-Sol..zip) (updated)

Notice:
The solution zip-file only contains the src-file. If you want to try the solution:
1) Open VSCode and create a new project by running: ng new 'NameOfTheProject' in the integrated terminal window
(don't foget it takes a some minuttes to generate the project).
2) Extract the downloaded solution zip-file folder.
3) Delete the content of the src folder (except the file: tsconfig.app.json) in your new project and replace with the content of the downloaded folder.
4) Navigate to the new folder: cd 'NameOfTheProject' and start the server by running: ng serve -o
(Don't forget to stop the server after use with: CTRL + C )


Lynda.com:

JavaScript and JSON

44 Angular (continue)
Ajax & RxJS

Web-Architecture
Webservice


Mandatory Assignment

SynopsisFormular

Notice:
The application for synopsis shoud be fill out and sendt no later than end of week 44
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/


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

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

Exercise: (Angular)
Exercise9-Angular-HttpService.html

Solutions:
Exercise9-Angular-HttpService.html (src-F1SimpleHTTPService-sol.zip) (updated)

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

45

No lessons

Supervision - mandatory assignment



MEAN stack (MongoDB, Express, Angular, NodeJS)
FireBase
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
46-50 Synopsis Specialization in one of your electives
The report must be handed in no later than Thursday 21. December 2017 at 11.00 am in Wiseflow

Synopsisdescription
Synopsis ideas

Supervision - Booking Sheets

2018 Exam: 3 + 5. January 2018 Examination meetinglist  
  Do you want to go deeper? 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