IU:TestPage

From IU
Revision as of 00:25, 9 September 2022 by R.sirgalina (talk | contribs)
Jump to navigation Jump to search

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"