de Ondřej Polesný

Cum să decideți cea mai bună tehnologie pentru site-ul dvs. web

Cum sa decideti cea mai buna tehnologie pentru site ul dvs

Știți cum va arăta site-ul dvs. și aveți o idee bună despre structura conținutului. Dar nimeni nu vrea să mențină un set de pagini statice, nu? Să aruncăm o privire asupra modului în care site-ul dvs. să fie dinamic și ușor de reglat, astfel încât, cu fiecare modificare, să nu aveți nevoie să atingeți codul și implementarea site-ului web.

Dar de unde începem?

Trebuie să instalăm instrumente? Este o idee bună să utilizați JavaScript sau să rămâneți cu randarea de pe server folosind MVC sau un CMS all-in-one? Vă voi explica cum să aduceți viață pe site-urile dvs. web și să le pregătiți pentru viitor.

Deci, doriți să construiți un site web modern. Un site web rapid, sigur, arată bine și oferă cea mai bună experiență de utilizare. Cuvântul modern este esențial aici, deoarece se referă și la timpul nostru agitat. Toată lumea este ocupată, șefii noștri vor ca noi să ne ocupăm de 120% din munca pe care ni-o atribuim și cu greu avem o jumătate de oră pentru a ne bucura de prânz în fiecare zi. Prin urmare, crearea întregii funcționalități a site-ului web de la zero nu se potrivește scenariului nostru. Obiectivul este de a pune în funcțiune cât mai repede posibil și de a-l împărtăși cu întreaga lume, de preferință astăzi.

O soluție all-in-one de pe server

Utilizarea unei soluții all-in-one, cum ar fi un sistem de gestionare a conținutului (CMS), vă va asigura că site-ul dvs. web funcționează rapid. Cel puțin prima sa versiune. Instalarea și accesarea interfeței de administrare pentru prima dată ar putea dura doar câteva minute dacă aveți deja mediul de dezvoltare pregătit (altfel adăugați câteva ore pentru instalare).

După ce vă conectați, puteți configura site-ul web, defini politica URL și apoi începeți să creați șabloane și machete pe baza designului pe care l-ați ales. Introducerea șabloanelor și a conținutului în CMS poate necesita mult timp. Și anume trebuie să:

  • învățați conceptul de șabloane pentru fiecare CMS particular (din documentație sau e-learning)
  • aplicați conceptul pe designul dvs.
  • aflați cele mai bune practici despre stocarea conținutului în fiecare CMS
  • reglați fin site-ul web pentru a se potrivi așteptărilor dvs.

Toate acestea se pot face foarte repede dacă sunteți familiarizat cu CMS. Dar primele dvs. site-uri web nu vor fi probabil candidați pentru site-ul anului. ?

Când am folosit sisteme CMS în trecut, mai devreme sau mai târziu am ajuns mereu să creez controale personalizate (adică cod personalizat), deoarece ieșirea HTML a controalelor standard nu a fost suficientă sau s-a opus direct noilor standarde din industrie, cum ar fi Pagini mobile accelerate. Consider că este cel mai mare avertisment al sistemelor CMS, acestea vă limitează în diferite moduri, deoarece se poziționează ca un motor principal al site-ului dvs. web. Mereu m-am trezit rezolvând sarcini mici 80% din timp.

O altă problemă pe care am întâlnit-o aproape de fiecare dată a fost în timpul implementării. Prima implementare este ușoară, pur și simplu puneți totul pe un FTP la distanță și restaurați baza de date pe serverul furnizorului dvs. de găzduire. Implementările ulterioare complică lucrurile. Deși aceste sisteme oferă de obicei o modalitate de a aduce modificările de dezvoltare (sau doar locale) pe site-ul live, acesta tinde să facă parte din niveluri de prețuri mai ridicate și este nevoie de ceva timp pentru a-l învăța și configura.

Abordare fără cap

