A mai gyorsan szaporodó tájon JavaScript keretrendszerek és könyvtárak kiválasztása, amelyre ki akarja alapozni a fejlesztését, nagy kihívást jelenthet. Végül is, miután elindult egy adott keretrendszer használatán, a kód áttérése egy másikra nem triviális feladat, amelynek végrehajtására soha nem lesz ideje vagy költségvetése.

Akkor miért Ractive.js ?

Más, inert HTML-t létrehozó eszközökkel ellentétben a Ractive a sablonokat tervrajzokká alakítja az alkalmazások számára interaktív alapértelmezés szerint. És bár biztosan lehet azzal érvelni, hogy a Ractive hozzájárulása inkább evolúciós, mint forradalmi, értéke ennek ellenére jelentős.

A Ractive annyira hasznos, hogy erőteljes képességeket kínál, de ezt a fejlesztő számára üdítően egyszerű módon teszi. Sőt, elég elegáns, gyors, nem feltűnő és kicsi.

Ebben a cikkben végigvezetjük az egyszerű Ractive keresőalkalmazás felépítésének folyamatát, bemutatva a Ractive néhány legfontosabb jellemzőjét és annak módjait, amelyek segítenek a webalkalmazások és fejlesztés egyszerűsítésében.

Mi a Ractive.js?

A Ractive eredetileg az adatmegkötési probléma elegánsabb kezelésére jött létre. Ennek érdekében sablonokat vesz fel, és átalakítja azokat a DOM könnyű virtuális reprezentációjává, hogy az adatok változásakor az igazi DOM intelligensen és hatékonyan frissüljön.

De hamar kiderült, hogy a Ractive által alkalmazott megközelítést és infrastruktúrát más dolgok hatékonyabb elvégzésére is fel lehet használni. Automatikusan gondoskodhat például az eseménykezelők újrafelhasználásáról és automatikusan kikapcsolhatja őket, amikor már nincs rá szükség. Az esemény delegálása szükségtelenné válik. Az adatkötéshez hasonlóan ez a megközelítés is megakadályozza, hogy a kód nehézkessé váljon az alkalmazás növekedésével.

Az olyan kulcsfontosságú funkciók, mint a kétirányú kötés, az animációk és az SVG támogatás már kéznél vannak, és az egyedi funkciók egyszerűen hozzáadhatók a beépülő modulokon keresztül.

Míg néhány eszköz és keretrendszer arra kényszeríti Önt, hogy új szókincset tanuljon meg, és sajátosan strukturálja alkalmazását, a Ractive az Ön számára működik, nem pedig fordítva. Ez jól integrálható más könyvtárakkal is.

A minta App

Mintaalkalmazásunkat a keresésre fogjuk használni ApeeScape fejlesztői adatbázis képességek alapján. Alkalmazásunknak két nézete lesz:

• Keresés: készségek listája beágyazott keresőmezővel
• Eredmények: készség nézet a fejlesztők listájával együtt

Minden fejlesztő számára megjelenítjük a nevét, fényképét, rövid leírását és a készségek listáját (minden készség összekapcsolódik a megfelelő készség nézettel).

(Megjegyzés: A cikk végén találhatók linkek az alkalmazás online működő példányára és a forráskód-tárházra.)

Annak érdekében, hogy továbbra is a Ractive keretrendszerre összpontosítsunk, számos egyszerűsítést alkalmazunk, amelyek általában szükségesek nem a gyártásban kell elvégezni:

