Подтвердить что ты не робот

Является ли клиентский интерфейс пользовательского интерфейса с помощью Javascript хорошей идеей?

"Классический" подход к веб-разработке был в течение некоторого времени тонким клиентом и толстым сервером: сервер генерирует HTML и выплевывает его для просмотра только браузером. Но с текущими браузерами (а также из-за наличия хороших библиотек и фреймворков) работает Javascript. Веб-разработчики теперь могут в значительной степени предположить, что их код Javascript будет работать и перестать беспокоиться.

Это, безусловно, открыло новые возможности для веб-разработки. Теперь приложения могут состоять в основном из содержимого HTML, возвращаемого с сервера и отображаемого браузером, при этом некоторые манипуляции с пользовательским интерфейсом выполняются на стороне клиента. Клиент может даже запросить сервер для свежих данных для обновления частей пользовательского интерфейса. Но можем ли мы пойти по другому пути? Приложение, безусловно, может быть спроектировано как сервер, который использует только самый минималистский JSON, склеенный вместе с толстым клиентом Javascript, ответственным за создание и управление всем пользовательским интерфейсом. Да, этот подход может серьезно разорвать URL-адреса в той мере, в какой люди больше не могут отправлять указатели, но, безусловно, можно спроектировать свой путь вокруг этого (и для некоторых приложений, таких как электронная почта и читатели каналов, это даже не материя).

Как вы думаете? Вы когда-нибудь пробовали этот подход? Дела идут слишком медленно? Могут ли современные браузеры справляться с этим количеством кода Javascript? Существуют ли какие-либо существенные различия между реализациями браузеров, которые по-прежнему укушают продвинутого разработчика даже с последними библиотеками? Какими приложениями, по вашему мнению, подходит этот подход? Действительно ли это подходит для чего-либо?

4b9b3361

Ответ 1

Я нахожусь в хвосте здания именно такого приложения. Это графический интерфейс ExtJS поверх веб-сервисов Zend Framework JSON-RPC, реализующий портал гаджета, подобный iGoogle.

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

  • Очень отзывчивый пользовательский интерфейс, ExtJS дает вам отличный пользовательский интерфейс.
  • Очень предсказуемая коммуникация клиент-сервер. Все json (легко отлаживается). Там стандартизованная обработка ошибок, присущая API (по крайней мере, так, как я ее разработал).
  • Внешний интерфейс сменяется. Я мог бы написать приложение С++ поверх того же сервера. Разделение интерфейсных и внутренних линий клиент-сервер означает, что их легче тестировать самостоятельно.
  • Вы можете жить и дышать javascript, и это здорово, если вам это нравится.

Недостатки:

  • Вам нужно жить и дышать javascript, который отстой, если вы ненавидите его. В нашем случае это означало серьезную переподготовку команды разработчиков, потому что мы были тяжелыми PHP.
  • Все живет в одном долгоживущем DOM, поэтому вам нужно оставаться на носках с управлением памятью и следить за тем, чтобы все было правильно очищено. Кроме того, загрузка слишком большого количества пользовательских интерфейсов делает IE "оу, ой, ты причиняешь боль моему мозгу".
  • Не существует быстрого запроса для выбора опции в середине создания пользовательского интерфейса. Вначале сложность проектирования программ для жизни на клиенте сложна. Вы привыкаете к нему, но это немного препятствие.
  • Загрузка всех этих javascript означает, что ваши пользователи должны иметь быстрые соединения и современные браузеры.

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

Обновление (сентябрь 2013):

По-прежнему использовать эту архитектуру и по-прежнему считать ее правильной архитектурой, если вы создаете подлинное веб-приложение (а не только веб-страницу с некоторыми динамическими функциями). Наша команда и продукт теперь намного больше (около 500 000 строк кода), но архитектура масштабируется без проблем. В настоящее время существует много действительно хороших масштабируемых фреймворков javascript (angular, ember,...), поэтому проще, чем когда-либо, использовать этот способ работы.

Потому что @rwoo спросил, некоторые проблемы, которые у нас остались:

  • Загрузка js-кода по требованию оказывается более сложной задачей, чем предусмотрено. Очень важно получить эту часть в вашей архитектуре.
  • Нам пришлось интегрировать автоматическую проверку jshint в крюке pre-commit в subversion, потому что js слишком терпим к синтаксическим ошибкам, и вы часто этого не замечаете, пока продукт не достигнет клиента.
  • Поскольку база данных находится на другом конце запроса веб-службы, вам необходимо тщательно разработать API-интерфейс веб-сервиса, иначе вы получите плохую производительность из-за ожидания слишком большого количества запросов XHR. Это разрешимо, но сложно, и со временем это становится нелегким.
  • В то время как при правильной структуре кросс-браузерные проблемы сводятся к минимуму, они полностью не уходят, что означает, что вам нужно протестировать во всех браузерах, во всех версиях. Это так много работы, что вы должны автоматизировать ее с помощью чего-то вроде селена, и, как оказалось, это сложнее сделать с визуализированным интерфейсом на стороне клиента, чем с интерфейсом пользовательского интерфейса на стороне сервера.

