Single-Page Application

Материал из Неолурк, народный Lurkmore
Перейти к навигации Перейти к поиску

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

Как эта магия (нет) работает[править]

На первый взгляд, всё выглядит как чудо чудное и диво дивное. Пользователь открывает сайт, и его браузер, аки прилежный раб, выкачивает один раз весь необходимый HTML, CSS и, что самое главное, овердофига JavaScript кода. Этот самый код, словно хитрый паразит, поселяется в браузере и берёт на себя всю дальнейшую работу. Когда юзер, преисполненный надежд, тыкает в какую-нибудь кнопку или ссылку, вместо классического запроса новой страницы к серверу и её мучительной отрисовки с нуля, хитрый скрипт лишь подтягивает с сервера недостающие данные, обычно в модном формате JSON, и с помощью своих колдунских манипуляций встраивает их в уже существующую страницу.

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

Светлая сторона силы[править]

Надо признать, что при правильном приготовлении и в нужных руках этот ваш СПА может быть даже полезен. Главный козырь, которым машут евангелисты, это, конечно же, скорость отклика после первоначальной загрузки. Когда всё уже в кэше, переходы между разделами действительно становятся почти мгновенными, создавая иллюзию работы с нативной программой и удерживая внимание пользователя. Для всяких сложных интерфейсов вроде почтовых клиентов типа Gmail, музыкальных сервисов а-ля Яндекс.Музыка или навороченных админок, где юзер проводит часы, не закрывая вкладку, такой подход более чем оправдан.

К тому же, разработчикам это тоже оказалось на руку. Можно чётко разделить фронтенд и бэкенд, создав так называемое API, через которое общаются две команды кодеров. Бэкендеры спокойно пилят свою логику и отдают данные, а фронтендеры лепят из этих данных цветастые интерфейсы, не мешая друг другу. Такой подход упрощает и разработку мобильных приложений, ведь они могут использовать то же самое API, что и веб-версия. В итоге все при деле, пилят свои модули, увеличивают ЧСВ и получают зарплату, а что там у конечного пользователя тормозит, дело десятое.

Тёмная сторона[править]

А теперь о грустном. За всё в этой жизни надо платить, и за магию SPA платит в первую очередь сам пользователь. Первая загрузка такого приложения может стать настоящим испытанием для его терпения. Пока браузер скачает и обработает мегабайты, а то и десятки мегабайт JavaScript, анонимус успеет сходить за чаем, вернуться и обнаружить перед собой всё тот же белый экран. Это явление даже получило своё имя Time to Interactive, то есть время, когда страница вроде загрузилась, но тыкать в неё ещё нельзя, потому что скрипты не закончили свои тёмные ритуалы.

Но главная беда, о которую сломали копья тысячи сеошников, это, конечно же, SEO. Поисковые роботы, эти нежные и туповатые создания, исторически привыкли индексировать статичный HTML. Когда же они приходят на сайт, сделанный по технологии SPA, они видят лишь пустую страницу с подключенным скриптом. И хотя Гугл уже много лет клянётся, что научился выполнять JavaScript и видеть контент, на практике это работает через раз и с оговорками, что приводит к неполной индексации. Чтобы заставить поисковик полюбить твоё SPA-детище, приходится извращаться с серверным рендерингом, он же SSR, или пререндерингом, что по сути является костылём, нивелирующим изначальную идею переноса всей логики на клиент. Получается замкнутый круг: мы ушли от рендеринга на сервере, чтобы потом к нему же и вернуться, но уже с кучей новых сложностей.

Инструментарий современного джедая[править]

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

Первым на трон взошёл Angular от корпорации добра Google, этакий монструозный комбайн, который диктовал свои правила игры и остаётся популярен в корпоративной среде для крупных проектов. Затем на сцену вырвался хипстерский React, который на самом деле библиотека, а не фреймворк, но благодаря своей гибкости, огромной экосистеме и поддержке от Facebook быстро завоевал сердца хомячков и лидирующие позиции на рынке труда. Позже из ниоткуда появился Vue.js, созданный одним китайским гением в одиночку, который попытался взять лучшее от обоих миров, простоту и низкий порог вхождения, что сделало его любимцем новичков и стартапов. Спор о том, что из этого лучше, является вечным двигателем для генерации бессмысленных статей на Хабре и срачей в Твиттере, и конца ему не видно.

