Difference between revisions of "IU:TestPage"

From IU
Jump to navigation Jump to search
Tag: Manual revert
Line 1: Line 1:
   
−
= Career and leadership =
 +
= Frontend Web Development =
−
* '''Course name''': Career and leadership
 +
* '''Course name''': Frontend Web Development
 
* '''Code discipline''': R-01
  
* '''Code discipline''': R-01
 
* '''Subject area''':
 
* '''Subject area''':
   
 
== Short Description ==
  
== Short Description ==
  +
This course covers the following concepts: The main goal of the course is to introduce modern concepts of frontend development in the industry to the listeners and give them basic knowledge and practical skills that can be helpful at their first job as a frontend developer. We will explore such topics as pages markup with HTML and CSS, writing business logic using JavaScript and TypeScript, development of Single Page Applications with modern frameworks and libraries (Angular, React, Vue), usage of relevant technologies and approaches (CSS-in-JS, GraphQL, WebSockets, Web Components, etc.).; As a participant of the course you will develop your own SPA that will interact either with the API provided by us or with the open API of any popular service..
−
This course covers the following concepts: The concept of leadership (“becoming the leader of my own life”); The career modelling as a life path of the growth and positive changes (“not just to wait and take but to give and create”); Lifelong learning and competences development for the professionals of the future.
  
   
 
== Prerequisites ==
  
== Prerequisites ==
Line 22: Line 22:
 
! Section !! Topics within the section
  
! Section !! Topics within the section
 
|-
  
|-
  +
| Introduction. Current state of the industry. Developer roadmap and technologies overview. ||
−
| Modern trends in career modelling ||
 
  +
# Actual technologies in the industry
−
# Modern career labor market and its main tendencies
  
−
# Competencies of the modern professional
  
 
|-
  
|-
  +
| Markup. HTML, CSS, DOM and styles inspector in browser. ||
−
| Instruments of career modelling ||
 
  +
# Basics of HTML5
−
# Educational trajectory
  
  +
# Basics of CSS3
−
# Professional trajectory
  
 
|-
  
|-
  +
| JavaScript. Syntax, data types, paradigms, specifics. ||
−
| Modern leadership ||
 
  +
# Code structure
−
# The concept of the modern leader
  
  +
# Variables
−
# Emotional and dialogical leadership
  
  +
# Control structures
  +
# Classical operators (math, comparison, logical)
  +
# Functions
  +
# Data types
  +
|-
  +
| JavaScript. Engine and execution environments specifics. TypeScript. ||
  +
# Synchronous and asynchronous execution
  +
# Event loop
  +
# Language features for asynchronous code
  +
# Scope and closures
  +
# Browser environment (DOM manipulations, events, etc.)
  +
|-
  +
| React. Basics, render concepts, hooks, devtools. ||
  +
# Pure React
  +
# JSX
  +
# Class components
  +
# Functional components
  +
# Hooks
  +
# React DevTools
  +
|-
  +
| React. Ecosystem, CSS-in-JS, routing, webpack + babel. ||
  +
# React Router
  +
# CSS-in-JS: Styled Components, Emotion
  +
# Other useful libraries (forms, network, animations, etc.)
  +
# create-react-app and other boilerplates
  +
|-
  +
| React. Applications architecture, stateless and stateful components, dumb and smart components, global state management. ||
  +
# Mono- vs multi-repository structure of enterprise projects
  +
# Stateless and stateful components concept
  +
# Dumb and smart components concept
  +
|-
  +
| React. Code quality, linting, testing, optimizations. ||
  +
# SonarQube for frontend projects
  +
# ESLint, Prettier and settings presets for code linting and formatting
  +
# Introduction to unit-testing of React components
  +
|-
  +
| NodeJS: JavaScript on backend, ExpressJS, NestJS, etc. ||
  +
# NodeJS API Overview
 
|}
 
|}
 
== Intended Learning Outcomes (ILOs) ==
  
== Intended Learning Outcomes (ILOs) ==
   
 
=== What is the main purpose of this course? ===
  
=== What is the main purpose of this course? ===
  +
After the course is completed, a student should know the basics of:
−
The main purpose of this course is to form the students’ vision of effective career modelling and to develop the competences needed for the successful career and personal growth
  
   
 