Ответ 2

Ваше утверждение о том, что веб-разработчики могут теперь "в значительной степени предполагать, что их Javascript-код работает", сложно с этим согласиться. По моему опыту, Javascript - это почти всегда черная дыра, сосающая все время и энергию, которую вы можете ее снабдить. Рамки, такие как Prototype и Script.aculo.us, сделали вещи БОЛЬШЕ лучше, но они еще не настолько ожесточены, как предполагает ваш вопрос.

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

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

Я думаю, что есть приложения для пользовательского интерфейса, основанного на Javascript, до тех пор, пока решение идти по этому маршруту хорошо продуманно. Мы бы не обсуждали это на SO, если бы не тот факт, что потенциал пользовательского интерфейса, использующий эту стратегию, является удивительным. Веб-приложения, использующие веб-данные, являются отличными кандидатами (RSS, REST Services). Приложения, удаляющие базу данных отношений или сложные веб-сервисы, будут по необходимости поддерживать более жесткую связь с серверной стороной.

Мои 2 цента.

Ответ 3

Инструменты, такие как Google GWT делают то, что вы описали, - отображаете большую часть клиентской стороны в javascript. Некоторые из крупнозернистых макетов по-прежнему работают с использованием HTML, но интересные биты выполняются динамически, на стороне клиента.

Но GWT использует сгенерированный javascript, а не рукописный. Выполнение этого вручную болезненно.

Ответ 4

ExtJS, YUI, dojo... фреймворки, которые в основном предлагают руку в приложениях реализации, таких как описание, которое вы описываете

Мы (на моем рабочем месте) успешно использовали такой подход для многих приложений большого и малого масштаба... В основном, основываясь на большинстве наших приложений на ExtJS + jQuery, в некоторых случаях на dojo (Zend Framework (если вы вообще интересуетесь миром PHP) обеспечивают удобную интеграцию с элементами dojo)

Если это не злоупотребление и используется только ради его использования или наталкивания на коэффициент прохлады - это потрясающий инструмент.

При правильном дизайне он ни тяжелый, ни медленный, как подход как таковой.

Ответ 5

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

Ответ 6

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

Ответ 7

Если я правильно понимаю ваш вопрос, я думаю, что вы имеете в виду тот вид развития, который вы делаете с чем-то вроде ExtJS. С Ext вы больше не на самом деле пишете какой-либо HTML-код, а скорее разрабатываете все приложение в основном JavaScript, используя методы, подобные разработке графических приложений на рабочем столе.

По большей части современные инструментальные средства почти устраняют большинство прихожей браузера. Хотя вы, безусловно, все равно можете столкнуться с проблемами кросс-браузерного рендеринга, это не так много, как было бы, если бы вы попытались написать все JS самостоятельно. Скорость должна быть приемлемой даже в IE6, хотя вы, как правило, получите лучшую производительность в последней версии Safari, Chrome или Firefox. (Я не знаю достаточно о IE7 или 8, чтобы комментировать).

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

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

Ответ 8

Мне нравится внедрять гибридный подход. Когда страница сначала запрашивается, она должна быть заполнена с такой же информацией, как вы можете сделать вывод из URL/Querystring/Post. И затем любые последующие изменения состояния могут быть запрошены и обновлены с помощью Ajax.

Многие люди склонны подходить просто к загрузке страницы, а затем позволяют javascript/ajax выполнять работу по загрузке. Это приводит к тому, что клиент ожидает загрузки страницы, а затем клиент ожидает загрузки данных.

Намного лучше просто позволить серверу выполнить эту загрузку исходных данных и заполнить все элементы пользовательского интерфейса.

Ответ 9

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

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

Когда вы говорите, что Javascript просто работает сейчас из-за фреймворков, это не совсем так. IE 6 все еще широко используется, как и более старый Safari. Даже FF 2.x и 1.x в некоторой степени имеют приличную долю на потребительском рынке.

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

В отношении размера библиотеки у нас есть несколько элементов .net, которые хотели бы доставить до 1 Мбайт javascript клиенту. Попытка послать это бабушке.

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

Ответ 10

В театре YUI есть видео, которое, я думаю, очень актуально для вашего вопроса - я настоятельно рекомендую смотреть его

Высокопроизводительный JavaScript: почему все, что вам было известно, неверно

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