1. Сервлеты – особенности, преимущества и недостатки относительно CGI и FastCGI.Сервлеты – серверные сценарии, написанные на Java. Жизненным циклом управляет веб-контейнер (он же контейнер сервлетов). В отличие от CGI, запросы обрабатываются в отдельных потоках (а не процессах) на веб-контейнере.Преимущества:

Выполняются быстрее, чем CGI-сценарии. Хорошая масштабируемость. Надежность и безопасность (реализованы на JAVA) Платформенно-независимы Множество инструментов мониторинга и отладки

Недостатки: Слабое разделение уровня представления и бизнес-логики. Возможны конфликты при параллельной обработке запросов.

2. Многоуровневая архитектура приложений зачем нужна, из каких уровней состоит.В компьютерных технологиях трѐхуровневая архитектура предполагает наличие следующих компонентов приложения: клиентское приложение (терминал), подключенное к серверу приложений, который в свою очередь подключен к серверу базы данных. Терминал — это интерфейсный компонент, который представляет первый уровень, собственно приложение для конечного пользователя. Первый уровень не должен иметь прямых связей с базой данных, быть нагруженным основной бизнес-логикой и хранить состояние приложения. Сервер приложений располагается на втором уровне. На втором уровне сосредоточена большая часть бизнес-логики. Вне его остаются фрагменты, экспортируемые на терминалы (см.выше), а также погруженные в третий уровень хранимые процедуры и триггеры. Сервер базы данных обеспечивает хранение данных и выносится на третий уровень. Обычно это стандартная реляционная или объектно-ориентированная СУБД.

3. Обработка HTTP запроса сервлетом. Браузер формирует HTTP-запрос и отправляет его на сервер. Веб-контейнер создает объекты HttpServletRequest и HttpServletResponse. Веб-контейнер вызывает метод service сервлета. Сервлет формирует ответ и записывает его в поток вывода HttpServletResponse.

4. Шаблон MVC – состав, назначение, примеры реализации.Model-view-controller («Модель-представление-поведение) —архитектура программного обеспечения, в которой модель данных приложения, пользовательский интерфейс и управляющая логика разделены на три отдельных компонента так, что модификация одного из компонентов оказывает минимальное воздействие на остальные. MVC состоит из трех компонент: View (представление, пользовательский интерфейс), Model (модель, ваша бизнес логика) и Controller (контроллер, содержит логику на изменение модели при определенных действиях пользователя). Основная идея этого паттерна в том, что и контроллер и представление зависят от модели, но модель никак не зависит от этих двух компонент. Это как раз и позволяет разрабатывать и тестировать модель, ничего не зная о представлении и контроллерах. Пользователь видит представление, на нем же производит какие-то действия, эти действия представление перенаправляет контроллеру и подписывается на изменение данных модели, контроллер в свою очередь производит определенные действия над моделью данных, представление получает последнее состояние модели и отображает ее пользователю.

11. MVC модель JSF.

5. Конфигурация сервлета. Файл web.xml. Веб-контейнер создает один (строго) экземпляр сервлета на каждую запись в дескрипторе (servlet –

servlet-name – servlet-class) Веб-контейнер перенаправляет запрос с URL на конкретный сервлет в соответствии с конфигурацией.

Конфигурация задается в дескрипторе развертывания web.xml. Этот конфигурационный файл указывает параметры развертывания для модуля или приложения с определенными настройками, параметры безопасности и описывает конкретные требования к конфигурации. Для синтаксиса файлов дескриптора развертывания используется язык XML.

6. Архитектуры Model 1 и Model 2 – особенности, отличия, сфера применения.Модели 1 и 2 отличаются, по существу, тем, какой компонент выполняет большую часть обработки запроса. В Модели 1 JSP страница сама обрабатывает входящий запрос и генерирует ответ для клиента. Разделение представления и содержания присутствует, так как весь доступ к данным выполняется через компоненты Java-beans. Хотя, вероятно, Модель 1 вполне подходит для простых приложений, ее использование в сложных системах нежелательно. Неразборчивое использование этой архитектуры обычно ведет к большому количеству скриптлетов или Java-кода, внедренного в JSP-страницу, особенно, если необходимо выполнить объемную обработку запроса. За обработку данных и представления отвечает один и тот же компонент (сервлет или JSP). Архитектура Модели 2, является гибридной технологией обработки динамического содержания, так как она комбинирует использование сервлетов и JSP. Это позволяет воспользоваться преимуществами обеих технологий, применяя JSP для реализации уровня представления и сервлеты для объемной обработки данных. В этой схеме сервлет действует как контроллер и отвечает за обработку запроса и создание компонентов Java-beans, используемых JSP, а также в зависимости от действий пользователя принимает решение, какой JSP-странице перенаправить запрос. Обратите внимание, что непосредственно в JSP-странице нет никакой логики обработки информации; она просто отвечает за извлечение любых объектов или beans, которые, возможно, были предварительно созданы сервлетом, и получение динамического содержания от этого сервлета для включения в статические шаблоны. Предназначена для проектирования достаточно сложных веб-приложений. За обработку и представление данных отвечают разные компоненты (сервлеты и JSP).

