As Web and mobile applications become ever more complex in data and user interactions, this causes more challenges in developer productivity and code quality. To address such concerns, Facebook introduced and released two recent innovations, React and Flux, which have been adopted by an increasing number of Web developers. React is a UI engine that builds composable rich user interfaces from smaller components. It uses an asynchronous data approach and in-memory Document Object Model (DOM) to make UI rendering fast and efficient. Flux is an architectural pattern to build scalable Web apps that complement React. Given the problems of bidirectional data flow, Flux architecture is introduced to enforce one-way data flow among its four entities: actions, dispatchers, stores, and views. It employs one-way data flow to simplify application complexity. And Redux is the most popular and the simplest framework that implements Flux architectural pattern. TypeScript is a superset of JavaScript that makes JavaScript scalable. It adds static typing and class-based OOP to JavaScript. TypeScript makes the potential bugs introduced in the code easy to location through compiling errors and dramatically facilitates code refactoring and code debugging.

This course covers React, Flux, Redux and TypeScript in detail for developing highly interactive Web apps in robust and scalable ways. The course provides a brief overview of the MEAN stack, focusing on the novel way React uses virtual DOM to do selective updates, as well as React’s approach to handling state changes and events of its components. You will learn to create components, build complex components, update and mount to DOM, and learn to test React applications with Jest. You will learn to handle complex user interactions and to communicate with the server using RESTful API in Flux/Redux applications. You’ll learn through examples that show how this approach allows you to add new functionalities without exploding the complexity.

You will be expected to do a significant amount of coding in class. Comprehensive familiarity with JavaScript and AJAX is required. In addition to weekly assignments, you will practice the principles and techniques learned in class through a final development project. Students are required to bring laptops to class.

Learning Outcomes
At the conclusion of the course, you should be able to

• Implement interactive web applications using React.js
• Understand prop and state and the one-way data flow from between components
• Implement complicated interactive web applications with the backend support using React.js and Redux
• Implement scalable web applications using TypeScript

Skills Needed: Students should have programming experience with client-side JavaScript, AJAX, and basic understanding of HTML and CSS.