Skip to content

Commit 902e60a

Browse files
author
Vlad Balin
committed
Added docs
1 parent a345613 commit 902e60a

File tree

99 files changed

+15177
-227
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+15177
-227
lines changed

‎docs/BackboneJS_Compatibility.md‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎docs/Getting_Started.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
5+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
6+
<head>
7+
<title>Getting Started - Type-R</title>
8+
<meta name="description" content="Universal state management framework" />
9+
<meta name="author" content="Vlad Balin">
10+
<meta charset="UTF-8">
11+
<link rel="icon" href="themes/daux/img/favicon-navy.png" type="image/x-icon">
12+
<!-- Mobile -->
13+
<meta name="apple-mobile-web-app-capable" content="yes" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15+
16+
<!-- Font -->
17+
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
18+
<!-- CSS -->
19+
<link href='themes/daux/css/theme-navy.min.css' rel='stylesheet' type='text/css'>
20+
<!-- Tipue Search -->
21+
<link href="tipuesearch/tipuesearch.css" rel="stylesheet">
22+
23+
<!--[if lt IE 9]>
24+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
25+
<![endif]-->
26+
</head>
27+
<body class="">
28+
29+
<header class="Navbar hidden-print">
30+
<a class="Navbar__brand" href="index.html">Type-R</a>
31+
32+
<div class="Search">
33+
<svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg>
34+
<input type="search" id="tipue_search_input" class="Search__field" placeholder="Search..." autocomplete="on" results=25 autosave=text_search>
35+
</div>
36+
</header>
37+
<div class="Columns content">
38+
<aside class="Columns__left Collapsible">
39+
<div class="Collapsible__container">
40+
<button type="button" class="Button Collapsible__trigger">
41+
<span class="Collapsible__trigger--bar"></span>
42+
<span class="Collapsible__trigger--bar"></span>
43+
<span class="Collapsible__trigger--bar"></span>
44+
</button>
45+
</div>
46+
47+
<div class="Collapsible__content">
48+
<!-- Navigation -->
49+
<ul class='Nav'><li class='Nav__item Nav__item--active'><a href="Getting_Started.html">Getting Started</a></li><li class='Nav__item '><a href="Overview.html">Overview</a></li><li class='Nav__item has-children'><a href="Record/Overview.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Record</a><ul class='Nav'><li class='Nav__item '><a href="Record/Overview.html">Overview</a></li><li class='Nav__item '><a href="Record/Record_basics.html">Record basics</a></li><li class='Nav__item '><a href="Record/Aggregation_tree.html">Aggregation tree</a></li><li class='Nav__item '><a href="Record/Transactions_and_Events.html">Transactions and Events</a></li><li class='Nav__item '><a href="Record/Validation.html">Validation</a></li><li class='Nav__item '><a href="Record/Serialization.html">Serialization</a></li><li class='Nav__item '><a href="Record/id_ and_id-references.html">id and id-references</a></li></ul></li></ul>
50+
51+
<div class="Links">
52+
<hr/>
53+
<a href="https://github.com/Volicon/React-MVx/issues" target="_blank">Help/Support/Bugs</a>
54+
<br />
55+
<a href="http://volicon.com" target="_blank">Made by Volicon (a Verizon company)</a>
56+
<br />
57+
58+
<div class="CodeToggler">
59+
<hr/>
60+
<a class="CodeToggler__button CodeToggler__button--main" href="#">Show Code Blocks Inline</a><br>
61+
</div>
62+
63+
<hr/>
64+
<div class="Twitter">
65+
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=gaperton&amp;show_count=false"></iframe>
66+
<br />
67+
<br />
68+
</div>
69+
</div>
70+
</div>
71+
</aside>
72+
<div class="Columns__right ">
73+
<div class="Columns__right__content">
74+
<div class="doc_content">
75+
<article class="Page">
76+
77+
<div class="Page__header">
78+
<h1>Getting Started</h1>
79+
<span style="float: left; font-size: 10px; color: gray;">
80+
Friday, May 12, 2017 4:36 PM </span>
81+
<span style="float: right; font-size: 10px; color: gray;">
82+
<a href="https://github.com/Volicon/React-MVx/blob/develop/docs/00_Getting_Started.md" target="_blank">Edit on GitHub</a>
83+
</span>
84+
</div>
85+
86+
87+
<div class="s-content">
88+
</div>
89+
90+
<nav>
91+
<ul class="Pager">
92+
<li class=Pager--prev><a href="index.html">Previous</a></li> <li class=Pager--next><a href="Overview.html">Next</a></li> </ul>
93+
</nav>
94+
</article>
95+
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
101+
102+
<!-- jQuery -->
103+
<script src="themes/daux/js/jquery-1.11.3.min.js"></script>
104+
105+
<!-- hightlight.js -->
106+
<script src="themes/daux/js/highlight.pack.js"></script>
107+
<script>hljs.initHighlightingOnLoad();</script>
108+
109+
<!-- JS -->
110+
111+
<script src="themes/daux/js/daux.js"></script>
112+
113+
<!-- Tipue Search -->
114+
<script type="text/javascript" src="tipuesearch/tipuesearch.js"></script>
115+
116+
<script>
117+
window.onunload = function(){}; // force $(document).ready to be called on back/forward navigation in firefox
118+
$(function() {
119+
tipuesearch({
120+
'base_url': ''
121+
});
122+
});
123+
</script>
124+
125+
</body>
126+
</html>

