Хотя концепция одностраничного приложения существует уже почти десять лет, многие до сих пор не знают, что оно может на самом деле дать. Слишком много людей недооценивают мощь современного HTML! На самом деле HTML повлиял на другие современные нативные технологии, такие как XAML и QML. XAML — это мощная и современная платформа .Net для настольных и мобильных приложений, которая заменяет Win Forms и может быть написана на C#, VB и C++. QML — это кроссплатформенный фреймворк QT, представляющий собой разновидность C++.
С такими фреймворками, как AngularJS и Angular, мы видим появление HTML, который может оценивать логику. Правильно: операторы if, операторы switch и циклы for теперь можно формулировать с помощью HTML. Это имеет смысл, поскольку html — язык декларативного программирования — вполне способен на это; это делает язык еще более мощным и простым в работе!
Одностраничные приложения — это страницы на основе HTML, которые могут плавно и динамически загружать свои элементы, компоненты и другие ресурсы по мере того, как пользователь взаимодействует со страницей. Это дает пользователю действительно плавную иллюзию многостраничного веб-сайта. На самом деле все одностраничное приложение загружается при первом запросе страницы. Последующие взаимодействия SPA запрашивают только данные AJAX, а не дополнительные страницы с сервера. Это не останавливается на достигнутом, разработка этого типа приложений также является плавной и динамичной для разработчика.
Здравствуйте, меня зовут Роберт, и сегодня мы рассмотрим 8 замечательных причин, по которым вам стоит изучить одностраничные приложения.
1. Продвигает архитектуру RESTful
REST расшифровывается как Передача репрезентативного состояния. Он был определен Роем Филдингом в 2000 году в моей альма-матер, Калифорнийском университете в Ирвине. Это популярное соглашение для написания веб-API.
Архитектура RESTful позволяет запрашивать и обновлять данные по требованию и асинхронно. Эта форма связи с сервером без сохранения состояния создает более простое и надежное промежуточное ПО. Мало того, вызовы RESTful без сохранения состояния также сокращают служебные ресурсы сервера для выполнения операций промежуточного программного обеспечения.
По соглашению существует 5 глаголов RESTful HTTP: GET, POST, PUT, DELETE и PATCH. См. раздел ниже, если вы хотите узнать больше.
Получить — обычно извлекает данные
Сообщение — обычно используется для создания или вставки данных.
Поместить — обычно используется для замены или вставки данных, если они не существуют.
Патч — обычно обновляет часть данных или создает их, если они не существуют.
Удалить — обычно удаляет часть данных.
Пожалуйста, имейте в виду, что это стандартные рекомендации. Вы можете реализовать свой API иначе, чем предлагаемый стандарт, или даже создать глаголы, не перечисленные здесь.
Преимущество использования подхода RESTful заключается в том, что запрос может выполняться асинхронно во время работы приложения. Однако можно выполнить запрос блокирующим образом, заморозив приложение до тех пор, пока запрос не завершится, прежде чем переходить к следующему шагу. К счастью, это осуждается. Выполнение асинхронных запросов позволяет приложению изящно отображать анимацию загрузки и обрабатывать до 6 (для Chrome) запросов параллельно. По завершении приложение может представить данные в случае успеха или изящно обработать различные типы ошибочных результатов.
Кроме того, RESTful API могут использоваться нативными приложениями, такими как приложения для Android, приложения для Windows и приложения для iOS. Это позволяет вашему внешнему веб-приложению SPA быть полностью совместимым с другими собственными приложениями на разных устройствах и платформах.
2. Повторное использование
Одностраничные приложения могут разделить ответственность за выполнение этих запросов на вызовы службы. Сравните это с подходом с предварительным рендерингом приложений, где логика сервера по своей сути смешивается с интерфейсным кодом.
Это позволяет разрабатывать внешнее веб-приложение SPA в большей степени независимо от запросов промежуточного программного обеспечения, что обеспечивает лучшее повторное использование и взаимозаменяемость как внешнего кода, так и кода промежуточного программного обеспечения. Например, вы можете запускать разные версии своего внешнего приложения и использовать один и тот же промежуточный API.
Это позволяет приложениям внешнего интерфейса и промежуточного программного обеспечения развиваться независимо друг от друга. Новая версия промежуточного программного обеспечения может быть выпущена по маршруту, который выглядит как /api/v3, в то время как более старая версия /api/v2 все еще доступна для медленной миграции внешнего интерфейса. Кроме того, внешнее приложение может быть обновлено с AngularJS до Angular 8 или ReactJS, оставляя при этом внутреннюю часть нетронутой.
3. Это настоящее автономное веб-приложение, которое ведет себя так же, как настольное приложение (применяются все мощные принципы проектирования).
Подобно настольным и мобильным приложениям, одностраничные приложения могут загружать свой компонент при первом запуске. Это делает создание html-веб-приложений похожим на разработку собственного настольного или мобильного приложения, где все имеет единую точку входа и данные могут передаваться от компонента к компоненту. Необходимость повторного использования компонентов особенно важна для нативных приложений на платформах Windows, iOS или Android. Традиционно такое повторное использование осуществлялось посредством болезненного объектно-ориентированного тяжелого наследования, включающего сотни, если не тысячи строк кода. Однако HTML показал, что создавать компоненты просто и легко. Повторное использование и настройка компонентов может быть совершенно безболезненным.
На самом деле создавать компоненты в HTML очень весело — благодаря таким фреймворкам, как Angular и React. HTML не только прост в создании, но и делает его интуитивно понятным для повторного использования, переопределения и настройки при необходимости. Кроме того, существует стандарт, называемый веб-компонентами, который является родным для HTML. Такие платформы, как Google Polymer, используют преимущества этой технологии.
HTML5 — это фантастика.
Нужно изменить внешний вид? Используйте классы CSS или переопределения.
Нужно передать данные в качестве параметра? Используйте столько атрибутов, сколько хотите.
Нужно встроить сложный контент в свой элемент управления? Используйте внутренний HTML элемента. Благодаря простой и иерархической природе HTML вы можете встраивать сложные элементы управления друг в друга.
Шаблоны HTML — это стандарт, поддерживаемый Chrome, Edge и Firefox. Веб-компоненты — это стандарт, использующий шаблоны HTML, позволяющий создавать и повторно использовать элементы HTML. Это можно использовать вместе с одностраничными приложениями.
Создание компонентов в HTML настолько круто, что такой интерфейсный подход повлиял на такие платформы, как Windows, Android и QT. И угадайте, что? HTML по-прежнему проще и становится еще лучше!
4. Прекрасно работает с кэшированием и веб-хранилищем
Нативные настольные и мобильные приложения имеют множество компонентов, которые взаимодействуют друг с другом. Эта коммуникация может иметь место в виде данных, передаваемых статически, или в виде параметров при инициализации, это также может происходить в форме хранения данных. Аналогичным образом одностраничные приложения могут хранить данные в виде веб-хранилища и использовать их для связи с другими компонентами приложения, другими работающими экземплярами приложения или даже с другими SPA, работающими в том же домене.
Веб-хранилище — это технология, обеспечивающая сохранение данных на внешнем интерфейсе. Используя эту технологию, одностраничные приложения теперь могут хранить состояния приложений или кэшировать данные, которые могут долго вычисляться серверной частью. Кроме того, эти данные могут оставаться доступными для разных компонентов и разных экземпляров приложения.
Например, предположим, что странице необходимо загружать каталог элементов, который требует некоторых вычислений каждый раз, когда загружается страница. Хотя это не очень медленно, частые запросы к этой странице будут тратить ресурсы и раздражать пользователя. Даже если бы была изменена только 1 из 35 000 записей, пришлось бы перезагружать всю страницу и переделывать вычисления, чтобы учесть изменение. Благодаря SPA и кэшированию информация может храниться в веб-хранилище, а сервер может использовать веб-сокеты для уведомления пользователя об отдельных обновлениях данных для трансляции. Таким образом, потребуется обновить только те критические части, которые действительно меняются. Кроме того, поскольку эта форма сохраняемости может использоваться совместно, обновления могут немедленно распространяться и совместно использоваться другими компонентами и экземплярами приложений. Это может эффективно сократить избыточные вычисления за счет совместного использования уже доступных фрагментов данных между различными приложениями, а также улучшить взаимодействие с пользователем, предоставляя им прямую ленту изменений, происходящих непосредственно с сервера.
5. Отзывчивый, быстрый и плавный. Он позволяет использовать несколько макетов, а веб-сокеты позволяют запускать один экземпляр, когда открыто много веб-страниц.
Одностраничные приложения могут использовать возможности CSS для упрощения оформления компонентов. В Интернете есть множество технологий и лучших практик для разработки дизайна для разных устройств. Крупномасштабные проекты SPA имеют встроенную поддержку адаптивного дизайна; они отлично смотрятся на телефонах, планшетах и компьютерах. Это означает, что вы можете создавать веб-страницы, которые прекрасно работают и отображаются на разных платформах. Это может показаться очевидным с точки зрения разработчика HTML, но создание адаптивных приложений, поддерживающих такое количество дисплеев и платформ в других средах, таких как Win Forms, XAML, QT, Java или Android, намного сложнее.
Концепция асинхронного программирования является важной частью HTML и JavaScript. Предпочтительный метод обработки HTTP-запроса — асинхронный, а не блокирующий. В запросе на блокировку программа будет ждать, пока строка кода, которая делает запрос, не будет завершена, прежде чем перейти к следующей строке. Это приведет к зависанию интерфейсного приложения, что расстроит пользователей, особенно если выполнение запроса занимает много времени. В неблокирующем асинхронном запросе он соблюдается, позволяя программе продолжить выполнение до следующей строки. Это дает пользователю ощущение, что приложение всегда течет и быстро.
Ответы с сервера можно хранить и использовать во всем веб-приложении. Благодаря структуре SPA нетрудно передавать данные между различными компонентами или даже запущенными экземплярами SPA. Это может избавить от ненужных и избыточных обращений к серверам. Выполнение дает пользователю более плавный, непрерывный опыт.
Кроме того, с использованием веб-сокетов поток поступающих данных в режиме реального времени может быть сохранен и немедленно использован различными частями веб-приложения SPA. Обновление с сервера может инициировать распространение данных на взаимосвязанные компоненты. Это может сделать ваше приложение невероятно интригующим и интерактивным.
Из-за структуры веб-приложения SPA разработчики могут определять различные макеты независимо от своих компонентов. Разработчики могут создать определенный компонент и не беспокоиться о странице в целом до более позднего этапа или наоборот. Макеты легко создавать, и они позволяют создавать множество возможных образов. Они могут определить столько макетов, сколько пожелают, и даже мгновенно переключаться между стилями макета. Сложные макеты могут даже быть специфичными для компонента. Компоненты можно настроить так, чтобы они переключались на определенный макет при использовании и возвращались к макету по умолчанию в противном случае. Макеты также можно повторно использовать в разных приложениях.
6. Интересные фреймворки, управляющие DOM. Он раскрывает истинную мощь HTML путем манипулирования DOM (встраивает логику в html и обеспечивает быструю разработку)
DOM или объектная модель документа — это структура API для правильно сформированного HTML-документа. Одностраничные приложения широко используют модель DOM, манипулируя ею, чтобы предоставить конечному пользователю динамические возможности.
Одним из преимуществ HTML является иерархия объектов, язык позволяет пользователям четко видеть, где находится объект в иерархии. В отличие от фреймворков предыдущих поколений, таких как Win Forms, Java Spring и более старых фреймворков QT, компоненты пользовательского интерфейса были добавлены в контейнеры, которые было нелегко визуализировать (тем более манипулировать ими). Опытные разработчики, работающие с HTML, уже имеют представление об этой структуре на интуитивном уровне.
Магия, стоящая за SPA, заключается в умном манипулировании этим DOM. Манипулируя дочерними узлами, отдельная страница может удалять или добавлять на страницу любые элементы, которые она хочет. Это позволяет одной HTML-странице изменять свою форму всеми возможными способами, и, следовательно, рождение одностраничных приложений.
Постоянно изменять структуру DOM может быть дорого. Это одна из причин, по которой Google представил Angular, преемника AngularJS.
Angular и AngularJS от Google уникальны тем, что используют шаблон проектирования MVC, MVVM или MV* (модель-представление-независимо). Он отделяет представление от логики, позволяя пользователям иметь шаблоны, в которых живет код HTML, и контроллер, в котором живет код JavaScript. Удивительно то, что этот фреймворк также добавляет мощные элементы и атрибуты, которые позволяют пользователю встраивать логику в элементы HTML. Например, вы можете использовать операторы if, операторы switch и условные циклы for в HTML. Эти конструкции в HTML придают этому фреймворку интересный оттенок. Это делает код HTML более выразительным и уменьшает объем необходимого кода.
Вкус React больше ориентирован на JavaScript. Однако, в отличие от Angular, React легче, более модульный и предназначен для использования с другими библиотеками. Не волнуйтесь, у React есть гигантская экосистема библиотек, из которых можно черпать информацию. Он не так сильно акцентирует внимание на MVC и поощряет более тяжелый подход к созданию веб-приложений, основанный на JavaScript.
7. Его легче портировать в полноценное родное приложение. (на самом деле существуют фреймворки для использования этой технологии, такие как реактивный натив)
По своей сути одностраничные приложения очень похожи на родные настольные или мобильные приложения. Оба типа приложений используют единую точку входа, которая представляет собой набор инструкций, которые всегда выполняются в начале приложения. Кроме того, собственные приложения состоят из других компонентов, которые добавляются к более крупным представлениям. Поскольку SPA ориентирован на компоненты и регистрирует все свои компоненты в основном приложении, его структура и поведение могут быть сопоставлены с более традиционными приложениями. Даже принципы пользовательского интерфейса и дизайна можно сопоставить с родными приложениями. Все, начиная от дизайна приложения и заканчивая потоком данных от компонента к компоненту или веб-запросами через API, может быть преобразовано из веб-приложения в собственное приложение.
Наконец, существуют даже фреймворки, которые используют такие фреймворки, как AngularJS, Angular и React, для создания кроссплатформенных приложений для мобильных и настольных устройств. Эти фреймворки позволят разработчикам создавать приложения, написанные на HTML, но работающие как полноценные приложения на разных платформах. Вот несколько примеров таких фреймворков…
Ionic — кроссплатформенное решение, использующее HTML, JavaScript и CSS для написания приложений для устройства. Этот фреймворк даже позволяет HTML и JavaScript управлять исключительно аппаратными ресурсами телефона или настольного компьютера, такими как камеры и микрофоны. Ionic называет эти приложения гибридными прогрессивными веб-приложениями.
Native React — эта платформа была разработана FaceBook и использует тот же API из библиотеки ReactJS для создания многофункциональных мобильных приложений. Вы создаете свое приложение, используя JavaScript и HTML, но конечным продуктом будет настоящее мобильное приложение, встроенное в устройство.
8. Бесшовная разработка (хорошо интегрированная и предсказуемая, легко упаковывается и объединяется в рабочий дистрибутив)
Существует особый опыт, который вы получаете, когда разрабатываете SPA — в первую очередь с использованием экосистемы NodeJS — это похоже на оптимизированный и плавный процесс разработки. Express.js может работать как сервер для обслуживания ваших файлов (если он вам нужен). Горячая перезагрузка обнаруживает изменения и практически сразу же применяет эти изменения к вашему одностраничному приложению без необходимости перестраивать все заново. Такие пакеты, как minify и bundle, могут создать распространяемую версию вашего веб-приложения SPA в небольшом и компактном наборе файлов с одним index.html. Утилиты, такие как Grunt, Gulp или встроенные команды запуска NPM, могут выполнять задачи по перемещению файлов и выполнять любые промежуточные шаги в процессе. Все эти функции в совокупности создают мощную, гибкую и бесшовную среду разработки, которую еще нигде не видели. Если вы этого не испытали, вы многое потеряли!
Бонус
9. Ленивая загрузка модулей и страниц. Хотя по умолчанию для создания SPA используется загрузка всего содержимого сразу, несложно настроить его так, чтобы сначала загружалось конкретное содержимое. Определенные компоненты или модули страницы могут быть назначены для загрузки по запросу, а не при начальной загрузке. Это позволяет загружать даже определенные страницы и игнорировать все приложение. Это особенно полезно, если у вас есть определенная страница, которую вы хотите обслуживать, но не хотите, чтобы загружалось все приложение.
10. Гибридное СПА. Это нетрадиционно, но на самом деле можно создавать SPA, в которых части страницы могут быть предварительно обработаны или созданы по шаблону. Скажем, например, что у вас есть страница, содержимое которой загружается с помощью PHP, ASPX, Golang или Ruby on Rails (не имеет значения, какая именно технология); на самом деле можно настроить SPA для работы вместе с шаблонной страницей! Многие люди жалуются на то, что SPA не совместим с SEO, но SPA на самом деле способен идеально работать вместе со статически созданными страницами и предварительно обработанными страницами на стороне сервера, на самом деле это не проблема.
Зачем тебе это? Сила SPA в том, что они действительно динамичны и могут дать пользователю очень интерактивный опыт. С HTML5 вы можете погрузить пользователя в богатый опыт за пределами досягаемости предварительно обработанных страниц, используя при этом преимущества межкомпонентных функций и кэширования, которые упоминались ранее в этой статье.
11. Есть предложение, чтобы HTML6 имел встроенную поддержку одностраничного приложения без JavaScript. Разработав другие среды на основе пользовательского интерфейса, такие как XAML и QML, я вижу, как это возможно, обеспечивая встроенную поддержку привязки данных и поддержки маршрутизации. Если бы эти функции были изначально доступны в HTML, такие фреймворки, как Angular, React, Ember и Vue, могли бы стать ненужными. Кроме того, это значительно упростит написание веб-приложений и уменьшит объем требуемого JavaScript.
Что еще?
Присоединяйтесь к нам: https://intully.com
