Module 3. Training materials

The module

Key concepts of JavaScript and setting up the environment

1. Key concepts of the JavaScript language

a Lesson in which understand three key concepts of the JavaScript language: the asynchronous, event-driven model, odnopotochnitsa (Ilya Klimov, JavaScript.Ninja Networks).

2. Setting up the environment for a new project on JavaScript

the Video, which describes how to configure the environment for real projects in JavaScript (Node.js). As a development environment for the considered environment settings using Visual Studio Code. Reviewed settings are relevant for different types of projects in JavaScript (Ilya Klimov, JavaScript.Ninja Networks).

▼

Single page application (SPA) architectural pattern MVC

1. MVC pattern

Lecture on introduction to the architectural pattern Model-View-Controller and its variants (Anton Kirsanov, Academy of Yandex).

2. Single Page Application using pure JavaScript

the Master class, which deals with the practical implementation of the architecture of single page application in JavaScript (Sergey Malukov, Avito).

3. State management in JavaScript applications

a Series of videos that discuss various aspects of state management in modern JavaScript applications: problems of state management, Flux architecture, the correct use of the application's global state, specific tools for state management and so forth (Ilya Klimov, JavaScript.Ninja Networks).

▼

Object-oriented programming in JavaScript

1. Objects in JavaScript

the Screencast, which discusses how the object definitions and the basic operations that apply to object properties (Artem Greenberg, Sorax).

2. Prototypical inheritance

the Lesson, which concerned the implementation of classes and inheritance in JavaScript, as well as the concept of prototypes (Monster Lessons).

3. Hagfish

this Lesson, which addresses the concept and implementation of mixins (mixins) JavaScript (Monster Lessons).

4. The implementation of private properties and methods

the Lesson, which concerned the implementation of private properties and methods in JavaScript using design pattern "Module" (Monster Lessons).

5. Descriptors, getters and setters properties

the Lesson, which discusses the possibility of the JavaScript language that allow you to perform a "thin" behaviors properties: the ability to modify, delete, control the visibility in a loop and assign the property functions to get and set znaczny (Vladilen Minin, Vladilen by JavaScript).

▼

The call context, scope, closures

1. Lexical environment

the Lesson, which discusses the concept and principle of operation of the lexical environment in JavaScript (GoIT).

2. The call context

Lesson, which deals with the basic sitting about the context and the specificities of its use in functions, prototypes and objects (Monster Lessons).

3. Change the invocation context

a Lesson in more detail the functions of the JavaScript language that allow you to change the calling context (Vladilen Minin, Vladilen by JavaScript).

4. Circuit

the Lesson, which discusses the concept and the mechanism of closures in JavaScript (Monster Lessons).

5. Circuit and scope

the Video, which discusses the relationship between closures, scopes, and data transmission by value and by reference in JavaScript (Ilya Klimov, JavaScript.Ninja Networks).

▼

Interaction with the server

1. Data retrieval from server using XMLHttpRequest

the Lesson, which examines the basic features of the XMLHttpRequest object to interact with the server (Monster Lessons).

2. Receiving data from the server using jQuery

the Lesson, which examines the basic features of the jQuery library for interaction with the server (Monster Lessons).

3. Receiving data from the server using the method fetch

the Lesson, which is described in more detail "XMLHttpRequest new generation" fetch (Monster Lessons).

4. Crossdomain requests

a Lesson in which the principles of creating and executing crossdomain queries, as well as mechanisms such as CORS, SDOP and others (Ilya Klimov, JavaScript.Ninja Networks).

▼

Modules and project structure, package managers

1. Introduction to NPM

the Screencast that addresses the appointment of the NPM, the principles of operation and basic commands that you can use when working with the package Manager (Ilya Kantor JavaScript.ru).

2. Introduction to Yarn

the Lesson, which examines the basic features of the package Manager Yarn and its difference from penegra of NPM packages (Monster Lessons).

3. Managing dependencies in your JavaScript applications

a Lesson in which more again deals with the principle of dependency management in JavaScript applications when using package managers NPM or Yarn (Monster Lessons).

4. Semantic versioning

a Lesson in which the principles of semantic versioning with the versioning of libraries and programs in the context of npm packages (Monster Lessons).

5. Lock files for NPM and Yarn

this Lesson, which addresses the purpose and principle of use of Lock-files in batch managers NPM and Yarn (Monster Lessons).

6. Modules in JavaScript

the Video, which focuses on the development of modularity in JavaScript template Module, and formats AMD, CommonJS, UMD, ES6-module (Ekaterina Nazarova, .the getInstance).

7. ES6-module

the Lesson, which is discussed in more detail the syntax of declaring and using ES6 modules (Monster Lessons).

8. The file structure in a JavaScript project

this Lesson, which addresses two basic approaches to the organization of files in a JavaScript project: on the "file categories" and "fractal" (Ilya Klimov, JavaScript.Ninja Networks).

▼

Opportunities ECMAScript 2015 (ES6)

1. Setting transpiratsii JavaScript code using Babel.io

