Share
Je travaillais comme graphiste il y a quelques années et l'un des problèmes courants que je rencontrais était le choix des couleurs pour les nouveaux projets. Un de mes collègues a dit, "Choisissez une belle photo et prenez les couleurs à partir de là". Cette technique fonctionne bien car les photos vous offrent une combinaison naturelle de couleurs. Alors, je pensais: "Pourquoi ne pas transférer ce même concept à mon travail de codeur?". Et c'est ici qu'Organic entre en jeu. Lorsque j'ai découvert le bio, j'ai été étonné de la simplicité et de la souplesse de son approche. Enfin, quelque chose encourage la programmation modulaire, il est tout aussi utile que le modèle MVC et constitue un excellent outil d’architecture..
Comme vous l'avez peut-être deviné, le concept Organic repose sur la biologie. Votre application principale agit en tant que Cellule, qui a un Membrane et un Noyau. Mais le vrai travail d'une cellule est fait par le Organelles, qui communiquent entre eux avec Produits chimiques. Bien sûr, les éléments et les processus dans Organic ne sont pas identiques à 100% aux cellules réelles, mais ils sont assez proches. Maintenant, je sais que cela semble fou, mais une fois que vous aurez commencé à l'utiliser, vous verrez à quel point cette approche peut être simple et naturelle lorsqu'elle est appliquée à vos applications..
Organic est distribué sous forme de module de nœud. Donc, vous devriez déjà avoir installé NodeJS. Si ce n'est pas le cas, rendez-vous sur nodejs.org et récupérez la dernière version pour votre système d'exploitation. Votre package.json Le fichier devrait ressembler à ceci:
"name": "OrganicDevelopment", "version": "0.0.0", "description": "Développement organique", "dépendances": "organic": "0.0.11", "author": "Votre Nom ici "
Courir npm installer dans le même répertoire et le gestionnaire téléchargera les fichiers nécessaires. Le noyau de bio est en fait assez petit. Il ne contient que la définition des éléments principaux - Cellule, Noyau, Membrane, Plasma, Organelle, Chimique et ADN. Bien sûr, il s’agit de quelques tests, mais l’ensemble est petit. Cela facilite l’apprentissage et le développement facile presque immédiatement..
Pour cet article, j’ai décidé de créer un site Web simple en utilisant uniquement le noyau de l’organique. Le code source peut être téléchargé en haut de cet article, si vous souhaitez suivre. Je pense que cet exemple d'application est le meilleur moyen de présenter ce nouveau modèle. Le site contient deux pages - Accueil et Sur. Voici une capture d'écran du site:
L'application contient deux boutons reliant les deux pages différentes. le Sur la page a juste un peu plus de texte que le Accueil la page fait. C'est assez simple, mais voyons ce qu'il y a derrière les rideaux. Voici un diagramme affichant le flux de requête de base de notre application:
L'utilisateur envoie une demande à notre application NodeJs. Le serveur accepte la demande et l'envoie au routeur. Après cela, le rendu sait quelle page doit être utilisée et renvoie une réponse au serveur. A la fin, la réponse est ensuite envoyée à l'utilisateur.
Il existe un élément supplémentaire, les fournisseurs de données, qui prépare le code CSS ou JavaScript nécessaire pour le rendu (n'oubliez pas que dans notre exemple d'application, je n'ai pas utilisé JavaScript, il n'y a qu'un module CSS)..
Voici à quoi ressemblerait notre application en tant que cellule, en bio:
Dans la cellule, nous avons une membrane qui maintient les éléments internes à l’écart du monde extérieur. À l'intérieur de cette membrane se trouve notre premier organel, notre serveur, car c'est à cet endroit que les données peuvent entrer ou quitter notre application. Les autres organites (Router, Render et CSS) sont placées dans le plasma. Tous ces modules communiquent entre eux via des produits chimiques (demande, page et css, marqué en rouge). Le serveur émet un demande chimique. Le routeur émet un page et le CSS organel envoie le css. Je devrais également mentionner que le plasma agit comme un bus d'événements pour les produits chimiques. Les organelles sont à l'écoute d'un produit chimique particulier et, le cas échéant, y réagissent.
Voici un autre diagramme de flux de demandes, mais cette fois-ci avec les produits chimiques émis (indiqués en rouge):
Maintenant, si ce concept n’est pas encore clair pour vous, ne vous inquiétez pas, car nous passons aux sections suivantes pour entrer dans le code lui-même, cela devrait commencer à prendre plus de sens.!
Tout commence par l'ADN (acide désoxyribonucléique), que vous pouvez considérer comme une configuration de cellules. Cet ADN est l'endroit où vous allez définir vos organelles et leurs paramètres.
Créons un nouveau index.js fichier et mettre dans le code suivant:
Accentsconagua
var ADN = besoin ("organique"). ADN; var Cell = require ("organique"). Cell; var dna = nouvel ADN (membrane: serveur: source: "membrane.serveur", plasma: routeur: source: "plasma.Router", CSS: source: "plasma.CSS", fichier : "./css/styles.css", rendu: source: "plasma.Render", templates: "./tpl/"); var cellule = nouvelle cellule (ADN); Le code ci-dessus n'est qu'une définition de l'initialisation de l'ADN et de la cellule. Vous pouvez voir que nous avons placé notre serveur dans la membrane et le routeur, CSS et Render dans le plasma, comme indiqué dans la dernière section. le la source la propriété est en fait obligatoire et contient le chemin de vos organites individuelles.
Gardez à l'esprit que le fichier propriété dans le CSS organel et la des modèles Les propriétés dans Render Organel sont en fait des propriétés personnalisées, que j’ai définies. Vous pouvez également ajouter la personnalisation dont vous avez besoin.
Et juste pour votre référence, la structure de répertoires de votre application devrait ressembler à ceci:
/ css /styles.css / membrane / Server.js / node_modules / plasma / CSS.js /Render.js /Router.js / tpl
var Chemical = require ("organique"). Produit chimique; var Organel = require ("bio"). Organel; var util = require ("util"); module.exports = fonction YourOrganelName (plasma, config) Organel.call (this, plasma); // votre logique personnalisée ici util.inherits (module.exports, Organel); Le code ci-dessus montre le format de base pour créer un organel. Si vous voulez utiliser this.emit ou ceci. vous devrez vous assurer d'hériter d'Organel comme nous l'avons fait ci-dessus. Et en fait, le plasma variable de paramètre a exactement les mêmes méthodes (émettre et sur), afin que vous puissiez utiliser plasma directement et sautez l'héritage si vous vouliez.
Notez également le config paramètre; C’est l’objet que vous avez défini dans votre ADN, ce qui est un bon emplacement pour n’importe quelle configuration personnalisée..
Le serveur est votre principal organe, qui accepte les demandes et envoie des réponses au navigateur. Voici à quoi devrait ressembler votre Server organel:
port var = 3000; module.exports = function Serveur (plasma, config) Organel.call (this, plasma); var self = this; http.createServer (fonction (req, res) console.log ("demande" + req.url); self.emit (nouveau produit chimique (type: "demande", req: req), fonction (html) res .writeHead (200); res.end (html););). listen (port, '127.0.0.1'); console.log ('Serveur fonctionnant à http://127.0.0.1:' + port + '/'); Deux choses se passent ici. Le premier est la définition du serveur NodeJS, qui a bien sûr un gestionnaire acceptant la requête (req) et la réponse (res) objets. Une fois la demande reçue, le serveur organel envoie un produit chimique, avec le type demande, notifiant le reste des organites. Il attache également le req objet, de sorte que quiconque a besoin de plus d'informations sur la demande entrante peut accéder directement aux données du produit chimique.
le émettre La méthode prend alors un second argument qui est une fonction de rappel. Vous pouvez l'utiliser pour renvoyer le flux dans l'organel, qui envoie le produit chimique. C'est à dire. une fois que le rendu est terminé, il appelle le rappel du serveur. Il faut le HTML produit et en utilisant le res objet envoie la page à l'utilisateur.
Pour notre prochain organel, le routeur n'écoute qu'un message demande produit chimique, qui est envoyé par le serveur. Il obtient l'URL du req objet et décide quelle page doit être affichée. Voici le code pour le routeur:
module.exports = function Routeur (plasma, config) Organel.call (this, plasma); var self = this; this.on ("request", fonction (produit chimique, expéditeur, rappel) var page = chemical.req.url.substr (1, chemical.req.url.length); page = page == "" || page = = "/"? "home": page; self.emit (nouveau produit chimique (type: "page", page: page, ready: callback));); Maintenant, le routeur lui-même émet un nouveau produit chimique avec un type de page. N'oubliez pas qu'il existe deux autres organels à l'écoute de ce produit chimique, mais que, par défaut, il n'est pas transféré à tous les autres éléments du plasma. Bien sûr, vous aurez parfois besoin de telles fonctionnalités. Pour ce faire, il vous suffit de retourne faux; dans l'auditeur du produit chimique. Nous verrons cela en action dans la section suivante.
module.exports = fonction CSS (plasma, config) Organel.call (this, plasma); var cssStyles = fs.readFileSync (config.file) .toString (); var self = this; this.on ("page", fonction (chemical) self.emit (nouveau Chemical (type: "css", valeur: cssStyles)); return false;); Ce module est juste un simple organel à une tâche qui donne le chemin à la .css fichier, le lit et, plus tard, émet un produit chimique contenant les styles CSS actuels. Aussi, faites attention à la retourne faux; déclaration en bas. Comme je l’ai dit dans la dernière section, il est important de le faire, sinon le rendu ne recevra pas le page produit chimique envoyé par le routeur. Cela se produit parce que l'organel CSS est défini avant le rendu dans l'ADN.
Et enfin, voici le code de notre organigramme Render:
module.exports = fonction Render (plasma, config) Organel.call (this, plasma); var getTemplate = function (fichier, rappel) return fs.readFileSync (config.templates + fichier); var formatTemplate = fonction (html, templateVars) pour (nom var dans templateVars) html = html.replace ("" + nom + "", templateVars [nom]); 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 = this; this.on ("css", fonction (produit chimique) vars.css = produit.valeur;); this.on ("page", fonction (chemical) console.log ("Ouverture" + chemical.page + "page."); var html = templates [chemical.page]? templates [chemical.page]: templates. notFound; html = formatTemplate (templates.layout, contenu: html); html = formatTemplate (html, vars); chemical.ready (html);); Il existe deux méthodes d'assistance ici: getTemplate et formatTemplate qui implémentent un moteur de modèle simple pour charger un fichier HTML externe et remplacer les variables de type moustache. Tous les modèles sont stockés dans un objet pour un accès rapide. Ensuite, nous n’avons que quelques lignes pour le formatage HTML et tout est prêt à fonctionner. Le Render organel écoute également le css chimique et enfin l'application fournit un pas trouvé 404 pages, si nécessaire.
Alors, voici à quoi ressemble la structure de répertoires de l'application finale:
/ css /styles.css / membrane / Server.js / node_modules / plasma /CSS.js /Render.js /Router.js / tpl /about.html /home.html /layout.html /notFound.html
Il suffit de courir noeud index.js dans la console et vous devriez voir quelque chose de similaire à ceci:
Avec votre serveur en marche, vous devriez maintenant pouvoir visiter http://127.0.0.1:3000 dans votre navigateur préféré. Essayez de cliquer plusieurs fois sur les liens pour naviguer entre les deux pages, puis retournez à votre console pour afficher le résultat..
Vous devriez voir un bon rapport sur l'activité récente des applications. Maintenant, vous pouvez également remarquer quelque chose d'autre dans la console:
demande /favicon.ico Ouverture de la page favicon.ico.
Vous pouvez voir qu'il y a une autre demande provenant du navigateur. Il veut charger favicon.ico. Cependant, notre petit site ne possède pas une telle icône, il ouvre donc simplement la page 404. Vous pouvez essayer cela vous-même en visitant: http://127.0.0.1:3000/favicon.ico.
Si vous souhaitez consulter le code source complet pour ce didacticiel, vous pouvez le télécharger en utilisant le lien de téléchargement en haut de cette page..
À mon avis, le bio est un très bon concept. C'est très flexible et encourage à produire de meilleures applications. Gardez à l'esprit que l'exemple de cet article est basé sur mon expérience personnelle avec d'autres modèles de conception. Donc, mon utilisation de termes tels que routeur, fournisseur de données ou rendu est totalement optionnelle et vous pouvez modifier les noms à votre guise. N'hésitez pas à expérimenter en créant de nouveaux modules basés sur Organic et laissez-moi savoir ce que vous pensez dans les commentaires.!
Le noyau de Organic est développé par Boris Filipov et Valeri Bogdanov et je vous recommande fortement de les consulter sur Github. Si vous êtes intéressé par l'utilisation de Organic, des choses comme Angel et WebCell vous seront également utiles..
