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

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

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.
    

---