• Alapértelmezett téma. A Bootstrap-ot alapértelmezett témával fogjuk használni a stílushoz, ahelyett, hogy a témát az alkalmazás stílusához igazítanánk.
• Függőségek. Függőségeinket külön szkriptekként adjuk hozzá, amelyek globális változókat definiálnak (nem pedig ES6 modulokat, vagy CommonJS-t, vagy AMD-t használnak megfelelő betöltővel a fejlesztéshez, és a gyártási lépést a gyártáshoz).
• Statikus adatok. Az általam elkészített statikus adatokat az ApeeScape webhely nyilvános oldalainak átkaparásával készítem el.
• Nincs ügyféloldali útválasztás. Ez azt jelenti, hogy az URL ugyanaz marad, mint amikor a nézetek között váltunk. Feltétlenül nem szabad ezt megtenni a fürdők számára, bár néhány apró interaktív komponens esetében ez rendben lehet. A Ractive nem rendelkezik beépített útválasztó megvalósítással, de harmadik fél útválasztóival használható, amint az látható ezt a példát .
• HTML-ben szkriptcímkékben definiált sablonok. Ez nem feltétlenül rossz ötlet, különösen a kis alkalmazások esetében, és van néhány előnye (egyszerű, és ezeket az ügyféloldali sablonokat a szerveroldali sablonokkal együtt is feldolgozhatja, például nemzetközivé tétel céljából). Nagyobb alkalmazások esetében azonban előnyös lehet az előzetes fordítás (más néven, előzetes elemzés sablonok a belső JS reprezentációhoz.

Kezdjük a webalkalmazásokkal

OK, tehát ezzel mondva kezdjük el az építkezést az alkalmazást . Iteratív módon fogjuk megtenni, külön-külön kisebb funkciókat adunk hozzá, és feltárjuk a fogalmakat, ahogy találkozunk velük.

Kezdjük azzal, hogy létrehozunk egy mappát, amelyben két fájl található: index.html és script.js. Az alkalmazásunk rendkívül egyszerű lesz, és a file:// protokollt annak érdekében, hogy elkerüljék a fejlesztõszerver indítását (bár lehet, ha akarja).

A keresési oldal

Először a keresési oldal megvalósításával kezdjük, ahol a felhasználó kiválaszthatja azt a készséget, amelyhez megfelelő fejlesztőket talál az ApeeScape adatbázisban.

HTML csontváz

Kezdjük ezzel a triviális HTML-oldallal:

ApeeScape Search Betöltés ...

Tehát mi a varázslat itt? Tulajdonképpen egészen egyszerű. Néhány tartalmat (ez egy Bootstrap animált előrehaladási sáv, de lehet animált GIF vagy bármi más) egyenesen a gyökérelemhez. Szerintem elég okos - amíg a szkriptjeink betöltődnek, a felhasználó látja a betöltés indikátort (mivel nincs semmiféle függősége a JavaScript-től, azonnal megjeleníthető). Amint azonban a Ractive alkalmazást inicializálják, a Ractive felülírja a gyökérelem tartalmát (és ezzel törli az előretöltő animációt) a renderelt sablonnal. Így csak egy darab statikus HTML-t és 0 logikai sort tudunk elérni. Szerintem ez nagyon klassz.

Következtetés

Gondoljon arra, mit értünk el itt, és milyen könnyen teljesítettük. Van egy elég átfogó alkalmazásunk: megmutatja a készségek listáját, lehetővé teszi a gyors keresést azokon keresztül (és még támogatja a készségek interaktív frissítését is, mint felhasználó a keresőmezőbe írja be), lehetővé teszi a navigációt egy adott készséghez és vissza, valamint felsorolja a fejlesztők minden kiválasztott készséghez. Ezenkívül bármelyik fejlesztő által felsorolt ​​készségre kattintva eljuthatunk az ezzel a készséggel rendelkező fejlesztők listájához. És mindez kevesebb, mint 80 soros HTML-kóddal és 40-nél kevesebb JavaScript-sorral. Véleményem szerint ez meglehetősen lenyűgöző, és sokatmond a Ractive erejéről, eleganciájáról és egyszerűségéről.

Az alkalmazás működő verziója online elérhető itt és a teljes forráskód nyilvános és elérhető itt .

Természetesen ebben a cikkben csak alig kapartuk el a felületet arról, hogy mi lehetséges a Ractive keretrendszerrel. Ha tetszik, amit eddig láttál, nagyon bátorítanám, hogy kezdd el A Ractive 60 másodperces beállítása és kezdje el felfedezni mindazt, amit a Ractive kínál.