C C T B H P N

Lecture #5 - JavaScript Libraries

jQuery, node, React, standard web components

Web Resources
jQuery jQuery.js, jQuery API, jQuery Tutorial - w3schools.com
node.js node.js, about node.js, node.js tutorial - w3schools.com
Creating first app with Node.js, Read file in node.js, First API with Node.js and Express, REST API with Node.js and PostgreSQL
Create a Node.js and React app in Visual Studio
React.js React.js, Getting Started with React, React tutorial - reactjs.org, Components and Props - reactjs.org
Four ways to style React components
CRUD app in react with hooks
React Native Animated Toggle in Native React
JSX and TypeScript Getting started with JSX, What is JSX, babeljs.io, babel plugin to transform JSX, webpack.js.org, TypeScript loader for Webpack, TypeScript loader, You might not need to transpile your JavaScript,
Vue Vue.js, Vue guide
Angular Angular.js, Angular docs - angular.io, Learn Angular the right way, Angular Tutorial - w3schools.com, Angular for Beginners Guide
Bootstrap Bootstrap - CSS, JavaScript, and HTML Framework, Bootstrap Documentation
Drawing with JavaScript and HTML5 canvas Drawing - fabricjs.com, Drawing - paperjs.org, 2D Drawing - two.js
JavaScript diagramming libs - modeling-languages.com, html5 canvas libraries - ihatetomatoes.net

Content

This lecture focuses on JavaScript frameworks, especially node.js and React.js. Node allows us to execute JavaScript outside the browser, and React supports composition of JavaScript and HTML in components that provide fast DOM updates for changing content.
  1. Syllabus describes topics to be covered, reading material for you to digest before coming to class, and due dates for the assigned projects.
  2. Projects: Final Project #1, Final Project #2, Final Project #3
    You will do one of these - the choice of which is yours to make - and present on the last day of classes.
    Additional Requirements
    You are expressly requested to refrain from using site editors like Wix, web.com, or other web designers. You may use any of the facilities of Visual Studio or any other text editor of your choice. This same rule applies to your lab submissions as well. For your Final Project demos you will be required to use only page links for navigation. You may host and demonstrate your labs in the built-in Visual Studio web server.
    All projects must use:
    • Asp.net core MVC - main site
    • Asp.net Web API - web service
    • Web API Client
    • SQL db storage
    • At least one static page that uses new features of HTML5, CSS3, and JavaScript6.
  3. jQuery jQuery is a popular JavaScript library that has devoted a lot of effort to support most of the popular browsers in a uniform way so you get the same results on any platform with any browser. Browsers are converging on standard behavior across all platforms, so that capability is no longer as important as it once was. However, it is still widely used. jQuery Presentaton, pptx jQuery code demos jQuery.com
  4. node.js Node.js is a library and application that supports using JavaScript outside the confines of a browser. Node is essentially a hosting of the Chrome V8 JavaScript engine in a stand-alone executable. Node hosts have been developed for Windows, Linux, and MacOS. You can think of node as a message dispatching system for JavaScript programs. A lot of JavaScript modules have been written for node that give it very powerful behavior. One example is the Express.js module that hosts simple web applications in node.
    JavaScript Execution Engine
    Node Execution Engine
    node Console App demo
    If node is installed on your machine, you can run any Javascript file, perhaps called app.js, from powershell with the command: node app.js nodejsWebApp1 demo, node docs - HTTP
    You can also run node web apps from the Visual Studio IDE by requiring http. nodejs.org
  5. React.js React is a JavaScript library designed to support creation of web UI components. You can write React components in standard JavaScript, making calls into the React API. React also supports use of a JavaScript preprocessor, called JSX, which allows you to write expressions that mix HTML and JavaScript. Building components is important. Standard HTML, CSS, and JavaScript do not provide a lot of support for building UI widgets that can be pasted into HTML pages. That causes a lot of pain. For example, suppose you want to use a menu that will be common to many pages in your site. If you need to add a new link to the menu, you have to edit every page in the site that uses the menu. What you want to do, instead, is to define menu items in a Javascript file, and from that generate the menu markup for each page. That's exactly what I do for this course website. React makes that significantly easier. My next site redesign will probably use React menu components. The first four projects, below, were all built by creating an empty solution, then adding an HTML file. For the React demos I added links to React and Babel. ImageSizer - why we need React React Demo #1 - simple button
    Only useful as an instructional tool, leading up to Demo #2. React Demo #2 - a reusable button container class
    Shows how to create a container of buttons and other elements. React Demo #3 - illustates use of JSX
    Illustates use of babel library to compile JSX on the fly. These demos put the React code in the body of the page. That is not necessary, as show in three demos I developed after the lab session, based on difficulties students were having. I provide a small amount of discussion of those in the Lab #5 page. Node Web App using React
    This demo avoids using babel, which translates JSX on the fly, by using Webpack, which uses TypeScript compiler. It was built by creating a Node.js Web App with Visual Studio, then importing a number of packages to support React. In retrospect, I think it would be simpler to build React components, as was done in the three React demos, above, then use babel-cli to translate the React into native JavaScript, and link the page to the translated file.
    React References Reactjs.org
    Getting Started with React
    React tutorial - reactjs.org
    Create Node.js and React app in Visual Studio
    Four ways to style React Components
    React Enlightenment
    React Tutorial for Beginners
    Beginner's Guide to React
    YouTube Video on React by Jennifer Wong
    She gets into a lot of interesting details, in between some annoying animal gifs.
  6. Standard Web Components Web components are now being standardized. They may offer a built-in, perhaps simpler, way of building reusable web parts, compared to React and Vue. Until the standard is finalized, not all browsers support them, notably FireFox. However, there is a polyfil library, called Polymer, that allows non-conforming browsers to use standard components. Building Components
    Web Components - MDN Modular Future
    Componet-based web Application - CodeProject
    Polymer Project
  7. Other JavaScript Libraries
  8. Preview of Lab #5 Your goal: Revise image sizer using React. My ImageSizer Demo has two implementations:
    • #1 - build structured markup in JavaScript. Close to component, but messy implementation.
      The good news is you don't have to do much on each page. The bad news is the implementation.
    • #2 - build structured markup in Html.
      The good news is implementation is easy. The bad news is you have to do that on every page.
    Lab #5 wants you to use React to get good news for both implementation and page placement.
  9. Lab #5