Плюси та мінуси веб-програми лише для HTML / JavaScript [закрито]


35

Я надходжу з фонових форм ASP.NET і в минулому вважав кодування на стороні сервера дуже потужним. Однак останнім часом я хотів поступово припинити використання серверного коду фронтального модуля та замінити його чистим HTML / JavaScript, який здійснює доступ до даних через веб-сервіси JSON. У мене немає реального досвіду в цьому, і тому я хотів би почути, чи це перевірена модель. Також, які підводні камені оточують його?

Я вважаю, що керування користувачами ASP.NET є дуже корисним, тому я хотів би зберегти цю теорію, зберігаючи шаблони розмітки в окремих файлах HTML на сервері. Вони будуть отримані та використані відповідно до jQuery AJAX та плагіну HTML-шаблонів jQuery відповідно.

Будь-який вклад буде дуже вдячний.

PS Вибачте за питання про noob, але чи цей тип веб-архітектури називають web-2.0 чи я повністю поза увагою?


1
Ви хочете замінити елементи керування asp.net на HTML / JavaScript або ви хочете розкрити всю передню логіку бізнесу (перевірку та ін.) На передній частині?
шлякер

1
Гарне питання. Я думаю про те, щоб зробити фронтенд лише в html / javascript, щоб полегшити сторінку, щоб швидше було на мобільних телефонах / колодках. Тому, ймовірно, просто замініть елементи управління asp.net. Усі дзвінки на сервер через веб-сервіс, тому сервіс wcf повинен якось мати справу з валідацією тощо. Чи вважаєте ви, що це можливо?
hofnarwillie

Я ставлю подібні питання тут: stackoverflow.com/questions/34020543 / ... і тут: stackoverflow.com/questions/33934101 / ...
smwikipedia

@hofnarwillie для перевірки, я думаю, ви повинні використовувати клієнтську сторону JS.
smwikipedia

1
@smwikipedia Дякую, але я вважаю, що перевірка на стороні клієнта повинна використовуватися лише для зручності користувачів. Реальну перевірку слід зробити на стороні сервера. Перевірка клієнтів робить вашу програму зручною для користувачів, але перевірка на стороні сервера забезпечує безпеку та надійність, оскільки перевірку на стороні клієнта легко відключити.
hofnarwillie

Відповіді:


31

Я використовував цю техніку виключно для веб-додатків, над якими ми працюємо. Мій вихідний сервер розміщується в Google App Engine за допомогою Java SDK, а мій інтерфейс використовує HTML, CSS та JavaScript (з jQuery).

Проект є меншим, тільки з собою та веб-дизайнером, і ми обидва вважаємо, що цей метод допомагає нам працювати набагато швидше і швидше отримувати щось на ринку.

Перевага: робота з веб-дизайнерами

Основна перевага цієї методики полягає в тому, що веб-дизайнер, який знає деякий PHP, але не вважає себе програмістом, може працювати без обчислень у HTML та CSS, не потребуючи перебиратися через незліченну кількість ліній JSP, тегів талібів та інших серверів розмітка, про яку нам говорили роками, повинна значно полегшити життя розробника.

Без усієї розмітки на стороні сервера ми були більш спритні. Веб-дизайнер прямо замінив та переглянув свій оригінальний дизайн 3 або 4 рази, з мого боку дуже мало змін.

Його коментар до мене полягав у тому, що він відчував, що HTML-код живий, що він може його редагувати, а потім негайно бачити зміни на своїй машині з динамічними даними. Ми обидва виграємо від цього тим, що інтеграція здебільшого є автоматичною.

Код на стороні сервера та HTML / CSS Handoffs

У минулих проектах йому довелося передавати HTML і CSS розробникам Java, які потім взяли його HTML і CSS і повністю переписали його за допомогою технології JSP. Це займе багато часу, і, як правило, призведе до тонких, але важливих відмінностей у фактичному відображенні сторінок, а також його валідації у валідаторі W3C.