7. Жизненный цикл сервлета.Загрузка классаСоздание экземпляра сервлетаВызов метода init()Вызов метода service() (обработка HTTP запросов)Вызов метода destroy()

8. JSF – особенности, преимущества и недостатки. JSF – фреймворк для разработки веб-приложений. Входит в состав платформы Java EE Основан на использовании компонентов. Для отображения данных используются JSP или XML-шаблоны (facelets)

Достоинства JSF Четкое разделение бизнес-логики и интерфейса (фреймворк реализует шаблон MVC) Управление обменом данными на уровне компонент. Простая работа с событиями на стороне сервера. Доступность нескольких реализаций от различных компаний-разработчиков. Расширяемость (можно использовать дополнительные наборы компонентов). Широкая поддержка со стороны интегрированных средств разработки (IDE)

Недостатки JSF Высокоуровневый фреймворк – сложно реализовывать не предусмотренную авторами

функциональность. Сложности с обработкой GET-запросов (устранены в JSF 2.0). Сложность разработки собственных компонентов.

9. ServletContext – особенности, для чего нужен.Контекст сервлетов API, с помощью которого сервлет может взаимодействовать со своим контейнером Доступ к методам осуществляется через интерфейс javax.servlet.ServletContext У всех сервлетов внутри приложения общий контекст В контекст можно помещать общую для всех сервлетов информацию (методы getAttribute и

setAttribute) ServletContext context=getServletContext(); Strin driverName = context.getInitParameter(“dname”);

10. Структура JSF приложения. JSP или XHTML-страницы, содержащие компоненты GUI. Библиотеки тегов. Управляемые бины. Дополнительные объекты (компоненты, конвертеры и валидаторы). Дополнительные теги. Конфигурация – faces-config.xml (опционально) Дескриптор развертывания – web.xml

10. Управление сессиями. HttpSession.HTTP-сессии

HTTP-stateless-протокол javax.servlet.HttpSession – интерфейс, позволяющий идентифицировать конкретного клиента

(браузер) при обработке множества HTTP-запросов от него Экземпляр HttpSession создается при первом обращение клиента к приложению и сохраняется

некоторое (настраиваемое) время после последнего обращения. Идентификатор сессии либо помещается в cookie, либо добавляется к URL. Сессия «привязана» к конкретному приложению, у разных приложений – разные сессии. В распределенном окружении обеспечивается сохранение целостности данных в HTTP-сессии

(независимо от количества экземпляров JVM) HttpSession session = request.getSession();

12. Фильтры сервлетов, реализация пред- и постобработки запросовФильтры позволяют осуществлять пред- и постобработку запросов до и после передачи их ресурсу (сервлету, JSP или HTML-странице). ● Пример предобработки — допуск к странице только авторизованных пользователей. ● Пример постобработки — запись в лог времени обработки запроса. ● Реализуют интерфейс javax.servlet.Filter. ● Ключевой метод — doFilter. ● Метод doFilter класса FilterChain передаёт управление следующему фильтру или целевому ресурсу; таким образом, возможна реализация последовательностей фильтров, обрабатывающих один и тот же запрос.