=== ILOs defined at three levels ===
  
=== ILOs defined at three levels ===
Line 43: Line 80:
 
==== Level 1: What concepts should a student know/remember/explain? ====
  
==== Level 1: What concepts should a student know/remember/explain? ====
 
By the end of the course, the students should be able to ...
  
By the end of the course, the students should be able to ...
  +
* Resources that can help in furhther development of their skills
−
* the modern trends in career modeling and features of the labor market;
  
  +
* Resources that can help during the work as a frontend web developer
−
* the features of career modeling; requirements for a modern professional; the concept of "project portfolios";
  
  +
* Role of frontend web-interfaces in modern systems
−
* the concept and features of career and educational trajectories;
  
−
* the components of the competence profile of a professional;
  
−
* the characteristics of teams and the basics of team building;
  
−
* the concept and modern typology of leadership;
  
−
* the types and characteristics of distinct types of leadership
  
   
 
==== Level 2: What basic practical skills should a student be able to perform? ====
  
==== Level 2: What basic practical skills should a student be able to perform? ====
 
By the end of the course, the students should be able to ...
  
By the end of the course, the students should be able to ...
  +
* Key concepts that are laid into the basis of JavaScript
−
* career modelling;
  
  +
* Purpose of modern frontend frameworks
−
* performing oneself as a leader;
  
  +
* Key concepts that are laid into the React framework
−
* teambuilding
  
  +
* What are the other technologies that appear in the JavaScript ecosystem
−
* creation of professional portfolio;
  
−
* creation of educational and professional trajectories;
  
−
* creation of the competence profile of a modern professional.
  
   
 
==== Level 3: What complex comprehensive skills should a student be able to apply in real-life scenarios? ====
  
==== Level 3: What complex comprehensive skills should a student be able to apply in real-life scenarios? ====
 
By the end of the course, the students should be able to ...
  
By the end of the course, the students should be able to ...
  +
* Perform everyday tasks of frontend web developer:
−
* design their career path;
  
  +
* Develop view of pages and components using HTML and CSS
−
* form portfolios of projects;
  
  +
* Write business logic using JavaScript and/or TypeScript
−
* create career and educational trajectories for building a successful career and develop your own professional competencies;
  
  +
* Perform HTTP requests to an API and process responses
−
* develop leadership and form teams;
  
  +
* Configure page appearance depending on routes
−
* develop and implement a strategy for positive change through leadership.
 
  +
* Handle HTML forms
 
== Grading ==
  
== Grading ==
   
Line 75: Line 107:
 
! Grade !! Range !! Description of performance
  
! Grade !! Range !! Description of performance
 
|-
  
|-
−
| A. Excellent || 90-100 || -
 +
| A. Excellent || 80-100 || -
 
|-
  
|-
−
| B. Good || 75-89 || -
 +
| B. Good || 65-79 || -
 
|-
  
|-
−
| C. Satisfactory || 60-74 || -
 +
| C. Satisfactory || 50-64 || -
 
|-
  
|-
−
| D. Poor || 0-59 || -
 +
| D. Poor || 0-49 || -
 
|}
  
|}
   
Line 90: Line 122:
 
! Activity Type !! Percentage of the overall course grade
  
! Activity Type !! Percentage of the overall course grade
 
|-
  
|-
−
| Labs/seminar classes || 20
 +
| Labs/seminar classes || 10
 
|-
  
|-
−
| Interim performance assessment || 30
 +
| Interim performance assessment || 40
 
|-
  
|-
 
| Exams || 50
  
| Exams || 50
Line 103: Line 135:
   
 
=== Open access resources ===
  
=== Open access resources ===
  +
* Role of frontend web-interfaces in modern systems
−
* Sharme, R. (2010). The Leader Who Had No Title. Simon & Schuster UK.
  
  +
* What should a student be able to understand at the end of the course?
−
* Van Loon, R. (2018). Creating Organizational Value Through Dialogical Leadership. [S.L.]: Springer International Pu.
  
  +
* Current state of the industry of frontend web development
  +
* Key concepts that are laid into the basis of JavaScript
  +
* Purpose of modern frontend frameworks
  +
* Key concepts that are laid into the React framework
  +
* What are the other technologies that appear in the JavaScript ecosystem
  +
* What should a student be able to apply at the end of the course?
  +
* Setup and develop basic single page application using React
  +
* Perform everyday tasks of frontend web developer:
  +
* Develop view of pages and components using HTML and CSS
  +
* Write business logic using JavaScript and/or TypeScript
  +
* Perform HTTP requests to an API and process responses
  +
* Configure page appearance depending on routes
  +
* Handle HTML forms
   
 
=== Closed access resources ===
  
=== Closed access resources ===
Line 117: Line 162:
 
|+ Activities within each section
  
|+ Activities within each section
 
|-
  
|-
−
! Learning Activities !! Section 1 !! Section 2 !! Section 3
 +
! Learning Activities !! Section 1 !! Section 2 !! Section 3 !! Section 4 !! Section 5 !! Section 6 !! Section 7 !! Section 8 !! Section 9
 
|-
  
|-
  +
| Development of individual parts of software product code || 1 || 1 || 1 || 1 || 1 || 1 || 1 || 1 || 1
−
| Homework and group projects || 1 || 1 || 1
  
 
|-
  
|-
−
| Midterm evaluation || 1 || 1 || 1
 +
| Homework and group projects || 1 || 1 || 1 || 1 || 1 || 1 || 1 || 1 || 1
−
|-
  
−
| Reports || 1 || 1 || 1
  
−
|-
  
−
| Essays || 1 || 1 || 1
  
−
|-
  
−
| Oral polls || 1 || 1 || 1
  
−
|-
  
−
| Discussions || 1 || 1 || 1
  
 
|}
 
|}
 
== Formative Assessment and Course Activities ==
  
== Formative Assessment and Course Activities ==
Line 141: Line 178:
 
! Activity Type !! Content !! Is Graded?
  
! Activity Type !! Content !! Is Graded?
 
|-
  
|-
−
| Question || What are the main competencies of the modern professional? || 1
 +
| Question || What are the most used frameworks in frontend development? || 1
 
|-
  
|-
−
| Question || What are the main competencies of the professional of the future (in 10 years)? || 1
 +
| Question || What frameworks do best suit particular types of projects? || 1
 
|-
  
|-
−
| Question || What is the difference between soft-skills and hard-skills? || 1
 +
| Question || How can you understand which skills you need to master next? || 1
  +
|}
  +
==== Section 2 ====
  +
{| class="wikitable"
  +
|+
 
|-
  
|-
  +
! Activity Type !! Content !! Is Graded?
−
| Question || How can soft-skills of the specialists help in the hi-tech business? || 1
  
 
|-
  
|-
−
| Question || What is a portfolio of the projects? || 1
 +
| Question || What is the purpose of tags head, body? || 1
 
|-
  
|-
−
| Question || What is a portfolio of the career? || 1
 +
| Question || What is the difference between inline and block elements? || 1
 
|-
  
|-
−
| Question || What are the most important career trends now? Use the examples from your sphere. || 0
 +
| Question || Where you can find styles applied to pseudo-classes in the devtools? || 1
 
|-
  
|-
  +
| Question || How do you add a new element to a page in the devtools? || 0
−
| Question || Find 1-2 examples of successful careers in IT-sphere. Why do you think this people are successful? What can inspire you and what can prevent you from future mistakes? || 0
  
 
|-
  
|-
  +
| Question || What is the purpose of DOCTYPE tag? || 0
−
| Question || Do you know people who failed but managed to overcome the difficulties and progress? Why do you think they managed to face the challenges? || 0
  
 
|-
  
|-
  +
| Question || What is semantic markup? What is accessibility in contect of HTML? || 0
−
| Question || Are you a “slash-person”? How do you think career portfolio can be useful or challenging for modern career modelling? || 0
  
  +
|}
  +
==== Section 3 ====
  +
{| class="wikitable"
  +
|+
 
|-
  
|-
  +
! Activity Type !! Content !! Is Graded?
−
| Question || How to create the project portfolio? || 0
  
 
|-
  
|-
−
| Question || Questions for exam preparation within this section || 0
 +
| Question || Which datatypes do exist in JavaScript? || 1
 
|-
  
|-
−
| Question || What does it mean to be a “professional of the future”? || 0
 +
| Question || What is the object in JavaScript? || 1
 
|-
  
|-
−
| Question || Why do some people become “overqualified”? Is it good of bad for the career? || 0
 +
| Question || Which control structures in JavaScript do you know? || 1
 
|-
  
|-
−
| Question || What is a dream career for you? || 0
 +
| Question || What is the difference between arrow and classical functions? || 0
 
|-
  
|-
−
| Question || Name 2-3 projects in which you would like to participate in the same time. Why will you be able to combine them effectively? || 0
 +
| Question || What is the difference between var, let and const? || 0
 
|-
  
|-
−
| Question || How did labor market change within past 3 years? Why? What are the main tendencies for the future (3-5 years)? || 0
 +
| Question || What is JSON? Which instruments do we have in JavaScript for work with JSON? || 0
 
|}
 
|}
−
==== Section 2 ====
 +
==== Section 4 ====
 
{| class="wikitable"
  
{| class="wikitable"
 
|+
 
|+
Line 181: Line 226:
 
! Activity Type !! Content !! Is Graded?
  
! Activity Type !! Content !! Is Graded?
 
|-
  
|-
−
| Question || What is an educational trajectory? || 1
 +
| Question || Do we have any possibility to run multiple threads in JavaScript? || 1
 
|-
  
|-
−
| Question || Do you need an educational trajectory only while studying in the university? Explain your answer. || 1
 +
| Question || What is the Promise? Why do we need async and await keywords? || 1
 
|-
  
|-
−
| Question || What is professional trajectory? || 1
 +
| Question || What is TypeScript and which problems it solves? || 1
 
|-
  
|-
−
| Question || How are professional and educational trajectories connected? || 1
 +
| Question || How do we set a callback for any event? || 0
 
|-
  
|-
−
| Question || What is a competence profile of professional? || 1
 +
| Question || What is the difference between Promise.all() and Promice.race()? || 0
 
|-
  
|-
−
| Question || Which modules of your career trajectory you would highlight as crucial ones? Why? || 0
 +
| Question || How does the event loop wokr? || 0
  +
|}
  +
==== Section 5 ====
  +
{| class="wikitable"
  +
|+
 
|-
  
|-
  +
! Activity Type !! Content !! Is Graded?
−
| Question || How is your current educational trajectory connected to your career trajectory? Do you think there is a space for unexpected lines and flexibility? || 0
  
 
|-
  
|-
−
| Question || What are the main competences of the modern IT-specialist? Why have you chosen those? || 0
 +
| Question || What is the main difference between class components and functional components? || 1
 
|-
  
|-
  +
| Question || How to use React without JSX? || 1
−
| Question || How would you rate your level of the development of your professional on your competence map? Do you see the development potential? || 0
  
 
|-
  
|-
−
| Question || How can you use your competence map in your future life? || 0
 +
| Question || What is Virtual DOM? || 1
 
|-
  
|-
−
| Question || Test questions for exam preparation within this section || 0
 +
| Question || What is the difference between useCallback and useMemo? || 0
 
|-
  
|-
−
| Question || What is lifelong learning? Do you share the values of this principles? || 0
 +
| Question || What is a controlled component? What is an uncontrolled component? || 0
 
|-
  
|-
−
| Question || What your vision of your future career? Is it flexible enough? || 0
 +
| Question || Which lifecycle methods do exist in React? || 0
  +
|}
  +
==== Section 6 ====
  +
{| class="wikitable"
  +
|+
 
|-
  
|-
  +
! Activity Type !! Content !! Is Graded?
−
| Question || How would you understand that you achieved the “top”? || 0
  
 
|-
  
|-
−
| Question || Do you think IT-specialist should develop his soft-skills constantly? Why? || 0
 +
| Question || What is the boilerplate? || 1
 
|-
  
|-
−
| Question || Which benefits does emotional intelligence provide to IT-specialists? || 0
 +
| Question || What technologies of styling do we have? || 1
  +
|-
  +
| Question || What is the difference between Link and NavLink in React Router? || 1
  +
|-
  +
| Question || How to setup a React project without a boilerplate? || 0
  +
|-
  +
| Question || What is the difference between BrowserRouter and HashRouter? || 0
 
|}
 
|}
−
==== Section 3 ====
 +
==== Section 7 ====
 
{| class="wikitable"
  
{| class="wikitable"
 
|+
 
|+
Line 219: Line 278:
 
! Activity Type !! Content !! Is Graded?
  
! Activity Type !! Content !! Is Graded?
 
|-
  
|-
−
| Question || Who is a modern leader in your opinion? || 1
 +
| Question || What are the pros and cons of a mono-repository? || 1
 
|-
  
|-
−
| Question || Which concepts of leadership you can name? || 1
 +
| Question || What are the pros and cons of multi-repository? || 1
 
|-
  
|-
−
| Question || Who is a dialogical leader? || 1
 +
| Question || Which patterns are most wiedly used in React applications? || 1
 
|-
  
|-
−
| Question || What is emotional leadership? || 1
 +
| Question || What is Flux architecture? || 0
 
|-
  
|-
  +
| Question || Why do we need any external solution for state menegement? Why can't we use the Context API or useDispatch hook? || 0
−
| Question || What is success? || 1
  
  +
|}
  +
==== Section 8 ====
  +
{| class="wikitable"
  +
|+
 
|-
  
|-
  +
! Activity Type !! Content !! Is Graded?
−
| Question || Who is an inspiring leader for you? Why? || 0
  
 
|-
  
|-
−
| Question || Why does dialogical leader is crucial for the business teams working in hi-tech sector? || 0
 +
| Question || How to track rerenders in React? || 1
 
|-
  
|-
  +
| Question || How to avoid unnecessary rerenders in React? || 1
−
| Question || What are your favorite inspirational quotes of famous people from your sphere of interest about career and leadership? || 0
  
 
|-
  
|-
−
| Question || Should IT-specialist be a leader? Why? What kind of leader he/she should be? || 0
 +
| Question || What is SonarQube? Why do we need it? || 1
 
|-
  
|-
−
| Question || What are the most important skills of the leader of IT-team? || 0
 +
| Question || Why do we need to use code linters? || 0
 
|-
  
|-
−
| Question || Test questions for exam preparation within this section || 0
 +
| Question || What is the difference between test runner and testing framework? || 0
 
|-
  
|-
−
| Question || How to combine successful career and personal life? || 0
 +
| Question || Why do we need react-testing-library? || 0
  +
|}
  +
==== Section 9 ====
  +
{| class="wikitable"
  +
|+
 
|-
  
|-
  +
! Activity Type !! Content !! Is Graded?
−
| Question || Why are women leaders are important for the hi-tech sector? || 0
  
 
|-
  
|-
  +
| Question || What is npm in Node? || 1
−
| Question || What are the features of success? Find the example of successful professional in IT-sphere. Why do you think they are successful? || 0
  
 
|-
  
|-
−
| Question || What are the features of the team? What is the difference between team and working group? || 0
 +
| Question || How does Node prevent blocking code? || 1
 
|-
  
|-
−
| Question || What are the basic rules of teambuilding? || 0
 +
| Question || What is the NodeJS Process Model? || 1
  +
|-
  +
| Question || Why should you separate Express 'app' and 'server'? || 0
  +
|-
  +
| Question || What is a module in NestJS? What is an interceptor? || 0
  +
|-
  +
| Question || What is a middleware in ExpressJS? || 0
 
|}
 
|}
 
=== Final assessment ===
  
=== Final assessment ===
 
'''Section 1'''
  
'''Section 1'''
  +
−
# Write the essay on the topic of the “Me as a professional of the future”’
  
−
# Make the report on the actual situation in the labor market for you specialization and prognosis of its future changes (3-5 years lag).
  
−
# Create and present the portrait of the “super professional” in the sphere of your specialization.
  
 
'''Section 2'''
  
'''Section 2'''
  +
# How can you center an element inside of a div container with predefined width and height?
−
# Create your educational trajectory
  
  +
# What properties of flex elements do you know?
−
# Create your professional trajectory
  
  +
# How does a browser understand which CSS rule to apply in case of conflict?
−
# Create your dynamic competence profile
  
 
'''Section 3'''
  
'''Section 3'''
  +
# How does prototypical inheritance work?
−
# Make a presentation of yourself: a) as a leader of your own life b) leader of your team c) leader of the positive changes
  
  +
