Hogyan dönthetünk a webhely legjobb technológiájáról

Tudja, hogyan fog kinézni a webhelye, és jó ötlete van a tartalmi struktúráról. De senki sem akar statikus oldalakat fenntartani, igaz? Vessünk egy pillantást arra, hogyan lehet webhelyét dinamikusan és könnyen beállíthatóvá tenni, hogy minden változtatáskor ne kelljen hozzáérnie a kódhoz és a webhely megvalósításához.

De hol kezdjük?

Telepítenünk kell valamilyen eszközt? Jó ötlet JavaScript-et használni, vagy ragaszkodni a kiszolgálóoldali megjelenítéshez MVC vagy all-in-one CMS használatával? Elmagyarázom, hogyan hozhat életet webhelyeire, és hogyan készítheti fel őket a jövőre.

Tehát egy modern weboldalt szeretne létrehozni. Gyors, biztonságos, jól néz ki és a legjobb felhasználói élményt nyújtó webhely. A modern szó itt kulcsfontosságú, mivel mozgalmas időnkre is vonatkozik. Mindenki elfoglalt, a főnökeink azt akarják, hogy a megbízott munkánk 120% -át kezeljük, és alig van fél óránk minden nap ebédelni. Ezért a teljes weboldal funkcionalitásának a semmiből történő létrehozása nem felel meg a forgatókönyvünknek. A cél a lehető leggyorsabb üzembe helyezése és megosztása az egész világgal, lehetőleg ma.

Minden az egyben szerveroldali megoldás

Az egy az egyben megoldás, például a tartalomkezelő rendszer (CMS) használatával biztosíthatja webhelyének gyors működését. Legalábbis az első változata. Telepítése és az adminisztrációs felület első elérése néhány percet vehet igénybe, ha már készen áll a fejlesztői környezetre (különben adjon hozzá néhány órát a telepítéshez).

Miután bejelentkezett, konfigurálhatja a webhelyet, meghatározhatja az URL-házirendet, majd elkezdheti sablonok és elrendezések létrehozását a kiválasztott terv alapján. A sablonok és a tartalom CMS-be kerülése időigényes lehet. Nevezetesen:

  • megtanulják az egyes CMS-ek sablonjainak koncepcióját (dokumentációból vagy e-learningből)
  • alkalmazza a koncepciót a tervezésén
  • megismerheti a tartalom egyes CMS-ekben történő tárolásával kapcsolatos bevált gyakorlatokat
  • finomítsa a weboldalt az elvárásainak megfelelően

Mindez nagyon gyorsan elvégezhető, ha ismeri a CMS-t. De az első néhány webhelye valószínűleg nem lesz az Év Helyszíne jelöltje. ?

Amikor korábban CMS-rendszereket használtam, előbb-utóbb mindig egyedi vezérlőket (azaz egyéni kódokat) készítettem, mivel a szabványos vezérlők HTML-kimenete nem volt elegendő, vagy közvetlenül ellentmondott az új ipari szabványoknak, például az Accelerated Mobile Pages-nek. Ezt tartom a CMS-rendszerek legnagyobb figyelmeztetésének, ezek különféle módon korlátozzák Önt, mivel a weboldalad fő motorjaként helyezkednek el. Mindig azon kaptam magam, hogy az esetek 80% -ában kis feladatokat oldottam meg.

Egy másik probléma, amellyel szinte minden alkalommal találkoztam, a telepítés során volt. Az első telepítés egyszerű, csak mindent be kell helyeznie egy távoli FTP-re, és vissza kell állítania az adatbázist a tárhelyszolgáltató szerverén. A későbbi telepítések bonyolítják a dolgokat. Bár ezek a rendszerek általában arra szolgálnak, hogy a fejlesztési (vagy csak helyi) változtatásokat az élő webhelyre vigyék, ez általában a magasabb árképzési szintek része, és egy kis időbe telik a megtanulása és konfigurálása.

Fej nélküli megközelítés

Egy másik cikkben ismertettem a mikroszolgáltatás architektúrájának előnyeit. Manapság ezt a megközelítést mindenki fejetlennek nevezi, mert a mikroszolgáltatási architektúra kulcsfontosságú része a fej nélküli CMS (például a Kentico Cloud). Helyként működik, ahol az összes tartalmat tárolja, és biztosítja a szállítást. A fő előny, hogy ez csak egy másik szolgáltatás. Ön a webhelyének új vezetője. Megmondja, hogyan működnek a szolgáltatások egymással, és melyiket fogja kihasználni. A fej nélküli CMS csak egy másik szolgáltatás az egész veremben. De hogy csinálod ezt?

