Анализ современных инструментов web-разработки
ВВЕДЕНИЕ
С распространением Интернета и его доступностью для людей, Всемир-ная паутина играет всё большую роль в жизни людей. С её помощью люди общаются, узнают последние новости, слушают музыку, смотрят фильмы, работают и делают много других вещей, которые невозможно было делать в браузере на компьютере или телефоне. Интернет заменил многим газеты, книги, радио, телевизоры, сотовую связь, ведь с его помощью все эти действия можно совершать быстрее и легче.
Ещё 30 лет назад, человек не мог представить, что сможет, сидя за ком-пьютером, работать из любой точки мира, оплачивать коммунальные счета, не ходя в банк, и найти любой ответ на свой вопрос за пару секунд. Сейчас он может всё это, но к этому добавляются ещё большое количество возможностей и вещей, которые доступны человечеству благодаря Интернету и веб-технологиям.
За последние десятилетие, доступ к интернету среди человечества достиг отметки в 60%, а процент запросов к Всемирной паутине с мобильных устройств стал превосходить процент запросов с компьютеров, что говорит о том, что люди пользуются Интернетом постоянно - и дома, и на учёбе, и на отдыхе. За всем этим многообразием возможностей в Интернете и, в частности, в вебе стоит развитие веб-технологий и инструментов разработки сайтов и веб-приложений.
СОДЕРЖАНИЕ
Перечень основных обозначений и сокращений 7
Введение 9
1. Зарождение и первые инструменты web-разработки 11
1.1. Что такое Интернет и веб 11
1.2. Браузер и его функции в вебе 13
1.3. HTML и CSS 15
1.4. JavaScript и причины его появления 18
1.5. Бэкенд разработка 19
1.6. Эволюция Web 1.0 в Web 2.0 21
Выводы 22
2. Обзор современной Web разработки 24
2.1. Развитие веб стандартов 24
2.2. Мобильный веб и адаптивная верстка 28
2.3. Упрощающие разработку инструменты 35
2.4. Node.js и NPM 38
2.5. TypeScript 39
2.6. Single Page Applications и React.js 40
2.7. Мобильная и десктоп разработка на базе веб-технологий 43
Выводы 44
3. Разработка веб-приложения при помощи современных инструментов 45
3.1. Проектирование Интернет-магазина и выбор технологий 45
3.2. Разработка серверной части 46
3.3. Разработка клиентской части 51
Выводы 60
4. Состояние современного веба 61
4.1. Эволюция Web 2.0 в Web 3.0 61
4.2. Монополия среди браузеров 62
4.3. Тренды использования веб-технологий 63
Выводы 65
5. Обеспечение качества разработки, продукции, программного продукта 66
5.1. Определение потребителей разработки 66
5.2. Определение функций разработки 66
5.3. Соотношение функций и соответствующих требований для разработки 67
5.4. Таблица операционных требований для разработки 67
5.5. Анализ текущего состояния и предложения разработки 69
Выводы 71
Заключение 72
Список Используемых источников 73
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ
1. Руководство по PHP [Электронный ресурс]. URL: https://www.php.net/manual/ru (дата обращения 22.04.2022)
2. Эволюция глобальной сети Интернет [Электронный ресурс]. URL: http://bourabai.ru/dbt/web/evolution.htm (дата обращения 23.04.2022)
3. Что нового в HTML5 и CSS3 [Электронный ресурс]. URL: https://stepansuvorov.com/blog/2014/09/что-нового-в-html5-и-css3 (дата обращения 29.04.2022)
4. Версии Javascript [Электронный ресурс]. URL: https://msiter.ru/tutorials/javascript/js_versions (дата обращения 01.05.2022)
5. Обзор базовых возможностей ES6 [Электронный ресурс]. URL: https://habr.com/ru/post/313526/ (дата обращения 03.05.2022)
6. Табличная HTML верстка сайта [Электронный ресурс]. URL: https://www.seostop.ru/sozdanie-saita/html-css/tablichnaja-verstka.html (дата обращения 07.05.2022)
7. Webpack Documentation [Электронный ресурс]. URL: https://webpack.js.org/concepts/ (дата обращения 11.05.2022)
8. Flexbox Documentation [Электронный ресурс]. URL: https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox (дата обращения 12.05.2022)
9. ГОСТ Р ИСО/МЭК 25010-2015 [Электронный ресурс]. URL: https://docs.cntd.ru/document/1200121069 (дата обращения 15.05.2022)
10. State of JS [Электронный ресурс]. URL: https://2021.stateofjs.com/ru-RU (дата обращения 20.05.2022)
11. Методические указания по выполнению дополнительного раздела выпускных квалификационных работ бакалавров «Обеспечение каче-ства разработки, продукции, программного продукта»: Метод. указа-ния, СПб.: Изд-во СПбГЭТУ “ЛЭТИ”, 2022. 12 с.
Проведем разбор кода, представленного в листинге 2.5. На 1 строке объ-является функция с именем MyComponent – это объявление компонента (в Re-act компоненты представляют из себя классы или функции, но использование функций для объявлений компонентов более новый и предпочтительный спо-соб). На 2 строке создается внутреннее состояние компонента с использованием функции useState, которая принимает начальное значение (в нашем случае 0) и возвращает это значение и функцию, с помощью которой можно обновлять это значение. На 4 строке используется ключевое слово return и после него стоит возвращаемое значение функции – в условиях компонента, возвращаемое значение – это JSX код, который возвращает макет компонента. На строке 7 используется кнопка со слушателем событий – при нажатии на нее исполняется функция, записанная в параметре onClick, в этом случае будет происходить установка значения value с прибавленной единицей. На 8 строке в фигурных скобках выводится текущее значение переменной value и при каждом клике на кнопку это значение будет увеличиваться на единицу. На 9 строке показан пример использования одного компонента внутри другого – внутри верстки компонента MyComponent будет выводиться ещё компонент Another компонент (описанный где-то в другом месте), а также использующий текущее значение переменной value, так как в коде указано передача этой переменной в поле property дочернего компонента.