Frontend a Feng Shui szerint
On alapján arculati kézikönyv komponens alapú megközelítés a fejlesztés a frontend
belépés
Ma frontend rohamosan fejlődik. Mi van a különböző eszközök kódot írni gyorsan írni a helyes kódot, de ne felejtsük el, hogy kell írni a kódot, és szebb. Van egy rejtett szépség, amely magában foglalja az írás olvasható és egységes kódot. És itt jön a támogatás a Linter, szabványok és komponens alapú megközelítés. De lehet, hogy egy elülső vége és a szépség, ami látható, hogy mindenki. Ez segít nekünk ebben a Style-kalauz.
Miért van szükség, hogy mindent a feng shui?
Elég hosszú ideig fontos a frontend felületes volt, sőt, nem volt egyértelmű különbséget frontend fejlesztők. Azokban a napokban nem engedheti meg magának, hogy ne gondoljon a szép és strukturált előtt. Azonban, miután már az Arsenal hatalmas mennyiségű technológia és a kiváló támogatást leírások böngészők, csak ki kell írni a helyes kódot frontend.
Ezen túlmenően, az alkalmazás-orientált stílus útmutató komponens megközelítés számos kereskedelmi előnyöket.
- Ez lehetővé teszi, hogy külön a frontend és backend és vezet a fejlődés párhuzamos
- Ez lehetővé teszi, hogy az ügyfél az élő modellek backend megvalósítása
- Írja modul (komponens), könnyű fenntartani és kiterjeszteni a frontend
Mi Style-útmutató a frontend?
Nézzük meg, mi is pontosan a Style-útmutató az első. Kezdjük a klasszikus meghatározás.
Frontend-Style kézikönyv moduláris gyűjtemény felhasználói felület összes eleme a termék mellett kódrészletek a fejlesztők számára, másolás és beillesztés, ha szükséges, a végrehajtás ezeket az elemeket. Ez magában foglalja a közös felhasználói felület elemei, például a gombok, beviteli formák, navigációs menük, fedvény ikonok, és így tovább.
Frontend Style-kalauz - ez az eredménye összeegyeztetni a munkát UX-tervezők és fejlesztők, amely magában foglalja a vizuális elemek által kidolgozott tervezők és fejlesztők végre egy felhasználóbarát platform használata a projekt.
Key Elements of Style-kalauz
Ez az alap, majd minden egyes felhasználói felület elem, meg kell adnia a következő információkat:
- Leírása a megfelelő használati kontextus: ha szeretné használni ezt az összetevőt, és nem más ahhoz hasonló?
- kódpéldák
- Specifikációja végrehajtása, beleértve a tájékoztatás helymeghatározás
- Érvek és ellenérvek az ezen elem alkalmazását (nem kötelező).
Van is egy listát az alapvető UI komponensek be kell vonni a Style-kalauz. Ez a lista nem dogma, de lehet egy jó kiindulási pont a kezdéshez:
- gomb
- gombot csoportok
- zsemlemorzsa
- kártyák
- asztalok
- párbeszédek
- Mesh tartalom listák, réz és fotók
- függőleges lista
- menü
- Elements válassza ki a dátumot és az időt
- Haladás bárok és terhelési mutatók
- négyzeteket
- rádiógombok
- Pop-up menük
- csúszkák
- relék
- Numerikus távolságok választási területén
- Egyéb űrlapmezőket (beleértve lehetőségek közül a karakterek maximális számát, és megjeleníti a kötelező mezők)
- Taba
- eszköztárak
- tooltips
- modális ablakok
- ikonok
- Animáció ...
Frontend-Style útmutató ≠ márka könyv
Meg kell jegyezni, hogy a front end-Style Guide - ez nem ugyanaz, mint a márka-könyv. Annak ellenére, hogy a márka-bükk tud felelni a leírás tipográfia, színek és más elemek, lehet használni, mint része a felhasználói felület, a fő különbség a frontend arculati kézikönyv, hogy egy sor élő, dinamikus felület elemeit. Szóval ... Azért jöttünk, hogy a kulcsszó „élő”.
Élő Style-kalauz
Mi egy élő-Style útmutató
Tehát, mit nem értenek egyet? Az első helyen nem akarnak olvasni a Style-útmutató frontend valamivel több, mint egy sor alapvető felhasználói felület elemeit, míg a koncepció élő arculati kézikönyv megy. Itt van nem csak egy sor alapvető alkatrészek, hanem lehet más összetevői webhelysablon, akár az oldalakat. Vagyis, mi nem beszélünk az egyes komponensek a könyvtár és a könyvtári sablonok (minták) a projekt. Alapjai meghatározottak szerint ezt a cikket.
Döntő pillanat
A legfontosabb jellemzője az élő arculati kézikönyv, hogy használ egy közös projekt egy sor stílusok, stílusok frissítés következik dinamikusan mindkét irányban. Érdemes megjegyezni, hogy annak ellenére, hogy ez előnyt jelent, akkor is ellenőrzik a szinkronizálási folyamatot. Nem feltétlenül kell teljes szinkronizálást stílusokat.
Jelenléte könyvtár kész sablonok, és nem csak egy sor UI elemek elem kialakítása lehetővé teszi akár szinten arculati kézikönyv. Tudod gyűjteni egy sablont az adott oldalakat, amelyek élnek a arculati kézikönyv.
A rendelkezésre álló kész sablonokat lehetővé teszi, hogy mintaoldalakat stilizált ügyfél. Ez azt jelenti, akkor a frontend fejlettsége mutatják mintaoldalakat az ügyfél anélkül, hogy azonnali végrehajtását a backend szinten.
Mintegy eszközöket, amelyek segítségével ebben, megbeszéljük a következő részben.