Образовательная программа: Системы корпоративного управления
Вид и тип практики: учебная, ознакомительная
Весенний семестр 2022/2023 учебного года
Место прохождения практики: ООО «АЙТИ СЕРВИС»
Схема организационной структуры предприятия
Рисунок 1. Схема организационной структуры предприятия
Я прохожу практику в отделе разработки.
Работа отдела разработки
Работа в отделе происходит следующим образом:
После того, как в компанию поступил заказ, менеджер проектов узнает о загруженности сотрудников
Выбрав сотрудников, которые не загружены, менеджер связывается с ними Менеджер обсуждает с выбранными сотрудниками имеющиеся задачи и распределяет их
Сотрудники отдела разработки выполняют поставленные задачи и отчитываются перед менеджерами проектов
В ходе работы, задачи могут корректироваться, так что происходит постоянное взаимодействие между разработчиками и менеджерами проектов
Программные решения для разработки систем в области производственной безопасности и автоматизации бизнес-процессов.
В рамках данного отчета будут рассматриваться решения, которые используют фронтенд-разработчики в своих проектах. HTML + JavaScript
HTML — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.
Элементы HTML являются строительными блоками HTML страниц. С помощью HTML разные конструкции, изображения и другие объекты, такие как интерактивная веб-форма, могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и других элементов. Элементы HTML выделяются тегами, записанными с использованием угловых скобок. Такие теги, как и , напрямую вводят контент на страницу. Другие теги, такие как , окружают и оформляют текст внутри себя и могут включать другие теги в качестве подэлементов. Браузеры не отображают HTML-теги, но используют их для интерпретации содержимого страницы.
HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег (например, тег переноса строки — одиночный и закрывать его не нужно). Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, атрибут href=" у ссылки). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:
Текст между двумя тегами — открывающим и закрывающим.
Здесь элемент содержит атрибут href, то есть гиперссылку.
А вот пример пустого элемента:
Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Microsoft Edge и Safari.
JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке. Название «JavaScript» является зарегистрированным товарным знаком корпорации Oracle в США.
JavaScript можно встроить в HTML как код внутри тега script, как действие внутри тега и как подключение стороннего файла.
В связке HTML + Javascript можно загружать данные на страницу с сервера и отправлять их на сервер, выводить на экран формы и прочий пользовательский интерфейс, то есть имеется все, что нужно, для работы над информационной системы со стороны фронтенд-разработчика. React
React — JavaScript-библиотека для создания пользовательских интерфейсов. React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций. React может использоваться для разработки одностраничных и мобильных приложений. Его цель — предоставить высокую скорость разработки, простоту и масштабируемость. В качестве библиотеки для разработки пользовательских интерфейсов React часто используется с другими библиотеками, такими как MobX, Redux и GraphQL.
React основан на компонентах, это ещё одна ключевая особенность библиотеки. Каждый компонент возвращает часть пользовательского интерфейса со своим состоянием. Объединяя компоненты, программист создаёт завершённый интерфейс веб-приложения.
Важная особенность React — использование JSX. Это расширение синтаксиса JavaScript, которое удобно использовать для описания интерфейса. JSX похож на HTML, тем не менее это всё-таки JavaScript.
JSX позволяет писать JavaScript-код с помощью готовых компонентов, которые практически полностью повторяют HTML. Это упрощает разработку.
К важным особенностям React относится использование виртуального DOM (Virtual DOM). Виртуальный DOM — объект, в котором хранится информация о состоянии интерфейса. При изменении состояния, например, после отправки формы или нажатия кнопки, React рассчитывает разницу между старым и новым состоянием. После этого библиотека отрисовывает новое состояние. Использование виртуального DOM позволяет библиотеке эффективно обновлять реальный DOM.
Одной из важнейших вещей в React на данный момент являются хуки. Они позволяют удобно работать с состоянием компонентов в React.
React является одним из наиболее популярных фреймворков на данный момент. Vue
Vue — JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле.
На данный момент поддерживается создателем Эваном Ю и остальными активными членами основной команды из различных компаний, таких как Netlify, Netguru, Baidu, Livestorm.
Опрос, проведенный в 2016 году для JavaScript, показал, что Vue имеет 89 % удовлетворенности разработчиков. На GitHub проект имеет 188 тысяч звезд, является третьим по величине проектом в истории GitHub.
Vue и React во многом схожи, так как появлялись примерно в одно время, но отличие в основном в методах отслеживания состояния и в способе верстки страницы.
Пример простейшего компонента:
Рисунок 2. Vue – компонент AngularJS
AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.
AngularJS разработан в 2009 году Мишко Хевери и Адамом Абронсом в Brat Tech LLC как программное обеспечение позади сервиса хранения JSON-данных, измеряющихся мегабайтами, для облегчения разработки корпоративных приложений. Сервис располагался на домене «GetAngular.com» и имел нескольких зарегистрированных пользователей, прежде чем они решили отказаться от идеи бизнеса и выпустить Angular как библиотеку с открытым исходным кодом.
AngularJS спроектирован с убеждением, что декларативное программирование лучше всего подходит для построения пользовательских интерфейсов и описания программных компонентов, в то время как императивное программирование отлично подходит для описания бизнес-логики. Фреймворк адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление. В результате AngularJS уменьшает роль DOM-манипуляций и улучшает тестируемость.
Цели разработки:
Отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода.
Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода.
Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.
Angular придерживается MVC-шаблона проектирования и поощряет слабую связь между представлением, данными и логикой компонентов. Используя внедрение зависимости, Angular переносит на клиентскую сторону такие классические серверные службы, как видозависимые контроллеры. Следовательно, уменьшается нагрузка на сервер и веб-приложение становится легче.
С помощью директив AngularJS можно создавать пользовательские HTML-теги и атрибуты, чтобы добавить поведение некоторым элементам.
ng-app — Объявляет элемент корневым для приложения.
ng-bind — Автоматически заменяет текст HTML-элемента на значение переданного выражения.
ng-model — То же, что и ng-bind, только обеспечивает двустороннее связывание данных. Изменится содержимое элемента — ангуляр изменит и значение модели. Изменится значение модели — ангуляр изменит текст внутри элемента.
ng-class — Определяет классы для динамической загрузки.
ng-controller — Определяет JavaScript-контроллер для вычисления HTML-выражений в соответствии с MVC.
ng-repeat — Создает экземпляр DOM для каждого элемента из коллекции.
ng-switch — Создаёт экземпляр шаблона из множества вариантов, в зависимости от значения выражения.
ng-view — Базовая директива, отвечает за обработку маршрутов, которые принимают JSON перед отображением шаблонов, управляемых указанными контроллерами.
ng-if — Удаляет или создаёт часть DOM-дерева в зависимости от значения выражения. Если значение выражения, назначенного ngIf, равно false, элемент удаляется из DOM, иначе — вновь клонированный элемент вставляется в DOM.
Также существует возможность создавать настраиваемые директивы, используя в том числе шаблоны в теге script. JQuery
JQuery — набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.
Возможности:
Движок кросс-браузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;
Переход по дереву DOM, включая поддержку XPath как плагина;
События;
Визуальные эффекты;
AJAX-дополнения;
JavaScript-плагины.
Точно так же, как CSS отделяет визуализацию от структуры HTML, JQuery отделяет поведение от структуры HTML. Например, вместо прямого указания на обработчик события нажатия кнопки управление передаётся JQuery, которая идентифицирует кнопки и затем преобразует его в обработчик события клика. Такое разделение поведения и структуры также называется принципом ненавязчивого JavaScript.
Библиотека jQuery содержит функциональность, полезную для максимально широкого круга задач. Тем не менее, разработчиками библиотеки не ставилась задача совмещения в jQuery функций, которые подошли бы всюду, поскольку это привело бы к большому коду, большая часть которого не востребована. Поэтому была реализована архитектура компактного универсального ядра библиотеки и плагинов. Это позволяет собрать для ресурса именно ту JavaScript-функциональность, которая на нём была бы востребована.
Руководитель практики от МИЭТ _____________ / Шикула О.С. /
Ответственное лицо ________________/________________/_____Егоров А.В.____/
Скачать 125.23 Kb.