13. Создание пользовательского интерфейса в JSF приложениях. Иерархия компонентов JSF.Интерфейс строится из компонентов.Компоненты расположены на Facelets-шаблонах или страницах JSP.Компоненты реализуют интерфейс javax.faces.component.UIComponent.Можно создавать собственные компоненты.Компоненты на странице объединены в древовидную структуру – представление.Корневым элементом представления является экземпляр класса javax.faces.component.UIViewRoot.Иерархия классов: 1. javax.faces.component.UIComponent 1.1. javax.faces.component.UIComponentBase 1.1.1. javax.faces.component.UIOutput 1.1.1.1. javax.faces.component.UIInput 1.1.1.1.1. javax.faces.component.UISelectOne 1.1.1.1.2. javax.faces.component.UISelectMany ...14. Диспетчеризация запросов в веб-приложениях на Java. Интерфейс RequestDispatcher.

Сервлеты могут делегировать обработку запросов другим ресурсам (сервлетам, JSP и HTML-страницам). ● Диспетчеризация осуществляется с помощью реализаций интерфейса javax.servlet.RequestDispatcher. ● Два способа получения RequestDispatcher — через ServletRequest (абсолютный или относительный URL) и ServletContext (только абсолютный URL). ● Два способа делегирования обработки запроса — forward и include.

15. Класс FacesServlet – назначение, особенности конфигурации.Обрабатывает запросы с браузера. Формирует объекты-события и вызывает методы- слушатели. Конфигурация задаётся в web.xml.

16. JSP – особенности, достоинства и недостатки.Страницы JSP – это текстовые файлы, содержащие статический HTML и JSP-элементы.JSP-элементы позволяют формировать динамическое содержимое.При загрузке в веб-контейнер страницы JSP транслируются компилятором (jasper) в сервлеты.Позволяют отделить бизнес-логику от уровня представления (если их комбинировать с сервлетами).Преимущества:

Высокая производительность – транслируются в сервлеты. Не зависят от используемой платформы – код пишется на Java. Позволяют использовать Java API. Простые для понимания – структура похожа на обычный HTML.

Недостатки: Трудно отлаживать, если приложение целиком основано на JSP. Возможны конфликты при параллельной обработки нескольких запросов.

17. Навигация между страницами JSF приложения.Реализуется экземплярами класса NavigationHandler. Правила задаются в файле faces-config.xmlВ простом веб приложении навигация является статической. Это означает, что щелчок на определенной кнопке всегда приводит к выбору для подготовки к отображению конкретной (заранее заданной) JSF страницы. К каждой кнопке добавляется атрибут action:<h:commandButton label="Login" action="welcome"/>В большинстве веб приложений навигация не является статической. Поток страниц зависит не только от того, на какой кнопке выполнен щелчок, но и от того, какие входные данные предоставлены. Результат вычисляется в коде и в данном случае указывает, являются ли допустимыми имя пользователя и пароль. Для обеспечения динамической навигации кнопка отправки должна иметь выражение метода (method expression), такое, как <h:commandButton label="Login" action="#{loginController.verifyUser}"/>

18. Жизненный цикл JSP.Трансляция JSP в код сервлета.Компиляция сервлета.Загрузка класса сервлета.Создание экземпляра сервлета.Вызов метода jspinit().Вызов метода _jspService()Вызов метода jspDestroy()

19. Управляемые бины назначение, способы конфигурации, доступ из JSP.Содержат параметры и методы для обработки данных с компонентов.Используются для обработки событий UI и валидации данных.

Жизненным циклом управляет JSF Runtime EnvironmentДоступ из JSF-страниц осуществляется с помощью элементов EL.Конфигурация задается в faces-config.xml, либо с помощью аннотаций.20. JSP элементы.Комментарий - <%-- Comment --%>Директива - Управляют процессом трансляции страницы. <%@ directive %>Объявление - Позволяют объявлять поля и методы. <%! decl %>Скриплет - Позволяют задать Java-код, который будет выполняться при обработке запросов. <% code %>Выражение - Позволяют вывести результат вычисления выражения. <%= expr %>

21. Контекст управляемых бинов. Конфигурация контекста бина.Задается через faces-config.xml или с помощью аннотаций.6 вариантов конфигурации:@NoneScoped – контекст не определен, жизненным циклом управляют другие бины.@RequestScoped (применяется по умолчанию) – контекст-запрос.@ViewScoped – контекст-страница@SessionScoped – контекст-сессия@ApplicationScoped – контекст-приложение@CustomScoped – бин сохраняется в Map; программист сам управляет его жизненным циклом.