Am explicat avantajele arhitecturii microservice în un alt articol. În zilele noastre, toată lumea numește această abordare fără cap, deoarece partea cheie a arhitecturii microservice este CMS fără cap (de exemplu Norul Kentico). Acționează ca un loc în care stocați tot conținutul și vă asigură livrarea. Principalul beneficiu este că este doar un alt serviciu. Ești noul șef al site-ului tău. Spuneți cum vor funcționa serviciile între ele și pe care dintre ele le veți folosi. CMS fără cap este doar un alt serviciu din întreaga stivă. Dar cum faci asta?

Permiteți-mi să vă arăt asta pe site-ul meu personal. Când vine un vizitator, se așteaptă să vadă așa ceva:

1611233349 923 Cum sa decideti cea mai buna tehnologie pentru site ul dvs

Pagina principală a site-ului meu web este doar un simplu cod HTML cu conținut. Acum, există două moduri în care acest cod HTML poate fi creat. Fie rămânem cu abordarea standard de a construi totul pe server:

1611233350 652 Cum sa decideti cea mai buna tehnologie pentru site ul dvs

Sau ne-am tăiat serverul nostru de internet și compunem codul HTML pe client:

1611233350 112 Cum sa decideti cea mai buna tehnologie pentru site ul dvs

Vedeți, browserul vizitatorului acceptă doar date, nu întreaga structură HTML cu conținut în ea. Dar de unde știe browserul ce să afișeze? Cum să procesăm datele și să le scoatem în proiectarea noastră?

JavaScript modern

Vom spune browserului ce trebuie să facă prin JavaScript. În trecut, JavaScript a fost rău. Întotdeauna a fost o regulă generală că ori de câte ori ați creat funcționalitatea JavaScript, a trebuit să faceți versiunea alternativă noscript. Dar vremurile s-au schimbat și browserele s-au dezvoltat. În continuare, trebuie să respectați unele reguli pentru a vă face site-ul web accesibil, dar mai multe despre asta mai târziu.

Folosirea JavaScript pentru construirea unui site web nu a fost niciodată mai ușoară. Există multe cadre care vă ajută să vă atingeți obiectivul, chiar și cu cunoștințe minime despre JavaScript simplu. Și cel mai bun lucru este că pentru unii dintre ei nu este nevoie să instalați nimic. Doar browserul și editorul de text preferat sunt suficiente. Dar să începem cu elementele de bază și să selectăm cel mai bun cadru pentru noile noastre site-uri web.

În general, există 3 cadre JS majore care au multă tracțiune și o comunitate excelentă în jurul lor. Acest lucru asigură dezvoltarea și sprijinul continuu. Deasupra lor sunt construite o mulțime de site-uri web de succes, dintre care unele le puteți folosi zilnic.

1. AngularJS

Angular are cea mai mare istorie dintre aceste trei. A fost fondată acum aproape 10 ani în 2009! Este dezvoltat și întreținut de Google. În comparație cu alte cadre, are o sintaxă mai complexă bazată pe TypeScript și vă va cere să configurați un proces de compilare. Cu toate acestea, suportă modularitatea și un model MVVM care permite aplicațiilor construite deasupra Angular să fie foarte robuste.

Îmi amintesc că l-am folosit pentru prima dată în 2013 pentru un proiect semi-guvernamental în care ne-a permis să creăm front-end rapid pentru gestionarea tuturor tipurilor de entități. A fost atât de ușor să creați înregistrări bogate cu funcții de paginare, filtrare și sortare.

2. ReactJS

React a fost inițial fondat și deschis de Facebook în 2013. Este bazat pe componente, ceea ce îl face ușor de învățat. Componentele sale sunt implementate utilizând sintaxa JSX, care se află între JavaScript și HTML. De asemenea, este ușor să vă dați seama de arhitectura inițială, deoarece fiecare componentă este ca un modul care contribuie la ieșirea HTML. Dacă îți place Legos, îți va plăcea React!

Este posibil să îl includeți în site-ul web ca o bibliotecă JS sau să configurați un proces de compilare și să utilizați TypeScript. React are, de asemenea, cea mai mare comunitate și are un frate numit React Native, care vă permite să creați aplicații mobile native.

3. VueJS

