Share
Lucram ca designer de grafica acum cativa ani si o problema comuna pe care as putea sa o fac este sa aleg scheme de culori pentru proiecte noi. Unul dintre colegii mei a spus, "Doar alege o fotografie frumoasă și apuca de culori de acolo". Această tehnică funcționează bine, deoarece fotografiile vă oferă o combinație naturală de culori. Deci, mă gândeam: "De ce să nu transfer același concept în munca mea ca un coder?". Și aici intră Organic pentru a juca. Când am fost prezentat pentru prima oară la Organic, am fost uimită cât de simplă a fost și, în același timp, cât de flexibilă este abordarea ei. În cele din urmă, am avut ceva care încurajează programarea modulară, este la fel de util ca modelul MVC și este un instrument excelent pentru arhitectură.
După cum probabil ați ghicit, conceptul Organic este bazat pe biologie. Aplicația dvs. principală acționează ca a celulă, care are a Membrană și a Nucleu. Dar lucrarea reală a unei celule este făcută de organite, care comunică între ele cu chimicale. Bineînțeles, elementele și procesele din Organic nu sunt 100% identice cu celulele din viața reală, dar sunt destul de apropiate. Acum, știu că sună nebun, dar odată ce începi să lucrezi cu el vei vedea cât de simplu și natural această abordare poate fi atunci când o aplici aplicațiilor tale.
Organic este distribuit ca un modul Nod. Deci ar trebui să ai deja instalat NodeJS. Dacă nu, accesați nodejs.org și luați cea mai recentă versiune pentru sistemul dvs. de operare. Ta package.json fișierul ar trebui să arate astfel:
"name": "OrganicDevelopment", "versiunea": "0.0.0", "descriere": "Dezvoltare ecologică", "dependențe": "organic": "0.0.11" Nume aici "
Alerga npm install în același director și managerul va descărca fișierele necesare. Miezul organic este de fapt destul de mic. Conține numai definiția principalelor elemente - celulă, nucleu, membrană, plasmă, organelle, chimie și ADN. Desigur, vine cu câteva teste, dar este un pachet mic în general. Acest lucru ajută la ușurarea învățării și începerea dezvoltării cu aproape imediat.
Pentru acest articol am decis să creez un simplu site web care să folosească doar nucleul organic. Codul sursă poate fi descărcat în partea de sus a acestui articol, dacă doriți să îl urmați. Cred că această aplicație eșantion este cea mai bună modalitate de a prezenta acest nou model. Site-ul conține două pagini - Acasă și Despre. Iată o captură de ecran a site-ului:
Aplicația conține două butoane care leagă cele două pagini diferite. Despre pagina are doar un text mai mic decât textul Acasă pagina face. Destul de simplu, dar să vedem ce se află în spatele draperiilor. Iată o diagramă care arată fluxul de solicitare de bază al aplicației noastre:
Utilizatorul trimite o cerere la aplicația noastră NodeJs. Serverul acceptă solicitarea și îl trimite la Router. După aceea, Render știe ce pagină să fie utilizată și returnează un răspuns la server. La final, răspunsul este apoi trimis utilizatorului.
Există un element suplimentar, furnizorii de date, care pregătesc CSS sau JavaScript necesar pentru Render (rețineți că în aplicația noastră de exemplu nu am folosit JavaScript, există doar un modul CSS).
Iată ce ar arăta aplicația noastră ca o celulă, în Organic:
În celulă, avem o membrană care ține elementele interne departe de lumea exterioară. În interiorul acestei membrane se află locul în care vom introduce primul nostru organel, serverul nostru, deoarece aici se pot introduce datele sau se poate părăsi aplicația noastră. Celelalte organele (Router, Render și CSS) sunt plasate în plasmă. Toate aceste module comunică între ele prin intermediul produselor chimice (cerere, pagină și css, marcate în roșu). Serverul emite a cerere chimic. Router-ul emite a pagină iar organele CSS trimit css. Ar trebui să menționez, de asemenea, că plasma acționează ca autobuz de evenimente pentru substanțele chimice. Organelles ascultă pentru o anumită substanță chimică și, dacă este găsită, reacționează asupra ei.
Iată o altă schemă de flux de solicitare, dar de data aceasta cu substanțele chimice emise (marcate în roșu):
Acum, dacă acest concept este încă neclar pentru dvs., nu vă faceți griji, pe măsură ce trecem prin următoarele secțiuni și intrăm în codul real, ar trebui să începeți să faceți mai mult sens!
Totul incepe cu ADN-ul (acid deoxiribonucleic), pe care il puteti gandi ca o configuratie a celulelor. Acest ADN este locul în care vă veți defini organele și setările lor.
Să creăm un nou index.js fișier și puneți în următorul cod:
Accentsconagua
var ADN = necesită ("organic") ADN; var Cell = necesită ("organic") Cell; var dna = ADN nou (membrana: Server: source: "membrane.Server", plasma: Router: sursa: plasma.Router, CSS: : "./css/styles.css", Render: sursa: "plasma.Render", template: "./tpl/"); var celula = celule noi (dna); Codul de mai sus este doar o definiție a inițializării ADN-ului și a celulozei. Puteți vedea că am plasat Serverul nostru în membrană și Router, CSS și Render în plasmă, așa cum am discutat în ultima secțiune. sursă proprietatea este de fapt obligatorie și conține calea către organele dvs. individuale.
Rețineți că fişier proprietate în organele CSS și template-uri proprietățile din organul Render sunt proprietăți personalizate, pe care le-am stabilit. Puteți adăuga orice personalizare aveți nevoie și aici.
Și doar pentru referința dvs., structura directorului pentru aplicația dvs. ar trebui să arate astfel:
/ css /styles.css / membrana /Server.js / node_modules / plasma /CSS.js /Render.js /Router.js / tpl
var chimic = necesită ("organic") chimic; var Organel = necesită ("organic") Organel; var util = necesită ("util"); module.exports = funcția YourOrganelName (plasmă, config) Organel.call (aceasta, plasmă); // logica personalizată aici util.inherits (module.exports, Organel); Codul de mai sus prezintă formatul de bază pentru crearea unui organel. Dacă doriți să utilizați this.emit sau this.on va trebui să vă asigurați că ați moștenit-o pe Organel așa cum am făcut-o mai sus. Și, de fapt, plasmă parametru are aceleași metode identice (emite și pe), astfel încât să puteți folosi plasmă direct și săriți moștenirea dacă doriți.
De asemenea, observați config parametru; Acesta este obiectul pe care l-ați definit în ADN-ul dvs., care este un loc bun pentru oricare dintre configurațiile dvs. personalizate.
Serverul este organul principal, care acceptă cereri și trimite răspunsuri la browser. Iată cum ar trebui să arate organelul dvs. de server:
var port = 3000; module.exports = funcția Server (plasma, config) Organel.call (aceasta, plasmă); var self = aceasta; (tip: "request", req: req), function (html) res (req, res) console.log .writeHead (200); res.end (html););)) asculta (port, '127.0.0.1'); console.log ('Serverul rulează la http://127.0.0.1:' + port + '/'); Două lucruri se întâmplă aici. Prima este definiția serverului NodeJS, care, desigur, are o cerere de acceptare a unui handler (req) și răspuns (res) obiecte. Odată ce cererea este primită, organelul serverului trimite un produs chimic, cu tipul cerere, notificând restul organelelor. De asemenea, se atașează req obiect, astfel încât oricine are nevoie de mai multe informații despre cererea de intrare poate accesa direct datele din substanța chimică.
emite metoda ia apoi un al doilea argument care este o funcție de apel invers. Puteți folosi acest lucru pentru a readuce fluxul înapoi la organel, care trimite substanța chimică. I.E. odată ce Render își termină treaba, el cheamă apelul serverului. Este nevoie de HTML-ul produs și de utilizarea res Obiectul trimite pagina către utilizator.
Pentru următorul nostru organel, Routerul doar ascultă pentru a cerere chimice, care este trimis de Server. Obține adresa URL din req obiect și decide care pagină ar trebui afișată. Iată codul pentru Router:
module.exports = funcția Router (plasmă, config) Organel.call (aceasta, plasmă); var self = aceasta; acest lucru ("cerere", functie (chimica, expeditor, apel invers) var page = chemical.req.url.substr (1, chemical.req.url.length); page = page == " = "home": pagina; auto.emit (noua substanță chimică (tip: "pagină", pagină: pagină, gata: apel)); Acum, ruterul însuși emite doar un nou produs chimic cu un tip de pagină. Rețineți că există și alte două organe care ascultă și pentru acest produs chimic, dar, în mod implicit, nu este transferat la toate celelalte elemente din plasmă. Desigur, pot exista momente când veți avea nevoie de astfel de funcționalități. Pentru a face acest lucru, trebuie doar să return false; în ascultătorul chimicalei. Vom vedea acest lucru în acțiune în secțiunea următoare.
module.exports = funcția CSS (plasma, config) Organel.call (aceasta, plasmă); var cssStyles = fs.readFileSync (config.file). până la String (); var self = aceasta; this.on ("pagina", funcția (chimică) self.emit (nou Chemical (type: "css", value: cssStyles)); Acest modul este doar un simplu organ de lucru cu o singură sarcină care face calea către .css fișier, citește și ulterior emite un produs chimic care conține stilurile CSS reale. De asemenea, acordați atenție return false; declarație în partea de jos. După cum am spus din ultima secțiune, este important să faceți acest lucru, altfel Render nu va primi pagină chimice trimise de către Router. Acest lucru se întâmplă deoarece organul CSS este definit înainte de Render în ADN.
În sfârșit, iată codul pentru organul Render:
modul.exports = funcția Render (plasmă, config) Organel.call (aceasta, plasmă); var getTemplate = funcție (fișier, apel invers) return fs.readFileSync (config.templates + file); var formatTemplate = funcție (html, templateVars) pentru (var nume în templateVars) html = html.replace ("" + nume + "", templateVars [nume]); retur html; var șabloane = layout: getTemplate ("layout.html") toString (), home: getTemplate ("home.html" notFound: getTemplate ("notFound.html"). toString () var vars = ; var self = aceasta; this.on ("css", funcție (chimică) vars.css = chemical.value;); this.on ("pagina", funcția (chimică) console.log ("Deschidere" + pagina chimică.page + ""); var html = șabloane [chemical.page]? templates [chemical.page]: templates. html = formatTemplate (templates.layout, content: html); html = formatTemplate (html, vars); chemical.ready (html);); Există două metode de ajutor aici: getTemplate și formatTemplate care implementează un motor template simplu pentru încărcarea unui fișier HTML extern și înlocuirea variabilelor în stil de mușchi. Toate șabloanele sunt stocate într-un obiect pentru acces rapid. Apoi avem doar câteva linii pentru formatarea HTML și apoi totul este gata de plecare. Organelul Render ascultă de asemenea css chimic și în cele din urmă cererea oferă o nu a fost gasit Pagina 404, dacă este necesar.
Deci, arata cum arată structura directorului aplicației finale:
/ css /styles.css / membrana /Server.js / node_modules / plasma /CSS.js /Render.js /Router.js / tpl /about.html /home.html /layout.html /notFound.html
Pur și simplu alerga nod index.js în consola și ar trebui să vedeți ceva similar cu acesta:
Cu serverul care rulează, ar trebui să puteți vizita acum http://127.0.0.1:3000 în browser-ul dvs. preferat. Încercați să faceți clic pe link-uri pentru a comuta între cele două pagini de câteva ori și apoi reveniți la consola dvs. pentru a vizualiza ieșirea.
Ar trebui să vedeți un raport frumos despre activitatea recentă a aplicațiilor. Acum puteți observa și altceva în consola:
request /favicon.ico Deschiderea paginii favicon.ico.
Puteți vedea că mai există o cerere din browser. Vrea să se încarce favicon.ico. Cu toate acestea, site-ul nostru mic nu are o astfel de pictogramă, așa că doar deschide pagina 404. Puteți încerca acest lucru pentru dvs. prin vizitarea: http://127.0.0.1:3000/favicon.ico.
Dacă doriți să verificați codul sursă complet pentru acest tutorial, îl puteți descărca utilizând linkul de descărcare din partea de sus a acestei pagini.
În opinia mea, Organic este un concept minunat. Este foarte flexibil și încurajează producerea de aplicații mai bune. Rețineți că exemplul din acest articol se bazează pe experiența mea personală cu alte modele de design. Deci, folosirea termenilor ca Router, Data Provider sau Render este complet opțională și puteți schimba numele după cum doriți. Simțiți-vă liber să experimenteze prin crearea de noi module bazate pe Organic și să-mi spuneți ce credeți în comentarii!
Miezul Organic este dezvoltat de Boris Filipov și Valeri Bogdanov și vă recomand să le verificați pe Github. Dacă sunteți interesat în utilizarea produselor organice, veți găsi lucruri precum Angel și WebCell foarte utile.