the Screencast that addresses the concept and purpose of transpiratsii JavaScript, as well as installing and configuring the library of Babel.io to work in the project. In addition, once the principles of operation of pacengo Manager NPM (Alexander Lushenko, WebDev from scratch).

2. Arrow functions

the Lesson, which examines the syntax arrow functions ES6, and their differences from "normal" JavaScript function (Monster Lessons).

3. The let keyword

this Lesson, which addresses the syntax for using the let keyword and its difference from a similar var (Monster Lessons).

4. The const keyword

the Lesson, which examines the syntax of using the const keyword and how it differs from the similar var (Monster Lessons).

5. The destructurization

the Lesson, which discusses the concept and syntax in ES6 deconstruction and its use to create more concise code (Monster Lessons).

6. The spread operator

the Lesson, which examines the syntax and use of spread operator in ES6 (Monster Lessons).

7. Template strings

the Lesson, which examines the syntax and benefits of using ES6 template strings (Monster Lessons).

8. Classes in ES6

the Screencast, which covers the syntax of the description of classes in ES6, and their capabilities (Vladilen Minin, Vladilen by JavaScript).

9. A Proxy object

the Screencast, which addresses Proxy is a special object in ES6, which pozvolaet to intercept references to another object and, if necessary, to modify them (Vladilen Minin, Vladilen by JavaScript).

10. Working with arrays

the Screencast that addresses opportunities ES6 to work with arrays (Vladilen Minin, Vladilen by JavaScript).

▼

Asynchronous programming

1. Model Event Loop

the report of the conference JSConf EU 2014, which is considered the model of an event cycle: addresses concepts such as the call stack, the queue and the event loop and explains how to use Camco event cycle work the setTimeout function and browser events (Philip Roberts, &yet).

2. Dive into Event Loop

the report of the conference JSConf.Asia 2018, which rakryvaetsya the internal structure of event loop: queue the render loop (Request Animation Frame, Style Calculation, Layout, Paint), microtask (Jake Archibald, Google).

3. Web Workers

the report of the conference fwdays JavaScript'18 dedicated Web Workers - HTML5 special API that allows you to create multithreaded applications with JavaScript (Sergey Melashich, Agilie).

4. The Callback function

the Screencast, which addresses the purpose and method of using callback functions in JavaScript, and the concept of Callback Hell and ways to solve this problem (Eugene Kalyuzhny, JSExpert).

5. Callback function on a practical example

Screencast which describes a practical example of using Callback functions (Ilya Klimov, JavaScript.Ninja Networks).

6. JavaScript Promises

the Screencast, which addresses the purpose and method of use of the Promise object, which appeared in the specification, ES6 (Vladilen Minin, Vladilen by JavaScript).

7. JavaScript Promises in a practical example

Screencast which describes a practical example of using JavaScript Promises (Ilya Klimov, JavaScript.Ninja Networks).

8. The design of the async/await

the Screencast, which considers the design of async/await in ES7 introduced to simplify working with JavaScript Promises (Vladilen Minin, Vladilen by JavaScript).

9. Generators and iterators

the class devoted to the study of the mechanisms of operation of generators and iterators (Vladilen Minin, Vladilen by JavaScript).

▼

Architectural patterns (design patterns)

1. Principles and techniques of writing efficient code

a Report in Courses on the development of interfaces of Yandex 2016, which rassmatrivajut SOLID principles and some design patterns for example, add functionality to an existing service (Alexander Zavyalov, Yandex).

2. The SOLID principles to JavaScript applications

the Report from the meet up MoscowJS 2016 dedicated to the use of SOLID principles in the design and implementation of JavaScript applications (Alexey Okhrimenko, IPONWEB).

3. JavaScript-patterns

a Report from the conference NDC London 2017, which tells about the organization of code using modules, about the pros and cons of new language constructs in JavaScript, and also about the current build tools and patterns associated with them. (Scott Allen, Microsoft/Medisolv).

4. Singleton pattern

a Lesson in which is seen a Singleton pattern that ensures a single instance of the object and makes it a global hotspot, as well as its implementation in JavaScript (Monster Lessons).

5. Pattern Module

Lesson, which deals with the Module pattern and its use for the organization of the modular structure of JavaScript applications (Monster Lessons).

6. The pattern "Publish/Subscribe"

Lesson, which deals with pattern "Publish/Subscribe" and use it for organization weak connectivity JavaScript object-the application (Monster Lessons).

7. Pattern Observer

Lesson, which deals with the Observer pattern and use it for organizing subscription mechanism that allows one object to monitor and respond to events occurring in other objects a JavaScript application (Monster Lessons).

8. Pattern Constructor

Lesson, which deals with the pattern Constructor and use it to create new objects in JavaScript apps (Monster Lessons).

9. Decorator pattern

Lesson, which deals with the Decorator pattern and its usage for dynamic connection functionality to objects in a JavaScript application (Monster Lessons).

10. Pattern Facade

the Lesson, which examines the pattern of Facade and its use for the organization of a simple interface to a complex system of objects in a JavaScript application (Monster Lessons).

11. Pattern Factory

Lesson, which deals with the Factory pattern, which allows to use one class to create objects of different types, and its implementation in JavaScript applications (Monster Lessons).

