WeWeb a Xano vs. Bubble: na čom postaviť no-code aplikáciu

Prečo porovnávame tieto dva prístupy?

Väčšinu prvých aplikácií pre klientov sme postavili v Bubble.io. Keď boli projekty zložitejšie, potrebovali sme väčšiu kontrolu nad frontendom aj backendom. Na backend sme už používali Xano a na rozhranie sme si vybrali WeWeb.

Z tejto skúsenosti vzniklo aj porovnanie. Najdôležitejší rozdiel je stále v tom, ako tím rozdelí prácu medzi rozhranie, backendovú logiku a dáta.

Rozdelenie medzi WeWebom a Xano

Rozhranie vo WeWebe Obrazovky, komponenty a interakcie na frontende
Backend v Xano API endpointy, biznis logika a autentifikácia
Databáza v Xano Záznamy, vzťahy a indexy

Bubble spája frontend a backend v jednej platforme. Pri oddelených nástrojoch obe časti prepája API.

All-in-one vs. oddelený frontend a backend

Oddelený frontend a backend je lepší pre aplikácie, ktoré potrebujú zložitejšie funkcie a škálovateľnosť. All-in-one riešenie sa hodí na jednoduchšie nástroje a pre tvorcov aplikácií bez technického zázemia.

Bubble.io spája frontend aj backend v jednej platforme. Pri WeWebe a Xano staviate rozhranie a backendovú logiku v samostatných nástrojoch.

Aké sú hlavné výhody oddelených nástrojov?

Kontrola: Nad funkciami aplikácie máte väčšiu kontrolu.
Samostatný prechod na iný nástroj: Frontend alebo backend môžete vymeniť oddelene. Každá časť však stále obsahuje logiku viazanú na konkrétnu platformu, ktorú treba preniesť.
Kontrola nad výkonom: Samostatný backend má vlastné možnosti úprav dopytov, cache a kapacity. Výsledok stále závisí od návrhu aplikácie a merania.

Aké sú výhody all-in-one nástroja?

Jednoduchosť: Aplikácie sa stavajú jednoduchšie a rýchlejšie, lebo frontend a backend sú už „prepojené“.
Cena: Platíte len za jednu vývojovú platformu.
Správa verzií: Jednotlivé prostredia aplikácie sa pre backend aj frontend synchronizujú automaticky.

Ako sme porovnávali Bubble a WeWeb + Xano?

Pozreli sme sa na všetko, čo riešime na väčšine projektov: stavbu UI, časť biznis logiky na frontende, správu databázy, výkon a cenu. A tiež na veci, ktoré sú dôležité len v niektorých prípadoch (napríklad súlad s HIPAA alebo GDPR).

UI editor: stavba frontendu

Práca vo WeWebe má oveľa bližšie k tradičnému vývoju, pričom používate vizuálny editor. S editorom Bubble sa pracuje ľahšie, hlavne ak nemáte technické zázemie.

Komponenty

WeWeb: Opakovane použiteľné prvky staviate ako komponenty, ktoré použijete v celej aplikácii alebo zdieľate medzi projektmi. Komponentom nastavíte vlastnosti (properties), lokálne premenné, workflowy, vzorce a triggery. Tak si vytvoríte spoločnú knižnicu komponentov.
Bubble: Používa „re-usable components“. Cez properties odovzdáte dáta do opakovane použiteľných komponentov. Overte, ako sa spoločné komponenty prepájajú so zvyškom vašej obrazovky.

Štýly/triedy/design systém

WeWeb: Používa obdobu CSS tried. Môžete si definovať farebné schémy, typografiu či rozostupy a na jeden prvok použiť viac tried naraz.
Bubble: Používa „styles“ (vizuálne varianty). Nevýhodou je, že štýly sa nedajú kombinovať. Na jeden prvok môžete použiť len jeden štýl.

Responzivita

WeWeb: Pracuje s breakpointmi (podobne ako Webflow). Štýly pre počítač, tablet a mobil opisuje návod na responzívny dizajn.
Bubble: Používa podmienenú logiku (napr. ak je veľkosť obrazovky < X, zmeň písmo). Pri konkrétnych hodnotách je to flexibilné, ale každú treba nastaviť zvlášť. Niektoré vlastnosti sa navyše podmienkou meniť nedajú, takže pre mobil musíte prvky duplikovať.

Dva spôsoby, ako rozdeliť vývoj

	Bubble	WeWeb + Xano
Rozhranie a dáta	Jedna platforma	Oddelený frontend a backend
Štýly UI	Štýly priradené prvkom	Triedy kombinované na prvkoch
Koordinácia tímu	Spoločné nastavenie platformy	Samostatne definované API prepojenie

Ide o rozdiely v organizácii práce. Vhodná voľba závisí od aplikácie a tímu.

Workflowy a biznis logika na frontende

Frontendové workflowy vo WeWebe sú vizuálne prehľadnejšie, Bubble má zase viac preddefinovaných akcií.

WeWeb: Zložité workflowy staviate ako diagramy, ktoré sú vizuálne prehľadnejšie a ľahšie sa im rozumie.
Bubble: Hneď v základe ponúka viac hotových akcií, ale zo zložitej biznis logiky sa v ňom ľahko stane „chaos“, ktorý sa ťažko spravuje.

Správa databázy

V Xano máte viac kontroly, v Bubble sa však databáza spravuje ľahšie.

Xano: Plná správa PostgreSQL. Má databázové triggery, vlastné indexy a rozhranie podobné Excelu. Napodobňuje logiku tradičného SQL.
Bubble: Vyžaduje menej nastavovania databázy, čo môže pomôcť používateľom bez technických skúseností. Podporuje databázové triggery, ale nemáte kontrolu nad indexmi, ktorými by ste optimalizovali dopyty.

Vlastný kód

Vlastný kód pôsobí vo WeWebe a Xano oveľa prirodzenejšie ako v Bubble.

WeWeb: Jednoducho v ňom napíšete opakovane použiteľné funkcie v čistom JavaScripte alebo naimportujete Vue.js komponenty z GitHubu.
Xano: Na zložité transformácie dát môžete použiť JavaScriptové „lambda funkcie“.
Bubble: Na spúšťanie čistého JS potrebujete externé pluginy a kód sa v aplikácii často nedá ľahko použiť znova. Môžete však vytvárať vlastné pluginy pre marketplace.

Požiadavka medzi oddelenými nástrojmi

Akcia používateľa Obrazovka vo WeWebe
API požiadavka
Kontroly na backende Logika a oprávnenia v Xano
Výsledok v UI

Schéma. Pri oddelených nástrojoch má API jasnú úlohu. Chyby a oprávnenia stále treba testovať.

Export kódu

Export môže znamenať nasaditeľný frontend, zdrojový opis backendu viazaný na jeho runtime alebo zálohu dát. Každá možnosť pomáha pri inom type prechodu.

WeWeb: Podporuje export kódu a vlastný hosting. Overte aktuálny plán aj služby, ktoré exportovaná aplikácia používa.
Xano: Cez CLI môžete workspace prenášať ako súbory XanoScript. Opisujú backend v Xano, no samy osebe nenahrádzajú runtime platformy.
Bubble: Podľa dokumentácie o vlastníctve aplikácie si odchod z platformy vyžaduje prestavbu logiky aplikácie. Export dát je samostatná možnosť.

Výkon backendu

Z Xano vytiahnete viac výkonu, ak ho viete optimalizovať. Bubble je jednoduchší, ale pri optimalizácii na veľkú záťaž menej flexibilný.

Xano: Ponúka nástroje ako databázové indexy a cachovanie odpovedí. Dopyty vďaka nim zostanú rýchle aj pri veľkom množstve dát alebo keď aplikáciu naraz používa veľa ľudí.
Bubble: Dopyty rieši sám, „out of the box“. Nemusí byť pomalý, ale chýbajú mu pokročilé nástroje na optimalizáciu a cachovanie pre stránky s extrémne nízkou latenciou.

Bezpečnosť

Bubble má výborné vstavané pravidlá ochrany súkromia, Xano má viac certifikácií na úrovni enterprise.

Xano: V Trust Center uvádza SOC 2 Type II a certifikácie ISO, oddelene od vyhlásení o GDPR a HIPAA. Týkajú sa platformy; prístupové pravidlá vlastnej aplikácie musí nastaviť váš tím.
Bubble: Jeho bezpečnostná dokumentácia opisuje súlad so SOC 2 Type II a zdieľanú zodpovednosť za bezpečnosť. Cez Privacy Rules nastavíte prístup k záznamom a poliam. Aplikácia stále potrebuje správne pravidlá a zákonné spracúvanie údajov.

Komunita a marketplace

Bubble má najväčšiu komunitu aj marketplace. WeWeb a Xano rastú, ale sú menšie.

WeWeb: Jeho marketplace ponúka šablóny a knižnice. Overte, či konkrétny doplnok pokrýva funkciu, ktorú potrebujete.
Xano: Má marketplace so snippetmi, vyhľadávanie v ňom je však zatiaľ obmedzené.
Bubble: Veľká komunita a tisíce pluginov. Riešenia aj ďalších vývojárov preto nájdete oveľa ľahšie.

V oboch zostavách porovnajte rovnaký produkt

Postavte typickú obrazovku a workflow
Overte databázové dotazy, ktoré aplikácia potrebuje
Skontrolujte oprávnenia každej roly
Do porovnania zahrňte hosting, pluginy a údržbu

Praktická kontrola oblastí z článku pred porovnaním predplatného.

Cena

Porovnajte cenu rovnakej aplikácie

Typický postup Obrazovka a jej práca s dátami
Očakávané používanie Ľudia, požiadavky a uložené dáta
Prevádzkové náklady Plány, pluginy a údržba
Rozhodnutie tímu Cena aj schopnosť systém spravovať

Predplatné tvorí len časť ceny. Pri oboch možnostiach počítajte s rovnakou záťažou a požiadavkami na údržbu.

Aktuálne plány porovnajte podľa očakávaného používania, hostingu a potrebných funkcií.

WeWeb: Započítajte prístupy do editora, hosting alebo vlastnú prevádzku a platené doplnky.
Xano: Započítajte kapacitu backendu a funkcie potrebné pre vaše endpointy.
Bubble: Započítajte spotrebu workloadu, pluginy a potrebný hostingový plán.

Pri konečnom výpočte použite aktuálne cenníky WeWebu, Xano a Bubble.

Voľba pre váš tím

Oba prístupy majú svoje miesto. Bubble vyhovuje tvorcom, ktorí chcú frontend aj backend v jednom nástroji. WeWeb + Xano sa viac hodí na zložité projekty, pri ktorých potrebujete detailnú kontrolu nad výkonom a funkciami.

WeWeb s Xano sme pôvodne spojili preto, aby sme mohli ovládať rozhranie a backend oddelene. Pri vašom projekte by mala voľba vychádzať z požiadaviek a skúseností tímu, ktorý ho bude udržiavať.