Hadd mutassam meg ezt a személyes weboldalamon. Amikor egy látogató eljön, valami ilyesmit várnak:

Webhelyem honlapja csak egy egyszerű HTML kód tartalommal. Kétféle módon hozható létre ez a HTML-kód. Vagy ragaszkodunk ahhoz, hogy mindezt a szerverre építjük:

Vagy kissé elcsúsztatjuk a webszerverünket, és elkészítjük a kliens HTML kódját:

Látja, hogy a látogató böngészője csak adatokat fogad el, a teljes HTML-szerkezetet és a benne lévő tartalmat nem. De honnan tudja a böngésző, hogy mit jelenítsen meg? Hogyan dolgozzuk fel az adatokat és adjuk ki azokat a tervezésünk során?

Modern JavaScript

A JavaScript segítségével megmondjuk a böngészőnek, hogy mit kell tennie. A múltban a JavaScriptet elkomorították. Mindig ökölszabály volt, hogy amikor létrehozott JavaScript-funkciókat, akkor meg kellett tennie az alternatív noscript verziót. De az idők megváltoztak és a böngészők fejlődtek. Még mindig be kell tartania bizonyos szabályokat, hogy hozzáférhetővé tegye webhelyét, de erről később.

Soha nem volt ilyen egyszerű a JavaScript használatát egy weboldal elkészítéséhez. Számos olyan keretrendszer létezik, amelyek segítenek a cél elérésében a sima JavaScript minimális ismerete mellett is. És a legjobb az, hogy némelyikhez nem kell semmit telepíteni. Csak a böngészője és a kedvenc szövegszerkesztője elegendő. De kezdjük az alapokkal, és válasszuk ki a legjobb keretrendszert új webhelyeinkhez.

Összességében 3 fő JS keretrendszer létezik, amelyek nagy vonóerővel és nagy közösséggel rendelkeznek körülöttük. Ez biztosítja a folyamatos fejlesztést és támogatást. Sok sikeres webhely épül rájuk, amelyek közül néhányat napi rendszerességgel használhat.

1. SzögletesJS

Az Angular rendelkezik a legnagyobb történelemmel e három közül. Csaknem 10 évvel ezelőtt, 2009-ben alapították! A Google fejlesztette és karbantartja. Más keretrendszerekhez képest összetettebb szintaxisa van a TypeScript alapján, és megköveteli, hogy állítson össze egy összeállítási folyamatot. Támogatja azonban a modularitást és az MVVM modellt, amely lehetővé teszi, hogy az Angular tetejére épített alkalmazások nagyon robusztusak legyenek.

Emlékszem, 2013-ban használtam először 2013-ban egy félig kormányzati projektben, amely lehetővé tette számunkra, hogy gyors kezelőfelületet hozzunk létre mindenféle entitás kezeléséhez. Olyan könnyű volt gazdag listákat létrehozni lapozással, szűréssel és rendezéssel.

2. ReactJS

A React-et eredetileg a Facebook alapította és 2013-ban nyitotta meg. Komponens alapú, amely megkönnyíti a tanulást. Komponenseit a JSX szintaxisával valósítják meg, amely a JavaScript és a HTML között helyezkedik el. Könnyű kitalálni a kezdeti architektúrát is, mivel minden komponens olyan, mint egy modul, amely hozzájárul a kimeneti HTML-hez. Ha kedveled a Legos-t, kedvelni fogod a React-et!

Lehetséges, hogy JS könyvtárként felveszi a weboldalra, vagy létrehozhat egy építési folyamatot, és használhatja a TypeScript-t. A React a legnagyobb közösséggel is rendelkezik, és van egy testvére, a React Native nevű testvér, amely lehetővé teszi natív mobilalkalmazások építését.

3. VueJS

A Vue 2014-ben jelent meg, és gyorsan növekszik - jelenleg a legnagyobb tapadást növeli a közösségben. Nagyon hasonlít a React-re, de valamivel könnyebb a kezdők számára. Részletes dokumentációjával és nagyon egyszerű integrációjával ragyog. Az összetevők egyszerű HTML-en alapulnak, ami nagyon megkönnyíti a JavaScript kezdők számára. Ez a három közül a legkönnyebb is.

