Web Technologies

 

Covering the full stack of a live Web Application

 

Website and Web Application

Topics

  • How Website works, what happens when you enter URL in browser
  • Terms: URL, HTTP, HTTPS, HTML
  • Inspect web page in Browser, inspect HTTP protocol communication using Postman
  • Local website for development: NodeJS, http-server, live-server
  • Four tier of web system: client, web server, app server, data storage/external system integration
  • client: HTML, CSS, Javascript, Bootstrap, jQuery, ReactJS, Vue.js, Backbone
  • Nodejs Web server framework: NodeJS, Express.js, Hapi.js, REST, Socket.io
  • App server and framework: Parse, API
  • Database and integration: MongoDB, Big data analysis, external API

References

Webpage

Topics

  • Page structure: HTML, elements. Create simple page, web forms, tables
  • Page style: CSS. How is style specified: inline, in-file, external css
  • Bootstrap: default bootstrap style applied to HTML elements
  • Boostrap grid system layout, and check out various conmponents
  • Write a simple HTML page with web form. Apply bootstrap css and see the changes. Re-write the page using Bootstrap components

References

Project No. 1

Project #1: using HTML, CSS, Bootstrap, to create project page for "Pacman on a String", and "Harry Porter IoT Wand"

Javascript

Topics

  • Why Javascript? Javascript at client side: bring behavior to web pages
  • Tools: Chrome Javascript Console, NodeJS CLI, Codepen, JSFiddle, JSBin
  • Language fundamentals
    1. data type: number, string, boolean, array, object
    2. variable and scope
    3. operator, conditional flow, loop
    4. function: definition, invocation, arguments, return, scope
    5. common functions from string and array
    6. Object: object initialization approaches, encapsulation and inheritance, map, JSON
  • jQuery

Class notes

  1. data type and conditional flow
  2. function
  3. array
  4. object
  5. jQuery

Exercises

  1. make a number guess game: solution #1, and solution #2
  2. create a multiplication table with proper format: solution #1 and refactored solution #2
  3. Count the word frequency in a paragraph of text: solution #1
  4. jQuery exercise: Sample Code

References

Server-side Programming

Topics and Project

  • Clident vs Server side
  • NodeJS and framework
  • Setup Node / Express / MongoDB
  • Create Tasks API backed by MongoDB
  • Create Single Page Application (SPA), consuming the Tasks REST API
  • User account and security
  • User authentication and access authorization

Class Notes

  1. Node.js, Express, MongoDB
  2. REST API with MongoDB datastore

References

  • Server side: https://developer.mozilla.org/en-US/docs/Learn/Server-side
  • Node/Express: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction

ReactJS, and Webapp Frameworks

Topics

  • Interface for user signup, login and logout
  • Handle user credential with Webtoolkit and session store
  • ReactJS for UI: source code
  • ReactJS tutorial with Tic-Tac-Toe
  • Build ReactJS based front-end to consume Tasks API developed earlier

References: more front-end framework

Websocket, and Interactive

Topics

  • Websocket concept
  • Socket.io and chat app
  • HTML graphics: SVG, Canvas, Map
  • Graffiti project: graffiti wall, mouse pad, touch screen, etc

References