Материал: Автоматизированная информационная система на основе вебтехнологий для частной медицинской клиники

Скачать

Заказать новую работу

Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам


Для формирования ответа бэкенд может обращаться к базе данных за нужной информацией для наполнения шаблона страницы.

Web-приложения с использованием AJAX.

При первом запросе к странице передается HTML-код каркаса. Код JavaScript асинхронно подгружает остальные фрагменты страницы и может «на лету» отправлять запросы на сервер и обрабатывать его ответы в формате XML (eXtended Markup Language) или JSON (JavaScript Object Notation). Эта технология называется «асинхронный JavaScript и XML» (Asynchronous JavaScript And XML, AJAX).

Клиентские приложения.

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

Все взаимодействие с пользователем происходит на одной странице, поэтому такие приложения называют одностраничными (single page applications, SPA). Пользователь выполняет некоторые действия, отправляет запрос и получает ответ без перезагрузки страницы.

Для создания одностраничных web-приложений используются такие фреймворки, как, например, Ember.js, Angular, React, Backbone.js и Vue.js.

Прогрессивные web-приложения.

Прогрессивные web-приложения (англ. progressive web application, PWA) — это web-приложения, разработанные с помощью определенных специальных технологий и стандартных шаблонов, что позволяет им пользоваться преимуществами десктопных и web-приложений.

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

Они обладают следующими характеристиками:

  • доступность для поиска: контент можно найти через поисковики;

  • возможность установки: приложения доступны с домашнего экрана устройства или в средстве запуска приложений;

  • возможность создания ссылок: можно передать ссылку на прогрессивное web-приложение другому пользователю;

  • независимость от сети: работают без подключения к интернету или при слабом подключении;

  • прогрессивное усовершенствование: доступны на базовом уровне в старых браузерах, а полный функционал доступен в новых браузерах;

  • повторное привлечение: когда доступен новый контент, приложение может отправлять уведомления;

  • адаптивный дизайн: доступны на любых устройствах с экраном и браузером, в том числе на мобильном телефонах, планшетах, ноутбуках, телевизорах, холодильниках и т.п.;

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

Принципы работы web-приложений.

Web-приложения состоят из серверной части (back-end, бэкенд) и клиентской части (front-end, фронтенд). Пользователи взаимодействуют с клиентской частью через интерфейс, который отображается в браузере (Chrome, Firefox, Safari, Edge и др.). По команде пользователя запрос отправляется на сервер через интернет. На сервере его обрабатывает серверный код и возвращает клиенту ответ, данный фрагмент представлен на рисунке 12.


Рисунок 13 – Возвращение клиенту ответа
В ответе может содержаться как готовая HTML-страница, так и шаблон страницы или данные, например, в формате XML или JSON. Это зависит от выбранного типа рендеринга (формирования) страницы. То есть, страница может отправляться вообще без изменений (статическая страница) или же бэкенд вносит в нее изменения, после чего отправляет ее браузеру (динамическая страница). Рендеринг может производиться либо полностью на сервере, либо в разных соотношениях распределяться между сервером и клиентом, либо выполняться только клиентом.

Статические и динамические страницы.

Страницы первых web-сайтов содержали только текст в формате HTML. Со временем добавились изображения и таблицы, но web-страницы оставались статическими в прямом смысле слова. Со временем появились технологии, которые позволили придать им динамику. Эту эволюцию мы рассмотрим подробнее в следующих подразделах.

Обработка статических web-страниц.

Клиент отправляет серверу навигационный запрос. В ответ на этот запрос сервер передает клиенту статическую web-страницу без изменений. Весь ее контент (текст, изображения и т.д.) каждый раз выводится одинаково. Этот контент «жестко» закодирован в самой странице.

Обработка динамических страниц.

Бэкенд.

В 1993 году появилась спецификация Common Gateway Interface (CGI). Это интерфейс, который используется программой для связи с web-сервером. Такая программа называется шлюзом. Шлюз может быть написан на любом языке программирования, который использует стандартный ввод-вывод: C/C++, Fortran, PERL, TCL, любая оболочка Unix (shell), Visual Basic, AppleScript. На практике большинство сценариев было написано на Perl.