22. Правила трансляции JSP.Код JSP-страницы транслируется в Java-код сервлета с помощью компилятора JSP-страниц Jasper. Директивы управляют процессом трансляции страницыНа фазе трансляции каждый тип данных в странице JSP интерпретируется отдельно. Шаблонные данные трансформируются в код, который будет помещать данные в поток, возвращающий данные клиенту. Элементы JSP трактуются следующим образом: директивы, используемые для управления тем, как Web-контейнер переводит и выполняет страницу JSP;скриптовые элементы вставляются в класс сервлета страницы JSP;элементы в форме <jsp:XXX ... /> конвертируются в вызов метода для компонентов JavaBeans или вызовы API Java Servlet.

23. Конвертация данных JSF компонентов. Создание и назначение конвертеров.Конвертеры данных

Используются для преобразования данных компонента в заданный формат (дата, число и т.д.) реализуют интерфейс javax.faces.convert.Converter Существуют стандартные конвертеры для основных типов данных. Можно создавать собственные конвертеры

Назначение конвертеров ● Автоматическое (на основании типа данных):<h:inputText value="#{user.age}"/>● С помощью атрибута converter:<h:inputText converter="#{javax.faces.DateTime}"/>● С помощью вложенного тега:<h:outputText value="#{user.birthDay}"> <f:converter converterId="#{javax.faces.DateTime}"/></h:outputText>

24. Предопределенные переменные в JSP.В процессе трансляции контейнер добавляет в метод _jspService ряд объектов, которые можно

использовать в скриптлетах и выражениях:

Exception — используется только на страницах- перенаправлениях с информацией об ошибках (Error Pages). ● Page — API для доступа к экземпляру класса сервлета, в который транслируется JSP. ● PageContext — контекст JSP-страницы.

25. Валидация данных JSF компонентов. Способы валидации, создание и назначение валидаторов.Валидация данных JSF-компонентовОсуществляется перед обновлением значения компонента на уровне модели.Класс, осуществляющий валидацию, должен реализовывать интерфейс javax.faces.validator.ValidatorСуществуют стандартные валидаторы для основных типов данных.Можно создавать собственные валидаторы.Способы валидации данных:С помощью параметров компонента:<h:inputText id="zip" size="10"value="#{customerBean.zip}"required="true"></h:inputText><h:message for="zip"/>С помощью вложенного тега:<h:inputText id="quantity" size="4"value="#{item.quantity}"><f:validateLongRange minimum="1"/></h:inputText><h:message for="quantity"/>С помощью логики на уровне управляемого бина.

26. Директива Page – назначение, особенности и основные атрибуты.Позволяет задавать параметры, используемые контейнером при управлении жизненным циклом страницы.● Обычно расположена в начале страницы.● На одной странице может быть задано несколько директив page с разными указаниями контейнеру.● Синтаксис: <%@ page attribute="value" %>

27. Фаза формирование представления – назначение, основные события.● JSF Runtime формирует представление (начиная с UIViewRoot):● Создаются объекты компонентов.● Назначаются слушатели событий, конвертеры и валидаторы.● Все элементы представления помещаются в FacesContext.● Если это первый запрос пользователя к странице JSF, то формируется пустое представление.● Если это запрос к уже существующей странице, то JSF Runtime синхронизирует состояние компонентов представления с клиентом.

28. JSP Actions.

XML-элементы, позволяющие управлять поведением сервлета.● Синтаксис:<jsp:action_name attribute="value" />jsp:include Включает в страницу внешний файл во время обработки запроса.jsp:useBean Добавляет на страницу экземпляр Java Bean с заданным контекстом.jsp:getProperty jsp:setProperty Получение и установка свойств Java Bean.jsp:forward Перенаправление на другую страницу.

29. Фаза получения значений компонентов. Основные события, происходящие на этой фазе.На стороне клиента все значения хранятся в строковом формате — нужна проверка их корректности:● Вызывается конвертер в соответствии с типом данных значения.● Если конвертация заканчивается успешно, значение сохраняется в локальной переменной компонента.● Если конвертация заканчивается неудачно, создаётся сообщение об ошибке, которое помещается в FacesContext.