Én személy szerint a Prestashop fejlettebb bevásárlókosár-forgatókönyvein használtam, és csodálkoztam, hogy milyen gyorsan tudtam mindezt együtt működni a Vue korábbi ismerete nélkül.

Ha alaposabban meg szeretné tekinteni az összehasonlítást, olvassa el a TechMagic nagy cikkét vagy Jens Nauhaus összehasonlítását a Medium-on.

A megfelelő keret kiválasztása

A megfelelő keretrendszer kiválasztásakor a fejlesztők általában azt választják, amellyel korábban rendelkeznek (ha jó tapasztalat volt). De ha még nem ismeri a kezelőfelület fejlesztését, meg kell vizsgálnia a webhelye számára kitűzött célokat. A helyes választás nagymértékben függ az épülő projekttől. Tehát hadd foglaljam össze elvárásaimat:

  • Gyors tanulási görbe - a lehető leggyorsabban fel kell építenem a weboldalt
  • Könnyű megvalósítás - az oldal meglehetősen kicsi lesz, ezért szeretném minimalizálni a betöltési időt
  • Könnyű integráció - Nem szeretnék felépítési folyamatokat beállítani, de azonnal elkezdeni a munkát a weboldalon
  • Jó dokumentáció - valahányszor új vagyok valamiben, azon kapom magam, hogy folyamatosan böngészem a dokumentációt konkrét felhasználási esetekre
  • Könnyű útválasztás - a weboldalamon több oldal található, ezért routerre van szükségem a különféle URL-ek kezeléséhez
  • Egyszerű tartalomszolgáltatás - Tartalom-szolgáltatásként rendszert fogok használni, ezért szükségem van egy egyszerű módra a tartalom JavaScript-be jutására

Tehát láthatja, hogy az én esetemben a Vue.js illik a legjobban. Könnyen használható és integrálható kezdőknek, és félelmetes dokumentációval rendelkezik, egyszerű oktatóanyagokkal. Írja le az elvárásait, és nézze meg, hogy a Vue.js is megfelel-e nekik.

A tartalom kézbesítésével kapcsolatos utolsó pont nagyon fontos. Mindezek a JavaScript-keretek lehetővé teszik a tartalom megszerzését a REST API-n keresztül, de a nyers API-hívások végrehajtása nagyon időigényes és egyáltalán nem szórakoztató. Néhány fejetlen CMS-rendszer, például a Kentico Cloud, SDK-t biztosít a JavaScript számára, amely a REST kommunikáció köré szerveződik és számos további funkcióval rendelkezik. Ez sokkal könnyebbé teszi a tartalomgyűjtést.

Az új weboldal végső architektúrája így nézhet ki:

A webhelyre vonatkozó első kérelmet egy HTML-fő sablon és JavaScript-fájlok visszaadásával oldják meg. Amikor a böngésző elkezdi feldolgozni a JavaScript logikát, a Vue.js inicializálódik, és életre kelti összetevőinket. Ezután ezek a komponensek egymástól függetlenül működnek - megjeleníti a HTML-t, beolvassa az adatokat a fej nélküli CMS-ből, vagy az űrlap-benyújtások adatait közzéteszi egy űrlap webszolgáltatásban.

Ez az architektúra lehetővé teszi számunkra, hogy webhelyeinket nagyon gyorsan elkészítsük, miközben valóban élvezzük azokat. Olyan, mint egy autót építeni Legos-szal. A weboldal könnyű, gyors és összességében sokkal költséghatékonyabb lesz. De hagyjuk a közgazdaságtant egy másik cikkre. Mi a tapasztalata? Kipróbálta már a mikroszolgáltatásokat?

A cikk további cikkei:

  1. Hogyan kezdjünk el először létrehozni egy lenyűgöző weboldalt?
  2. Hogyan dönthetünk a webhelyének legjobb technológiájáról (ez a cikk)?
  3. Hogyan lehet feltölteni webhelyét a Vue.js segítségével és minimális erőfeszítéssel
  4. Hogyan keverjük össze a Headless CMS-t egy Vue.js weboldallal és a Pay Zero-val
  5. Az űrlapok beküldésének biztonságossá tétele az API webhelyén
  6. A szupergyors és biztonságos weboldal felépítése CMS-sel nem nagy ügy. Vagy ez?
  7. Hogyan lehet pillanatok alatt létrehozni egy statikus weboldalt a Vue.js segítségével
  8. Hogyan lehet gyorsan beállítani egy statikus webhely összeépítési folyamatát