Share
Ich war vor ein paar Jahren als Grafikdesigner tätig und ein häufiges Problem, dem ich begegnete, war die Auswahl von Farbschemata für neue Projekte. Sagte einer meiner Kollegen, "Wähle einfach ein schönes Foto aus und nimm die Farben von dort". Diese Technik funktioniert gut, da Fotos eine natürliche Farbkombination bieten. Also dachte ich: "Warum überträgt man dasselbe Konzept nicht auf meine Arbeit als Programmierer?". Und hier kommt Organic ins Spiel. Als ich zum ersten Mal in Organic eingeführt wurde, war ich erstaunt, wie einfach es war und gleichzeitig wie flexibel es ist. Schließlich hatte ich etwas, was die modulare Programmierung fördert, es ist genauso nützlich wie das MVC-Muster und es ist ein großartiges Werkzeug für die Architektur.
Wie Sie vielleicht schon erraten haben, basiert das organische Konzept auf Biologie. Ihre Hauptanwendung fungiert als Zelle, die hat eine Membran und ein Kern. Aber die eigentliche Arbeit einer Zelle erledigt der Organellen, die miteinander kommunizieren mit Chemikalien. Natürlich sind die Elemente und Prozesse in Organic nicht zu 100% identisch mit echten Zellen, aber sie sind sich ziemlich nahe. Nun, ich weiß, dass es verrückt klingt, aber sobald Sie damit arbeiten, werden Sie sehen, wie einfach und natürlich dieser Ansatz sein kann, wenn Sie ihn auf Ihre Apps anwenden.
Organic wird als Node-Modul vertrieben. Daher sollten Sie NodeJS bereits installiert haben. Wenn nicht, gehen Sie bitte zu nodejs.org und holen Sie sich die neueste Version für Ihr Betriebssystem. Ihre package.json Datei sollte so aussehen:
"name": "OrganicDevelopment", "version": "0.0.0", "description": "Organische Entwicklung", "Abhängigkeiten": "organic": "0.0.11", "author": "Your Name hier "
Lauf npm installieren im selben Verzeichnis und der Manager lädt die erforderlichen Dateien herunter. Der Kern von Organic ist eigentlich ziemlich klein. Es enthält nur die Definition der Hauptelemente - Zelle, Kern, Membran, Plasma, Organelle, Chemikalie und DNA. Natürlich gibt es ein paar Tests, aber insgesamt ein kleines Paket. Dies erleichtert das Erlernen und die Entwicklung fast sofort.
Für diesen Artikel habe ich beschlossen, eine einfache Website zu erstellen, die nur den Kern von Organic verwendet. Der Quellcode kann oben in diesem Artikel heruntergeladen werden, wenn Sie mitverfolgen möchten. Ich denke, dass diese Beispielanwendung der beste Weg ist, dieses neue Muster zu präsentieren. Die Site enthält zwei Seiten - Zuhause und Über. Hier ist ein Screenshot der Site:
Die App enthält zwei Schaltflächen, die auf zwei verschiedene Seiten verweisen. Das Über Seite hat nur etwas mehr Text als die Zuhause Seite tut. Einfach genug, aber sehen wir uns an, was sich hinter den Vorhängen befindet. Hier ist ein Diagramm, das den grundlegenden Anforderungsablauf unserer Anwendung zeigt:
Der Benutzer sendet eine Anfrage an unsere NodeJs-Anwendung. Der Server akzeptiert die Anfrage und sendet sie an den Router. Danach weiß der Render, welche Seite verwendet werden soll, und sendet eine Antwort an den Server zurück. Am Ende wird die Antwort an den Benutzer gesendet.
Es gibt ein zusätzliches Element, Data Providers, das das erforderliche CSS oder JavaScript für das Rendering vorbereitet (Denken Sie daran, dass ich in unserer Beispiel-App kein JavaScript verwendet habe, da es nur ein CSS-Modul gibt.).
So würde unsere App in Organic aussehen:
In der Zelle haben wir eine Membran, die die inneren Elemente von der Außenwelt fernhält. In dieser Membran befindet sich unser erstes Organ, unser Server, denn hier können Daten entweder unsere Anwendung betreten oder verlassen. Die anderen Organellen (Router, Render und CSS) werden im Plasma platziert. Alle diese Module kommunizieren miteinander über Chemikalien (anfordern, Seite und css, rot markiert). Der Server sendet eine anfordern chemisch. Der Router sendet eine Seite und das CSS-Organ sendet die css. Ich sollte auch erwähnen, dass das Plasma als Ereignisbus für die Chemikalien fungiert. Organellen hören auf eine bestimmte Chemikalie und reagieren darauf, wenn sie gefunden wird.
Hier ist ein weiteres Anforderungsflussdiagramm, diesmal jedoch mit den Chemikalien, die emittiert werden (rot markiert):
Wenn Ihnen dieses Konzept immer noch unklar ist, machen Sie sich keine Sorgen. Wenn wir die nächsten Abschnitte durchgehen und in den eigentlichen Code einsteigen, sollte es sinnvoller werden!
Alles beginnt mit der DNA (Desoxyribonukleinsäure), die man sich als Cells-Konfiguration vorstellen kann. In dieser DNA definieren Sie Ihre Organellen und ihre Einstellungen.
Lass uns ein neues erstellen index.js Datei und geben Sie den folgenden Code ein:
Accentsconagua
var DNA = erfordern ("organisch"). DNA; var Zelle = erfordern ("organisch"). Zelle; var dna = neue DNA (Membran: Server: Quelle: "Membran.Server", Plasma: Router: Quelle: "Plasma.Router", CSS: Quelle: "Plasma.CSS"), Datei : "./css/styles.css", Rendern: source: "plasma.Render", Vorlagen: "./tpl/"); var-Zelle = neue Zelle (DNA); Der obige Code ist nur eine Definition für die DNA- und Zellinitialisierung. Wie Sie sehen, haben wir unseren Server in der Membran und den Router, CSS und Render im Plasma platziert, wie wir im letzten Abschnitt besprochen haben. Das Quelle Eigenschaft ist eigentlich obligatorisch und enthält den Pfad zu Ihren individuellen Organellen.
Denken Sie daran, dass die Datei Eigenschaft im CSS-Organ und im Vorlagen Eigenschaft im Render-Organ sind eigentlich benutzerdefinierte Eigenschaften, die ich eingestellt habe. Sie können hier auch beliebige Anpassungen hinzufügen.
Die Verzeichnisstruktur für Ihre App sollte wie folgt aussehen:
/ css /styles.css / Membrane /Server.js / node_modules / plasma /CSS.js /Render.js /Router.js / tpl
var Chemical = erfordern ("organisch"). Chemikalie; var Organel = erfordern ("organisch"). Organel; var util = erfordern ("util"); module.exports = function YourOrganelName (plasma, config) Organel.call (this, plasma); // Ihre eigene Logik hier util.inherits (module.exports, Organel); Der obige Code zeigt das grundlegende Format zum Erstellen eines Organels. Wenn Sie verwenden möchten dies oder Dies auf Sie müssen sicherstellen, dass Sie Organel wie oben erben. Und eigentlich die Plasma Parametervariable hat genau die gleichen Methoden (emittieren und auf), so könnte man verwenden Plasma direkt und überspringen Sie die Vererbung, wenn Sie wollten.
Beachten Sie auch die Konfig Parameter; Dies ist das Objekt, das Sie in Ihrer DNA definiert haben. Dies ist ein guter Ort für Ihre benutzerdefinierte Konfiguration.
Der Server ist Ihr Hauptorgan, das Anfragen entgegennimmt und Antworten an den Browser sendet. So sollte Ihr Server-Organ aussehen:
var port = 3000; module.exports = function Server (plasma, config) Organel.call (this, plasma); var self = dies; http.createServer (Funktion (req, res) console.log ("request" + req.url); self.emit (neue Chemikalie (Typ: "request", req: req), Funktion (html) res .writeHead (200); res.end (html););). listen (Port, '127.0.0.1'); console.log ('Server läuft unter http://127.0.0.1:' + port + '/'); Hier passieren zwei Dinge. Der erste ist die Definition des NodeJS-Servers, der natürlich einen Handler hat, der die Anfrage akzeptiert (req) und Antwort (res) Objekte. Sobald die Anfrage empfangen wurde, sendet das Server-Organel eine Chemikalie mit dem Typ anfordern, Benachrichtigung der übrigen Organellen. Es befestigt auch die req Wer also mehr Informationen über die eingehende Anfrage benötigt, kann direkt auf die Daten der Chemikalie zugreifen.
Das emittieren Die Methode nimmt dann ein zweites Argument an, das eine Rückruffunktion ist. Sie können dies verwenden, um den Fluss zum Organel zurückzukehren, das die Chemikalie sendet. Das heißt Wenn das Rendering seinen Job abgeschlossen hat, ruft es den Rückruf des Servers auf. Es benötigt das erzeugte HTML und die Verwendung des res Objekt sendet die Seite an den Benutzer.
Für unser nächstes Organ hört der Router gerade auf eine anfordern Chemikalie, die vom Server gesendet wird. Es erhält die URL vom req Objekt und entscheidet, welche Seite angezeigt werden soll. Hier ist der Code für den Router:
module.exports = function Router (plasma, config) Organel.call (this, plasma); var self = dies; this.on ("request", Funktion (Chemikalie, Absender, Rückruf) var page = chemical.req.url.substr (1, chemical.req.url.length); page = page == "" || page = = "/"? "home": page; self.emit (new Chemical (type: "page", Seite: page, ready: callback));); Nun, der Router selbst sendet nur eine neue Chemikalie mit einem Typ aus Seite. Denken Sie daran, es gibt auch zwei andere Organe, die auf diese Chemikalie achten, aber standardmäßig werden sie nicht auf alle anderen Elemente im Plasma übertragen. Natürlich kann es vorkommen, dass Sie solche Funktionen benötigen. Dazu müssen Sie nur falsch zurückgeben; im Hörer der Chemikalie. Wir werden das im nächsten Abschnitt sehen.
module.exports = function CSS (plasma, config) Organel.call (this, plasma); var cssStyles = fs.readFileSync (config.file) .toString (); var self = dies; this.on ("page", function (chemical) self.emit (new Chemical (Typ: "css", Wert: cssStyles)); false zurückgeben;); Dieses Modul ist nur ein einfaches Ein-Aufgaben-Organ, das den Pfad zum .css Datei, liest sie und gibt später eine Chemikalie aus, die die tatsächlichen CSS-Stile enthält. Achten Sie auch auf die falsch zurückgeben; Aussage unten. Wie ich im letzten Abschnitt gesagt habe, ist es wichtig, dies zu tun, andernfalls erhält das Rendering keine Seite Chemikalie, die vom Router gesendet wird. Dies geschieht, weil das CSS-Organ vor dem Rendern in der DNA definiert ist.
Zum Schluss noch der Code für unser Render-Organel:
module.exports = function Render (plasma, config) Organel.call (this, plasma); var getTemplate = Funktion (Datei, Rückruf) return fs.readFileSync (config.templates + file); var formatTemplate = Funktion (html, templateVars) für (Variablenname in templateVars) html = html.replace ("" + name + "", templateVars [Name]); return html; var templates = layout: getTemplate ("layout.html"). toString (), home: getTemplate ("home.html"). toString (), about: getTemplate ("about.html"). toString (), notFound: getTemplate ("notFound.html"). toString () var vars = ; var self = dies; this.on ("css", Funktion (chemisch) vars.css = chemical.value;); this.on ("page", function (chemical) console.log ("Opening" + + chemical.page + "page". "); var html = templates [chemical.page]? templates [chemical.page]: Vorlagen. notFound; html = formatTemplate (templates.layout, content: html); html = formatTemplate (html, vars); chemical.ready (html);); Hier gibt es zwei Hilfsmethoden: getTemplate und formatTemplate Diese implementieren eine einfache Vorlagen-Engine zum Laden einer externen HTML-Datei und zum Ersetzen von Variablen im Schnurrbartstil. Alle Vorlagen werden für den schnellen Zugriff in einem Objekt gespeichert. Danach haben wir nur noch ein paar Zeilen für die HTML-Formatierung und dann ist alles fertig. Das Render-Organ hört auch auf die css Chemikalie und schließlich bietet die Anwendung eine nicht gefunden 404 Seite, falls erforderlich.
So sieht die Verzeichnisstruktur der endgültigen App aus:
/ css /styles.css / membr /Server.js / node_modules / plasma /CSS.js /Render.js /Router.js / tpl /about.html /home.html /layout.html /notFound.html
Einfach laufen Knoten index.js in der Konsole und Sie sollten etwas ähnliches sehen:
Wenn Ihr Server ausgeführt wird, sollten Sie jetzt besuchen können http://127.0.0.1:3000 in Ihrem bevorzugten Browser. Klicken Sie auf die Links, um einige Male zwischen den beiden Seiten zu wechseln, und kehren Sie dann zu Ihrer Konsole zurück, um die Ausgabe anzuzeigen.
Sie sollten einen schönen Bericht über die letzten Aktivitäten der Anwendungen sehen. Jetzt können Sie auch etwas anderes in der Konsole feststellen:
request /favicon.ico Öffnet die Seite favicon.ico.
Sie sehen, dass eine weitere Anfrage vom Browser kommt. Es will laden favicon.ico. Unsere kleine Site hat jedoch kein solches Symbol, daher wird nur die 404-Seite geöffnet. Sie können dies selbst ausprobieren, indem Sie Folgendes besuchen: http://127.0.0.1:3000/favicon.ico.
Wenn Sie den vollständigen Quellcode für dieses Lernprogramm lesen möchten, können Sie ihn über den Download-Link oben auf dieser Seite herunterladen.
Meiner Meinung nach ist Organic ein tolles Konzept. Es ist sehr flexibel und fördert die Erstellung besserer Anwendungen. Beachten Sie, dass das Beispiel in diesem Artikel auf meinen persönlichen Erfahrungen mit anderen Entwurfsmustern basiert. Daher ist die Verwendung von Begriffen wie Router, Datenprovider oder Rendering vollständig optional, und Sie können die Namen beliebig ändern. Fühlen Sie sich frei, um zu experimentieren, indem Sie neue Module auf Organic-Basis erstellen, und lassen Sie mich wissen, was Sie in den Kommentaren denken!
Der Kern von Organic wurde von Boris Filipov und Valeri Bogdanov entwickelt. Ich empfehle Ihnen dringend, sie auf Github zu überprüfen. Wenn Sie sich für Organic interessieren, werden Sie auch Dinge wie Angel und WebCell als sehr hilfreich empfinden.