30. Шаблоны проектирования – что такое и для чего нужны. Отличия от архитектурных шаблонов.Архитектурные: Более высокий уровень по сравнению с шаблонами проектирования. ● Описывают архитектуру всей системы или приложения. ● Обычно имеют дело не с отдельными классами, а с целыми компонентами или модулями. ● Компоненты и модули могут быть построены с использованием различных шаблонов проектирования.Проектирования: повторимая архитектурная конструкция, представляющая собой решение проблемы проектирования в рамках некоторого часто возникающего контекста (© Wikipedia). ● Описывает подход к решению типовой задачи. ● Одну и ту же задачу часто можно решить с использованием разных шаблонов. ● Существует много литературы с описанием различных шаблонов проектирования.Позволяют избежать «типовых» ошибок при разработке типовых решений. ● Позволяют кратко описать подход к решению задачи — программистам, знающим шаблоны, проще обмениваться информацией. ● Легче поддерживать код — его поведение более предсказуемо.

31. Фазы валидации и обновления значений компонентов.Вызываются валидаторы, зарегистрированные для компонентов представления.Если значение компонента не проходит валидацию, формируется сообщение об ошибке, которое сохраняется в FacesContext.Если данные валидны, то значение компонента обновляется.Новое значение присваивается полю объекта компонента.

32. GoF паттерны – определение, категоризация, примеры шаблонов.Порождающие:Abstract Factory — Абстрактная фабрика. Builder — Строитель. Factory Method — Фабричный метод. Prototype — Прототип. Singleton — Одиночка.Singleton (одиночка): ● Гарантирует, что у класса есть только один экземпляр, и предоставляет к нему глобальную точку доступа. ● Можно пользоваться экземпляром класса (в отличие от статических методов).Структурные:Adapter — Адаптер. Bridge — Мост. Composite — Компоновщик. Decorator — Декоратор. Facade — Фасад. Flyweight — Приспособленец. Proxy — Заместитель. Decorator (декоратор) — позволяет динамически подключать дополнительное поведение к объекту без использования наследования.Поведенческие:Chain of responsibility — Цепочка обязанностей. Command — Команда. Interpreter — Интерпретатор. Iterator — Итератор. Mediator — Посредник. Memento — Хранитель. Observer — Наблюдатель. State — Состояние. Strategy — Стратегия. Template — Шаблонный метод. Visitor — Посетитель.Command (команда) — команда передаётся с помощью специального объекта, который заключает в себе само действие (т. е. логику) и его параметры.

33. Фазы вызова приложения и формирования ответа сервера.Управление передаётся слушателям событий. ● Формируются новые значения компонентов.JSF Runtime обновляет представление в соответствии с результатами обработки запроса. ● Если это первый запрос к странице, то компоненты помещаются в иерархию представления. ● Формируется ответ сервера на запрос. ● На стороне клиента происходит обновление страницы.

Google Web Toolkit. Архитектура и основные принципы разработки интерфейсов. Google Web Toolkit (GWT) — свободный Java-фреймворк, который позволяет веб-разработчикам создавать Ajax-приложения. Его особенность — это компилятор Java -> JavaScript, позволяющий почти всю разработку клиента и сервера реализовать на основе Java и лишь на последнем этапе создать соответствующие JavaScript, HTML и CSS. Выпускается под лицензией Apache версии 2.0. GWT делает акцент на повторное использование и кросс браузерную совместимость. ‐Особенности и возможности:· Избегается повторная реализация одних и тех же графических интерфейсов для локальных и для веб-приложений с помощью различных технологий, например — RCP для первых и JSF — для вторых. · Обычная схема — «stateless клиент / stateful сервер» может быть заменена схемой «stateful клиент / stateless сервер». Это позволяет больше реакций пользователя обрабатывать непосредственно в клиенте. · Простой механизм удалённого вызова процедур. В сочетании с предыдущим качеством это позволяет серверу передавать в ответ данные, а не HTML. Сервер при этом может быть любой — не обязательно тот, который передал первую картинку. · Для передачи сложных данных может использоваться как стандартный RPC — передаче подлежат сериализируемые Java-объекты, так и тексты на XML или JSON. · Динамические и многоразовые компоненты пользовательского интерфейса (виджеты): Программисты могут использовать заранее разработанные классы для реализации трудоемких элементов динамического поведения, таких, как drag-and-drop, или сложных визуальных структур. · Управление историей браузера · Поддержка полнофункциональной Java отладки · GWT устраняет некоторые кросс-браузерные проблемы разработки. · JUnit-интеграция · Поддержка интернационализации и локализации · Поддержка HTML Canvas (с учетом изменений API) · Разработчики могут вставлять готовые JavaScript-фрагменты в исходный Java-текст, применяя JavaScript Native Interface (JSNI). · Поддержка использования Google API Gears в приложениях GWT · Программное обеспечение с открытым исходным кодом · Разработчики могут проектировать и разрабатывать приложения в чистом объектно-ориентированном стиле, так как они используют Java (вместо JavaScript). Обычные JavaScript-ошибки, такие, как опечатки и несоответствие типов, обрабатываются во время компиляции. · JavaScript, генерируемый GWT-компилятором, может быть разделен на фрагменты. Это не только дает возможность лучше понимать его, но и экономит время загрузки приложения — первый фрагмент может начать работать, не дожидаясь пока весь JavaScript текст будет загружен · Ряд библиотек доступны для GWT, от Google или третьих лиц. Это расширяет функциональные возможности GWT.