‎docs/Overview.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
5+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
6+
<head>
7+
<title>Overview - Type-R</title>
8+
<meta name="description" content="Universal state management framework" />
9+
<meta name="author" content="Vlad Balin">
10+
<meta charset="UTF-8">
11+
<link rel="icon" href="themes/daux/img/favicon-navy.png" type="image/x-icon">
12+
<!-- Mobile -->
13+
<meta name="apple-mobile-web-app-capable" content="yes" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15+
16+
<!-- Font -->
17+
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
18+
<!-- CSS -->
19+
<link href='themes/daux/css/theme-navy.min.css' rel='stylesheet' type='text/css'>
20+
<!-- Tipue Search -->
21+
<link href="tipuesearch/tipuesearch.css" rel="stylesheet">
22+
23+
<!--[if lt IE 9]>
24+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
25+
<![endif]-->
26+
</head>
27+
<body class="">
28+
29+
<header class="Navbar hidden-print">
30+
<a class="Navbar__brand" href="index.html">Type-R</a>
31+
32+
<div class="Search">
33+
<svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg>
34+
<input type="search" id="tipue_search_input" class="Search__field" placeholder="Search..." autocomplete="on" results=25 autosave=text_search>
35+
</div>
36+
</header>
37+
<div class="Columns content">
38+
<aside class="Columns__left Collapsible">
39+
<div class="Collapsible__container">
40+
<button type="button" class="Button Collapsible__trigger">
41+
<span class="Collapsible__trigger--bar"></span>
42+
<span class="Collapsible__trigger--bar"></span>
43+
<span class="Collapsible__trigger--bar"></span>
44+
</button>
45+
</div>
46+
47+
<div class="Collapsible__content">
48+
<!-- Navigation -->
49+
<ul class='Nav'><li class='Nav__item '><a href="Getting_Started.html">Getting Started</a></li><li class='Nav__item Nav__item--active'><a href="Overview.html">Overview</a></li><li class='Nav__item has-children'><a href="Record/Overview.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Record</a><ul class='Nav'><li class='Nav__item '><a href="Record/Overview.html">Overview</a></li><li class='Nav__item '><a href="Record/Record_basics.html">Record basics</a></li><li class='Nav__item '><a href="Record/Aggregation_tree.html">Aggregation tree</a></li><li class='Nav__item '><a href="Record/Transactions_and_Events.html">Transactions and Events</a></li><li class='Nav__item '><a href="Record/Validation.html">Validation</a></li><li class='Nav__item '><a href="Record/Serialization.html">Serialization</a></li><li class='Nav__item '><a href="Record/id_ and_id-references.html">id and id-references</a></li></ul></li></ul>
50+
51+
<div class="Links">
52+
<hr/>
53+
<a href="https://github.com/Volicon/React-MVx/issues" target="_blank">Help/Support/Bugs</a>
54+
<br />
55+
<a href="http://volicon.com" target="_blank">Made by Volicon (a Verizon company)</a>
56+
<br />
57+
58+
<div class="CodeToggler">
59+
<hr/>
60+
<a class="CodeToggler__button CodeToggler__button--main" href="#">Show Code Blocks Inline</a><br>
61+
</div>
62+
63+
<hr/>
64+
<div class="Twitter">
65+
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=gaperton&amp;show_count=false"></iframe>
66+
<br />
67+
<br />
68+
</div>
69+
</div>
70+
</div>
71+
</aside>
72+
<div class="Columns__right ">
73+
<div class="Columns__right__content">
74+
<div class="doc_content">
75+
<article class="Page">
76+
77+
<div class="Page__header">
78+
<h1>Overview</h1>
79+
<span style="float: left; font-size: 10px; color: gray;">
80+
Friday, May 12, 2017 4:25 PM </span>
81+
<span style="float: right; font-size: 10px; color: gray;">
82+
<a href="https://github.com/Volicon/React-MVx/blob/develop/docs/01_Overview.md" target="_blank">Edit on GitHub</a>
83+
</span>
84+
</div>
85+
86+
87+
<div class="s-content">
88+
<p>React-MVx is built around the idea of <em>universal state management</em> featuring
89+
the same technique to manage the local component state, application page state,
90+
and the global application state.</p>
91+
<p>Basic building blocks of the application architecture are:</p>
92+
<ul>
93+
<li>React-MVx Component (extended React.Component) for the view layer.</li>
94+
<li>Records and Collection (provided by Type-R data framework) for managing all kinds of an application state.</li>
95+
<li>Links for two-way data binding.</li>
96+
<li>Stores (which is the subclass of the Record and can be dynamically created) for resolving record's id-references.</li>
97+
</ul>
98+
<p>React-MVx Component uses the Record class to manage its local state. Record can consists of other records
99+
and collections, describing the data structure of arbitrary complexity. All records are serializable by default, has deeply observable changes, and supports the declarative validation.</p>
100+
<p>The behavior of record's attributes and component state/props elements is controlled with declarative <em>type annotations</em>.</p>
101+
<p>React-MVx extends React namespace and should be used instead of <code>react</code>.
102+
All class Component definitions must be preceeded with the <code>@define</code> decorator.</p>
103+
<pre><code class="language-javascript">import React, { define } from 'react-mvx'
104+
105+
@define class HelloApp extends React.Component {
106+
static state = {
107+
count : 0
108+
};
109+
110+
render(){
111+
const { state } = this;
112+
return (
113+
&lt;h1 onClick={ () =&gt; state.count++ }&gt;
114+
Hi there! { state.count }
115+
&lt;/h1&gt;;
116+
);
117+
}
118+
}
119+
</code></pre>
120+
</div>
121+
122+
<nav>
123+
<ul class="Pager">
124+
<li class=Pager--prev><a href="Getting_Started.html">Previous</a></li> <li class=Pager--next><a href="Record/Overview.html">Next</a></li> </ul>
125+
</nav>
126+
</article>
127+
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
133+
134+
<!-- jQuery -->
135+
<script src="themes/daux/js/jquery-1.11.3.min.js"></script>
136+
137+
<!-- hightlight.js -->
138+
<script src="themes/daux/js/highlight.pack.js"></script>
139+
<script>hljs.initHighlightingOnLoad();</script>
140+
141+
<!-- JS -->
142+
143+
<script src="themes/daux/js/daux.js"></script>
144+
145+
<!-- Tipue Search -->
146+
<script type="text/javascript" src="tipuesearch/tipuesearch.js"></script>
147+
148+
<script>
149+
window.onunload = function(){}; // force $(document).ready to be called on back/forward navigation in firefox
150+
$(function() {
151+
tipuesearch({
152+
'base_url': ''
153+
});
154+
});
155+
</script>
156+
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)