Java EE или Java Enterprise Edition представляет платформу для создания корпоративных приложений на языке Java. Прежде всего это сфера веб-приложений и веб-сервисов.
Java EE состоит из набора API и среды выполнения. Некоторые из API:
-
Java Servlets. Сервлеты представляют специальные модули, которые обрабатывают запросы от пользователей и отправляют результат обработки.
-
JavaServer Pages (JSP). Также модули на стороне сервера, которые обрабатывают запросы. Удобны для генерации большого контента HTML. По сути предствляют собой страницы с кодом HTML/JavaScript/CSS с вкраплениями кода на Java
-
Enterprise JavaBeans (EJB) представляют классы, которые хранят бизнес-логику.
-
Contexts and Dependency Injection (CDI) предоставляет механизм для внедрения и управления зависимостями в другие объекты.
-
JSON Processing (JSON-P) позволяет работать со строками JSON в Java
-
JSON Binding (JSON-B) предоставляет функционал для сериализации и десериализации JSON в объекты Java.
-
WebSocket позволяет интегрировать WebSocket в приложения на Java.
-
Java Message Service (JMS) - API для пересылки сообщений между двумя и более клиентами.
-
Security API - API для стандартизации и упрощения задач обеспечения безопасности в приложениях на Java.
-
Java API for RESTful Web Services (JAX-RS) - API для применения архитектуры REST в приложениях.
-
JavaServer Faces (JSF) предоставляет возможности для создания пользовательского интерфейса на стороне сервера.
Эти и ряд других API сообственно и образуют то, что называется Java EE. Стоит отметить, что также в среде веб-разработки на Java популярна еще одна технология Spring. Фреймворк Spring не является частью Java EE и может использоваться как альтернативный подход к созданию веб-приложений на языке Java.
Inversion of Control (IoC, инверсия управления) — это некий абстрактный принцип, набор рекомендаций для написания слабо связанного кода. Суть которого в том, что каждый компонент системы должен быть как можно более изолированным от других, не полагаясь в своей работе на детали конкретной реализации других компонентов.
Dependency Injection (DI, внедрение зависимостей) — это одна из реализаций этого принципа (помимо этого есть еще Factory Method, Service Locator).
Существует 3 типа внедрения зависимостей:
- Field injection: инъекция напрямую в поле.
- Constructor injection: инъекция в конструктор.
- Setter injection: инъекция через специальные методы, сеттеры.
CDI (Contexts and Dependency Injection) - это спецификация Java EE, описывающая внедрение зависимостей и контексты.
IoC-контейнер — это какая-то библиотека, фреймворк, программа, которая позволяет упростить и автоматизировать написание кода с использованием данного подхода на столько, на сколько это возможно.
Location Transparency - это использование имен для идентификации ресурсы сети , а не их фактическое местонахождение. Например, доступ к файлам осуществляется по уникальному имени файла, но фактические данные хранятся в физических секторах, разбросанных по диску на локальном компьютере или в сети. В системе прозрачности местоположения фактическое местоположение, где хранится файл, не имеет значения для пользователя. В распределенной системе потребуется использовать сетевую схему для именования ресурсов.
Контейнеры — это интерфейс между компонентом и низкоуровневой платформо-зависимой функциональностью, которая поддерживает компонент. Перед выполнением веб-компонент, Enterprise-бин или клиентский компонент приложения должны быть упакованы в модуль Java EE и развёрнуты в его контейнере.
Если говорить простым языком, то компоненты служат для предоставления интерфейса к корпоративным программным системам поверх широко используемых протоколов Интернета, а именно, HTTP. Предоставляемые интерфейсы могут быть как интерфейсами для людей (WebUI), так и специализированными программными интерфейсами, работающими подобно удаленному вызову методов, но поверх HTTP.
В группу Web-компонентов входят фильтры (filters), обработчики Web-событий (web event listeners), сервлеты (servlets) и серверные страницы Java (JavaServer Pages, JSP).
Компонентной средой для работы Web-компонентов служит Web-контейнер, поставляемый в рамках любой реализации платформы J2EE. Web-контейнер реализует такие службы, как управление жизненным циклом компонентов и набором компонентов как ресурсом, распараллеливание независимых работ, выполнение удаленных обращений к компонентам, поддержка защищенности с помощью проверки прав компонентов и пользователей на выполнение различных операций.
Контейнер берет на себя задачу управления жизненным циклом компонентов.
Жизненный цикл компонентов:
- Создание экземпляр компонента при помощи вызова конструктора.
- Выполнение его внедрения в необходимые компоненты.
- Контейнер уничтожает экземпляр и все зависимые от него объекты.
Компоненты оформляются как небольшой набор классов и интерфейсов на Java, а также имеет дескриптор развертывания ( deployment descriptor) — описание в определенном формате на основе XML конфигурации компонента в рамках контейнера, в который он помещается. Приложение в целом также имеет дескриптор развертывания. Дескрипторы развертывания играют важную роль, позволяя менять некоторые параметры функционирования компонента и привязывать их к параметрам среды, в рамках которой компонент работает, не затрагивая его код.
Пример дескриптора с инициализацией сервлета:
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>BurevestnikServlet</servlet-name>
<servlet-class>ru.tune-it.BurevestnikServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>BurevestnikServlet</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
</web-app>Java EE API описаны в вопросе №1.
Виды компонентов:
- Сессионные (Session Beans), которые могут быть
- stateful - с сохранением текущего состояния;
- stateless - без сохранения состояния;
- singleton - один объект для всех приложений (начиная с EJB версии 3.1).
- Управляемые сообщениями (Message Driven Beans) — их логика является реакцией на события в системе;
- Объектные (Entity Bean) — определены в спецификации JPA (Java Persistence API) entities и используются для хранения данных.
Профиль — это набор технологий и API Java EE, предназначенных для конкретных сообществ разработчиков и типов приложений.
Реализации профилей:
- Full Profile: предназначен для разработчиков, которым требуется полный набор API Java EE для создания корпоративных приложений.
- Web Profile: содержит веб-технологии, являющиеся частью полной платформы, и предназначен для разработчиков, которым не требуется полный набор API Java EE.
Сравнение профилей:
Компоненты EJB предназначены для реализации на их основе бизнес-логики приложения и операций над данными. Любые компоненты, разработанные на Java, принято называть бинами. Компоненты Enterprise JavaBean отличаются от "обычных" тем, что работают в рамках EJB-контейнера, который является для них компонентной средой.
Он поддерживает следующие базовые службы при работе с компонентами EJB:
- Автоматическую поддержку обращений к компонентам, размещенным на разных машинах.
- Автоматическую поддержку транзакций.
- Автоматическую синхронизацию состояния баз данных и соответствующих компонентов EJB в обе стороны.
- Автоматическую поддержку защищенности за счет аутентификации пользователей, проверки прав пользователей или компонентов на выполнение выполняемых ими операций и авторизации производимых действий.
- Автоматическое управление жизненным циклом компонента (последовательностью переходов между состояниями типа " отсутствует"–"инициализирован"–"активен") и набором компонентов как ресурсами: удаление компонентов, ставших ненужными; загрузку новых компонентов; балансировку нагрузки между имеющимися компонентами; использование пула готовых к работе, но не инициализированных компонентов, чтобы не тратить время на их удаление и создание, и пр.
Сеансовый компонент с сохранением состояния EJB stateful автоматически сохраняет свое состояние между обращениями к нему от одного и того же клиента, и завершает свое существование либо по таймауту, либо по явному запросу клиента. Типичным примером компонента с сохранением состояния является корзина с покупками в интернет-магазине.
Сеансовые компоненты без сохранения состояния EJB stateless не хранят никакой информации о своем состоянии и являются прикладными службами, которые выполняют все необходимые действия в рамках запроса. EJB stateless можно использовать для реализации таких операций, как перевод средств на кредитную карту или проверку кредитной истории клиента. На основе stateless-бинов проектируются WEB-сервисы.
EJB Lite - это упрощенная спецификация EJB, которая предусматривает размещение в Web Container с урезанным функционалом. В ней отсутствуют: MDB, EJB2.x, Remote Interface, JAX-WS, JAX-RPC, Timer Service, Asynchronous Session Bean, RMI-IIOP.
JavaMail API - это библиотека, предназначенная для подключения к почтовым серверам с целью получения и отправки электронной почты с использованием протоколов SMTP, POP3 и IMAP.
Поддерживаемые протоколы:
- SMTP (Simple Mail Transfer Protocol) - это простой протокол, используемый для рассылки писем.
- POP3 (Post Office Protocol Version 3) - это протокол, используемый для чтения писем. POP3 при загрузке письма на клиентский компьютер удаляет письмо с почтового сервера. Недостатком этого протокола является то, что при просмотре письма на одном клиентском компьютере это письмо уже нельзя будет посмотреть с другого устройства.
- IMAP (Internet Message Access Protocol) — это протокол доступа к электронной почте. Альтернатива протоколу POP3. IMAP подгружает на клиент только мета-информацию письма, а остальные данные предоставляет по требованию.
MIME-типы (Multipurpose Internet Mail Extensions) используются для обозначения типа передаваемого контента. Тип определяется двумя словами, записанными через слеш. Первое слово — это общий тип, а второе — уточнение. К примеру, image/jpeg.
Пример создания и отправки сообщения с помощью JavaMail API:
import java.util.*;
import javax.mail.*;
import javax.mail.internet.*;
import javax.activation.*;
public class MailSender {
public static void main(String[] args) {
String to = "burevestnik@mail.com";
String from = "dmshevchuk@mail.com";
String host = "localhost"; // можно указать IP-адрес
Properties properties = System.getProperties();
properties.setProperty("mail.smtp.host", host);
Session session = Session.getDefaultInstance(properties);
try {
MimeMessage message = new MimeMessage(session);
message.setFrom(new InternetAddress(from));
message.addRecipient(Message.RecipientType.TO, new InternetAddress(to));
message.setSubject("Лабораторная работа 4");
message.setText("Примите лабу, пожалуйста!");
Transport.send(message);
} catch (MessagingException mex) {
mex.printStackTrace();
}
}
} JMS (Java Message Service) — это стандарт для асинхронного распределенного взаимодействия программных компонентов путем рассылки сообщений.
JMS поддерживает две модели коммуникации: point-to-point и publish-subscribe (pubsub).
В point-to-point сообщения от разных отправителей адресуются в определенной очереди, к которой подключаются клиенты. При этом для каждого сообщения гарантируется, что оно будет доставлено одному и только одному клиенту.
В publish-subscribe сообщения адресуются определенному топику, на которого подписываются клиенты. Каждое сообщение может быть получено несколькими клиентами или не получено вообще, если подписчиков на момент доставки не было.
Примеры реализаций JMS провайдеров:
- RabbitMQ
- Open Message Queue
- Apache ActiveMQ
- JBoss Messaging
Компоненты, управляемые сообщениями MDB (Message-Driven Bean), подобно сеансовым компонентам реализуют некоторую прикладную логику и имеют одно важное отличие: клиенты никогда не вызывают методы MDB напрямую. Вместо этого компоненты MDB вызываются для обработки отправленных на сервер сообщений, что позволяет организовать асинхронный обмен сообщениями между частями системы. Типичными примерами подобных серверов, помимо прочего, сообщений могут служить IBM WebSphere MQ, Oracle Advanced Queueing и TIBCO. Компоненты MDB, как правило, применяются для повышения надежности интеграции систем и асинхронной обработки данных. Примером MDB сообщения может быть запрос на доставку товарных запасов от автоматизированной системы розничной торговли к системе управления поставками.
Транзакция — это группа последовательных операций, которая образует логическую единицу работы с данными. Транзакция либо выполняется успешно и целиком, соблюдая целостность данных, либо не производит никакого эффекта на данные.
JTA предоставляет высокоуровневый интерфейс для управления транзакциями (через методы begin, commit, rollback), избавляя разработчика от необходимости работы с каждым ресурсом по-своему.
Транзация координируется transaction manager'ом. Взаимодействие с ресурсами осуществляется через resource manager'ов.
Виды объявления транзакций:
- Декларативно: аннотацией @Transactional на методе или всем классе (rollback происходит при выбрасывании необработанной RuntimeException)
- Программно: вызвав begin, rollback, commit у UserTransaction (интерфейс для ручного управления транзакциями)
Веб-сервис - это программы, которые могут взаимодействовать друг с другом и со сторонними приложениями посредством сообщений, основанных на определённых протоколах.
Основные стандарты веб-сервисов:
- SOAP (Simple Object Access Protocol): перед вызовом удаленной процедуры необходимо описать вызов в XML файле формата SOAP. По сути является еще одной из многочисленных XML разметок, которая используется в веб-сервисах. Все, что мы хотим куда-то отправить через HTTP, сначала превращается в XML описание SOAP, потом засовывается в HTTP пакет и посылается на другой компьютер в сети по TCP/IP.
- WSDL (Web Services Description Language): стандарт, который требует наличия описания веб-сервиса, в котором сказано, что «да, вы не ошиблись – это действительно веб-сервис и можно у него вызвать такие-то такие-то методы». Такое описание представляется еще одним файлом XML, который имеет формат WSDL. То есть WSDL – это просто XML файл описания веб-сервиса.
Java API for REST Services (JAX-RS) и Java API for XML Web Services (JAX-WS) - это API для разработки веб-сервисов, предоставляемые Java.
Отличия:
| JAX-RS | JAX-WS |
|---|---|
| JAX-RS использует архитектурную структуру Restful для взаимодействия между клиентом и сервером. | JAX-WS использует SOAP в качестве основного метода взаимодействия. |
| Поскольку у JAX-RS нет фиксированной структуры, он может взаимодействовать через XML, HTML, JSON и HTTP. Обычно он использует JSON, так как он сравнительно легче и может быстро передаваться по сети. Несколько миллионов обрабатываемых сообщений дают значительный выигрыш во времени. | JAX-WS следует протоколу SOAP и взаимодействует в сообщениях XML. В ответ на каждое сообщение с сервера на хост передается другое XML-сообщение. |
| JAX-RS в основном используется почти везде. | JAX-WS используется в основном для создания веб-сервисов, в которых есть строгие форматы данных, которые необходимо соблюдать, и общий режим обмена сообщениями в XML. |
Spring, или Spring Framework — фреймворк для Java. Он нужен, чтобы разработчикам было легче проектировать и создавать приложения. Spring не связан с конкретной парадигмой или моделью программирования, поэтому его могут использовать как каркас для разных видов приложений.
Принципы Spring:
- Универсальность - Spring иногда называют платформой: он действительно предлагает разработчикам как бы фундамент, на основе которого можно реализовать приложение. Основная философия — универсальность. Это отличает Spring от других похожих фреймворков.
- Облегченность - второй важный принцип — минимальное воздействие, благодаря которому Spring называют облегченным. Это относится не к размеру фреймворка, а к концепции использования. Благодаря подходу задачи можно реализовать с меньшим количеством кода и минимальной зависимостью от фреймворка.
- Поддержка инфраструктуры - на русскоязычном сайте Spring фреймворк сравнивают с водопроводом: основное внимание в нем уделено настройке зависимостей и связей между технологиями. В фреймворке реализован подход IoC, Inversion of Control — инверсия контроля, принцип, который облегчает зависимости между компонентами. Функциональность помогает поддерживать инфраструктуру внутри проекта.
Java EE
| Преимущества | Недостатки |
|---|---|
| Приложения, написанные на Java EE, считаются более надежными, безопасными и масштабируемыми | Очень сложная среда разработки приложений, которую сложно понять даже специалистам |
| Утвержденный промышленностью стандарт API | Окончательная стоимость проекта, включая разработку, развертывание и разработку приложений, может оказаться непомерно высокой |
| Преимущественно основан на аннотациях и CDI, как впрочем и Spring | |
| Реализация на основе EJB контейнеров и POJO | |
| Сложные приложения с большим количеством транзакций очень хорошо обрабатываются | |
| Успешен в использовании для масштабируемого монолитного приложения | |
| Имеется свой ООП язык, содержащий определенный стиль и синтаксис |
Spring
| Преимущества | Недостатки |
|---|---|
| Позволяет эффективно организовывать взаимодействия объектов | Относительно сложно развивать, поскольку в нем отсутствует четкая направленность |
| Более прост, нежели Java EE | Для начинающего разработчика изучение среды может быть сложной задачей |
| Имеет более слабую связанность приложений (реализация IoC) | Медленнее, чем Java EE |
| Работает на основе конфигурации XML, Groovy (ООП язык, дополняющий Java возможностями Python, Ruby и Smalltalk) или аннотаций | |
| Использует POJO, благодаря чему разработчикам не нужен корпоративный контейнер, такой как сервер приложений | |
| Обеспечивает разработчикам Java высокий уровень модульности | |
| Предоставляет более удобную реализацию библиотек Java EE | |
| Лицензия с открытым исходным кодом | |
| Spring Boot сильно упрощает первичную настройку приложения | |
| Код приложения Spring, как правило, прост для тестирования |
Spring Framework делится на большое количество модулей, подключение которых добавляет определенный функционал.
Основные модули:
Spring Boot — это комплексный фреймворк для создания и запуска приложений с минимальными усилиями и настройками. Этот модуль делится на два стека: основанный на API сервлетов Spring MVC (построен на API сервлетов с моделью «один запрос на поток») и реактивный Spring WebFlux (максимально использует преимущества современных многоядерных процессоров).
Использование: С помощью Spring Boot можно создавать микросервисы, реактивные системы, веб-приложения.
Spring Data обеспечивает приложениям доступ к данным через базы данных. Использует JPA Entity для взаимодействия с данными. Поддерживает реляционные и нереляционные базы данных, map-reduce фреймворки и облачные сервисы. Также позволяет использовать подмодули, разработанные сообществом Spring для более специфичных баз данных вроде ArangoDB, Google Datastore, Microsoft Azure Cosmos DB и других.
Использование: Везде, где нужен доступ к данным.
Spring Cloud позволяет легко и быстро создавать шаблоны в распределённых системах. Из примеров таких шаблонов: управление конфигурацией, обнаружение сервисов, интеллектуальная маршрутизация, микропрокси, одноразовые токены и многое другое.
Использование: Содержит много полезных инструментов для микросервисов и распределённых систем.
Spring Security — это среда аутентификации, авторизации и контроля доступа. Это стандартный фреймворк, который используется для защиты приложений. Предоставляет базовые функции безопасности, которые можно легко расширить для собственных нужд.
Использование: Обеспечение проверки безопасности и защиты приложения от атак.
Spring Integration позволяет облегчить обмен сообщениями в приложениях на основе Spring, поддерживает интеграцию с внешними системами и даёт инструменты для обработки данных из разных источников.
Использование: Позволяет связать POJO с помощью парадигмы обмена сообщениями без внедрения зависимостей.
Spring Batch — это платформа для разработки пакетных приложений. Подойдёт как для простых, так и для более сложных проектов — платформа легко масштабируется и может обрабатывать большие объёмы информации.
Использование: Создание приложений с многократно используемыми функциями (Например: ведение логов, управление транзакциями), чтобы обрабатывать большие объёмы записей.
Базовый контейнер состоит из модулей Core, Beans, Context и **Expression Languagev, подробности которых следующие:
-
Модуль Core обеспечивает основные части платформы, включая функции IoC и Dependency Injection.
-
Модуль Bean предоставляет BeanFactory, которая представляет собой сложную реализацию фабричного шаблона.
-
Модуль Context основан на прочной основе, предоставляемой модулями Core и Beans, и является средой для доступа к любым объектам, определенным и настроенным. Интерфейс ApplicationContext является координационным центром модуля Context.
-
Модуль SpEL предоставляет мощный язык выражений для запросов и манипулирования графом объектов во время выполнения.
ApplicationContext представляет собой Spring IoC контейнер и необходим для инициализации, настройки и сборки бинов для построения приложения. В метаданных конфигурации разработчик описывает как инициализировать, настроить IoC контейнер и собрать объекты в приложении.
Основными признаками и частями Java-конфигурации IoC контейнера являются классы с аннотацией @Configuration и методы с аннотацией @Bean. Аннотация @Bean используется для указания того, что метод создает, настраивает и инициализирует новый объект, управляемый Spring IoC контейнером.
Рассмотрим создание управляемого бина на Spring и Java EE:
- Определение бина Spring:
// Лучше использовать производные от аннотации @Component (@Controller, @Service, @Repository) в зависимости от предназначения бина, чтобы явно обозначить логику бина и расширить его функционал
@Component
public class MyClass{
}Java EE:
@Named
public class MyClass {
}- Внедрение бина Spring:
@Controller
public class MyClass {
@Autowired
AnotherClass another;
}
@Component
public class AnotherClass{
}Java EE:
@Named
public class MyClass {
@Inject
AnotherClass another;
}
public class AnotherClass {
}- Ивенты жизненного цикла бина Spring:
@Component
public class AnotherClass {
@PostConstruct
public void init() {
// Данный метод будет вызван после внедрения бина
}
@PreDestroy
public void destroy() {
// Данный метод будет вызван перед уничтожением бина
}
}Java EE:
public class AnotherClass {
@PostConstruct
public void init() {
// Данный метод будет вызван после внедрения бина
}
@PreDestroy
public void destroy() {
// Данный метод будет вызван перед уничтожением бина
}
}- Определение области видиости бина Spring:
@Component
// Аттрибут proxyMode необходим для внедрения бина с меньшим сроком жизни (request) в бин с большим сроком жизни (singleton)
// Spring оборачивает экземпляр бина в динамический прокси
@Scope(proxyMode = ScopedProxyMode.TARGET_CLASS, value = "request")
public class AnotherClass {
}Java EE:
@Named
@RequestScoped // Существуют также @SessionScoped, @ApplicationScoped и другие
public class AnotherClass {
}Таким образом, Spring и Java EE предоставляют очень функциональные контейнеры. Как можно уведить из примеров выше, их функционал очень схож.
Реализация REST API в Java EE:
JAX-RS — это набор спецификаций для построения REST-сервисов. Наиболее известными эталонными реализациями являются RESTEasy и Jersey. (Более подробно JAX-RS описан в ответе #9.) Пример реализации простого контроллера:
// Путь, запрос на который выполнится обработчиками ниже
@Path("/hello")
public class HelloController {
// Определение HTTP метода
@GET
// Установка типа возвращаемого значения ("text/plain")
@Produces(MediaType.TEXT_PLAIN)
public Response hello() {
// Возвращение пользователю ответа в виде простого текста "Hello, world!"
return Response.ok("Hello, world!").build();
}
}Реализация REST API в Spring: Spring MVC — это модуль Spring Framework для создания веб-приложений, добавляющий возможности REST. Пример реализации аналогичного контроллера:
@RestController
@RequestMapping("/hello")
public class HelloController {
@GetMapping("/name")
public ResponseEntity<?> hello() {
return new ResponseEntity<>("Hello, world!", HttpStatus.OK);
}
}Отличия:
JAX-RS предоставляет набор аннотаций для применения их к простым объектам. Эти аннотации помогают нам абстрагироваться от низкоуровневых деталей взаимодействия клиент-сервер. JAX-RS — это только спецификация, и для ее использования требуется совместимая реализация. Spring MVC в свою очередь является полноценным фреймворком с возможностями REST. Как и JAX-RS, он также предоставляет нам полезные аннотации для абстрагирования от низкоуровневых деталей. Его главное преимущество заключается в том, что он является частью Spring Framework. Таким образом, это позволяет нам использовать внедрение зависимостей, как и любой другой модуль Spring.
React — это JavaScript-библиотека для создания пользовательских интерфейсов.
React основан на компонентном подходе: вы можете разрабатывать приложение c помощью React просто указывая в каком виде вы хотели бы видеть тот или иной элемент. React будет автоматически обновлять элемент, когда лежащие в его основе данные изменятся. Например: автоматическое высчитывание отметок на графике в лабораторной работе относительно выбранного радиуса (Если R = 1, то R/2 и R будут заменены на 0.5 и 1)
Главные принципы:
-
Гибкость
-
Эффективность
-
Переиспользование
-
Декларативный код (описание конечного результата вместо конкретных шагов для достижения конечного результата)
-
Так как React гибкий, то можно использовать один и тот же код в нескольких проектах, создавать на его основе новые приложения и даже использовать в уже существующей базе код без переработок.
Сам по себе React отвечает только за представление (view) в MVC. Модель (model) реализуется при помощи шаблона проектирования Flux. Это архитектура, ответственная за создание слоя данных в JavaScript приложениях и разработку серверной стороны в веб-приложениях. Flux дополняет составные компоненты представления в React.
Пример простого приложения на React:
import React from 'react';
const HelloWorld = () => {
function sayHello() {
alert('Примите лабу!');
}
return (
<button onClick={sayHello}>Пожалуйста</button>
);
};
export default HelloWorld;Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз. Во многом компоненты ведут себя как обычные функции JavaScript. Они принимают произвольные входные данные (так называемые «пропсы») и возвращают React-элементы, описывающие, что мы хотим увидеть на экране.
Пример простого компонента
function Welcome(props) {
return <h1>Привет, {props.name}!</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Burevestnik"/>;
root.render(element);Props (сокращённо от «properties») и state — это обычные JavaScript-объекты. Но несмотря на то, что оба содержат информацию, которая влияет на то, что мы увидим после рендера, есть существенное различие: props передаётся в компонент (как параметры функции), в то время как state находится внутри компонента (по аналогии с переменными, которые объявлены внутри функции).
"Умные" компоненты выполняют более масштабные задачи. Они управляют простыми компонентами, делают запросы на сервер и многое другое.
"Глупые" компоненты не выполняют никаких сверхсложных задач. Все их действия просты и однообразны, они всего лишь выводят данные, принимаемые ими от свойств (пропсов).
JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое позволяет использовать HTML-подобный синтаксис для описания структуры интерфейса. Пример использования JSX:
const name = 'Своевременно'
const element = <h1>Когда результаты? {name}.</h1>После компиляции каждое JSX-выражение становится обычным вызовом JavaScript-функции, результат которого — объект JavaScript.
Из этого следует, что JSX можно использовать внутри инструкций if и циклов for, присваивать переменным, передавать функции в качестве аргумента и возвращать из функции.
function getGreeting(user) {
if (user) {
return <h1>Здравствуй, {formatName(user)}!</h1>
}
return <h1>Здравствуй, незнакомец.</h1>
}Данные, введённые пользователем, можно безопасно использовать в JSX, так как React DOM экранирует все значения, включённые в JSX перед тем как отрендерить их. Это гарантирует, что вы никогда не внедрите чего-либо, что не было явно написано в вашем приложении.
const title = response.input
// Безопасный код
const element = <h1>{title}</h1>JSX является синтаксическим сахаром для функции React.createElement(component, props, ...children). Такой JSX-код:
<MyButton color="green" size={5}>
Примите лабу, пожалуйста!
</MyButton>Скомпилируется в:
React.createElement(
MyButton,
{
color: 'green',
size: 5
},
'Примите лабу, пожалуйста!'
)Маршрутизация - это процесс, в котором пользователь направляется на разные страницы в зависимости от его действий (Например: нажатие на кнопку, значок, изображение и т.д.). React Router используется для создания различных маршрутов в одностраничном приложении. Это стандартный пакет маршрутизации, используемый для реагирования на изменение представлений и перемещение между страницами. Компоненты React Router:
- <BrowserRouter>: реализация маршрутизатора, которая может включать маршрутизацию в React. Он использует API HTML5, чтобы пользовательский интерфейс синхронизировался с URL-адресом. Это родительский компонент, который используется для хранения всех других компонентов и использует обычные URL-адреса
- <Route>: компонент, который отображает некоторый пользовательский интерфейс, когда его путь совпадает с текущим URL-адресом
- <Link>: используется для создания ссылок на разные маршруты и реализует навигацию по приложению. Принимает свойство, которое указывает, куда мы хотим, чтобы ссылка переместила нашего пользователя
- <Switch>: используется для визуализации только первого маршрута, который соответствует местоположению, а не для визуализации всех совпадающих маршрутов
Пример использования ReactRouter:
export default function ReactRouterExample() {
return (
<Router>
<div>
<Link to="/">Main</Link>
<Link to="/auth">Auth</Link>
<Switch>
<Route exact path="/">
<Main />
</Route>
<Route path="/auth">
<Auth />
</Route>
</Switch>
</div>
</Router>
)
}
// Главная страница
function Main() {
return (
<div>
<h2>Главная страница</h2>
</div>
)
}
// Страница авторизации
function Auth() {
return (
<div>
<h2>Примите лабу, пожалуйста!</h2>
</div>
)
}Redux — популярный менеджер состояний в веб-приложениях. Обычно его используют в связке с React, но также поддерживаются Angular, Vue и даже обычным JavaScript. Использование: если в приложении несколько компонентов, которым необходимо совместно использовать одно и то же состояние, при этом сами компоненты расположены в разных частях приложения, то без Redux управлять состоянием будет сложно. Основная идея Redux — создать централизованное место для хранения глобального состояния приложения. Для достижения этой цели используются три основные концепции:
- Единственный источник состояния
- Состояние доступно только для чтения
- Изменения вносятся только через редукторы (функции, которые берут предыдущее состояние и переданное действие, а затем на их основе вычисляют новое состояние)
Angular — это фреймворк JavaScript, помогающий разработчикам создавать веб-приложения. Написан на языке TypeScript командой из компании Google, а также сообществом разработчиков из различных компаний.
Использование: технически может использоваться где угодно, но лучше всего он работает в нестандартных приложениях с данными, т.е. с form-based приложениями. Если вы ознакомитесь с реальными приложениями на Angular, то большинство из них будет собирать данные из форм и осуществлять их обработку.
Angular модуль - это класс с декоратором @NgModule(), который служит объединяющей структурой для компонентов, директив, фильтров и сервисов. Все перечисленные сущности определяются и конфигурируются с помощью @NgModule().
Angular Компонент - это обособленная часть функционала со своей логикой, HTML-шаблоном и CSS-стилями. Класс становится Angular компонентом, если его объявлению предшествует декоратор @Component() с объектом конфигурации.
Angular приложение имеет модульную архитектуру и состоит, по крайней мере, из одного главного, или корневого, модуля. Все остальные относятся к второстепенным.
Сервисы в Angular представляют довольно широкий спектр классов, которые выполняют некоторые специфические задачи (Например: логгирование, работа с данными). В отличие от компонентов сервисы не работают с представлениями, то есть с разметкой html.
Стандартные задачи сервисов:
- Предоставление данных приложению
- Представление канала взаимодействия между отдельными компонентами приложения
- Инкапсуляция бизнес-логики
Самый простой пример DI в Angular - это использованием компонентом сервиса, чаще всего для получения данных.
Для того чтобы созданный сервис мог быть использован компонентом или другим сервисом, его объявление должно быть помечено декоратором
@Injectable().
В Angular представление (view) это проекция модели (model) через HTML-шаблон (template). Это означает, что всякий раз, когда модель изменяется, Angular обновляет соответствующие связывания, которые обновляют представление.
После создания компонента Angular вызывает у этого компонента ряд методов, которые представляют различные этапы жизненного цикла:
- ngOnChanges: вызывается при начальной установке свойств и их переустановке или изменении значений
- ngOnInit: вызывается один раз после установки свойств компонента, которые участвуют в привязке
- ngDoCheck: вызывается при каждой проверке изменений свойств компонента
- ngAfterContentInit: вызывается один раз после вставки содержимого в представление компонента кода HTML
- ngAfterContentChecked: вызывается при проверке изменений содержимого, которое добавляется в представление компонента
- ngAfterViewInit: вызывается после инициализации представления компонента, а также представлений дочерних компонентов
- ngAfterViewChecked: вызывается после проверки на изменения в представлении компонента, а также проверки представлений дочерних компонентов
- ngOnDestroy: вызывается перед удалением компонента
Стилизация компонентов может производиться как с помощью установки стилей в самом компоненте, так и с помощью подключения внешних css-файлов.
Для установки стилей в директиве @Component определено свойство styles.
Пример стилизации внутри компонента:
@Component({
selector: 'my-app',
template: `<h1>Примите лабу, пожалуйста!</h1>`,
styles: [`
h1 {
color: navy;
font-size: 15px;
}
`]
})
export class AppComponent {}Взаимодействие с сервером осуществляется через протокол HTTP с помощью класса HttpClient. Он определяет ряд методов для отправки различного рода запросов: GET, POST, PUT, DELETE. Данный класс построен поверх стандартного объекта в JavaScript — XMLHttpRequest.
Для того чтобы задать валидацию, используются стандартные атрибуты валидации форм HTML5 (required, minlength, max, pattern и т.д.). Вывод сообщений, информирующих о неправильно заполненном поле, осуществляется на основе данных состояния поля. Доступ к этим данным может быть получен с помощью шаблонной переменной.
Пример создания простой формы и её валидации:
<form>
<div>
<label>Ваш возраст:</label>
<input
type="number"
[(ngModel)]="person.age"
#age="ngModel"
max="120"
required
/>
<input type="submit" value="Отправить" />
</div>
</form>Теперь переменная #age содержит объект с информацией о поле.