Компоненты gwt. Обработка событий UI. Расширения gwt. Vaadin Framework. Vaadin (кстати, в переводе с финского это слово означает «олениха») поддерживает все распространенные браузеры как обычных компьютеров, так и мобильных устройств, и планшетов. Вся разработка ведется на Java, но Java-код выполняется только на сервере, на клиенте же выполняется чистый JavaScript. Структурно Vaadin состоит из серверного API, клиентского API, набора компонентов пользовательского интерфейса с обеих сторон, механизма тем для оформления интерфейса и модели данных, позволяющей связывать серверные компоненты непосредственно с данными. Можно применять две основные модели разработки: на стороне сервера и на стороне клиента (браузера). Оптимизировано для производительности.

Серверная модель разработки для Vaadin является основной и позволяет создавать законченные приложения без разработки на стороне клиента. При этом используется AJAX-движок Vaadin Client-Side Engine, который формирует пользовательский интерфейс в браузере. Серверный подход позволяет фактически забыть про то, что разработка ведется под веб, и разрабатывать пользовательский интерфейс почти как традиционную Java-программу с непосредственным доступом к данным и сервисам на сервере. При этом серверная часть Vaadin позаботится и о формировании пользовательского интерфейса в браузере, и об AJAX-взаимодействии между браузером и сервером. Движок Vaadin осуществляет рендеринг пользовательского интерфейса приложения серверной стороны в браузере и реализует все детали обмена клиента и сервера. Серверная часть приложения Vaadin исполняется как обычный сервлет сервера приложений Java. Она представляет собой чистую Java в JAR-файле, который может добавляться к любому стандартному веб-приложению и работает на любом контейнере сервлетов или портлетов от Tomcat до Oracle WebLogic. Сервлет принимает HTTP-запросы от клиента и интерпретирует их как события конкретной пользовательской сессии. События ассоциированы с компонентами пользовательского интерфейса и доставляются к обработчикам (event listeners), определенным в приложении. Если логика пользовательского интерфейса вносит изменения в компоненты пользовательского интерфейса со стороны сервера, сервлет рендерит их для отображения в веб-браузере и формирует ответ. Движок клиентской части, выполняемый в браузере, получает ответ и на его основе производит изменения в загруженной в браузере веб-странице. Клиентская модель разработки. Оптимизировано для контроля.Клиентская модель позволяет разрабатывать виджеты и приложения на языке Java, которые затем компилируются в выполняемый в браузере JavaScript с помощью компилятора Vaadin Compiler, основанного на Google Web Toolkit (GWT). Можно использовать и непосредственно JavaScript. Это предоставляет полный доступ к структуре DOM и максимальный контроль над браузером.