# What is the difference between Map and WeakMap?
−
# Make a presentation of your “dream team”. Who will be in this team? Why? What are the values you all share? Why do people in the team can see you as a leader.
  
  +
# Why can “this” be lost in JavaScript?
  +
'''Section 4'''
  +
# What are micro-tasks and macro-tasks?
  +
# What is the difference between bubbling and capturing?
  +
# What is the Event delegation?
  +
'''Section 5'''
  +
# How does React check if a component needs to be rerendered?
  +
# What is the difference between Component and PureComponent?
  +
# How to emulate lifecycle methods in functional components?
  +
'''Section 6'''
  +
# What is babel? Why do we need it?
  +
# What is better: axios or Fetch API?
  +
'''Section 7'''
  +
# Describe the concept of stateless and stateful components
  +
# Describe the concept of dumb and smart components
  +
'''Section 8'''
  +
# How to emulate browser features (cookies, events, etc.) in unit tests?
  +
# Which main optimization problems in React do you know?
  +
# How do you test asynchronous functions?
  +
'''Section 9'''
  +
# How to make a post request in Node.js?
  +
# How to create a simple server in Node.js that returns Hello World?
  +
# What is the difference between NodeJS Environment and browser environment?
  +
# P.1.2.10 Section 10
  +
# Section title: Technologies overview: workers, WebSockets, GraphQL, Web Components, Progressive Web Apps, etc.
  +
# Topics covered in this section:
  +
# Service Workers, Web Workers
  +
# WebSockets
  +
# GraphQL
  +
# Web Components
  +
# Progressive Web Apps
  +
# What forms of evaluation were used to test students’ performance in this section?
  +
# Typical questions for ongoing performance evaluation within this section
  +
# What are the concepts lying behind Web Components?
  +
# What are the concepts lying behind PWA?
  +
# What is the difference between Service Workers and Web Workers
  +
# Typical questions for seminar classes (labs) within this section
  +
# What is the difference between query and mutation in GraphQL
  +
# Why do we need Web Sockets?
  +
# Test questions for final assessment in this section
   
 
=== The retake exam ===
  
=== The retake exam ===
Line 270: Line 381:
   
 
'''Section 3'''
  
'''Section 3'''
  +
  +
'''Section 4'''
  +
  +
'''Section 5'''
  +
  +
'''Section 6'''
  +
  +
'''Section 7'''
  +
  +
'''Section 8'''
  +
  +
'''Section 9'''

Revision as of 00:25, 9 September 2022

Frontend Web Development

  • Course name: Frontend Web Development
  • Code discipline: R-01
  • Subject area:

Short Description

This course covers the following concepts: The main goal of the course is to introduce modern concepts of frontend development in the industry to the listeners and give them basic knowledge and practical skills that can be helpful at their first job as a frontend developer. We will explore such topics as pages markup with HTML and CSS, writing business logic using JavaScript and TypeScript, development of Single Page Applications with modern frameworks and libraries (Angular, React, Vue), usage of relevant technologies and approaches (CSS-in-JS, GraphQL, WebSockets, Web Components, etc.).; As a participant of the course you will develop your own SPA that will interact either with the API provided by us or with the open API of any popular service..

Prerequisites

Prerequisite subjects

Prerequisite topics

Course Topics

Course Sections and Topics
Section Topics within the section
Introduction. Current state of the industry. Developer roadmap and technologies overview.
  1. Actual technologies in the industry
Markup. HTML, CSS, DOM and styles inspector in browser.
  1. Basics of HTML5
  2. Basics of CSS3
JavaScript. Syntax, data types, paradigms, specifics.
  1. Code structure
  2. Variables
  3. Control structures
  4. Classical operators (math, comparison, logical)
  5. Functions
  6. Data types
JavaScript. Engine and execution environments specifics. TypeScript.
  1. Synchronous and asynchronous execution
  2. Event loop
  3. Language features for asynchronous code
  4. Scope and closures
  5. Browser environment (DOM manipulations, events, etc.)
React. Basics, render concepts, hooks, devtools.
  1. Pure React
  2. JSX
  3. Class components
  4. Functional components
  5. Hooks
  6. React DevTools