В цілому ми обидва задоволені цією технікою, і я все ще маю нульові сторінки JSP або код на стороні сервера на своїх HTML-сторінках.

Підводні камені техніки REST / JSON

Мабуть, найбільші підводні камені - це ті, з якими ми ще не стикалися. Я сподіваюся, що у мене виникнуть розбіжності з досвідченими розробниками Java, які були вимиті мізками тим, що розповіли їм фундація Apache та команда Spring щодо того, як бібліотеки тегів полегшують розробникам frontend роботу з кодом. Я повністю сподіваюся, що в процесі розширення цього проекту буде крива навчання, і ми беремо на себе більше розробників, яким, можливо, доведеться вивчити ці застарілі методи, які, на мій досвід, ускладнюють роботу веб-дизайнерів .

Ще одна проблема - те, що код JavaScript став дуже масовим. Це більше проблема, можливо, тому, що я вперше використовую цю методику, і тому, що ми ввели незначну технічну заборгованість у роботі над швидким випуском. Можливо, вибір кращої бази допоміг би полегшити значну частину кодексу. На мою думку, нічого з цього не було показовим, і мені рекомендується продовжувати використовувати цю техніку і вдосконалювати свої навички в цій галузі.

Перевага: Інші додатки можна побудувати на платформі

Нарешті, слід зазначити приховану перевагу. Оскільки між моїм сервісом RESTful Web-сервісом та моїм інтернетом є достатня ступінь розриву, я також створив платформу, яку я легко розширюю.

Один із наших хлопців з операцій хотів спробувати доказ концепції в іншій програмі, і завдяки моїм послугам RESTful ми змогли створити зовсім інший інтерфейс до програми, щоб вирішити зовсім іншу проблему. Швидко розроблений доказ концепції використовував власні HTML, CSS та JavaScript, але він використовував RESTful служби як резервний та джерело даних.

Зрештою, інший менеджер проекту побачив, що я зробив, і відразу стало зрозуміло, що ця функція повинна бути не просто доказом концепції, тому його команда реалізувала це.

Я не можу достатньо підкреслити, наскільки ця архітектура багаторазова, як на рівні програми, так і на рівні HTML / CSS / JavaScript, і я б настійно рекомендую спробувати це у наступному проекті.


2
Дякую. Це відповідає на моє запитання повністю. Вдячні за час, який ви витратили на надання чіткої та стислої відповіді. +1
hofnarwillie

2
Я працюю в компанії, де всі внутрішні веб-додатки - це html / js лише з сервісами бекенда, які обслуговують закодовані json дані. Це працює дуже добре і набагато швидше створювати нові додатки за допомогою цієї моделі, а тому, що розробники бекенда та фронту паралельний. Вам слід справді спробувати це.
nohros

@ jmort253 Дякую за відмінну відповідь. Я думав про таку саму архітектуру, і ваша практика змушує мене впевнено йти з цим. Я задавав подібні запитання тут: stackoverflow.com/questions/33934101/… і тут: stackoverflow.com/questions/34020543/… .
smwikipedia

12

Це, звичайно, життєздатна стратегія, але це не срібна куля.

Плюси :

  • якщо зробити все правильно, програми, розроблені таким чином, дуже чуйні
  • у вас чітке розділення логіки (на сервері) та презентації (на клієнті); сервер взагалі не повинен стосуватися себе презентаційних аспектів програми
  • потенційно більш ефективне використання пропускної здатності мережі (ви надсилаєте лише необроблені дані, немає презентаційних котлів)
  • простіше розробити настільні графічні інтерфейси, оскільки ви менш залежні від парадигми запит / відповідь

