-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-fragment.html
233 lines (204 loc) · 10.8 KB
/
index-fragment.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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<section class="home-screen">
<div class="hero">
<div class="left">
<img class="logo-icon" src="styles/images/aurelia-icon.svg">
</div>
<div class="right">
<h2 class="aurelia">Aurelia</h2>
<h1>
Simple.<br>Powerful.<br>Unobtrusive.
</h1>
<p>
<a class="start" href="/docs/tutorials/creating-a-todo-app">GET STARTED</a>
<a class="github" href="https://github.com/aurelia/framework" target="_blank" style="background: #1e1e1e; color: white">
<svg aria-labelledby="simpleicons-github-dark-icon" lang="" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-github-icon" lang="en">GitHub Dark icon</title><path fill="white" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
GITHUB</a>
</p>
</div>
</div>
<section class="feature-zone">
<div class="feature-header">
<h1>Why Aurelia?</h1>
<h2>Join thousands creating next-generation apps.</h2>
</div>
<div class="features">
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h3 class="feature-name">Easy to Learn</h3>
<p class="feature-description">
Aurelia's standards-based, unobtrusive style makes it the only
framework that empowers you to build components using vanilla JavaScript or TypeScript. If you know modern JS and HTML,
there's little more to learn to build even the most complex apps.
</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">High Performance</h2>
<p class="feature-description">
At the core of Aurelia is a high-performance, reactive system,
capable of batching DOM updates in a way that leaves other
frameworks, and their virtual DOMs, in the dust. Experience consistent, scalable performance, no matter how complex your UI.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Extensive Ecosystem</h2>
<p class="feature-description">
State management, internationalization and validation - all official plugins from the core team. CLI, VS Code plugin, and Chrome debugger - optional tools to enhance development. Aurelia is not just a framework, but a powerful platform and ecosystem, designed to ensure your rapid success.
</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Reactive Binding</h2>
<p class="feature-description">
Aurelia enables powerful reactive binding to any object. By using adaptive techniques Aurelia selects the most efficient way to observe each property in your model and automatically syncs your UI and your state with best-in-class performance.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Simple Testing</h2>
<p class="feature-description">
By combining modern JS modules with an unobtrusive
approach, Aurelia makes unit testing as simple as testing
vanilla JS. Need to write integration tests? A powerful Dependency Injection Container and testing library make it quick and easy. You benefit from highly maintainable and longer-lived apps.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Unmatched Extensibility</h2>
<p class="feature-description">
Nothing in the industry can match Aurelia's extensibility. You can create custom elements, add custom attributes to existing elements, control template generation, customize template syntax, create new reactive binding types, extend the DI, and just about anything else you can think of.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Effortless Coding with Conventions</h2>
<p class="feature-description">
Conventions let you focus on your code and your business logic. Aurelia stands out as the only framework today that situates your code at the center of your app, rather than the framework. Don't like the conventions? Plug in your own or drop them altogether. You are in control.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Routing, Composition & Progressive Enhancement</h2>
<p class="feature-description">
Leverage Aurelia's advanced client-side router with its pluggable pipeline and child routers. Don't need a router but need dynamic, data-driven UI composition? We do that too. Have a legacy app? Aurelia's progressive enhancement and script-tag build make it easy to incrementally adopt too.</p>
</div>
</div>
</div>
</section>
<section class="feature-zone article-group-root sandbox-zone">
<div class="feature-header">
<h1>See It in Action</h1>
<h2>The simplicity, power, and unobtrusiveness of Aurelia on display.</h2>
</div>
<div class="groups">
<div class="group">
<div class="group-summary">
<div class="group-header">
<h2 class="group-name">A Simple Component</h2>
</div>
<p class="group-description">
Building a component with Aurelia is as simple as creating a
vanilla JavaScript or TypeScript class with normal properties and methods.
</p>
</div>
<div class="group-details">
<au-sandbox src="https://codesandbox.io/embed/849oxmjm82?autoresize=1&hidenavigation=1&module=/src/app.js,/src/app.html&editorsize=60&codemirror=1"></au-sandbox>
</div>
</div>
<div class="group">
<div class="group-summary">
<div class="group-header">
<h2 class="group-name">Reactive Binding</h2>
</div>
<p class="group-description">
Aurelia's reactive binding system knows exactly what changes and when it changes. It uses this knowledge to update your UI in the most efficient way possible.
</p>
</div>
<div class="group-details">
<au-sandbox src="https://codesandbox.io/embed/24mo8975oj?autoresize=1&hidenavigation=1&module=/src/app.js,/src/app.html&editorsize=60&codemirror=1"></au-sandbox>
</div>
</div>
<div class="group">
<div class="group-summary">
<div class="group-header">
<h2 class="group-name">An Application</h2>
</div>
<p class="group-description">
By using simple classes with properties and methods, we can assemble a full application. This Todo example uses a vanilla JS array to track a list of todos. It also tracks the text you enter to create new todos. Despite the fact that this is a simple app, the basic vanilla JS patterns shown here can scale to apps containing hundreds of thousands of lines of code.
</p>
<a class="group-learn" href="docs/tutorials/creating-a-todo-app">Read the Todo App Tutorial ￫</a>
</div>
<div class="group-details">
<au-sandbox src="https://codesandbox.io/embed/ppmy26opw7?autoresize=1&hidenavigation=1&module=/src/app.js,/src/app.html&editorsize=60&codemirror=1"></au-sandbox>
</div>
</div>
</div>
</section>
<section class="feature-zone">
<div class="feature-header">
<h1>Open Collective</h1>
<h2>Proud financial backers of Aurelia.</h2>
</div>
<div class="feature-header" style="border-bottom: none; margin-bottom: 0;; margin-top: 48px">
<h2>Gold Sponsors</h2>
</div>
<div class="features" style="justify-content: center;">
<a href="https://www.hogia.com/" title="Hogia" style="margin: 12px">
<img src="./styles/images/logos/hogia.svg" style="height: 128px">
</a>
</div>
<div class="feature-header" style="border-bottom: none; margin-bottom: 0; margin-top: 48px">
<h2>Silver Sponsors</h2>
</div>
<div class="features" style="justify-content: center;">
<a href="https://www.movavi.com/screen-recorder" title="Movavi - Screen Recorder" style="margin: 12px">
<img src="./styles/images/logos/movavi-screen-recorder.svg" style="height: 128px">
</a>
</div>
<!-- <div class="features" style="justify-content: center;">
<a href="https://www.haselt.com/" title="Haselt" style="margin: 12px">
<img src="./styles/images/logos/haselt.png" style="height: 128px">
</a>
</div>
<div class="features" style="justify-content: center;">
<a href="https://www.smbsol.com/" title="Symbiosys" style="margin: 12px">
<img src="./styles/images/logos/symbiosys.jpeg" style="height: 128px">
</a>
</div> -->
<div class="feature-header" style="border-bottom: none; margin-bottom: 0; margin-top: 48px">
<h2>Bronze Sponsors</h2>
</div>
<div class="features" style="justify-content: center;">
<iframe frameborder="0" style="margin: 0; padding: 0; border: none; width: 1024px;
height: 256px;" src="https://opencollective.com/aurelia/tiers/bronze.svg?avatarHeight=64&button=false&width=1024"></iframe>
</div>
<div class="feature-header" style="border-bottom: none; margin-bottom: 0; margin-top: 48px">
<h2>Wood Sponsors</h2>
</div>
<div class="features" style="justify-content: center;">
<img src="https://opencollective.com/aurelia/tiers/wood.svg?avatarHeight=32&button=false&width=512" />
</div>
<div class="features" style="justify-content: center;">
<a class="become-a-sponsor" href="https://opencollective.com/aurelia">Become a Sponsor!</a>
</div>
</section>
</section>