React. Ecosystem, CSS-in-JS, routing, webpack + babel.
  1. React Router
  2. CSS-in-JS: Styled Components, Emotion
  3. Other useful libraries (forms, network, animations, etc.)
  4. create-react-app and other boilerplates
React. Applications architecture, stateless and stateful components, dumb and smart components, global state management.
  1. Mono- vs multi-repository structure of enterprise projects
  2. Stateless and stateful components concept
  3. Dumb and smart components concept
React. Code quality, linting, testing, optimizations.
  1. SonarQube for frontend projects
  2. ESLint, Prettier and settings presets for code linting and formatting
  3. Introduction to unit-testing of React components
NodeJS: JavaScript on backend, ExpressJS, NestJS, etc.
  1. NodeJS API Overview

Intended Learning Outcomes (ILOs)

What is the main purpose of this course?

After the course is completed, a student should know the basics of:

ILOs defined at three levels

Level 1: What concepts should a student know/remember/explain?

By the end of the course, the students should be able to ...

  • Resources that can help in furhther development of their skills
  • Resources that can help during the work as a frontend web developer
  • Role of frontend web-interfaces in modern systems

Level 2: What basic practical skills should a student be able to perform?

By the end of the course, the students should be able to ...

  • Key concepts that are laid into the basis of JavaScript
  • Purpose of modern frontend frameworks
  • Key concepts that are laid into the React framework
  • What are the other technologies that appear in the JavaScript ecosystem

Level 3: What complex comprehensive skills should a student be able to apply in real-life scenarios?

By the end of the course, the students should be able to ...

  • Perform everyday tasks of frontend web developer:
  • Develop view of pages and components using HTML and CSS
  • Write business logic using JavaScript and/or TypeScript
  • Perform HTTP requests to an API and process responses
  • Configure page appearance depending on routes
  • Handle HTML forms

Grading

Course grading range

Grade Range Description of performance
A. Excellent 80-100 -
B. Good 65-79 -
C. Satisfactory 50-64 -
D. Poor 0-49 -

Course activities and grading breakdown

Activity Type Percentage of the overall course grade
Labs/seminar classes 10
Interim performance assessment 40
Exams 50

Recommendations for students on how to succeed in the course

Resources, literature and reference materials

Open access resources

  • Role of frontend web-interfaces in modern systems
  • What should a student be able to understand at the end of the course?
  • Current state of the industry of frontend web development
  • Key concepts that are laid into the basis of JavaScript
  • Purpose of modern frontend frameworks
  • Key concepts that are laid into the React framework
  • What are the other technologies that appear in the JavaScript ecosystem
  • What should a student be able to apply at the end of the course?
  • Setup and develop basic single page application using React
  • Perform everyday tasks of frontend web developer:
  • Develop view of pages and components using HTML and CSS
  • Write business logic using JavaScript and/or TypeScript
  • Perform HTTP requests to an API and process responses
  • Configure page appearance depending on routes
  • Handle HTML forms

Closed access resources

Software and tools used within the course

Teaching Methodology: Methods, techniques, & activities

Activities and Teaching Methods

Activities within each section
Learning Activities Section 1 Section 2 Section 3 Section 4 Section 5 Section 6 Section 7 Section 8 Section 9
Development of individual parts of software product code 1 1 1 1 1 1 1 1 1
Homework and group projects 1 1 1 1 1 1 1 1 1

Formative Assessment and Course Activities

Ongoing performance assessment

Section 1

Activity Type Content Is Graded?
Question What are the most used frameworks in frontend development? 1
Question What frameworks do best suit particular types of projects? 1
Question How can you understand which skills you need to master next? 1

Section 2

Activity Type Content Is Graded?
Question What is the purpose of tags head, body? 1
Question What is the difference between inline and block elements? 1
Question Where you can find styles applied to pseudo-classes in the devtools? 1
Question How do you add a new element to a page in the devtools? 0
Question What is the purpose of DOCTYPE tag? 0
Question What is semantic markup? What is accessibility in contect of HTML? 0

Section 3

Activity Type Content Is Graded?
Question Which datatypes do exist in JavaScript? 1
Question What is the object in JavaScript? 1
Question Which control structures in JavaScript do you know? 1
Question What is the difference between arrow and classical functions? 0
Question What is the difference between var, let and const? 0
Question What is JSON? Which instruments do we have in JavaScript for work with JSON? 0