React JS. Архитектура и основные принципы разработки приложений. React - это библиотека JavaScript, которая используется для создания пользовательского интерфейса. React был создан компанией Facebook, а первый релиз библиотеки увидел свет в марте 2013 года. Первоначально React предназначался для веба, для создания веб-сайтов, однако позже появилась платформа React Native, которая уже предназначалась для мобильных устройств. React представляется идеальный инструмент для создания масштабируемых веб-приложений (в данном случае речь идет о фронтенде), особенно в тех ситуациях, когда приложение представляет SPA (одностраничное приложение). React относительно прост в освоении, имеет понятный и лаконичный синтаксис. Виртуальный DOM Вся структура веб-страницы может быть представлена с помощью DOM (Document Object Model)- организация элементов html, которыми мы можем манипулировать, изменять, удалять или добавлять новые. Для взаимодействия с DOM применяется язык JavaScript. Однако когда мы пытаемся манипулировать html-элементами с помощью JavaScript, то мы можем столкнуться со снижением производительности, особенно при изменении большого количества элементов. А операции над элементами могут занять некоторое время, что неизбежно скажется на пользовательском опыте. Однако если бы мы работали из кода js с объектами JavaScript, то операции производились бы быстрее. Для решения проблемы производительности как раз и появилась концепция виртуального DOM. Виртуальный DOM представляет легковесную копию обычного DOM. И отличительной особенностью React является то, что данная библиотека работает именно с виртуальным DOM, а не обычным. Если приложению нужно узнать информацию о состоянии элементов, то происходит обращение к виртуальному DOM. Если необходимо изменить элементы веб-страницы, то изменения вначале вносятся в виртуальный DOM. Потом новое состояние виртуального DOM сравнивается с текущим состоянием. И если эти состояния различаются, то React находит минимальное количество манипуляций, которые необходимы до обновления реального DOM до нового состояния и производит их. В итоге такая схема взаимодействия с элементами веб-страницы работает гораздо быстрее и эффективнее, чем если бы мы работали из JavaScript с DOM напрямую.

Другие особенности React Другой отличительной чертой библиотеки является концентрация на компонентах - мы можем создать отдельные компоненты и затем их легко переносить из проекта в проект.

Еще одна особенность React - использование JSX. JSX представляет комбинацию кода JavaScript и XML и предоставляет простой и интуитивно понятный способ для определения кода визуального интерфейса. React развивается как открытый проект, и все сайты библиотеки доступны на https://github.com/facebook/react. Кроме того, при изучении Reacta также будет полезен официальный сайт с документацией - https://facebook.github.io/react/, где можно найти всю информацию по библиотеке.

Компоненты React. "Умные" и "глупые" компоненты. И для решения этой проблемы в React используются компоненты. Компоненты проще обновлять и использовать повторно. Компоненты аналогичны функциям JavaScript. Они хранят состояние с помощью свойств и возвращают элементы React, которые затем появляются на веб-странице. Создание компонентов Компоненты можно определить различными способами. Первый способ - функциональный. Например: function Hello() { return <h1>Привет, Eugene</h1>; } Здесь определяется компонент Hello. Название компонентов должно начинаться с заглавной буквы. Второй способ определения компонентов предполагает использование классов ES6: class Hello extends React.Component { render() { return <h1>Привет, Eugene</h1>; } } Для рендеринга компонента в классе компонента обязательно должен быть определен метод render(), который возвращает создаваемый элемент на JSX. Третья форма представляет создание компонента с помощью функции-хелпера React.createClass() и во многом аналогична применению классов: var Hello = React.createClass({ render: function(){ return(<h1>Привет, Eugene</h1>); } }); Также для определения мы можем использовать стрелочные функции (arrow functions): var Hello =() => { return (<h1>Привет, Eugene</h1>); } В целом все описанные выше способы будут равноценны. Вы найдете, что Ваши компоненты намного проще в реиспользовании и обсуждении, если Вы поделите их на две категории. Я называю их Умные (Smart) и Глупые (Dumb), но я так же слышал Fat и Skinny, Stateful и Pure, Screens и Components и так далее. Все это не абсолютно тоже самое но идея похожа. Мои глупые компоненты: 1. не зависят от остальной части приложения, например Flux actions или stores 2. часто содержатся в this.props.children 3. получают данные и колбэки исключительно через props 4. имеют свой css файл 5. изредка имеют свой state 6. могут использовать другие глупые компоненты 7. примеры: Page, Sidebar, Story, UserInfo, List Мои умные компоненты: 1. оборачивает один или несколько глупых или умных компонентов 2. хранит состояние стора и пробрасывает его как объекты в глупые компоненты 3. вызывает Flux actions и обеспечивает ими глупые компоненты в виде колбэков 4. никогда не имеют собственных стилей 5. редко сами выдают DOM, используйте глупые компоненты для макета 6. примеры: UserPage, FollowersSidebar, StoryContainer, FollowedUserList Я кладу их в разные папки, чтобы сделать их различие явным. Профит от такого подхода 1. Лучшее разделение ответственности. Вы понимаете Ваше приложение и Ваш UI лучше, если пишете компоненты таким способом. 2. Лучшая реюзабельность. Вы можете использовать один и тот же глупый компонент с абсолютно разными источниками состояния. 3. Глупые компоненты — это фактически «палитра» Вашего приложения, Вы можете поместить их все на одну страницу и дать дизайнеру их настроить, на залезая в логику приложения. Вы можете запустить регрессивное тестирование на такой странице. 4. Это заставляет Вас извлекать «компоненты макеты», такие как Sidebar, Page, ContextMenu и использовать this.props.children вместо дублирования одной и той же верстки в различных умных компонентах.

