Файл: Знакомство и выбор технологии для разработки.pdf

ВВЕДЕНИЕ

В наше время Интернет - это одно из наиболее важных средств массовой информации и коммуникации, которое находится по своей значимости в одном ряду с прессой, телефоном и телевидением. Начиная с 1969 года, мировая сеть - Интернет стремительно развивалась, в наше время превратилась в одно из основных средств, используемых для общения, развлечений, рекламы, торговли и источник разнообразной полезной информации для любой категории пользователей. Быстро растет количество изданий, посвященных сети Интернет, что предвещает широкое ее распространение даже в далеких от техники областях.

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

Блог - веб-сайт, основное содержимое которого - регулярно добавляемые записи, содержащие текст, изображения или мультимедиа. Для блогов характерны недлинные записи вре́менной значимости, отсортированные в обратном хронологическом порядке (последняя запись сверху).

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

Преимущества создания интернет блога:

• Саморазвитие. Хороший способ научиться созданию сайтов;
• Заработок. Возможна монетизация в последствии(к примеру добавление рекламы);
• Самовыражение. Любой человек может зайти и высказаться или поделиться чем либо;

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

Целью работы является формирование теоритических знаний по проектированию web-сайта и практических навыков по его разработке.

Задачи:

1. Проанализировать существующий стеки технологий и выбрать оптимальный
2. Разработать макет(дизайн) сайта
3. Наполнить сайт контентом

ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

ЗНАКОМСТВО И ВЫБОР ТЕХНОЛОГИИ ДЛЯ РАЗРАБОТКИ

На первом этапе проектирования web-сайта необходимо выполнить анализ и определиться со стеком технологий.

Прежде всего следует упомянуть язык разметки гипертекстовых страниц(HTML) - представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно найти на сайте. На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут, как входить, так и не входить в состав действующей спецификации HTML.

Дело в том, что с HTML не представляется возможным сделать какую либо логику на сайте, на помощь приходит JavaScript - мультипарадигменный язык программирования. Так же дело в том, что создание сайтов в текущих реалиях усложнилось в разы и люди стали создавать фрейморки и библиотеки дабы упростить весь этот процесс. Если посмотреть что популярно и часто используется сейчас, то это большая тройка:

• Angular
• React
• Vue

Коротко о каждом.

Angular - среда JavaScript MVVM, основанная в 2009 году, которая отлично подходит для создания интерактивных веб-приложений.

Преимущества Angular:

• Angular используется вместе с Typescript(нужен для типизации). Он имеет исключительную поддержку для этого.
• Angular-language-service — обеспечивает интеллектуальные возможности и автозаполнение шаблона HTML-компонента.
• Новые функции, такие как generation Angular, использующие библиотеки npm из CLI, generation, и разработка компонентов, использующая Angular.
• Подробная документация, позволяющая разработчику получить всю необходимую информацию, не прибегая к помощи его коллег. Однако это требует больше времени для обучения.
• Односторонняя привязка данных, которая обеспечивает исключительное поведение приложения, что сводит к минимуму риск возможных ошибок.
• MVVM (Model-View-ViewModel), которая позволяет разработчикам работать отдельно над одним и тем же разделом приложения, используя один и тот же набор данных.
• Внедрение зависимостей от компонентов, связанных с модулями и модульностью в целом.
• Структура и архитектура, специально созданные для большой масштабируемости проекта.

Недостатки:

• Разнообразие различных структур (Injectables, Components, Pipes, Modules и т. д.) усложняет изучение по сравнению с React и Vue.js, у которых есть только «Component».
• Относительно медленная производительность, учитывая различные показатели. С другой стороны, это можно легко решить, используя так называемый «ChangeDetectionStrategy», который помогает вручную контролировать процесс рендеринга компонентов.

Плюсы и минусы React

React — это библиотека JavaScript, разработанная Facebook в 2013 году, которая отлично подходит для создания современных одностраничных приложений любого размера и масштаба.

Преимущества React:

• Легко изучить, благодаря простому дизайну, использованию JSX (HTML-подобный синтаксис) для шаблонов и очень подробной документации. Разработчики тратят больше времени на написание современного JavaScript и меньше беспокоятся о коде, специфичном для фреймворка.
• Очень быстрая, благодаря реализации React Virtual DOM и различным оптимизациям рендеринга.
• Отличная поддержка рендеринга на стороне сервера, что делает его мощной платформой для контент-ориентированных приложений.
• Первоклассная поддержка Progressive Web App (PWA) благодаря генератору приложений `create-react-app`.
• Привязка данных является односторонней, что означает меньше нежелательных побочных эффектов.
• Redux, самая популярная платформа для управления состоянием приложений в React, ее легко учить и использовать.
• React реализует концепции функционального программирования (FP), создавая простой в тестировании и многократно используемый код.
• Приложения могут быть созданы с помощью TypeScript или Facebook’s Flow, имеющими встроенную поддержку JSX.
• Переход между версиями, как правило, очень прост: Facebook предоставляет «кодовые модули» для автоматизации большей части процесса.
• Навыки, полученные в React, могут быть применены к разработке на React Native.

Недостатки React:

• Сообщество делится по способам написания CSS в React, которые разделяются на традиционные таблицы стилей (CSS Modules) и CSS-in-JS (т.е. Emotion и Styled Components).
• React отходит от компонентов на основе классов, что может стать препятствием для разработчиков, которым более комфортно работать с объектно-ориентированным программированием (ООП).
• Смешивание шаблонов с логикой (JSX) может сбить с толку некоторых разработчиков при первых знакомствах с React.

Плюсы и минусы Vue

Vue— это JavaScript-фреймворк, основанный в 2013 году, который идеально подходит для создания высокоадаптируемых пользовательских интерфейсов и сложных одностраничных приложений.

Преимущества Vue:

• Усиленный HTML. Это означает, что Vue.js имеет много характеристик схожих с Angular, а это, благодаря использованию различных компонентов, помогает оптимизации HTML- блоков.
• Подробная документация. Vue.js имеет очень подробную документацию, которая может ускорить процесс обучения для разработчиков и сэкономить много времени на разработку приложения, используя только базовые знания HTML и JavaScript.
• Адаптивность. Может быть осуществлен быстрый переход от других фреймворков к Vue.js из-за сходства с Angular и React с точки зрения дизайна и архитектуры.
• Потрясающая интеграция. Vue.js можно использовать как для создания одностраничных приложений, так и для более сложных веб-интерфейсов приложений. Важно, что небольшие интерактивные элементы можно легко интегрировать в существующую инфраструктуру без негативных последствий.
• Масштабирование. Vue.js может помочь в разработке довольно больших шаблонов многократного использования, которые могут быть сделаны почти за тоже время, что и более простые. Крошечный размер. Vue.js весит около 20 КБ, сохраняя при этом свою скорость и гибкость, что позволяет достичь гораздо лучшей производительности по сравнению с другими платформами.

Недостатки Vue:

• Недостаток ресурсов. Vue.js по-прежнему занимает довольно небольшую долю рынка по сравнению с React или Angular, что означает, что обмен знаниями в этой среде все еще находится на начальной стадии.
• Риск чрезмерной гибкости. Иногда у Vue.js могут возникнуть проблемы при интеграции в огромные проекты, и пока еще нет опыта возможных решений, но они обязательно появятся в ближайшее время.

В итоге мой выбор пал на React, поскольку он самый популярный и востребованный на рынке на данный момент, а так же по нему куча справочных материалов + приятный и понятный синтаксис.

Теперь нужно определиться, что будет отвечать за состояние приложения. На рынке представлены 2 популярных решения – это Redux и MobX.

Обе библиотеки используются для управления состоянием в JavaScript-приложениях.

Redux разработанный Дэном Абрамовым и Эндрю Кларком является производным архитектуры Flux. В отличие от Flux, он использует одно хранилище над несколькими для сохранения состояния. Кроме того, вместо диспетчера он использует чистые функции для изменения состояния.

Чистая функция — функция которая получает вход, возвращает выход и не имеет других зависимостей, кроме таких же функций. Такая функция производит всегда один и тот же выход с одним и тем же входом и не имеет никаких побочных эффектов.

Redux мастерски справляется со сложными взаимодействиями состояний, которые трудно передать с помощью состояния компонента React. По сути, это система передачи сообщений, которая встречается и в объектно-ориентированном программировании, но она не встроена непосредственно в язык, а реализована в виде библиотеки. Подобно ООП, Redux переводит контроль от вызывающего объекта к получателю — интерфейс не управляет состоянием напрямую, а передает ему сообщение для обработки.

MobX разработанный Мишелем Вестстратом, влияет не только объектно-ориентированное программирование, но также и реактивное программирование. Он обертывает ваше состояние в наблюдаемые объекты. Таким образом, у вас есть все возможности "Observable" в вашем состоянии. Данные могут иметь простые сеттеры и геттеры, но наблюдаемое позволяет получать обновления после изменения данных. В Mobx состояние изменчиво. Таким образом, можно менять состояние на прямую.

Я остановился на Redux, причина похожа почему я выбрал React, Redux более популярный, да и более простой, много справочных материалов + у него есть специальная библиотека react-redux, которая упрощает связку между react и redux путем добавления вспомогательных функций.

ТРЕБОВАНИЯ К САЙТУ.

ТРЕБОВАНИЯ К ФУНКЦИОНАЛЬНЫМ ХАРАКТЕРИСТИКАМ

Интернет-блог должен соответствовать следующим функциональным характеристикам:

• интерфейс должен быть интуитивно понятен;
• навигация по сайту должна быть максимально простой;
• правильная адресация ссылок, чтобы пользователь мог просто и быстро перейти на любую страницу узла.
• сайт должен быть разработан в едином стиле. Дизайн должен быть выполнен не в ущерб удобству навигации по сайту.

2.3 ТРЕБОВАНИЯ К СОСТАВУ И ПАРАМЕТРАМ ТЕХНИЧЕСКИХ СРЕДСТВ

Для нормальной бесперебойной работы программного средства необходимо выполнить ряд требований к аппаратному обеспечению:

• процессор Pentium, Intel (R) i5-2430TM;
• оперативная память 128 MB RAM (минимум). Рекомендуется 256 MB RAM;
• видеоадаптер любой выпущенный позже 2000 год;
• манипулятор "мышь";
• клавиатура;
• Windows XP или более новая версия. На ПК пользователя должно быть установлено следующее ПО, например, как интернет браузер: Mozilla Firefox, Google и т.д.