Section 4

Activity Type Content Is Graded?
Question Do we have any possibility to run multiple threads in JavaScript? 1
Question What is the Promise? Why do we need async and await keywords? 1
Question What is TypeScript and which problems it solves? 1
Question How do we set a callback for any event? 0
Question What is the difference between Promise.all() and Promice.race()? 0
Question How does the event loop wokr? 0

Section 5

Activity Type Content Is Graded?
Question What is the main difference between class components and functional components? 1
Question How to use React without JSX? 1
Question What is Virtual DOM? 1
Question What is the difference between useCallback and useMemo? 0
Question What is a controlled component? What is an uncontrolled component? 0
Question Which lifecycle methods do exist in React? 0

Section 6

Activity Type Content Is Graded?
Question What is the boilerplate? 1
Question What technologies of styling do we have? 1
Question What is the difference between Link and NavLink in React Router? 1
Question How to setup a React project without a boilerplate? 0
Question What is the difference between BrowserRouter and HashRouter? 0

Section 7

Activity Type Content Is Graded?
Question What are the pros and cons of a mono-repository? 1
Question What are the pros and cons of multi-repository? 1
Question Which patterns are most wiedly used in React applications? 1
Question What is Flux architecture? 0
Question Why do we need any external solution for state menegement? Why can't we use the Context API or useDispatch hook? 0

Section 8

Activity Type Content Is Graded?
Question How to track rerenders in React? 1
Question How to avoid unnecessary rerenders in React? 1
Question What is SonarQube? Why do we need it? 1
Question Why do we need to use code linters? 0
Question What is the difference between test runner and testing framework? 0
Question Why do we need react-testing-library? 0

Section 9

Activity Type Content Is Graded?
Question What is npm in Node? 1
Question How does Node prevent blocking code? 1
Question What is the NodeJS Process Model? 1
Question Why should you separate Express 'app' and 'server'? 0
Question What is a module in NestJS? What is an interceptor? 0
Question What is a middleware in ExpressJS? 0

Final assessment

Section 1

Section 2

  1. How can you center an element inside of a div container with predefined width and height?
  2. What properties of flex elements do you know?
  3. How does a browser understand which CSS rule to apply in case of conflict?

Section 3

  1. How does prototypical inheritance work?
  2. What is the difference between Map and WeakMap?
  3. Why can “this” be lost in JavaScript?

Section 4

  1. What are micro-tasks and macro-tasks?
  2. What is the difference between bubbling and capturing?
  3. What is the Event delegation?

Section 5

  1. How does React check if a component needs to be rerendered?
  2. What is the difference between Component and PureComponent?
  3. How to emulate lifecycle methods in functional components?

Section 6

  1. What is babel? Why do we need it?
  2. What is better: axios or Fetch API?

Section 7

  1. Describe the concept of stateless and stateful components
  2. Describe the concept of dumb and smart components

Section 8

  1. How to emulate browser features (cookies, events, etc.) in unit tests?
  2. Which main optimization problems in React do you know?
  3. How do you test asynchronous functions?

Section 9

  1. How to make a post request in Node.js?
  2. How to create a simple server in Node.js that returns Hello World?
  3. What is the difference between NodeJS Environment and browser environment?
  4. P.1.2.10 Section 10
  5. Section title: Technologies overview: workers, WebSockets, GraphQL, Web Components, Progressive Web Apps, etc.
  6. Topics covered in this section:
  7. Service Workers, Web Workers
  8. WebSockets
  9. GraphQL
  10. Web Components
  11. Progressive Web Apps
  12. What forms of evaluation were used to test students’ performance in this section?
  13. Typical questions for ongoing performance evaluation within this section
  14. What are the concepts lying behind Web Components?
  15. What are the concepts lying behind PWA?
  16. What is the difference between Service Workers and Web Workers
  17. Typical questions for seminar classes (labs) within this section
  18. What is the difference between query and mutation in GraphQL
  19. Why do we need Web Sockets?
  20. Test questions for final assessment in this section

The retake exam

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Retrieved from "https://eduwiki.innopolis.university/index.php?title=IU:TestPage&oldid=7544"