Работа с визуализацией JS. Обзор основных концепций JavaScript

qliksense-expert — Sun, 13 Oct 2019 22:51:46 +0000

Что такое Virtual DOM? Что такое виртуальный DOM?

Виртуальный DOM (VDOM) — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется согласованием.

Такой подход и делает API React декларативным: вы указываете, в каком состоянии должен находиться пользовательский интерфейс, а React добивается, чтобы DOM соответствовал этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые в противном случае пришлось бы использовать при разработке приложения.

Поскольку «виртуальный DOM» — это скорее паттерн, чем конкретная технология, этим термином иногда обозначают разные понятия. В мире React «виртуальный DOM» обычно ассоциируется с React-элементами , поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React.

Теневой DOM похож на виртуальный DOM?

Нет, они совсем разные. Теневой DOM (Shadow DOM) — это браузерная технология, предназначенная в основном для определения переменных и CSS в веб-компонентах. Виртуальный DOM — это концепция, реализованная библиотеками в JavaScript поверх API браузера.

Что такое «React Fiber»?

Fiber — новый механизм согласования в React 16, основная цель которого сделать рендеринг виртуального DOM инкрементным.

Пояснение с Toster.RU

Ну вот есть DOM. Он медленный, и дергать его просто так не стоит. А есть виртуальный DOM, что-то типа прослойки между вашим кодом и реальным DOM. Вы можете дергать виртуальный DOM сколько вам душе угодно, а прослойка эта соберет всю инфу о том как вы чего делали, и попробует оптимизировать взаимодействие с реальным DOM что бы вышло как можно меньше действий.

Пример – задача простая, у вас есть таблица и нужно постоянно обновлять ячейки новым значением. Значение приходят из апишки раз в пару десятков милисекунд (какая-то реалтайм статистика к примеру). Значения эти – просто массив данных.

Решение в лоб – каждый раз когда приходят данные, дропать старую таблицу, проходить циклом по массиву и формировать новую. Это куча операций с DOM. У вас каждые n милисекунд будет полностью перестраиваться вся эта штука, дропаться и создаваться новые элементы и все это будет ужасно долго пересчитываться и перерисовываться.

А теперь добавим между всем этим виртуальную апишку, которая запоминает что она там в прошлый раз создала и что надо в этот раз создать. Вы все так же влоб проходите циклом по массиву и просите виртуальный дом построить новую апишку, а виртуальный дом будет стараться переиспользовать то что у него уже есть, ну и все в таком духе. За счет этого получается нефиговый прирост производительности (но есть потери на работу самого виртуального DOM, зато можно фигачить как хочешь).

Если же прослойку эту сделать со своим интерфейсом, можно получить слой абстракции для работы с UI. Именно это предлагает тот же React. Слой абстракции над UI. Вы можете работать с реактом, но UI будет отрисовываться не через DOM а скажем… это может быть нативный интерфейс мобильной платформы (гуглить native-react). Ну и т.д.

Рендеринг – отображение конечного результата

Javascript фреймворки в первую очередь стоит сравнить по рендерингу страницы. Современная архитектура допускает два вида:

на стороне клиента (страница отрисовывается за счет мощностей ПК пользователя)
или на стороне сервера.

DOM – Document Object Model – объектная модель документа, позволяющая считывать и менять содержимое, оформление и даже структуру html-документов. Каждый из фреймворков подходит по-своему к обработке DOM что и оказывает влияние на рендеринг конечной страницы, отображаемой на экране пользователя.

Vue.js и React создают копию DOM, обрабатывают ее, а затем результат сравнивается с исходной версией. В конечном документе (то есть на экране пользователя) заменяются только те части страницы, которые отличаются от результатов обработки.

Это значительно ускоряет загрузку и рендеринг страницы. Соответственно сокращается объем трафика, что особенно важно для пользователей мобильных устройств.

В корне отличается подход к обработке DOM фреймворком Angular версии 1.x и выше. Здесь происходит разделение на два потока, причем за рендеринг DOM «отвечает» браузер (клиентская часть), а за создание директив, загрузку кода и сервисов – общий поток (серверная часть).