Vue a fost lansat în 2014 și crește rapid – în prezent, are cea mai mare creștere a tracțiunii din comunitate. Este foarte asemănător cu React, dar ușor mai ușor pentru începători. Acesta strălucește cu documentația sa detaliată și integrarea foarte ușoară. Componentele se bazează pe HTML simplu, ceea ce îl face foarte ușor pentru începătorii JavaScript. Este, de asemenea, cea mai ușoară dintre aceste trei.

Personal, l-am folosit în scenarii mai avansate de coșuri de cumpărături în Prestashop și am fost uimit cât de repede am reușit să fac totul să funcționeze împreună fără cunoștințe anterioare de Vue.

Dacă doriți să analizați în detaliu comparația, consultați articolul minunat de TechMagic sau comparație de Jens Nauhaus pe mediu.

Selectarea cadrului potrivit

Când vine vorba de selectarea cadrului potrivit, dezvoltatorii preferă de obicei cea cu care au o experiență anterioară (dacă a fost o experiență bună). Dar dacă sunteți nou în dezvoltarea front-end, trebuie să vă uitați la obiectivele stabilite pentru site-ul dvs. web. Alegerea corectă depinde în mare măsură de proiectul pe care îl construiți. Așadar, permiteți-mi să-mi rezum așteptările:

  • Curba de învățare rapidă – trebuie să construiesc site-ul web cât mai repede posibil
  • Implementare ușoară – site-ul va fi destul de mic, așa că vreau să minimizez timpul de încărcare
  • Integrare ușoară – Nu vreau să configurez procese de compilare, dar încep să lucrez imediat pe site
  • Documentație bună – ori de câte ori sunt nou la ceva, mă trezesc căutând documentația tot timpul pentru cazuri de utilizare specifice
  • Rutare ușoară – există mai multe pagini pe site-ul meu, așa că am nevoie de un router pentru a gestiona diferite adrese URL
  • Livrare simplă a conținutului – voi folosi un sistem Content-as-a-Service, așa că am nevoie de un mod ușor de a obține conținut în JavaScript

Deci, puteți vedea că în cazul meu Vue.js se potrivește cel mai bine. Este ușor de utilizat și integrat pentru începători și are o documentație minunată, cu tutoriale ușoare. Notează-ți așteptările și vezi dacă Vue.js se potrivește și cu ele.

Ultimul punct despre livrarea conținutului este foarte important. Toate aceste cadre JavaScript vă permit să obțineți conținut prin REST API, dar implementarea apelurilor API brute va consuma mult timp și nu este deloc distractiv. Unele sisteme CMS fără cap, cum ar fi Norul Kentico furnizați un SDK pentru JavaScript care este un pachet de comunicare REST cu multe caracteristici suplimentare. Acest lucru va facilita mult colectarea conținutului.

Arhitectura finală a noului site web poate arăta astfel:

1611233350 182 Cum sa decideti cea mai buna tehnologie pentru site ul dvs

Prima solicitare pentru site-ul web este rezolvată prin returnarea unui șablon HTML principal cu fișiere JavaScript. Când browserul începe procesarea logicii JavaScript, Vue.js va fi inițializat și va aduce la viață componentele noastre. Fiecare dintre aceste componente acționează apoi independent – afișează HTML, preia date de la CMS fără cap sau postează date despre trimiterile de formulare la un serviciu web de formulare.

Această arhitectură ne permite să ne construim site-urile web foarte rapid, în timp ce ne bucurăm de ea. Este ca și cum ai construi o mașină cu Legos. Site-ul va fi ușor, rapid și general, mult mai rentabil. Dar să lăsăm economia pentru un alt articol. Care este experiența ta? Ați încercat deja microservicii?

  1. Cum să începeți să creați un site web impresionant pentru prima dată
  2. Cum să decideți cea mai bună tehnologie pentru site-ul dvs. (acest articol)?
  3. Cum să vă alimentați site-ul web cu Vue.js și un efort minim
  4. Cum se amestecă CMS fără cap cu un site Vue.js și Pay Zero
  5. Cum să faceți trimiterile de formulare sigure pe un site web API
  6. Construirea unui site web rapid și sigur cu un CMS nu este o mare problemă. Sau este?
  7. Cum se generează un site static cu Vue.js în cel mai scurt timp
  8. Cum să configurați rapid un proces de compilare pentru un site static