Эти сценарии позволяли использовать один и тот же шаблон, чтобы наполнять его разным контентом. Таким образом, страницы стали динамически генерироваться на сервере в тексте сценария. В то же время, с точки зрения отклика на действия пользователя в режиме реального времени страницы оставались статическими.


В 1995 году с возникновением JavaScript появилась возможность реагировать на действия пользователя мгновенно и открывать всплывающие окна. Web-страницы оживились. В этом же году был создан язык PHP. Он позволял объединять HTML-код с логикой.

Выгода — не приходится создавать каждую страницу отдельно. Один и тот же код выполняет рендеринг любой страницы. Такой рендеринг называется серверным рендерингом (server-side rendering, SSR). Сервер обрабатывает запрос, формирует страницу из шаблона, а клиент получает готовую полнофункциональную HTML-страницу.

Сейчас для написания кода бэкенда используется множество языков и специальных фреймворков. Самые популярные — это Java (с использованием Java Servlet API), PHP + Laravel, Python + Django, Node.js, языки платформы .NET (C#, VB) + ASP.NET, Ruby + Ruby on Rails и Go. Выбор конкретного языка и фреймворка зависит от характера решаемых задач.

Доступ к базе данных.

Список продуктов с информацией о них может храниться в базе данных (БД). С ней взаимодействует серверный код. Он может читать данные из базы, добавлять, изменять или удалять их. В качестве системы управления базой данных используются MySQL, PostgreSQL, Memcached, MongoDB, Redis и другие. Для работы с БД существует множество библиотек, ориентированных на различные серверные языки программирования.
Фронтенд.

Интерфейс web-приложения может передаваться браузеру не только в виде целой HTML-страницы. Например, в одностраничном приложении это каркас: мета-теги, ссылки на стили и на сценарии, а также элементы, в которые сценарий подставляет нужный контент.

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

Фронтенд может содержать информационные блоки и элементы управления. Например, в Facebook информационные блоки — это публикации в ленте, истории, рекомендации, а элементы управления — кнопки вкладок.

3.3 Инструменты разработки web-приложений


Основные инструменты для web-разработки:

  • библиотеки JavaScript;

  • инструменты web-разработки – интерфейсные среды (Front end Frameworks);

  • фреймворки web-приложений;

  • языки / платформы;

  • базы данных;

  • CSS препроцессоры;

  • web-серверы;

  • локальные сервера – Dev среда разработки.



Библиотеки JavaScript.

Javascript – один из самых популярных языков программирования в сети. Библиотека Javascript – это предварительно написанный скрипт на Javascript, который предоставляет более легкий доступ на всех этапах разработки web-cайта или приложения.

Библиотеки JavaScript:

  1. jQuery: быстрая, маленькая и многофункциональная библиотека JavaScript.

  2. BackBoneJS: Дает JS-приложению коннект с моделями, представлениями, коллекциями и событиями.

  3. D3.js: библиотека JavaScript для управления документами на основе данных.

  4. React: библиотека Javascript Facebook, разработанная для создания пользовательских интерфейсов.

  5. Пользовательский интерфейс jQuery: Набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса.

  6. jQuery Mobile: система пользовательского интерфейса на основе HTML5, предназначенная для создания адаптивных web-сайтов.

  7. Underscore.js: помощники по функциональному программированию без расширения каких-либо встроенных объектов.

  8. Moment.js: помогают анализировать, проверять, манипулировать и отображать даты в JavaScript.

  9. Lodash: современная библиотека утилит, обеспечивающая модульность, производительность и дополнительные возможности.

  10. Vue.js: среда JavaScript с открытым исходным кодом, используемая для создания пользовательских интерфейсов.

Инструменты web-разработки – интерфейсные среды (Front end Frameworks).

Предназначены для фронтенд разработки и обычно состоят из пакета, состоящего из других файлов и папок, таких как HTML, CSS, JavasScript и т.д. Существует также множество автономных фреймворков. Надежная структура таких пакетов может быть важным инструментом для разработчиков фронтенда.

  1. Bootstrap: HTML, CSS и JS-фреймворк для разработки адаптивных мобильных проектов в Интернете.

  2. Foundation: семейство адаптивных интерфейсных сред, которые позволяют легко создавать красивые адаптивные web-сайты, приложения и электронные письма, которые выглядят потрясающе на любом устройстве.

  3. Semantic UI ("Семантический пользовательский интерфейс"): среда разработки, которая помогает создавать красивые адаптивные макеты с использованием удобного HTML.

  4. Uikit: легкий и модульный интерфейс для разработки быстрых и мощных web-интерфейсов.


Фреймворки web-приложений.

Фреймворки web-приложений – это программный каркас, предназначенный для помощи и снятия головной боли при разработке web-приложений и сервисов.

  1. Ruby: Ruby on Rails – это инфраструктура web-приложений, которая включает в себя все необходимое для создания web-приложений на основе базы данных с шаблоном MVC.

  2. AngularJS: позволяет расширить словарный запас HTML для web-приложения. AngularJS – это фреймворк, хотя он гораздо более легкий и иногда называется библиотекой.

  3. Ember.js: платформа для создания амбициозных web-приложений.

  4. Express: быстрый и минималистичный web-фреймворк для Node.js.

  5. Meteor: полнофункциональная платформа приложений JavaScript, которая собирает все части, необходимые для создания современных web-приложений и мобильных приложений, с единой базой кода JavaScript.

  6. Django: web-инфраструктура Python высокого уровня, которая способствует быстрой разработке и чистому, прагматичному дизайну.

  7. ASP.net: бесплатная полностью поддерживаемая платформа web-приложений, которая помогает создавать web-решения на основе самых современных web-стандартов.

  8. Laravel: бесплатный фреймворк для web-приложений с открытым исходным кодом для создания web-приложений по шаблону MVC.

  9. Zend Framework 2: платформа с открытым исходным кодом для разработки web-приложений и сервисов с использованием PHP.

  10. Phalcon: полнофункциональный PHP-фреймворк, поставляемый как C-расширение.

  11. Symfony: набор PHP-компонентов и каркас web-приложения.

  12. CakePHP: популярная среда PHP, которая делает создание web-приложений проще, быстрее и требует меньше кода.

  13. Flask: микрофрейм для Python, основанный на Werkzeug и Jinja 2.

  14. CodeIgniter: мощный и легкий PHP-фреймворк, созданный для разработчиков, которым необходим простой и элегантный инструментарий для создания полнофункциональных web-приложений.

Языки / Платформы.

За всеми инструментами web-разработки стоит язык. Язык программирования является формальным языком, предназначенным для построения связи с компьютером чтобы программист мог удобно и максимально быстро создавать программы.

  1. PHP: популярный язык сценариев общего назначения, который особенно подходит для web-разработки.

  2. NodeJS: управляемая событиями среда ввода-вывода на стороне сервера JavaScript, основанная на V8.

  3. Javascript: язык программирования HTML и web.

  4. HTML5: язык разметки, последняя версия HTML и XHTML.

  5. Python: язык программирования, который позволяет работать быстрее и более эффективно интегрировать системы.

  6. Ruby: динамический язык программирования с открытым исходным кодом и с упором на простоту и производительность.

  7. Scala: чистый объектно-ориентированный язык, позволяющий постепенно и легко перейти к более функциональному стилю.

  8. CSS3: последняя версия каскадных таблиц стилей, используемых при фронтальной разработке сайтов и приложений.

  9. SQ: язык структурированных запросов, используемый с реляционными базами данных.

  10. Golang: язык программирования с открытым исходным кодом, позволяющий легко создавать простые, надежные и эффективные программы.

  11. Rust: язык системного программирования, который работает невероятно быстро, предотвращает ошибки и гарантирует безопасность потоков.

  12. Elixir: динамический, функциональный язык, предназначенный для создания масштабируемых и поддерживаемых приложений.

  13. TypeScript: язык программирования с открытым исходным кодом, представляющий собой расширенный набор JavaScript, который компилируется в простой JavaScript.
Источник: https://files.student-it.ru/previewfile/239331

Смотрите также:

17. Введение 18. Линейные программы 19. Ветвления 20. Программирование циклических алгоритмов
Анализ эффективности инвестиций предприятия на примере ООО «СпецПримСтрой»
Сборные железобетонные ребристые плиты перекрытия
_-___-~1
_3 тема - Диффузия
_Роджерс Карл, Брак и его альтернативы
_Штерн Вильям, Дифференциальная психология и ее методические основы
- Описание типа СЭТ7009