Companiile de web design influente, cum ar fi Nest și MailChimp, utilizează generatoare de site-uri statice pentru site-urile lor principale. Vox Media din jurul lui Middleman a construit un întreg sistem de publicații. Agenția Morcov din New York, care face parte și din Imperiul Vice, creează site-uri web pentru cele mai mari branduri din lume, cu ajutorul propriului generator de root-uri open source. Printre site-urile web statice, au existat chiar și unele servicii Google, cum ar fi Anul în Search and Web Fundamentals.
Graficul graficului de creștere StaticGen pentru ultimul an.
Site-urile web statice sunt departe de noi și ne conduc către originile internetului. Deci, de ce un astfel de interes brusc? Ce sa întâmplat, de ce acum?
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Când totul era static
Inițial, site-urile erau, în general, fără stiluri, însă în curând s-au transformat în pagini structurate cu capace grafice și un sistem complex de navigație. În acest moment, gestionarea fiecărei pagini a site-ului, ca document separat, a devenit imposibilă, iar limbile șabloanelor au devenit la modă.
De asemenea, a venit înțelegerea că este imposibil să adăugați pur și simplu noi coduri HTML și stiluri CSS (pentru crearea postărilor, produselor, galeriilor) fără obligativitatea corespunzătoare a designului.
În același timp, bazele de date relaționale au devenit la modă. Pentru multe companii online, acestea au devenit un loc sfânt pentru a-și păstra toate datele, iar administratorii cu barbă îndelungată au protejat aceste date.
Deși Dreamweaver avea și o integrare parțială cu baza de date, nu avea un model de conținut. Conținutul a fost oferit separat de design. Conținutul și designul au fost editate separat una de alta cu ajutorul unor instrumente speciale.
Probleme dinamice
Când am creat primul meu site dinamic cu mai mult de 15 ani în urmă, am folosit lecții LAMP din documentația MySQL. Și apoi mi-am dat seama că tot ce scriu se întâmplă de fiecare dată când un utilizator vizitează site-ul meu și nu se potrivește în capul meu!
server de web descărcat codul meu în PHP interpret pe zbor, și apoi deschide o conexiune la baza de date, trimite interogări înainte și înapoi, folosind diverse template-uri, puse împreună textul cu codul HTML. Toate acestea au fost făcute atunci când utilizatorul a vizitat pagina. Minunat!
Un pic mai puțin surprinzător a fost faptul că atunci când am vizitat acest site în câțiva ani, pagina web a fost complet înlocuită cu alta. Pe noua pagină a fost un mesaj de la hacker, în care a subliniat problemele de securitate ale serverului. Cu toate acestea, el nu a folosit site-ul meu pentru a răspândi programe malware.
Plătim cu exactitate pentru un cod dinamic de supercomplex pe partea serverului pentru fiecare solicitare - acești bani ar putea fi salvați acolo unde nu este nevoie de un cod complex.
Site-uri dinamice și cache
Într-o anumită măsură, totul este stocat în cache. Niciun site pe WordPress nu va porni fără plug-in-ul WP Super Cache. Site-urile mari stochează conținutul de cache folosind Varnish, Nginx și Apache Traffic Server. Caching-ul este destul de dificil pentru a obține drepturile corecte, iar cele mai optimizate site-uri dinamice, de regulă, sunt de multe ori mai lente decât soluțiile statice.
Site-ul nostru, Smashing Magazine, lucreaza, de asemenea, datorita unei echipe care lucreaza constant la performanta. Pentru articol, am efectuat un mic experiment. Folosind HTTrack, am luat o copie a acestui site și am implementat o versiune statică pe serviciul Netlify, găzduind site-uri statice care lucrează pe tehnologia CDN. Nu am făcut nimic pentru a îmbunătăți performanța unei versiuni statice a site-ului, cu excepția implementării site-ului pe o gazdă cu integrare profundă a CDN.
Smashing Magazine este mai rapid decât multe site-uri, dar toate cererile sunt prelucrate de la un cent de prelucrare a datelor.
Apoi am verificat cât timp este nevoie pentru a încărca primul octet index.html și întreaga pagină. Asta mi-a arătat serviciul de performanță super-utilizator al Sucuri.
Cu toate acestea, un site web dinamic este optimizat, copia sa statică este de 6 ori mai rapidă în medie! Desigur, o astfel de diferență de performanță nu poate fi realizată pe fiecare gazdă. Utilizarea cache-ului CDN de acest nivel ar fi pur și simplu imposibilă fără a instala manual un site dinamic.
O versiune exactă HTML implementată pe gazdele de înaltă performanță ale site-urilor statice.
Generatoare moderne de site-uri statice
În ultimii ani, această alternativă la site-urile dinamice tradiționale a avansat destul de departe. Ideea generatorilor de site-uri web statice nu este nouă. Chiar și cel mai mare concurent pentru WordPress Movable Type a avut opțiunea de a lucra ca un generator de site-uri statice.
Trimiteți solicitări "generatorul unui site web static" în Google Trends.
De atunci, majoritatea factorilor înfricoșătoare în crearea de site-uri statice au dispărut. Și astăzi, generatoarele de site-uri statice sunt motoare moderne și competitive pentru publicații cu un puternic apel către dezvoltatorii din front-end. În fiecare săptămână există tot mai mulți generatori noi, iar dezvoltarea ulterioară poate fi destul de dificilă. Cu toate acestea, generatoarele cele mai populare funcționează în conformitate cu următoarele principii.
Crearea șabloanelor. Una dintre principalele sarcini ale generatorilor este să scape de repetarea acelorași părți ale paginii prin tăierea paginii web în părți și reutilizarea acestora. Există o mulțime de motoare șablon diferite, toate cu propriile caracteristici - unele le lipsește deloc, unele amestecă codul cu șablonul. Dar toți au o singură sarcină - să scape de repetarea antetului, subsolului și meniului.
Toți generatorii majori sprijină Markdown. Dar unii încă recomandă reStructuredText sau altceva. Practic, toate aceste instrumente permit creatorilor de conținut să scrie un text structurat comun.
Prin această abordare, conținutul este complet separat de design, iar toate fișierele conțin doar text. În calitate de dezvoltatori, suntem deja obișnuiți cu un set imens de instrumente pentru scrierea textului. Acesta este un pas mare, acum nu este necesar să resetați tot conținutul din baza de date în formă binară.
Jekyll a avansat în continuare ideea de generatoare de site-uri statice: acum pot fi scrise prin Markdown.
Atunci când proprietarul GitHub Tom Preston Werner a apelat la Jekyll, așa că a lansat blogul său, el a găsit o modalitate destul de neobișnuită de prezentare a datelor meta, care lucrează direct în Markdown: materia din față. Fața frontului face parte din datele meta, mai ales în formatul YAML, chiar în partea de sus a documentului:
Această metodă facilitează adăugarea adnotărilor la documente cu meta date. Fișierele sunt prezentate într-un format simplu, ușor de citit de om și, de obicei, astfel de date sunt stocate într-un format incomprehensibil în baza de date.
Conducta de investiții. Astăzi, dezvoltarea front-end nu se poate face fără a conecta instrumente și compilatoare ale unor terțe părți. Avem nevoie ca toate resursele site-ului nostru să fie minime și legate. Preprocesoarele CSS s-au mutat de la categoria de noutăți la mainstream. Și astfel de transpilers precum CoffeeScript și ECMAScript 6 au făcut compilatorii o parte integrantă a programării web.
Majoritatea generatoarelor moderne au o conductă integrată pentru a compila, minimiza și crea resurse. Unele dintre ele se bazează pe Grunt, Gulp sau Broccoli, permițându-vă să vizualizați întregul sistem de planificare a sarcinilor din interior. Alte instrumente sunt axate pe optimizarea unui anumit proces și pe verificarea funcționării fără probleme a mai multor instrumente fără setări suplimentare. Actualizarea instantanee a paginii de fiecare dată când fișierul a fost salvat a devenit o regulă nescrisă pentru mai mulți generatori.
Colectăm totul împreună. Generatorii de site-uri web statice folosesc de obicei linia de comandă pentru a crea propriul site web sau pentru a ridica un server local.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
În linia de comandă Jekyll, de exemplu, pentru a crea un sit Web static, trebuie să executați comanda de construcție jekyll direct din directorul sursă. Site-ul va fi amplasat într-un subfolder al _site-ului. Un dosar sursă tipic:
Acest dosar stochează un site web static, care poate fi descărcat în orice gazdă a site-urilor statice sau a unui server web normal.
De ce acum?
Dacă sună puțin surprinzător, atunci acest lucru se întâmplă deoarece este așa. Dar de ce acum tehnologia de creare a site-urilor statice a câștigat o astfel de popularitate? De ce primele generatoare nu au redus cota de WordPress pe piață? Ce sa schimbat? Cât timp va continua aceasta?
Astăzi, generatorii se află într-un Internet complet diferit de strămoșii lor. Cele mai multe dintre deficiențele care au făcut site-urile dinamice cea mai bună opțiune pentru crearea site-urilor de cărți de vizită de bază, sunt un lucru din trecut. Deși unele dintre ele încă persistă.
În momentul lansării primului site de către Tim Berners-Lee, browserele erau recenzori simpli. Au recunoscut hipertext, link-uri și câteva lucruri.
Astăzi, în sfârșit, îngropăm cu onoruri ultimul browser care a constrâns dezvoltarea internetului (Rest in peace, Internet Explorer 8). Browserele moderne sunt sisteme de operare full-fledged. Acum nu este vorba doar de observatori de documente descărcate de pe Internet, ei sunt capabili de a rula aplicații web cu drepturi depline, ceea ce face compatibil CORS-vneshniezaprosy API, capabil de a stoca date pe un disc local atunci când se lucrează cu serviciile strimmingovymi, si chiar tratarea conexiuni p2p la alte browsere prin intermediul WebRTC.
Lista poate fi continuată pe o perioadă nedeterminată, este un întreg ecosistem de add-on-uri pentru browser. În plus, aplicațiile web moderne bazate pe Ember.js, AngularJS sau React sunt deseori complet statice și sunt gestionate direct prin CDN, utilizând un API curat, care este un site UI și un client mobil.
Prețurile la Akamai sunt încă foarte ridicate, dar astăzi oricine își poate permite serviciul CloudFront pe Amazon AWS. Există, de asemenea, companii care oferă prețuri democratice pentru CDN chiar și după standardele companiilor mici, Fast, MaxCDN și CloudFlare.
CDN poate fi de asemenea utilizat pe site-uri web dinamice, dar există o problemă destul de frecventă cu actualizarea memoriei cache. Calculele pentru fiecare interogare devin foarte complexe dacă echilibrați între caching și sistemul dinamic din partea din spate.
Și site-urile statice, dimpotrivă, pot fi implementate prin intermediul CDN și apoi deja întreținute pe partea clientului. Cu ajutorul unor servicii precum Netlify, puteți automatiza procesele de configurare și actualizare a cache-ului, deoarece aceste activități necesită timp și sunt destul de complicate.
Performanța este cea mai importantă sarcină
Popularitatea explozivă a dispozitivelor mobile a modificat în mare măsură Internetul. Un număr din ce în ce mai mare de persoane utilizează dispozitive mobile pentru a vizita site-uri web, uneori chiar și printr-o conexiune 3G. Performanța nu a fost niciodată la fel de importantă ca acum.
Nu contează cât de bine ați optimizat site-ul dvs. dinamic, câte mii de dolari ați investit în productivitate, niciodată nu se compară în performanță cu un site static bine configurat. Deoarece importanța performanței crește doar, nu este surprinzător faptul că dezvoltatorii caută modalități de preîncărcare a codului HTML în avans, în loc să permită serverului să-și piardă timpul și resursele pentru generarea de pagini pentru fiecare solicitare HTTP.
Majoritatea problemelor legate de performanță în site-urile statice sunt rezolvate în faza de proiectare.
Dacă site-ul dvs. utilizează o bază de date, este foarte important ca eficiența solicitărilor de bază de date să fie foarte ridicată. Fiecare cerere HTTP trebuie procesată foarte rapid. Chiar dacă caching-ul se află în partea de sus a colțului, există întotdeauna riscul ca unele cereri să depășească memoria cache, provocând astfel evenimente neprevăzute pe partea din spate.
Uneltele auxiliare sunt peste tot
Dacă dezvoltatorii C sau Java mai devreme au avut grijă de compilatoare și alte instrumente, acum nu există o astfel de nevoie. Este mai bine sau mai rău, dar totul sa schimbat dramatic.
Astăzi, dezvoltatorul de front-end este înarmat cu diverse instrumente pentru crearea de site-uri web, manageri și compilatori. Grunt a devenit primul instrument popular pentru front-end. Acum majoritatea noilor proiecte pot fi împărțite în etapele de creație.
Cu o dezvoltare rapidă a diferitelor instrumente de dezvoltare, generatoarele de site-uri web statice au început să se simtă în locul lor, iar instrumentele tradiționale de PHP pentru crearea de site-uri dinamice sunt treptat stoarse în curtea din spate a dezvoltării front-end.
Ce lipsește
Toate aceste unelte măresc numai popularitatea generatorilor de site-uri web statice. Și nu este surprinzător faptul că tot mai multe site-uri web sunt complet statice. Dar totul nu este atât de neted. Înainte ca site-urile statice să devină nucleul principal al Internetului, este necesar să rezolvăm unele probleme.
Pentru prima dată poate fi foarte dificil să selectați generatorul dorit de site static. Există multe plusuri și minusuri, precum și oportunități de îmbunătățire a instrumentelor, documentației și resurselor.
Ecosistemul generatoarelor se dezvoltă în continuare, însă dimensiunile sale încă nu ajung la mari magazine de teme și platforme dinamice tradiționale.
Cea mai mare problemă este editarea conținutului. Dacă pentru un dezvoltator din front-end care lucrează în MarkDown și descărcarea în GitHub este aproape ideal, atunci pentru un utilizator normal acest lucru este complet greșit.
Există soluții destul de interesante fără utilizarea CMS. Verge folosește Google Sheets în Middleman; StaticGen utilizează API-ul Gist și GitHub ca bază de date; și Morcovul ca un CMS static utilizează Contentful pentru persoanele care nu sunt prietenoase cu tehnologia.
Alte metode caută soluții pentru sarcina principală - cum să combinați în mod adecvat generarea de site-uri statice și editare de conținut. Și în următorii ani, fără îndoială, vor exista modalități uimitoare de a rezolva această problemă.
Prose.io a fost înainte, dar acum că a apărut integrarea cu API-ul GitHub, interfața a devenit mult mai atractivă.
Pe Netlify, lucrăm la un CMS open-source. În ea, încercăm să nu ne atașăm la nici un generator de site-uri statice, gazdă Git sau platformă de găzduire. Sarcina este ca sistemul nostru să funcționeze cu aproape toate generatoarele cunoscute în acest moment. Credem că acest lucru va crește complexitatea site-urilor pe care le puteți crea utilizând generatoare statice.
Firește, vor exista întotdeauna site-uri care pur și simplu nu se încadrează în ideologia statică - acele site-uri al căror conținut de bază este actualizat constant prin linia de știri, precum și site-uri cu cantități uriașe de informații proiectate pentru motoarele de căutare și filtrare.
Posibilitățile și popularitatea generatoarelor de site-uri statice vor crește, infrastructura și ecosistemul vor continua să evolueze. Și odată cu dezvoltarea instrumentelor, vom vedea cât de multe site-uri complexe pot fi create pe o bază complet statică.
Pe Netlify observăm deja site-uri mari cu căutare în timp real, suport multi-lingvistic, camere private și toate acestea sunt create folosind generatoare de site-uri statice și API-uri de conținut. Oamenii sunt din ce în ce mai îngrijorați de performanța și securitatea datelor, ceea ce înseamnă că vor exista din ce în ce mai multe dintre aceste site-uri.
Ediție: Comanda webformself.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Articole similare
Trimiteți-le prietenilor: