Form Builder variklio kūrimas: techninis gilus pasinerimas kūrėjams

Modernios formos pastato pagrindas

Formų kūrimo priemonės išsivystė nuo paprastų HTML generatorių iki sudėtingų variklių, maitinančių viską nuo klientų įtraukimo į srautus iki sudėtingų duomenų rinkimo sistemų. „Mewayz“ mūsų formų kūrimo modulis per mėnesį mūsų platformoje apdoroja daugiau nei 2,3 mln. formų pateikimo, todėl formų variklio architektūra yra svarbi mūsų verslo OS sudedamoji dalis. Norint sukurti tvirtą formų kūrėją, reikia suderinti lankstumą, našumą ir techninę priežiūrą – tai iššūkis, reikalaujantis kruopštaus techninio planavimo.

Šiuolaikinė formų kūrimo priemonė – tai ne tik vardo ir el. pašto laukų rinkimas. Šiandieniniai varikliai turi palaikyti sąlyginę logiką, kelių etapų darbo eigas, tikrinimą realiuoju laiku, failų įkėlimą, mokėjimų integravimą ir sklandų API ryšį. Nesvarbu, ar statote vidiniam naudojimui, ar kaip atskirą produktą, pvz., „Mewayz“ formos modulį, anksti priimti architektūriniai sprendimai lems mastelio keitimą ir vartotojų pasitenkinimą ateinančiais metais.

Pagrindinės architektūros modeliai formų kūrėjams

Pasirinkus tinkamą architektūrinį modelį, formų kūrėjo galimybės ir apribojimai yra pagrindas. Šiuolaikinių formų variklių kūrime dominuoja trys pagrindiniai modeliai, kurių kiekvienas turi skirtingą pranašumą skirtingais naudojimo atvejais.

Schema pagrįsta architektūra

Schema pagrįstas metodas atskiria formos konfigūraciją nuo pateikimo logikos. Jūsų formos apibrėžimas tampa JSON schema, apibūdinančia laukus, patvirtinimo taisykles, išdėstymą ir sąlyginę logiką. Šis modelis įgalina tokias galingas funkcijas, kaip formų versijų kūrimas, dinaminis formų generavimas ir kelių platformų suderinamumas. „Mewayz“ mūsų formų schemos vidutiniškai sudaro 15–20 KB vienai sudėtingai formai, todėl pasiekiama pusiausvyra tarp išraiškingumo ir našumo.

Komponentais pagrįsta architektūra

Komponentais pagrįstos architektūros kiekvienas formos elementas traktuojamas kaip daugkartinis, savarankiškas komponentas. Šis metodas puikiai dera su šiuolaikinėmis sąsajomis, tokiomis kaip „React“, „Vue“ ar „Angular“. Komponentai apima savo patvirtinimą, stilių ir elgesį, todėl laikui bėgant lengviau prižiūrėti ir išplėsti formų kūrimo priemonę. Mūsų diegimas naudoja registro šabloną, kuriame galima registruoti naujus laukų tipus nekeičiant pagrindinio variklio kodo.

Hibridinis metodas

Dauguma gamybos formų kūrėjų, įskaitant „Mewayz“ diegimą, naudoja hibridinį metodą, kuris derina schema pagrįstą konfigūraciją su komponentais pagrįstu atvaizdavimu. Schema apibrėžia, ką pateikti, o komponentai tvarko, kaip tai pateikti. Šis atskyrimas leidžia netechniniams naudotojams kurti formas naudojant vaizdinę sąsają, o kūrėjams suteikiama visapusiška atvaizdavimo ir elgesio kontrolė.

Lauko tipo sistemos projektavimas

Formų kūrimo priemonės lankstumas priklauso nuo lauko tipo sistemos. Kuriant išplečiamo lauko tipo architektūrą reikia atidžiai apsvarstyti skirtingų įvesties tipų bendrumus ir skirtumus.

Visiems laukų tipams būdingos bendros savybės: etiketė, pavadinimas, būtina būsena, patvirtinimo taisyklės ir pagalbos tekstas. Be šių pagrindų, specializuotos sritys kelia unikalius reikalavimus. Datos rinkėjams reikia kalendoriaus konfigūracijos, failų įkėlimui reikia dydžio ir tipo apribojimų, o mokėjimo laukams reikia saugios prieigos raktų. Mūsų lauko tipo sistema naudoja bazinę klasę su išplėtimo taškais, skirta specializuotam elgesiui, todėl galime išlaikyti nuoseklumą ir palaikyti įvairius reikalavimus.

Kurdami lauko sistemą atsižvelkite į našumo pasekmes. Sudėtingi laukai, pvz., raiškiojo teksto rengyklės ar sąlyginės loginės sudėtinės dalys, gali labai paveikti paketo dydį ir pateikimo našumą. „Mewayz“ diegiame tingų įkėlimą sunkiasvorių laukų tipams, užtikrindami, kad paprastos formos išliktų greitos, o sudėtingos formos turėtų prieigą prie išplėstinių funkcijų, kai to reikia.

Tvirtinimo variklio diegimas

Formos patvirtinimo metu daugelis formų kūrėjų parodo savo brandą arba jos nebuvimą. Tvirtas patvirtinimo variklis turi tvarkyti sinchroninį ir asinchroninį patvirtinimą, priklausomybes nuo kelių laukų ir pritaikomus klaidų pranešimus.

Mūsų patvirtinimas įgyvendinamas pagal konvejerio šabloną, kai taisyklės vykdomos nuosekliai ir, kai įmanoma, nutraukiama anksčiau. Pavyzdžiui, privalomas lauko patvirtinimas vykdomas prieš formato patvirtinimą, nes nėra prasmės tikrinti tuščio lauko formato. Dujotiekis apdoroja maždaug 12 000 patvirtinimo patikrų per sekundę vidutinėje aparatinėje aparatinėje įrangoje, todėl naudotojo patirtis bus jautri net ir sudėtingoms formoms.

"Labiausiai nepastebimas formos patvirtinimo aspektas yra ne techninis įgyvendinimas, o vartotojo patirtis. Patvirtinimo klaidos turėtų nukreipti vartotojus į taisymą, o ne tik užkirsti kelią pateikti."

Asinchroninis patvirtinimas kelia unikalių iššūkių, ypač tokioms sritims kaip el. pašto pasiekiamumo tikrinimas arba naudotojo vardo unikalumas. Tinkamo atmetimo, įkėlimo būsenų ir grakštaus gedimų valdymo diegimas atskiria profesionalius formų kūrėjus nuo mėgėjiškų diegimų. Mūsų asinchroninio patvirtinimo sistema tvarko API greičio ribojimo, tinklo gedimų ir skirtojo laiko scenarijus, naudodama išsamias atsargines strategijas.

Valstybės valdymo strategijos

Formos būsenos valdymo sudėtingumas didėja eksponentiškai didėjant formos sudėtingumui. Paprastos formos gali valdyti kelias dešimtis verčių, o įmonės formos gali stebėti šimtus laukų keliais etapais su sąlyginėmis priklausomybėmis.

Centralizuota ir paskirstyta būsena

Centralizuotas būsenos valdymas (pvz., „Redux“ ar „Vuex“) yra vienintelis tiesos šaltinis, bet gali tapti sudėtingas labai dinamiškoms formoms. Paskirstytoji būsena, kai kiekvienas laukas tvarko savo būseną, siūlo geresnį našumą didelėms formoms, bet apsunkina kelių laukų patvirtinimą ir koordinavimą. „Mewayz“ taiko hibridinį metodą: lauko lygmens būsenos valdymą su centralizuotu koordinatoriumi, skirtu operacijų tarp laukų operacijoms.

Pakeitimų aptikimas ir našumas

Formų kūrėjai turi efektyviai tvarkyti dažnus būsenos atnaujinimus, nepablogindami našumo. Mūsų diegimas naudoja nekintamas duomenų struktūras ir atrankinį pakartotinį pateikimą, kad sumažintų DOM naujinimus. Naudojant formas, kuriose yra daugiau nei 50 laukų, šis metodas sumažina nereikalingų pakartotinių pateikimų skaičių maždaug 70 %, palyginti su naiviais diegimais.

Sąlyginė logika ir dinaminės formos

Sąlyginė logika paverčia statines formas į dinamišką patirtį, kuri prisitaiko prie naudotojo įvesties. Sąlyginės logikos įgyvendinimui reikalingas taisyklių variklis, galintis įvertinti sąlygas ir suaktyvinti atitinkamus formos pakeitimus.

Mūsų sąlyginė logikos sistema palaiko tris pagrindinius operacijų tipus: rodyti / slėpti laukus, įjungti / išjungti laukus ir nustatyti lauko reikšmes. Sąlygos gali nurodyti kitas lauko reikšmes, vartotojo ypatybes arba išorinius duomenų šaltinius. Variklis kasdien įvertina maždaug 5 000 sąlygų taisyklių visoje mūsų naudotojų bazėje, o įvertinimo laikas yra vidutiniškai mažesnis nei 50 ms net sudėtingų taisyklių rinkinių atveju.

• Taisyklės įvertinimo tvarka: sąlygos įvertinamos pagal priklausomybę, siekiant užtikrinti, kad prireikus būtų pasiekiamos lauko reikšmės.
• Apskrito nuorodų prevencija: variklis aptinka begalinius sąlyginės logikos kilpas ir užkerta jiems kelią
• Našumo optimizavimas: sąlygos iš naujo įvertinamos tik pasikeitus priklausomoms reikšmėms.
• Derinimo įrankiai: vizualinis taisyklių derinimas padeda naudotojams suprasti, kodėl tam tikri laukai veikia netikėtai

Žingsnis po žingsnio: formų kūrimo priemonės MVP kūrimas

Sukurti formų kūrimo priemonę nuo nulio gali jaustis be galo sunku. Šiame praktiniame vadove procesas suskaidomas į valdomus etapus, daugiausia dėmesio skiriant vertės teikimui kiekviename etape.

1 etapas: pagrindinė infrastruktūra (1–2 savaitės)

1. Apibrėžkite formos schemos struktūrą naudodami pagrindines lauko savybes
2. Įdiekite formos pateikimo priemonę, kuri gali interpretuoti jūsų schemą
3. Sukurkite 5–10 pagrindinių laukų tipų (tekstas, el. pašto adresas, numeris, pasirinkimas, teksto sritis)
4. Sukurkite pagrindinį privalomų laukų ir paprastų šablonų patvirtinimą

2 etapas: patobulintas funkcionalumas (3–4 savaitės)

1. Pridėkite sąlyginę logiką laukams rodyti / slėpti pagal naudotojo įvestį
2. Įdiekite kelių etapų formos palaikymą su pažangos stebėjimu
3. Sukurkite formų kūrėjo sąsają vizualiai formoms kurti
4. Pridėkite pateikimo apdorojimą su pagrindinėmis sėkmės / klaidos būsenomis

3 etapas: paruošta gamybai (5–6 savaitės)

1. Įdiekite išsamų patvirtinimą naudodami tinkintus klaidų pranešimus
2. Pridėkite failų įkėlimo galimybes su dydžio ir tipo apribojimais
3. Sukurkite formos analizę, kad galėtumėte stebėti atsisakymo ir užbaigimo rodiklius
4. Sukurkite API galutinius taškus formoms pateikti ir duomenims gauti

4 etapas: mastelio keitimas ir optimizavimas (vykdomas)

1. Įdiekite lėtą įkėlimą, kad pagerintumėte našumą
2. Pridėkite pritaikymo neįgaliesiems funkcijų, kad užtikrintumėte atitiktį
3. Kurkite kūrėjo API tinkintų tipų laukams ir plėtiniams
4. Sukurkite administratoriaus sąsajas formų tvarkymui ir analizei

Našumo optimizavimo metodai

Formų kūrimo priemonės našumas tampa labai svarbus, nes formų sudėtingumas didėja. Vartotojai tikisi greitų atsakymų, nepaisant formos dydžio ar sudėtingumo.

Rinklio dydžio optimizavimas ypač svarbus formų kūrėjams, nes jie dažnai įterpiami į didesnes programas. Mūsų metodas apima kodo padalijimą pagal lauko tipą, medžio purtymą, kad pašalintumėte nepanaudotą kodą, ir agresyvų formų schemų kaupimą talpykloje. Dėl šių metodų mūsų formų kūrimo priemonės rinkinio dydis sumažėjo 42 %, išlaikant visas funkcijas.

• Laikas įkėlimas: lauko komponentus įkelkite tik tada, kai reikia
• Virtualus slinkimas: formose, kuriose yra daugiau nei 50 laukų, pateikti tik matomus laukus
• Atšauktas patvirtinimas: prieš patvirtindami palaukite, kol naudotojas nustos vesti tekstą.
• Schemos kaupimas talpykloje: talpykloje saugokite išanalizuotas formų schemas, kad išvengtumėte pakartotinio analizavimo
• Optimizuoti pakartotiniai atvaizdavimai: naudokite shouldComponentUpdate arba atmintinę, kad išvengtumėte nereikalingų atvaizdų

Saugos svarstymai formų kūrėjams

Formų kūrėjai tvarko slaptus naudotojų duomenis, todėl saugumas yra neginčijamas reikalavimas. Saugos diegimas apima kelis sluoksnius nuo įvesties patvirtinimo iki duomenų saugojimo.

Įvesties valymas apsaugo nuo XSS atakų pateikiant naudotojo sukurtą turinį formų etiketėse arba žinyno tekste. Mūsų valymo procesas pašalina potencialiai pavojingą HTML ir išsaugo saugias formatavimo parinktis. Įkeliant failus patikriname serverio failų tipus ir prieš saugodami nuskaitome įkėlimus, ar nėra kenkėjiškų programų.