Но это совсем не значит, что рендеринг происходит на стороне клиента – визуализация по-прежнему производится серверами. Следовательно, SEO оптимизация не вызовет затруднений. Поисковым роботам будет предоставлена корректная страница при индексации.

Model-View-Controller (MVC) – шаблон проектирования Модель-Представление-Контроллер

Что такое шаблон проектирования Model-View-Controller? MVC включает в себя три главных его части:

Model (Модель) – хранит данные приложения (предоставляет данные и реагирует на команды контроллера, изменяя своё состояние);
View (Представление) – представляет модель клиенту (отвечает за отображение данных модели пользователю, реагируя на изменения модели);
Controller (Контроллер) – модифицирует модель, реагируя на события от клиента (интерпретирует действия пользователя, оповещая модель о необходимости изменений).

HTML Canvas

HTML Canvas — это удивительная технология для рисования, встроенная во все современные браузеры. С помощью Canvas вы можете рисовать фигуры, управлять фотографиями, создавать игры и анимировать фактически что угодно — всё это с правильными веб-стандартами. Вы даже можете делать мобильные приложения.

Тег – это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript.

Node.JS

Node.js разработал Райан Даль (англ. Ryan Dahl) в 2009 году.

Node.js — это среда выполнения JavaScript. Это JavaScript фреймворк, основанный на движке V8 от Google, созданный для решения проблемы одновременной обработки большого количества запросов.

Движок принимает код JavaScript и компилирует его в C++, который выполняется с молниеносной скоростью. Движок V8 ( он транслирует JavaScript в машинный код) делает это «на лету».

Frontend и Backend – что это такое и как они взаимодействуют?

Фронтенд – все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript. Frontend – это разработка пользовательского интерфейса и функциональности, которые работают на клиентской стороне веб-сайта или приложения.
- HTML (HyperText Markup Language) — язык разметки документов, при помощи которого формируется структура страницы: заголовки, абзацы, списки и так далее;
- CSS (Cascading Style Sheets) — язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду ваш браузер понимает, как именно отображать элементы. CSS задает цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Еще он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом;
- JavaScript — это язык, который создавался для того, чтобы оживить веб-страницы. Его задача — реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Еще он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.
Бэкенд – все, что работает на сервере, то есть «не в браузере» или «на компьютере/клиенте».
Backend – это серверная логика веб-приложения. Здесь реализуется работа с хранилищем данных, поэтому человек, занимающийся разработкой серверной логики, должен иметь навыки работы с базами данных.
- Backend-разработчик может применять любые инструменты, доступные на его сервере: Ruby, PHP, Python, Java, Node.JS, C# и т.д.
- Для backend-разработки используются разные системы управления базами данных: MySQL, PostgreSQL, SQLite, MongoDB и т.п.
Взаимодействие frontend и backend происходит по кругу: frontend отправляет пользовательскую информацию в backend, там она обрабатывается и возвращается обратно, приняв понятную форму.

Что такое FizzBizz тест

FizzBizz – как правило, небольшой тест, направленный на отсеивание неопытных разработчиков. Я думаю, вы будете удивленны как много javascript разработчиков не умеют писать такие тесты.

Как правило, такие тесты не несут в себе большой смысловой нагрузки. Он направлен исключительно на проверку способностей потенциальных кандидатов.

Тестирование JavaScript

Автоматизированное тестирование – это когда тесты написаны отдельно от кода, и можно в любой момент запустить их и проверить все важные случаи использования.

BDD (Behaviour Driven Development) – поведенческие тесты кода

BDD предполагает описание тестировщиком или аналитиком пользовательских сценариев на естественном языке — если можно так выразиться, на языке бизнеса.

туду

TDD (Test Driven Development) – Разработка через тестирование

TDD — это больше о программировании и тестировании на уровне технической реализации продукта, когда тесты создают сами разработчики.