10152158JS Frameworks (Angular and React)
Course Information
Description
Learn intermediate/advanced Angular programming for front-end development with JS/TS (JavaScript/TypeScript). Implement various FP (functional programming) concepts popular in modern JS development. Also experience real world team development with Git and GitHub, including branching, pull requests (PRs), merge conflicts, and more. React is also demonstrated and discussed. The skills taught in this class are generally applicable to all frameworks including Vue, Solid, and others.
Total Credits
3
Course Competencies
  1. Build Single Page Applications (SPAs) with Angular
    Assessment Strategies
    Individual Project, Skill Demonstration in Lab
    Criteria
    Investigate Single Page Application (SPA) architecture
    Differentiate between traditional, server-rendered, web development and SPAs
    Characterize nuances of SR (server rendered), CSR (client side rendered), and SSR (server side rendered) and associated vocabulary
    Explain the basics of MVVM (model, view, view model) and related MV* (model-view-star) approaches including data binding and virtual document object models (DOMs)
    Install and setup NodeJS and Angular command line interface (CLI) tools
    Create and run Angular and React projects
    Gain intermediate to advanced level experience with npm and its various uses when writing front-end applications
    Explore and apply Angular and React architectural concepts such as services, components, dependency injection, routing, react-hooks, state management, and others
    Scaffold application components, services using the Angular and npm CLIs
    Use various Angular directives and React JSX for simple and complex data binding scenarios
    Polish application UI/UX (user interface/experience) with Angular animations
    Apply multiple CSS libraries including Angular Material Design and Bootstrap to Angular and React apps

  2. Code with Functional Programming (FP) techniques common in front-end web development
    Assessment Strategies
    Individual Project, Skill Demonstration in Lab
    Criteria
    Explore and use the power of map(), filter(), and reduce() JS array methods
    Distinguish between imperative and declarative programming approaches
    Experience never having to write imperative looping code in your front-end applications
    Gain awareness of other array methods to simplify your application development tasks
    Investigate the basics of reactive, functional programming with RxJS (reactive extensions for JS)
    Explain RxJS Observables and their relationship to JS promises for asynchronous programming
    Become comfortable switching between JS Promise "thenables" and the newer async/await techniques

  3. Demonstrate real world, intermediate/advanced, team software development with Git
    Assessment Strategies
    Individual Project, Skill Demonstration in Lab
    Criteria
    Explore DAGs (directed acyclic graphs), the underlying basis of git source control systems
    Characterize the benefits of a DVCS (distributed version control system) and how to work with local and shared repositories
    Master cloning git repositories from GitHub
    Master local git branching strategies and techniques
    Practice merging changes with other developers on your team
    Resolve merge conflicts
    Introduction to GitHub Desktop to manage local git repositories
    Use GitHub PRs (pull requests) to get your changes into your team’s repository
    Deploy SPAs to your personal GitHub Pages to build a portfolio of your work to share with prospective employers and others