В итоге, Single-Page Application, как и любая технология, не является ни абсолютным злом, ни панацеей. Это просто инструмент, который в руках мастера может сотворить чудо, а в руках вчерашнего выпускника курсов Войти в АйТи за 21 день порождает очередного тормозного уродца, проклинаемого пользователями и поисковыми системами. Анонимус же продолжает страдать, наблюдая, как простейший бложик на пять страниц грузится дольше, чем вся Windows XP в своё время. Таков путь.

App.png Весьма полезная вещь, позволяет машинам работать с помощью коммандычей
МетаПрограммаDRM (SecuROMStarForceАналоговая дыра) • БагБот (Автоответчик) • Варез (Repack) • ГлюкГуйДонатКопирайт (By design) • ЛогНюкРут (Не работай под рутом) • Спортивное программированиеМегапиксельКомпьютерВерсия 2.0КодОбфускацияСкриншотДатамайнПлагинТекстовый файлБольшие данныеАльфа и бета-тестыТаймстампКэшШаблоныHello WorldНейросетиФайлИнсталляцияВидеоМощный сбой Microsoft 19 июля 2024 годаCrowdStrikeПроект GNUUserscriptDxvkVkd3dБратан хорош давай давай впередКонечный автоматLumenЗаступник (приложение)NeeUnreal MCPОптимизацияДрайверТестированиеТройная буферизацияQBitTorrentСинтезаторОбрыв загрузки файла на 99%Polycount.comГрок написал программу о себеВредоносTamTam
ФичиБагрепорт12309BSODCookiesEmbrace, extend and extinguishFL StudioSheep.exeWinlogon.exeБубенЗащита от дуракаКостыльМашинный переводПасхальные яйцаСвистелки и перделкиСм. рис. 1Съешь ещё этих мягких французских булокTermuxGNU MetroИндусский кодНескучные обои • Сжатие (За сжатие ДжипегаШакалШкала) • Работает — не трогайРандомайзерPDF (Распознавание PDF) • Дело Google в ФАСЧат-ботXMLМакросКритическая ошибкаФреймворкСинонимайзерSourceТрёхмерное отслеживаниеТрассировка фотоновHZB OcclusionДаунгрейд RTX 4070TressFXАвтопереводчикVSCodiumThorium BrowserShovelwareФайл подкачкиTea Dating AdviceSingle-Page Application
ВредоносноеБотнетБрутфорсВинлокЗвонилкаКитайские пингвиныПиксель смертиТроянЧервь МоррисаBonziBuddyMediaGetBrowser hijackingTinderМиссис МажорУтечка буфера обменаWin 10 TweakerОпараш Mozilla FirefoxЯндекс.МузыкаКрэкерБезопасность через умолчаниеGrifter.aviTrojan.Winlock.DeathМиссис МажорСредаDirectStorageDriverpackГенератор случайных чиселDisable Core 0РомхакингDDrawCompatWingetCreateWinGetCoowonЯндекс МессенджерVCPkgSELinuxXfireYouTube Auto-ResumeTape OperatorBotFatherMTProtoSignalDoubleClickFixGiteeБотофермаMalwareCeno Browser
КомпанииApple / Apple (AppleScript) • GoogleMicrosoftSAPЯндексExiled Exchange 2BraveAdNauseamСкурвление FirefoxCafe BazaarAMD FEMFXPPSSPPАвтохукQuick machine recoveryMAXBypassNROWizTreeJTubeGallium NineFalconRu-WireGuardМобильное приложениеWebRenderСмс-бомберInstaller-SHProton GEProcess LassoParkControlDolby AccessDevToolsDxWrapperБойкот мессенджера MaxFirejail
Движения8-bitOpen source (КрасноглазикиЛинуксоиды) • Вирусная сценаДаунгрейдДемосценаМоддингMMDDirectDrawЛагиБлокировка Дискорда в РоссииOpera GXНесоответствие MIME-типаRenoisePygameLs (UNIX)МетаданныеПатчNginxПиксельЭмуляторSearxТамТамMallocСвязный списокSOLIDGreasemonkeyПлатные сообщенияFlatpakNouveauFuse.jsFellouИстория браузераCORE.exe
Офис3DS MAXGIMPGNU EmacsMovie MakerMS Paint • OpenOffice • PowerPointviMicrosoft WordExcelБлокнотФотошопАнтивирус КасперскогоAvast!TikZShareXAlternativeToСкрепышMicrosoft OfficeТекстовый редакторWeChatZoomДиспетчер задачMicrosoft CortanaWinampBallonTranslatorKerish DoctorОбщая ошибкаFirefox: Как один баг сломал весь YouTubeМеждулициеMeld StudioLadybirdCheat EngineTotal Commander
ОСAndroidBSDDOSMenuetOSReactOSWindows (Phone 7Phone 878Vista) / МаздайЛинуксРусская ОСФантом ОСIndex.phpCompassУход мэйнтейнера NouveauБойкот лаунчеровAria2cNoiceMinecraft-Installer.exeDirectX
БраузерыInternet ExplorerОпера / Opera • Тормозилла (ОгнелисLolifoxMozilla FirefoxFirefoxFirefox Klar) • Хром (шпионаж) • SafariЯндекс.БраузерУведомления в браузереVivaldiTor-браузерЗосимаФронтенд
ИнтернетAdobe Systems (Flash) • I2PLow Orbit Ion CannonTorTunatic • Чат−клиенты (MirandaQIPSkypeЖабберDiscordVIPole) • HTTPSПрокси-сервер (Proxifier) • Торрент (Magnet-ссылкаΜTorrent) • JavaScriptCSSHTMLБаннермейкерИзменение TTL сетевых пакетовКапчаICQFiddlerViberZonaSteamSillyTavernWickr Me
РазработкаBrainFuckCC++C#JavaHaskellАссемблерChaos ConstructionsBATMySQLGitHubAutoHotKey (AutoHotInterception) • Sublime TextAPK (APKPureзапрет) • BASICPerlPythonPHPФоркUnity3DSAISIPСАПРФлагUTAUФласк макросАуработRaidCallAdobe MingОфициальный™ список кошерных программDevOpsНиколай ДуровЗаброшенное ПО
ЛюдиВеб-мастерLovinGODБалмерГейтсГенерал ФейлорДжобсМитникПоттерингде РаадтСпольскиСтоллманТорвальдсШахиджанянAche666Марк ЦукербергЕвгений ПоповДенис КумпонМассовая компьютерная безграмотность
КостылиCygwin • PunkBusterT9WineWishmasterАнтивирусыХакинтошСборки WindowsDenuvoЧистая установкаКалькулятор Consul WarMicrosoft StoreUBlock OriginLightshotAdBlockSearchApp.exeCPU-ZГуглPhotoshopКаптча с пчёламиВзлом Windows через MetasploitЩЩ Мессенджер
Команды^H^WAlt+F4Ctrl+Alt+Delman/me/quitrm -rf
Movax1010h.png Глубокий смысл скрыт в этих неестественных языках
Языки программированияПромышленные: BATC#CC++JavaJavaScript (AJAX) • PascalPerlPHPPythonRubyABAPАссемблерВасикFortran (Профессор)
Эзотерические: BrainFuckHQ9++ErlangForthHaskellLISP (My other car) • PrologTclΤΕΧOracleMySQLGolangВ++Scala
ПрофессииБыдлокодерПрограммистТестировщикХакерХеллоуворлдщикIT-звёздыПрограммист (существо)Тернарный операторUnreal MCPИсходный кодSingle-Page Application
Методы и стилиReverse EngineeringАнти-паттернВыстрелить себе в ногуГрязный хакКод (индусский) • КостыльМетод научного тыкаПомолясьСвистелки и перделкиОчередьСпортивное программированиеОбфускацияБета-тестАльфа-тестШаблоныRegReplaceФреймворкБыдлокодIndex.phpОхота за жукамиКуМирКлеточный автоматПроцедурное программированиеПоиск файлов в Unix по содержимомуPetoohФункция активации нейронаПерегрузка операторов в PythonЗерокодинг
Средства разработкиSublime TextПодсветка синтаксиса кодаUnstable DiffusionAPIPythonTutorCodeWarsDataCampUnity3DКнижный PythonMallocСвязный списокSOLIDООПУказательNULLWeLang++XenonRecompFuse.jsОптимизацияТестирование
ЛюдиИлья КанторЮрий КлючевскийЭдуард ЛаасЭдвард СноуденСеймур Пейперт
Прочее++i + ++iДедлайн%s640 килобайтCMSDummy modeЕГГОГFoobarGod is real, unless explicitly declared as integerGOTOIfconfigKISSRegExpSICPsql.ruXyzzyДискетаИнжалид дежицеКОИ-8ЛогМанРекурсияСУБДТест ТьюрингаУмение разбираться в чужом кодеФаза ЛуныФатальный недостатокПроблема 2000ТаймстампКэшЗапись в файл без кэша (Perl)Танцы с бубномКодачХукCurl cffi