Навигация в React-приложениях. ReactRouter. В React имеется своя система маршрутизация, которая позволяет сопоставлять запросы к приложению с определенными компонентами. Ключевым звеном в работе маршрутизации является модуль react-router, который содержит основной функционал по работе с маршрутами. Прежде всего для работы с маршрутами необходимо добавить ссылку на модуль react-router: <script src="https://unpkg.com/react-router@4.0.0/umd/react-router.min.js"></script> В системе маршрутизации каждый маршрут сопоставляется с определенным компонентом, поэтому для примера я определил три однотипных компонента: Main, About и NotFound. В начале для работы с маршрутами также получаем ряд объектов, которые потребуются для определения маршрутов: var Router = ReactRouter.Router; var Route = ReactRouter.Route; var browserHistory = ReactRouter.browserHistory; Router определяет набор маршрутов и, когда к приложению, приходит запрос, то Router выполняет сопоставление запроса с маршрутами. И если какой-то маршрут совпадает с URL запроса, то этот маршрут выбирается для обработки запроса. Router использует объект history, в данном случае ReactRouter.browserHistory. Этот объект определяет, как работать с адресом в адресной строке браузера: <Router history={browserHistory}> Значение ReactRouter.browserHistory является рекомендуемым. Оно берет от адреса ту часть, которая идет после домена и сопоставляет ее с маршрутом. Например, адрес http://localhost:3000/home будет сопоставляться с маршрутом /home. Но это не единственное значение, которое может быть использовано. В частности, мы также можем использоватьReactRouter.hashHistory. Это значение использует адреса с хеш-символом #. Например, с маршрутом /home будет сопоставляться адрес http://localhost:3000/#/home. Каждый маршрут представляет объект Route. Он имеет ряд атрибутов. В частности, здесь для каждого маршрута устанавливается два атрибута: · path: шаблон адреса, с которым будет сопоставляться запрошенный адрес URL · component - тот компонент, который отвечает за обработку запроса по этому маршруту Причем в данном случае один маршрут выступает в качестве корневого. Он сопоставляется с адресом "/" и обрабатывается компонентом Main: <Route path="/" component={Main} /> Второй маршрут будет сопоставляться с адресом "/about", а обрабатываться он будет компонентом About. <Route path="about" component={About} /> Особо следует выделить третий маршрут: <Route path="*" component={NotFound} /> Символ звездочки указывает, что этот маршрут будет сопоставляться со всеми адресами URL, которые не соответствуют предыдущим маршрутам. И он будет обрабатываться компонентом NotFound. Таким образом мы можем задать обработку при обращении к несуществующим ресурсам в приложении.

Управление состоянием интерфейса. Redux. Redux — это инструмент управления как состоянием данных, так и состоянием интерфейса в JavaScript-приложениях. Он подходит для одностраничных приложений, в которых управление состоянием может со временем становиться сложным. Redux не связан с каким-то определенным фреймворком, и хотя разрабатывался для React, может использоваться с Angular или jQuery. Как мы убедились в прошлом уроке, данные в React «текут» через компоненты. Это называется «однонаправленный поток данных» — поток данных проходит в одном направлении, от родителя к ребенку.При этом не очевидно, как два компонента, не связанные отношением родитель-ребенок, будут взаимодействовать между собой. В React не рекомендуется реализовывать прямое взаимодействие компонент-компонент. Вот здесь пригождается Redux. Redux предлагает хранить все состояние приложения в одном месте, называемом «store» («хранилище»). Компоненты «отправляют» изменение состояния в хранилище, а не напрямую другим компонентам. Компоненты, которые должны быть в курсе этих изменений, «подписываются» на хранилище.

Хранилище может рассматриваться как «посредник» во всех изменениях состояния в приложении. С Redux компоненты не связываются друг с другом напрямую, все изменения должны пройти через единственный источник истины, через хранилище.

AngularJS. Архитектура и основные принципы разработки приложений. Компоненты Angular. Навигация в Angular-приложениях.