forked from phosphorjs/phosphorjs.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
213 lines (212 loc) · 9.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Source+Code+Pro:400,700" />
<link rel="stylesheet" href="/main.css" />
<title>Index || Phosphor</title>
</head>
<body class="ui">
<header>
<div class="container">
<a href="/" class="logo">PhosphorJS</a>
<nav>
<ul>
<li><a href="https://github.com/phosphorjs/">GitHub</a></li>
</ul>
</nav>
</div>
</header>
<div class="container main">
<div class="row">
<div class="col-3">
<nav class="navigation">
<h3>Examples</h3>
<ul>
<li>
<a href="/examples/todomvc">Phosphor + React</a>
</li>
<li>
<a href="/examples/flexbox">Phosphor + Flexbox</a>
</li>
<li>
<a href="/examples/dockpanel">DockPanel</a>
</li>
<li>
<a href="/examples/menus">Menus</a>
</li>
<li>
<a href="/examples/tabs">Tabs</a>
</li>
</ul>
<br>
<h3>API Docs</h3>
<ul>
<li>
<a href="/phosphor-arrays/api">Arrays
</a>
</li>
<li>
<a href="/phosphor-boxengine/api">Boxengine
</a>
</li>
<li>
<a href="/phosphor-boxpanel/api">BoxPanel
</a>
</li>
<li>
<a href="/phosphor-disposable/api">Disposable
</a>
</li>
<li>
<a href="/phosphor-domutil/api">Domutil
</a>
</li>
<li>
<a href="/phosphor-gridpanel/api">GridPanel
</a>
</li>
<li>
<a href="/phosphor-menus/api">Menus
</a>
</li>
<li>
<a href="/phosphor-messaging/api">Messaging
</a>
</li>
<li>
<a href="/phosphor-nodewrapper/api">NodeWrapper
</a>
</li>
<li>
<a href="/phosphor-properties/api">Properties
</a>
</li>
<li>
<a href="/phosphor-queue/api">Queue
</a>
</li>
<li>
<a href="/phosphor-sectionlist/api">SectionList
</a>
</li>
<li>
<a href="/phosphor-signaling/api">Signaling
</a>
</li>
<li>
<a href="/phosphor-splitpanel/api">SplitPanel
</a>
</li>
<li>
<a href="/phosphor-stackedpanel/api">StackedPanel
</a>
</li>
<li>
<a href="/phosphor-tabs/api">Tabs
</a>
</li>
<li>
<a href="/phosphor-widget/api">Widget
</a>
</li>
</ul>
</nav>
</div>
<div class="col-9 typography">
<h1 id="the-phosphorjs-project">The PhosphorJS Project</h1>
<h2 id="what-">What?</h2>
<p>PhosphorJS is a collection of libraries designed to make it easy to build
high-performance, pluggable, desktop-style web applications. It <strong>is not</strong>
an opinionated framework which forces a developer into a specific model of
data flow, nor does it artificially limit the developer to using only the
facilities provided by its own libraries. PhosphorJS was designed from the
start to play nicely with existing and popular web frameworks.</p>
<p>The PhosphorJS libraries cover topics including (but not limited to): message
passing, signaling, attached properties, data structures, widgets, and layouts.
Each of the libraries is a separately installable NPM package. Developers are
free to use as much or as little of PhosphorJS as suits their needs.</p>
<p>Most users will be drawn to PhosphorJS for its high performance layouts and
well structured widget hierarchy. These features allow a developer to build
desktop-like experiences which are not possible using CSS alone, and which
are not within the purview of most of today's web frameworks.</p>
<p>PhosphorJS is written entirely in <a href="https://www.typescriptlang.org">TypeScript</a>,
and is simple and easy to use from ES5, ES6 and TypeScript.</p>
<h2 id="why-">Why?</h2>
<p>The web is built on technology that is sub-optimal for modern desktop-style UI
applications. Nevertheless, the web stack is rapidly becoming <em>the</em> deployment
platform for new applications, desktop or otherwise. Several frameworks have
appeared which attempt to address the shortcomings using various techniques.
Unfortunately, these frameworks often come with an opinionated view of how
data should flow through an application and/or a rigid model of how a widget
hierarchy should be assembled. In addition to being limiting, most of these
frameworks do not leverage the concepts of desktop toolkits which have been
proven (over several decades) to be highly useful.</p>
<p>HTML and CSS were designed for documents, not applications. There are certain
classes of user interactions which are expected of production-quality desktop
applications which are impossible to implement in CSS alone. Think of tabbed
and docked panels in an IDE application. These types of interactions must be
implemented using JavaScript, and implementing them in a scalable and elegant
fashion requires a reasonable amount of architecture. This includes facilities
such as: a message-passing hierarchy, resize/attach/detach/show/hide events,
size constraint aggregation, and efficient layout computation. PhosphorJS
provides these low-level facilities that are currently missing from the web,
in a way which is flexible, unopinionated, and compatible with existing code.</p>
<p><strong>Speed Matters.</strong> In response to a user interaction, an application has ~16ms
to perform all necessary logic calculations, DOM manipulations, reflows, and
repaints, in order to maintain a 60fps refresh rate. This is easy to do for
one-off small applications, but becomes very difficult for large, multi-tab,
single-page, dense applications. PhosphorJS helps with this. It's widgets and
layouts are designed to be efficient: minimizing reflows whenever possible and
consistently achieving sub-millisecond layout times. It leaves as much of the
time-slice as possible to be used for the execution of business logic.</p>
<h2 id="how-">How?</h2>
<ul>
<li><p>PhosphorJS provides a simple and flexible Widget class which establishes a
hierarchy for message passing and DOM node manipulation. This enables the
propagation of various messages throughout the hierarchy, such as: resize,
attach, detach, show, and hide (among many others).</p>
</li>
<li><p>Once establishing resize messages which propagate reliably, it becomes
possible to implement layouts in JavaScript which would be impossible to
achieve with CSS alone. By explicitly specifying the position and size of
a node in absolute terms, the browser is able to optimize reflows so that
they are contained within the affected portion of the page. This means that
changes to one part of the application do not incur the cost of a reflow of
the entire page.</p>
</li>
<li><p>PhosphorJS recognizes that CSS is good at lots of things, and does not
prevent the developer from using it when appropriate. PhosphorJS layouts
play nicely with standard CSS layouts, and the two can be freely mixed
within a widget hierarchy.</p>
</li>
<li><p>PhosphorJS recognizes that developers have favorite frameworks that are well
suited to a particular task. A Phosphor Widget instance can play host to DOM
content generated by any other framework, and such a widget can be freely
embedded within any Phosphor widget hierarchy.</p>
</li>
<li><p>PhosphorJS provides a host of predefined widgets and layouts which are hard
to implement correctly and efficiently, such as: menus and menu bars, split
panels, and tabbed and docked panels. These make it simple to create the
rich desktop-style applications described previously.</p>
</li>
</ul>
<h2 id="can-i-use-it-now-">Can I use it now?</h2>
<p>PhosphorJS is under development at the moment. Many of the libraries listed
in the sidebar have already reached 1.0, and others (several unlisted) are in
the process of being released.</p>
</div>
</div>
</div>
<script>
// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
// (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
// m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
// })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
// ga('create', 'UA_XXXXXXXX', 'phosphor');
// ga('send', 'pageview');
</script>
</body>
</html>