Мінуси :

  • ви повинні написати свій клієнтський код у Javascript або мові, яка може компілюватись у Javascript, тому що це єдине, що доступне у браузері
  • використання клієнта ресурсів може бути більшим, тому програма може не працювати добре на нестандартних пристроях (думаю, мобільні браузери тощо)
  • він взагалі не працюватиме з відключеним JavaScript; якщо на ньому розміщений публічний веб-сайт, ви повинні добре подумати, чи готові ви ризикувати цим (особливо якщо ви вважаєте, що SEO та доступність - підхід, що відрізняється від JavaScript, зазвичай руйнівний на цих двох фронтах)
  • потрібно багато разів писати логіку: один раз на клієнті та ще раз на сервері (тому що ви ніколи не можете довіряти клієнту)
  • паралельність може бути пеклом, тому вам потрібно дуже ретельно розробити код на стороні клієнта і бути готовим до всіляких проблем з одночасністю

2
Спасибі. Чи можете ви навести приклад проблем із сумісністю, які були б викликані цією моделлю?
hofnarwillie

3
Приклад: Якщо користувач натискає "Голосувати", а потім швидко натискає "Голосувати вниз" до завершення виклику сервера "Голосування", скільки голосів?
JBRWilkinson

@JBRWilkinson Булевий прапор, який перевіряє стан або час та інтервал?
Альпер Туран

1

Це, безумовно, можливо і, можливо, заохочує як найкраща практика. Що ви пропонуєте - це відокремити інтерфейс користувача від ділової логіки, тому існує чітке розмежування проблем. Це справді добре.

Занадто часто рамки, які ми намагаємося заплутати речі разом, і ви закінчуєте монолітним програмним забезпеченням, де інтерфейс, бізнес-логіка та дані переплітаються між собою. Це ускладнює підтримку та зміну.

Після того, як ви розділите програму на 2 частини, ви можете повністю замінити інтерфейс користувача на щось інше - настільну програму або інший інтерфейс для мобільних пристроїв порівняно з браузерами настільних ПК.

Складні біти, які ви знайдете, роблячи це, полягає в тому, що трохи коду, який теоретично повинен бути на сервері, було б краще розміщено на клієнті - наприклад, перевірка, його швидше та більш чуйно реагує на користувач, щоб поставити код перевірки на Форма для клієнта, ніж це натиснути на сервер, щоб перевірити, скажімо, текстове поле містить лише буквено-цифрові символи. Те саме часто стосується шарів даних та бізнесу. Вам просто потрібно приймати обґрунтовані та практичні рішення про те, коли порушувати відмінність між шарами.


1

Одним із недоліків є необхідність дублювання певної логіки в JavaScript та ASP.net. Це може не бути великою проблемою для вас залежно від вашої заявки. Це часто виникає, тому що вам не потрібно просити сервер перевіряти кожну дрібницю ("Чи в цій ситуації користувач може натиснути цю кнопку або вибрати цю опцію?"), Але ви також не хочете залежати для клієнта як єдиного, хто робить перевірку, оскільки користувач має контроль над клієнтом.


0

Якщо ви все ще використовуєте ASP.NET WebForms і хочете пришвидшити свої програми, ось що вам потрібно зробити:

  • Створіть свою програму на увазі SOLID
  • Відключити ViewStateна всіх сторінках та елементах керування користувачами
  • Не використовуйте серверні елементи керування

    <%: VeiwModel.Title%> замість <asp: Literal id = "Title" runat = "server">

  • В бекенд, замініть метод OnInit і виконайте всі ініціалізації там:

    захищений переосмислення недійсності OnInit (System.EventArgs e) {CreateViewModel (); база.OnInit (e); }

  • Стисніть усі .css та .js файли в 1 за допомогою SquishIt

  • Ледачі завантажують зображення
  • Кеш складних об'єктів

Нарешті, перегляньте www.porsche.se. Це не проклятий швидкий веб-сайт?


Це дійсно швидкий веб-сайт. Дуже дякую за вклад. Цінується.
hofnarwillie
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.