Duomenų šifravimas apsaugo formų pateikimus tiek siunčiant, tiek ramybės būsenoje. Visi „Mewayz“ formų pateikimai yra užšifruoti naudojant AES-256 šifravimą su atskirais šifravimo raktais kiekvienam klientui kelių nuomininkų aplinkoje. Šis metodas užtikrina, kad net jei mūsų duomenų bazė būtų pažeista, klientų duomenys išliks apsaugoti.

Integravimo ir išplėtimo modeliai

Formų kūrimo priemonės vertė didėja dėl jo gebėjimo integruotis su kitomis sistemomis ir išplėsti pagrindines funkcijas. Išplečiamumo projektavimas nuo pat pradžių atsiperka, kai formų kūrimo priemonė bręsta.

„Webhook“ palaikymas leidžia formoms pateikus suaktyvinti veiksmus kitose sistemose. Mūsų „Webhook“ sistemoje yra pakartotinio bandymo logika, naudingosios apkrovos tinkinimas ir išsamus derinimo integravimo problemų registravimas. Maždaug 68 % mūsų įmonės klientų naudoja žiniatinklio kabliukus, kad susietų formas su esamomis sistemomis.

Naudodami papildinių architektūrą, trečiųjų šalių kūrėjai gali išplėsti formų kūrimo priemonę tinkintais laukų tipais, patvirtinimo taisyklėmis ir pateikimo tvarkyklėmis. „Mewayz“ papildinių sistema naudoja tiksliai apibrėžtą API, kuri leido mūsų bendruomenei sukurti daugiau nei 50 pasirinktinių laukų tipų, neskaitant mūsų pagrindinio pasiūlymo.

Formos kūrimo technologijos ateitis

Formų kūrimo technologija toliau tobulėja, o kelios kylančios tendencijos formuoja naujos kartos formų variklius. AI padedamas formų kūrimas įgauna populiarumą, nes sistemos gali pasiūlyti laukų tipus pagal klausimo turinį arba automatiškai generuoti formas iš natūralios kalbos aprašymų.

Balso įgalintos formos yra dar viena riba, ypač pritaikymo neįgaliesiems ir laisvų rankų įrangos scenarijų. Nors dar anksti, balso įvestis gali pakeisti vartotojų sąveiką su formomis, ypač mobiliuosiuose įrenginiuose. „Mewayz“ eksperimentuoja su balso į formą technologija, kuri tam tikrais naudojimo atvejais gali sutrumpinti formos užpildymo laiką iki 30 %.

Kadangi formų kūrimo priemonės tampa vis sudėtingesnės, jos tampa bendros paskirties duomenų rinkimo varikliais, kurie valdo vis sudėtingesnius verslo procesus. Linijos tarp formų, darbo eigos ir taikomųjų programų ir toliau neryškios, todėl atsiranda naujoviškų požiūrių į seną problemą: efektyviai ir tiksliai rinkti informaciją iš vartotojų.

Dažniausiai užduodami klausimai

Koks sudėtingiausias formų kūrimo priemonės aspektas?

Sudėtingiausias aspektas yra suderinti lankstumą ir našumą – sukurti sistemą, kuri palaiko sudėtingą sąlyginę logiką ir tinkintus laukus, kartu išlaikant greitą įkėlimo laiką ir reaguojančią naudotojo sąveiką.

Kaip saugiai saugoti formos duomenis?

Įdiekite šifravimą ramybės būsenoje ir gabenimo metu, patvirtinkite ir išvalykite visas įvestis, naudokite parametrizuotas užklausas, kad išvengtumėte SQL įterpimo, ir apsvarstykite duomenų saugojimo politiką, kad sumažintumėte riziką.

Kokia sąsajos sistema geriausiai tinka formų kūrimo priemonei kurti?

React, Vue ir Angular veikia gerai; geriausias pasirinkimas priklauso nuo jūsų komandos patirties. „React“ komponentų modelis ypač tinka kūrėjams dėl pakartotinio naudojimo ir būsenos valdymo galimybių.

Kaip padaryti savo formų kūrimo priemonę prieinamą?

Užtikrinkite tinkamą žymėjimą, klaviatūros naršymą, ekrano skaitytuvo palaikymą, spalvų kontrasto atitiktį ir pateikite aiškius klaidų pranešimus, kurie padėtų naudotojams efektyviai ištaisyti klaidas.

Kokią formų kūrimo priemonės našumo metriką turėčiau stebėti?

Pagrindinę metriką sudaro formos įkėlimo laikas, laikas iki pirmosios įvesties, pateikimo sėkmės rodiklis, atsisakymo rodiklis ir lauko lygio sąveikos delsa, siekiant nustatyti našumo kliūtis.