ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity
Ocelot-Social/docs/webapp/components.html

565 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Components · Ocelot.Social – Developer Documentation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<meta name="author" content="busFaktor() e.V.">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-hints/plugin-hints.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-tabs2/tabs.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search-pro/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="html.html" />
<link rel="prev" href="./" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" data-path="../edit-this-documentation.html">
<a href="../edit-this-documentation.html">
Edit this Documentation
</a>
</li>
<li class="chapter " data-level="1.3" data-path="../neo4j/">
<a href="../neo4j/">
Neo4J
</a>
</li>
<li class="chapter " data-level="1.4" data-path="../backend/">
<a href="../backend/">
Backend
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../backend/graphql.html">
<a href="../backend/graphql.html">
GraphQL
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../backend/neo4j-graphql-js.html">
<a href="../backend/neo4j-graphql-js.html">
neo4j-graphql-js
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="./">
<a href="./">
Webapp
</a>
<ul class="articles">
<li class="chapter active" data-level="1.5.1" data-path="components.html">
<a href="components.html">
Components
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="html.html">
<a href="html.html">
HTML
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="scss.html">
<a href="scss.html">
SCSS
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="vue.html">
<a href="vue.html">
Vue
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../testing.html">
<a href="../testing.html">
Testing Guide
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1" data-path="../cypress/">
<a href="../cypress/">
End-to-end tests
</a>
</li>
<li class="chapter " data-level="1.6.2" data-path="testing.html">
<a href="testing.html">
Frontend tests
</a>
</li>
<li class="chapter " data-level="1.6.3" data-path="../backend/testing.html">
<a href="../backend/testing.html">
Backend tests
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.7" data-path="../DOCKER_MORE_CLOSELY.html">
<a href="../DOCKER_MORE_CLOSELY.html">
Docker More Closely
</a>
</li>
<li class="chapter " data-level="1.8" >
<a target="_blank" href="https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/blob/master/deployment/README.md">
Deployment
</a>
</li>
<li class="chapter " data-level="1.9" data-path="../CONTRIBUTING.html">
<a href="../CONTRIBUTING.html">
Contributing
</a>
</li>
<li class="chapter " data-level="1.10" data-path="../cypress/features.html">
<a href="../cypress/features.html">
Feature Specification
</a>
</li>
<li class="chapter " data-level="1.11" data-path="../CODE_OF_CONDUCT.html">
<a href="../CODE_OF_CONDUCT.html">
Code of conduct
</a>
</li>
<li class="chapter " data-level="1.12" data-path="../LICENSE.html">
<a href="../LICENSE.html">
License
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Components</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="components-&#x2013;-code-guidelines">Components &#x2013; Code Guidelines</h1>
<h2 id="we-adhere-to-the-single-responsibility-principle">We adhere to the <a href="https://en.wikipedia.org/wiki/Single_responsibility_principle" target="_blank">single responsibility principle</a></h2>
<p>Each component does <em>exactly one job</em>. The goal is to end up with many small components that are:</p>
<ul>
<li>easy to understand</li>
<li>easy to maintain</li>
<li>easy to reuse</li>
</ul>
<p><strong>How do you decide what is a separate component?</strong> Try to describe what it does in <em>one sentence</em>! When you find yourself using <code>and</code> and <code>or</code> the code you are talking about should probably be split up into two or more components.</p>
<p>On the other hand, when something is easily expressed in a few lines of HTML and SCSS and not likely to be reused this is a good indicator that it should <em>not</em> go into a separate component.</p>
<h2 id="we-compose-with-components">We compose with components</h2>
<p>Usually <code>pages</code> use <code>layouts</code> as templates and will be composed of <code>features</code>. <code>features</code> are composed of <code>components</code>, the smallest building blocks of the app. The further down we go in this hierarchy the simpler and more generic the components become. Here is an example:</p>
<ul>
<li>The <code>index</code> page is responsible for displaying a list of posts. It uses the <code>default</code> layout and the <code>PostList</code> feature.</li>
<li>The <code>PostList</code> feature uses a <code>List</code> component to render <code>PostTeaser</code> features.</li>
<li>The <code>PostTeaser</code> feature consists of a <code>LayoutCard</code> wrapped around a <code>CardImage</code>, <code>CardTitle</code> and <code>CardContent</code> component.</li>
</ul>
<p>The <code>index</code> page is unique in the app and will never be reused. The <code>PostList</code> knows it is handling post data and can therefore not be used for anything else &#x2013; but it can display posts on the <code>index</code> as well as the <code>user</code> page.</p>
<p>The <code>Card</code> on the other hand does not care about the type of data it needs to handle. It just takes whatever it receives and renders it in a certain way, so it can be reused throughout the app for many different features.</p>
<h2 id="we-use-two-word-names">We use two-word names</h2>
<p>We follow the W3C rules for naming custom elements as suggested in the <a href="https://vuejs.org/v2/guide/components-registration.html#Component-Names" target="_blank">Vue.js docs</a> to differentiate our own components from regular HTML elements in our templates.</p>
<p>Names should also be meaningful and unique to avoid confusion and code duplication, and also not too long to make them readable. Therefore: aim for two-word names, such as <code>layout-card</code>, <code>post-list</code> or <code>post-teaser</code>.</p>
<h2 id="recommended-reads">Recommended reads</h2>
<p>For a deeper dive into the WHY and HOW have a look at the following resources which the above guidelines are based on:</p>
<ul>
<li><a href="https://bradfrost.com/blog/post/atomic-web-design/" target="_blank">Atomic design</a></li>
<li><a href="https://medium.com/@wereheavyweight/how-were-using-component-based-design-5f9e3176babb" target="_blank">CDD &#x2013; component based design</a></li>
<li><a href="https://pablohpsilva.github.io/vuejs-component-style-guide/#/" target="_blank">Vue.js component styleguide</a></li>
</ul>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="./" class="navigation navigation-prev " aria-label="Previous page: Webapp">
<i class="fa fa-angle-left"></i>
</a>
<a href="html.html" class="navigation navigation-next " aria-label="Next page: HTML">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Components","level":"1.5.1","depth":2,"next":{"title":"HTML","level":"1.5.2","depth":2,"path":"webapp/html.md","ref":"webapp/html.md","articles":[]},"previous":{"title":"Webapp","level":"1.5","depth":1,"path":"webapp/README.md","ref":"webapp/README.md","articles":[{"title":"Components","level":"1.5.1","depth":2,"path":"webapp/components.md","ref":"webapp/components.md","articles":[]},{"title":"HTML","level":"1.5.2","depth":2,"path":"webapp/html.md","ref":"webapp/html.md","articles":[]},{"title":"SCSS","level":"1.5.3","depth":2,"path":"webapp/scss.md","ref":"webapp/scss.md","articles":[]},{"title":"Vue","level":"1.5.4","depth":2,"path":"webapp/vue.md","ref":"webapp/vue.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","-sharing","hints","tabs2","theme-simple@git+https://github.com/plugins-zander/gitbook-plugin-theme-simple.git","search-pro@git+https://github.com/plugins-zander/gitbook-plugin-search-pro.git","splitter@git+https://github.com/plugins-zander/gitbook-plugin-splitter.git","edit-link@git+https://github.com/plugins-zander/gitbook-plugin-edit-link.git","gtag@git+https://github.com/plugins-zander/gitbook-plugin-gtag.git","chapter-fold@git+https://github.com/plugins-zander/gitbook-plugin-chapter-fold.git","copy-code-button@git+https://github.com/plugins-zander/gitbook-plugin-copy-code-button.git"],"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"},"pluginsConfig":{"chapter-fold":{},"splitter":{},"search-pro":{},"hints":{"danger":"fa fa-exclamation-circle","info":"fa fa-info-circle","tip":"fa fa-mortar-board","working":"fa fa-wrench"},"sitemap-general":{"prefix":"https://zlogs.net/gitbook-action/"},"fontsettings":{"theme":"white","family":"sans","size":2},"gtag":{"token":""},"tabs2":{},"highlight":{},"theme-simple":{"showLevel":false,"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}},"copy-code-button":{},"edit-link":{"label":"EDIT","base":"https://github.com/Ocelot-Social-Community/Ocelot-Social/edit/master/"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","author":"busFaktor() e.V.","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Ocelot.Social – Developer Documentation","gitbook":"3.2.3","description":"Developer Documentation by Gitbook-Action"},"file":{"path":"webapp/components.md","mtime":"2019-10-29T12:41:28.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2023-08-15T15:04:47.802Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../gitbook/gitbook-plugin-tabs2/tabs.js"></script>
<script src="../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
<script src="../gitbook/gitbook-plugin-search-pro/search.js"></script>
<script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-gtag/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.js"></script>
<script src="../gitbook/gitbook-plugin-copy-code-button/toggle.js"></script>
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink