mirror of
https://github.com/status-im/pluto.git
synced 2026-08-31 20:41:12 +00:00
52 lines
9.3 KiB
HTML
52 lines
9.3 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Principles · Pluto</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Design"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Principles · Pluto"/><meta property="og:type" content="website"/><meta property="og:url" content="https://status-im.github.io/pluto/index.html"/><meta property="og:description" content="## Design"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/pluto/img/favicon.png"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/pluto/js/pluto.js"></script><link rel="stylesheet" href="/pluto/css/prism.css"/><link rel="stylesheet" href="/pluto/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/pluto/"><img class="logo" src="/pluto/img/logo_white.png" alt="Pluto"/><h2 class="headerTitleWithLogo">Pluto</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/pluto/docs/Manifesto.html" target="_self">Docs</a></li><li class=""><a href="/pluto/examples.html" target="_self">Examples</a></li><li class=""><a href="/pluto/try.html" target="_self">Try</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Getting Started</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/pluto/docs/Manifesto.html">Manifesto</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/pluto/docs/Principles.html">Principles</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Concepts</h3><ul><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Anatomy.html">Anatomy of an extension</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Hook.html">Hook</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/View.html">View</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Query.html">Query</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Event.html">Event</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/concepts/Registry.html">Registry</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Build</h3><ul><li class="navListItem"><a class="navItem" href="/pluto/docs/build/Packaging.html">Packaging</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/build/Deployment.html">Deployment</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/build/FirstExtension.html">My first extension</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/pluto/docs/Development.html">Development</a></li><li class="navListItem"><a class="navItem" href="/pluto/docs/Roadmap.html">Roadmap</a></li></ul></div></div></section></div><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
const headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
if (event.target.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer docMainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle">Principles</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="design"></a><a href="#design" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Design</h2>
|
||
<p>When it comes to openness and data control, Status sets the bar the highest. To that end the following points will guide our decisions:</p>
|
||
<ul>
|
||
<li>Secure and aware of privacy</li>
|
||
<li>Simple build model and no friction to publish</li>
|
||
<li>Decentralized, controlled by end users</li>
|
||
<li>Open - access to Status and ethereum features</li>
|
||
<li>Smooth on all platforms</li>
|
||
<li>Reusable</li>
|
||
</ul>
|
||
<h2><a class="anchor" aria-hidden="true" id="development-model"></a><a href="#development-model" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Development model</h2>
|
||
<p>To make creation of an extension dead easy, we leverage the internal unidirectional flow of Status.</p>
|
||
<p>Developers of extensions must understand the following:</p>
|
||
<ul>
|
||
<li>Hooks allow to plug into a host runtime</li>
|
||
<li>All data is kept in a single application state</li>
|
||
<li>Queries allow an extension to access data from the application state</li>
|
||
<li>Events allow an extension to modify the application state</li>
|
||
<li>A declarative UI updates itself reactively, based on changes in application state</li>
|
||
</ul>
|
||
<p>Extensions are defined using <a href="https://github.com/edn-format/edn">EDN format</a>. As a pure data format, EDN can be easily serialized and consumed by different platforms. What follows next is a description of this format. Keep in mind the expectation that tooling will hide these details.</p>
|
||
<p>An extension is built by using high-level UI components that form a declarative view of an extension. UI derives reactively from the whole application state (contained in a single structure). Queries are used to access an identified subset of this data. Changes to data are performed asynchronously, via events.</p>
|
||
<p>Because extensions are defined as pure data, it is possible to inspect dynamically (right before activation) their impact within Status (e.g. security and privacy concerns) without having to trust what extension providers declare.</p>
|
||
<p>Users will be briefed about an extension’s requirements (e.g. permissions) before deciding whether to activate an extension. Permissions will still be granted one by one, during the execution of an extension, and only when needed.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/pluto/docs/Manifesto.html"><span class="arrow-prev">← </span><span>Previous</span></a><a class="docs-next button" href="/pluto/docs/concepts/Anatomy.html"><span>Next</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav docOnPageNav"><ul class="toc-headings"><li><a href="#design">Design</a></li><li><a href="#development-model">Development model</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/pluto/" class="nav-home"><img src="/pluto/img/logo_white.png" alt="Pluto" width="66" height="58"/></a><div><h5>Docs</h5><a href="docs/Tutorial">Getting Started</a><a href="docs/API">API Reference</a></div><div><h5>Community</h5><a href="https://chat.status.im">Project Chat</a><a href="https://twitter.com/ethstatus" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://blog.status.im/">Blog</a><a href="https://github.com/status-im/pluto/">GitHub</a></div></section><section class="copyright">Copyright © 2018 Status.im</section></footer></div></body></html> |