Share
Jeg jobbet som grafisk designer for noen år siden, og et vanlig problem som jeg ville løpe inn var å velge fargevalg for nye prosjekter. En av mine kolleger sa, "Bare velg et fint bilde og ta farger derfra". Denne teknikken fungerer bra fordi bilder gir deg en naturlig kombinasjon av farger. Så jeg tenkte, "Hvorfor ikke overføre samme konsept til arbeidet mitt som koder?". Og det er her organisk kommer inn for å spille. Da jeg først ble introdusert til økologisk, ble jeg overrasket over hvor enkelt det var og samtidig, hvor fleksibelt er tilnærmingen. Til slutt hadde jeg noe som oppmuntrer til modulær programmering, det er like nyttig som MVC-mønsteret, og det er et flott verktøy for arkitektur.
Som du kanskje har gjettet, er det organiske konseptet biologisk basert. Din hovedapplikasjon fungerer som en Celle, som har a Membran og a Cellekjernen. Men den virkelige jobben til en celle er utført av organeller, som kommuniserer mellom hverandre med Kjemiske stoffer. Selvfølgelig er elementene og prosessene i Organic ikke 100% identiske med virkelige celler, men de er ganske nært. Nå vet jeg at det høres gal, men når du begynner å jobbe med det, vil du se hvor enkelt og naturlig denne tilnærmingen kan være når du bruker den til appene dine.
Organisk distribueres som en nodemodul. Så du burde ha NodeJS allerede installert. Hvis du ikke gjør det, kan du gå til nodejs.org og ta tak i den nyeste versjonen for operativsystemet. Din package.json filen skal se slik ut:
"navn": "OrganicDevelopment", "version": "0.0.0", "beskrivelse": "Organisk utvikling", "avhengigheter": "organisk": "0.0.11", "forfatter" Navn her "
Løpe npm installasjon i samme katalog og sjefen vil laste ned de nødvendige filene. Kjernen i organisk er faktisk ganske liten. Den inneholder bare definisjonen av hovedelementene - Cell, Nucleus, Membrane, Plasma, Organelle, Chemical, and DNA. Selvfølgelig kommer det med noen tester, men det er en liten pakke samlet. Dette bidrar til å gjøre det enkelt å lære og begynne å utvikle med nesten umiddelbart.
For denne artikkelen bestemte jeg meg for å lage et enkelt nettsted med bare kjerne av organisk. Kildekoden kan lastes ned øverst i denne artikkelen, hvis du vil følge med. Jeg tror at denne prøveapplikasjonen er den beste måten å presentere dette nye mønsteret på. Nettstedet inneholder to sider - Hjem og Handle om. Her er et skjermbilde av nettstedet:
Appen inneholder to knapper som knytter til de to forskjellige sidene. De Handle om Siden har bare litt mer tekst enn Hjem siden gjør. Enkelt nok, men la oss se hva som ligger bak gardinene. Her er et diagram som viser grunnleggende forespørselsflyten i vår søknad:
Brukeren sender en forespørsel til vår NodeJs-søknad. Serveren aksepterer forespørselen og sender den til ruteren. Etter det kjenner Render hvilken side som skal brukes og returnerer et svar til serveren. På slutten sendes svaret til brukeren.
Det er ett ekstra element, Data Providers, som forbereder den nødvendige CSS eller JavaScript for Render (husk at i vårt eksempel-app jeg ikke brukte JavaScript, er det bare en CSS-modul).
Her er hva vår app vil se ut som en celle, i økologisk:
I cellen har vi en membran som holder de indre elementene vekk fra omverdenen. Innsiden av denne membranen er hvor vi skal sette vår første organel, vår Server, fordi dette er hvor data kan enten gå inn eller forlate vår søknad. De andre organeller (Router, Render, og CSS) plasseres i plasma. Alle disse modulene kommuniserer med hverandre via kjemikalier (be om, side og css, merket i rødt). Serveren sender ut en be om kjemisk. Ruteren sender ut en side og CSS organel sender css. Jeg bør også nevne at plasmaet fungerer som en hendelsesbuss for kjemikaliene. Organelles lytter etter et bestemt kjemikalie, og hvis de oppdager, reagerer de på det.
Her er en annen forespørsel flytdiagram, men denne gangen med kjemikalier som sendes ut (merket i rødt):
Nå hvis dette konseptet fremdeles er uklart for deg, ikke vær så bekymret, da vi fortsetter gjennom de neste avsnittene og komme inn i selve koden, bør det begynne å gjøre mer fornuftig!
Alt starter med DNA (Deoxyribonucleic acid), som du kan tenke på som en Celle-konfigurasjon. Dette DNA er der du vil definere organeller og deres innstillinger.
La oss lage en ny index.js fil og legg inn følgende kode:
Accentsconagua
var DNA = krever ("organisk"). DNA; var Cell = krever ("organisk"). Cell; var dna = nytt DNA (membran: Server: source: "membrane.Server", plasma: Router: kilde: "plasma.Router", CSS: kilde: "plasma.CSS" : "./css/styles.css", Render: kilde: "plasma.Render", maler: "./tpl/"); varcelle = ny celle (dna); Ovennevnte kode er bare en definisjon for DNA og Cell initialisering. Du kan se at vi har plassert vår Server i membranen og ruteren, CSS og Render i plasmaet, som vi diskuterte i det siste avsnittet. De kilde Eiendommen er faktisk obligatorisk og inneholder banen til dine individuelle organeller.
Husk at fil eiendom i CSS organel og maler eiendom i Render organel er faktisk egendefinerte egenskaper, som jeg satt. Du kan legge til hvilken tilpasning du trenger her også.
Og bare for din referanse, bør katalogstrukturen for appen din se slik ut:
/ css /styles.css / membran / Server.js / node_modules / plasma / CSS.js /Render.js /Router.js / tpl
var Chemical = krever ("organisk"). Kjemisk; var Organel = krever ("organisk"). Organisk; var util = krever ("util"); module.exports = funksjon YourOrganelName (plasma, config) Organel.call (dette, plasma); // din tilpassede logikk her util.inherits (module.exports, Organel); Ovennevnte kode viser grunnformatet for å opprette en organel. Hvis du vil bruke this.emit eller this.on du må sørge for å arve Organel som vi gjorde over. Og faktisk, den plasma parametervariabelen har de nøyaktig samme metodene (avgir og på), så du kan bruke plasma direkte og hopp over arven hvis du vil.
Legg også merke til config parameter; Dette er objektet du definerte i DNA, noe som er et bra sted for noen av dine egendefinerte konfigurasjoner.
Serveren er din viktigste organel, som aksepterer forespørsler og sender svar til nettleseren. Slik ser serverorganen din ut:
var port = 3000; module.exports = funksjon Server (plasma, config) Organel.call (dette, plasma); var selv = dette; http.createServer (funksjon (req, res) console.log ("request" + req.url); self.emit (new Chemical (type: "request", req: req), funksjon (html) .writeHead (200); res.end (html););) .Lytt (port, '127.0.0.1'); console.log ('Server som kjører på http://127.0.0.1:' + port + '/'); To ting skjer her. Den første er definisjonen av NodeJS-serveren, som selvsagt har en godkjenningsforespørsel for håndterer (req) og respons (res) objekter. Når forespørselen er mottatt, sender Server organel et kjemikalie, med typen be om, informerer resten av organeller. Det legger også til req objekt, slik at den som trenger mer informasjon om innkommende forespørsel, kan få tilgang til data fra kjemikalien direkte.
De avgir Metoden tar deretter et andre argument som er en tilbakeringingsfunksjon. Du kan bruke dette til å returnere strømmen tilbake til organel, som sender kjemikaliet. Dvs. Når Render er ferdig med jobben, kalles det Serverens tilbakeringing. Det tar den produserte HTML og ved å bruke res objekt sender siden til brukeren.
For vår neste organel lytter ruteren bare etter a be om kjemisk, som sendes av serveren. Det blir nettadressen fra req objekt og bestemmer hvilken side som skal vises. Her er koden for ruteren:
module.exports = funksjon Router (plasma, config) Organel.call (dette, plasma); var selv = dette; this.on ("request", funksjon (kjemisk, avsender, tilbakeringing) var side = chemical.req.url.substr (1, chemical.req.url.length); page = page == "" || page = = "/"? "hjem": side; self.emit (ny Kjemisk (type: "side", side: side, klar: tilbakeringing);; Nå sender ruteren seg selv bare en ny kjemikalie med en type side. Husk, det er to andre organer som lytter for dette kjemikaliet, men som standard blir det ikke overført til alle de andre elementene i plasmaet. Selvfølgelig kan det være ganger når du trenger en slik funksjonalitet. For å gjøre det, trenger du bare å returner falsk; i kjemikalierens lytter. Vi ser dette i aksjon i neste avsnitt.
module.exports = funksjon CSS (plasma, config) Organel.call (dette, plasma); var cssStyles = fs.readFileSync (config.file) .toString (); var selv = dette; this.on ("side", funksjon (kjemisk) self.emit (new Chemical (type: "css", verdi: cssStyles)); return false;); Denne modulen er bare en enkel en-oppgave organel som får banen til .css filen, leser den, og sender senere en kjemikalie som inneholder de faktiske CSS-stilene. Vær også oppmerksom på returner falsk; uttalelse nederst. Som jeg sa fra det siste avsnittet, er det viktig å gjøre dette, ellers vil Render ikke motta side kjemisk sendt av ruteren. Dette skjer fordi CSS organel er definert før Render i DNA.
Og til slutt, her er koden for vår Render organel:
module.exports = funksjon Render (plasma, config) Organel.call (dette, plasma); var getTemplate = funksjon (fil, tilbakeringing) return fs.readFileSync (config.templates + file); var formatTemplate = funksjon (html, templateVars) for (var navn i templateVars) html = html.replace ("" + name + "", templateVars [navn]); returnere html; varemaler = layout: getTemplate ("layout.html"). toString (), home: getTemplate ("home.html"). toString (), om: getTemplate ("about.html"). toString () notFound: getTemplate ("notFound.html"). toString () var vars = ; var selv = dette; this.on ("css", funksjon (kjemisk) vars.css = chemical.value;); this.on ("side", funksjon (kjemisk) console.log ("Opening" + chemical.page + "side."); var html = maler [chemical.page]? maler [chemical.page]: maler. notFound; html = formatTemplate (templates.layout, innhold: html); html = formatTemplate (html, vars); chemical.ready (html);); Det er to hjelpemetoder her: getTemplate og formatTemplate som implementerer en enkel malmotor for lasting av en ekstern HTML-fil og erstatning av overskapsvariabler. Alle maler er lagret i et objekt for rask tilgang. Etterpå har vi bare noen få linjer for HTML-formatering, og alt er klar til å gå. Render organel lytter også til css kjemisk og endelig gir søknaden en ikke funnet 404 side, om nødvendig.
Så her er hva den endelige appens katalogstruktur ser ut som:
/ css /styles.css / membran / Server.js / node_modules / plasma / CSS.js /Render.js /Router.js / tpl /about.html /home.html /layout.html /notFound.html
Bare kjør node index.js i konsollen, og du bør se noe som ligner på dette:
Når serveren kjører, bør du nå kunne besøke http://127.0.0.1:3000 i din favoritt nettleser. Prøv å klikke på koblingene for å bytte mellom de to sidene et par ganger og deretter gå tilbake til konsollen for å se utgangen.
Du bør se en fin rapport om programmene nylig aktivitet. Nå kan du også legge merke til noe annet i konsollen:
forespørsel /favicon.ico Åpning av favicon.ico siden.
Du kan se at det er en ny forespørsel som kommer fra nettleseren. Den ønsker å laste favicon.ico. Men vårt lille nettsted har ikke et slikt ikon, så det åpner bare 404-siden. Du kan prøve dette selv ved å besøke: http://127.0.0.1:3000/favicon.ico.
Hvis du vil sjekke ut full kildekode for denne opplæringen, kan du laste den ned ved hjelp av nedlastingslenken øverst på denne siden..
Etter min mening er Organic et godt konsept. Det er veldig fleksibelt og oppfordrer til å produsere bedre applikasjoner. Husk at eksemplet i denne artikkelen er basert på min personlige erfaring med andre designmønstre. Så min bruk av vilkår som Router, Data Provider eller Render er helt valgfritt, og du kan endre navnene slik du ser det. Prøv å eksperimentere ved å lage nye moduler basert på Organisk og gi meg beskjed om hva du synes i kommentarene!
Kjernen i Organic er utviklet av Boris Filipov og Valeri Bogdanov, og jeg anbefaler på det sterkeste at du sjekker dem ut på Github. Hvis du er interessert i å bruke Organisk, vil du finne ting som Angel og WebCell virkelig nyttig også.