12. Pattern Strategy

a Lesson in which is seen a pattern Strategy and use it to define a family of similar algorithms that can be interchanged directly during program execution, and its implementation in a JavaScript application (Monster Lessons).

13. Refactoring and architectural patterns

Resource devoted to the topics of refactoring, design patterns, SOLID principles and the relationships between them (Alexander Shvets, Refactoring.Guru).

▼

Build automation application

1. Assembly of front end

Lesson school developers hh.ru, dedicated to the organization of the Assembly of the frontend and the corresponding classes of instruments. Understands practical example build a JavaScript application using the library Webpack (Lev Achasov, hh.ru).

2. The concept of Taskrunner and Bundler. Introduction to Gulp

Video overview of the concepts of Taskrunner and Bundler, as well as a practical introduction to build JavaScript applications using the library gulp.js. (Vitaly Cherenkov, Just development).

3. Build JavaScript applications using Broccoli.js

Series of screencasts dedicated to build JavaScript applications using the build system Broccoli.js library, which is used to build applications in the command-line tools framework Ember.js (Eugene Haberi, Flexberry PLATFORM).

▼

Checking code style and automation

1. The rules of code formatting

Video on recommended basic rules of formatting JavaScript code (JS-Lynda.com).

2. Linting JavaScript code with ESLint

the Lesson, which discusses the concept of linting code, and configuring ESLint library to detect and prevent errors (Monster Lessons).

3. Setting linting JavaScript and CSS files in Gulp and Webpack

Video overview of the linters for JavaScript and CSS, as well as setting appropriate linters when you build the project using the library gulp.js and Webpack (Daria Pushkarskaya, WebHero School).

4. Linting SASS code

the Video, which deals with a Linter for SASS code, setting lantinga SASS code gulp.js and example of checking the site code for errors. (Vitaly Cherenkov, Just development).

5. Configuring ESLint and Prettier in Visual Studio Code

the Video, which describes how to set up the environment for JavaScript development and libraries for linting JavaScript code to work in Visual Studio Code (Ilya Klimov, JavaScript.Ninja Networks).

6. Linting on projects with "bad" code

Video, which provides practical recommendations for the implementation of ESLint and Prettier on projects with unasledovannye "bad" code (code that is not tested, not verified by tools, etc) (Ilya Klimov, JavaScript.Ninja Networks).

7. Guidelines for writing "clean code"

summary of the book "Clean code" by Robert Martin is dedicated to recommendations about how to write well-supported and understandable source code. (Marat Tanchev, QIWI Blockchain Technologies).

▼

Application testing

1. The basics of testing web applications

the Lecture part of the course, which was conducted in the framework of the course "Developing Enterprise applications" in 2015, which addresses the concept of testing, classification of tests, the characteristics of the different types of tests, use of tests in the process of iteration tasks (Eugene Haberi, Flexberry PLATFORM).

2. Principles of automated testing web applications

the Video, which addresses issues such as cycle, Test Driven Design (TDD) and the pyramid of quality assurance applications (Ilya Klimov, JavaScript.Ninja Networks).

3. The basics of unit testing web applications

the Fragment class, which was conducted in the framework of the course "Developing Enterprise applications" in 2015, which deals with basic principles of unit testing, the pattern is the Arrange-Act-Assert (AAA) for writing tests, the notion of the testability of the module, as well as the concept and principles of using Stub and Mock objects to isolate the module (Eugene Haberi, Flexberry PLATFORM).

4. Dependency injection and inversion of control

Series of screencasts devoted to the study of the concepts and the principles of DI & IoC in JavaScript applications (Ilya Klimov, JavaScript.Ninja Networks).

5. Unit testing JavaScript applications

the Fragment class, which was conducted in the framework of the course "Developing Enterprise applications" in 2015, which examines tools for testing JavaScript applications, as well as practical example we consider an example of creating unit tests using QUnit test framework and Mock libraries Sinon.js (Eugene Haberi, Flexberry PLATFORM).

6. Basics End-to-End testing

the Video, which discusses the advantages of using End-to-End testing from the business point of view, as well as the main architectural principles End-to-End testing (Ilya Klimov, JavaScript.Ninja Networks).

7. Approaches to automate End-to-End tests

the Video, which discusses two paradigms for the automation of End-to-End tests: injection of JavaScript to the page and use a separate command to the server. The article also discusses examples of tools that implement these approaches: Selenium, Cypress, TestCafe (Ilya Klimov, JavaScript.Ninja Networks).

8. Infrastructure and mechanisms for the organization of End-to-End testing

the Video, which addresses the necessary organizational steps to create End-to-End tests: creating fixtures, implementation of a mechanism for loading fixtures to the server, build the project under the appropriate test environment (Ilya Klimov, JavaScript.Ninja Networks).

9. Testing web applications using Selenium

the Fragment class, which was conducted in the framework of the course "Developing Enterprise applications" in 2015, in which a practical example is examined using the Selenium Driver for the organization End-to-End tests. Example is implemented in the language C#, however, similarly to the Selenium API can be used in various programming languages, including JavaScript (Eugene Haberi, Flexberry PLATFORM).

▼