-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
379 lines (343 loc) · 18.9 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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Sapling - Faster-than-light web development</title>
<meta name="description" content="A rapid Node.js framework for faster-than-light development of websites, web apps and APIs.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/vlu8wla.css">
<link rel="stylesheet" href="/build/css/main.css?v=2.0.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png?v=5AP4Ke427Y">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png?v=5AP4Ke427Y">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png?v=5AP4Ke427Y">
<link rel="manifest" href="/site.webmanifest?v=5AP4Ke427Y">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg?v=5AP4Ke427Y" color="#4ecf89">
<link rel="shortcut icon" href="/images/favicon.ico?v=5AP4Ke427Y">
<meta name="msapplication-TileColor" content="#4ecf89">
<meta name="theme-color" content="#4ecf89">
<meta name="image" content="https://www.saplingjs.com/images/sapling.jpg">
<meta itemprop="name" content="Sapling">
<meta itemprop="description" content="A rapid Node.js framework for faster-than-light development of websites, web apps and APIs.">
<meta itemprop="image" content="https://www.saplingjs.com/images/sapling.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Sapling">
<meta name="twitter:description" content="A rapid Node.js framework for faster-than-light development of websites, web apps and APIs.">
<meta name="og:title" content="Sapling">
<meta name="og:description" content="A rapid Node.js framework for faster-than-light development of websites, web apps and APIs.">
<meta name="og:image" content="https://www.saplingjs.com/images/sapling.jpg">
<meta name="og:url" content="https://www.saplingjs.com">
<meta name="og:site_name" content="Sapling">
<meta name="og:locale" content="en_GB">
<meta name="og:type" content="website">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div id="app">
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/images/logo.svg" alt="Sapling" />
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="main-navbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="main-navbar" class="navbar-menu">
<div class="navbar-start">
<a href="#features" class="navbar-item">
Features
</a>
<a href="#faq" class="navbar-item">
FAQ
</a>
<a href="/docs" class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a href="https://github.com/saplingjs/sapling/issues" target="_blank" rel="noopener" class="navbar-item">
Report an issue
</a>
<a href="#premium" class="navbar-item">
Premium support
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="github-button" href="https://github.com/saplingjs/sapling" target="_blank" rel="noopener" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="View saplingjs/sapling on GitHub">View on GitHub</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-medium is-light is-bold">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<bonsai></bonsai>
</div>
<div class="column">
<h1 class="title">A Node.js framework for <em>faster-than-light</em> development.</h1>
<h2 class="subtitle"><strong>Sapling</strong> is a Node.js framework for building websites, web apps and APIs as fast as you can imagine them. With unrivalled speed of development, you can prototype quickly, iterate with ease, and deploy the same day. Zero code, zero config – unless you want to.</h2>
<table class="table">
<tbody>
<tr>
<th>Quick start</th>
<td><code>npm i -g @sapling/cli && sapling create</code></td>
</tr>
<tr>
<th>DIY</th>
<td><code>npm i --save @sapling/sapling</code> & <a href="/docs">Docs</a></td>
</tr>
<tr>
<th> </th>
<td><a class="github-button" href="https://github.com/saplingjs/sapling" target="_blank" rel="noopener" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="View saplingjs/sapling on GitHub">View on GitHub</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="content has-text-centered">
<h1 class="title">Unmatched speed of development.</h1>
<p>Sapling is designed for <strong>faster-than-light development</strong>. There is zero mandatory configuration or boilerplate code. UIs and forms simply come alive as you write them. All the common SaaS features are built in and fully configurable.</p>
<demo></demo>
</div>
</div>
</section>
<section id="features" class="section is-light">
<div class="container">
<h1 class="title has-text-centered">All the SaaS features you hate to write.</h1>
<p class="subtitle has-text-centered">Sapling will have all of the usual SaaS features nobody likes to write, built right in.</p>
<div class="columns mt-6 is-centered">
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-user"></i></div>
<h3 class="title is-5 has-text-success">Authentication</h3>
<p>Login, registration, forgot password, change password, all handled natively out of the box.</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-envelope"></i></div>
<h3 class="title is-5 has-text-success">Email notifications</h3>
<p>Send users automated notifications and messages via email, with easy styling and testing.</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-folder-upload"></i></div>
<h3 class="title is-5 has-text-success">File upload</h3>
<p>Handle user-uploaded files with ease, including image thumbnails and S3 storage integration out of the box.</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-brackets-curly"></i></div>
<h3 class="title is-5 has-text-success">Backend & API</h3>
<p>Sapling features a zero-code dynamic data backend which can double up as an API for a mobile app.</p>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-wallet"></i></div>
<h3 class="title is-5 has-text-success">One-off payments</h3>
<div class="tag-block is-info">Coming soon</div>
<p>Sapling integrates with Stripe, and handles payments, paywalls, credit card details, taxes, order histories, PDF invoices and more.</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-credit-card"></i></div>
<h3 class="title is-5 has-text-success">Recurring payments</h3>
<div class="tag-block is-info">Coming soon</div>
<p>Plans, subscriptions, upgrading, downgrading, prorating, free trials, all out of the box and ready to go.</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-users"></i></div>
<h3 class="title is-5 has-text-success">Teams</h3>
<div class="tag-block is-info">Coming soon</div>
<p>Allow users to create and manage teams, with invites, permission levels and admin tools built in (and yes, there's also team billing).</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-plug"></i></div>
<h3 class="title is-5 has-text-success">Websockets</h3>
<div class="tag-block is-info">Coming soon</div>
<p>Sapling can also run a websocket server, creating real-time interactions with zero configuration.</p>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-bell"></i></div>
<h3 class="title is-5 has-text-success">Push & SMS notifications</h3>
<div class="tag-block is-info">Coming soon</div>
<p>Send users automated notifications via push and SMS just as easily as sending email.</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-fingerprint"></i></div>
<h3 class="title is-5 has-text-success">2FA</h3>
<div class="tag-block is-info">Coming soon</div>
<p>Two-factor authentication, with QR codes, recovery codes, setup, enforcement, app specific passwords and more.</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-user-secret"></i></div>
<h3 class="title is-5 has-text-success">User impersonation</h3>
<div class="tag-block is-info">Coming soon</div>
<p>Securely authenticate as any of your users to immediately see your app through their eyes.</p>
</div>
</div>
<div class="column">
<div>
<div class="feature-icon"><i class="far fa-2x fa-globe-stand"></i></div>
<h3 class="title is-5 has-text-success">Localisation</h3>
<div class="tag-block is-info">Coming soon</div>
<p>Translations, number and date formats, and everything else for a fully internationalisable app.</p>
</div>
</div>
</div>
</div>
</section>
<section id="creds" class="section is-light">
<div class="container">
<h1 class="title has-text-centered">All the other good stuff, too.</h1>
<p class="subtitle has-text-centered">Despite the focus on prototyping and speed of development, Sapling is fully production-ready, too.</p>
<div class="columns mt-6 is-centered">
<div class="column is-3">
<div>
<div class="feature-icon"><i class="far fa-2x fa-expand-alt"></i></div>
<h3 class="title is-5 has-text-success">Scalable</h3>
<p>Native cluster support for utilising all CPU cores, and support for load balancing.</p>
</div>
</div>
<div class="column is-3">
<div>
<div class="feature-icon"><i class="far fa-2x fa-lock-alt"></i></div>
<h3 class="title is-5 has-text-success">Secure</h3>
<p>Robust permission structure, and a production mode that trades some of the development speed for completeness.</p>
</div>
</div>
<div class="column is-3">
<div>
<div class="feature-icon"><i class="far fa-2x fa-box-full"></i></div>
<h3 class="title is-5 has-text-success">Unopinionated</h3>
<p>Use any database system, templating language, and frontend stack you like.</p>
</div>
</div>
</div>
</div>
</section>
<section id="faq" class="section">
<div class="container">
<h1 class="title has-text-centered">Your grave concerns.</h1>
<p class="subtitle has-text-centered">Rightly you might feel skeptical. Here are the common "but"s and our take on them.</p>
<div class="columns mt-6">
<div class="column">
<div class="content">
<h2 class="title is-5 has-text-success">How can all the forms work with no backend code?</h2>
<p>Sapling's dynamic data backend figures out what to do based on the type of request it receives to the built-in <code>/data</code> route. It acts as a lightweight wrapper for abstract CRUD operations;</p>
<ul>
<li><code>GET /data/posts</code> returns all records in the collection <strong>posts</strong></li>
<li><code>GET /data/posts/type/text</code> returns records in the collection <strong>posts</strong>, where the value of <strong>type</strong> is <strong>"text"</strong></li>
<li><code>POST /data/posts</code> creates a new record in the collection <strong>posts</strong></li>
<li><code>POST /data/posts/_id/1</code> modifies any records in the collection <strong>posts</strong>, where the value of <strong>_id</strong> is <strong>1</strong></li>
<li><code>DELETE /data/posts</code> deletes all records in the collection <strong>posts</strong></li>
<li><code>DELETE /data/posts/_id/1</code> deletes any records in the collection <strong>posts</strong>, where the value of <strong>_id</strong> is <strong>1</strong></li>
</ul>
<p>As such, the second URL segment is the collection, and if the third and fourth segments are provided, they will act as key and value for a where clause, respectively. The method of the HTTP request determines what is done with the matching records. In cases of POST requests, any and all POST values received are saved into a new record or any matching records.</p>
<p><a href="/docs#/data">Learn more about the data API <i class="far fa-arrow-right"></i></a></p>
<h2 class="title is-5 has-text-success">Oh wow. Putting this on production would be <em class="has-shake">insanity!</em></h2>
<p>Absolutely, and Sapling's default configuration is indeed not meant for production use, but rather, optimised for rapid prototyping.</p>
<p>Sapling has robust support for built-in data and request validation, as well as access control for each method-route combination. By default, these are optional. However, in Sapling's production mode, both of these <strong>must</strong> be defined, and nothing is ever implicitly saved into the database.</p>
<p><a href="/docs#/production">Learn more about production mode <i class="far fa-arrow-right"></i></a></p>
<p><a href="/docs#/models">Learn more about data models <i class="far fa-arrow-right"></i></a></p>
</div>
</div>
<div class="column">
<div class="content">
<h2 class="title is-5 has-text-success">This must be some low-code framework for beginners, with no options for advanced development.</h2>
<p>Just because you don't <em>need</em> to write code to do basic CRUD operations with Sapling, doesn't mean you <em>can't</em> write code when you actually need to.</p>
<p>When you need to write advanced functionality, Sapling will step aside, and let you handle requests just like you would with any other server framework. Organise and write your code however you wish. All of Sapling's internals methods are available to you - though you don't need to use them, if you don't want to.</p>
<p><a href="/docs#/hooks">Learn more about hooks <i class="far fa-arrow-right"></i></a></p>
<h2 class="title is-5 has-text-success">This doesn't sound very robust – this would never work for my team of 250 devs building custom enterprise banking solutions.</h2>
<p>And that's fine. No tool is right for every job.</p>
<p>Where Sapling shines are situations where speed of development is critical, or available manpower is limited: MVPs, hackathons, prototypes, proofs of concept, mockups, side hustles, personal projects, one-off campaigns, and so on.</p>
<p>Get off the ground quickly by never having to write another login form, or worrying about backends for all the basic "put thing in database" stuff – spend 100% of your time on the things that actually butter your bread. And if you ever feel your project has "graduated" out of Sapling, all your custom-developed business logic remains easily portable to any other JS framework.</p>
<p><a href="/docs#/porting">Learn more about code portability <i class="far fa-arrow-right"></i></a></p>
<h2 class="title is-5 has-text-success">I don't like MongoDB or Nunjucks or Vue.</h2>
<p>You don't have to! Sapling uses these three by default, but that's all they are – defaults. Each functionality (database, templating, frontend framework) is its own separate package, which you can replace or uninstall at any time.</p>
<p>Sapling is fairly hands-off with the frontend stack, so you are free to use whatever frontend build pipelines you prefer.</p>
<p>Database and templating engines connect to Sapling via an abstraction layer called a <em>driver</em>. Chances are, there's already a driver for your favourite database or templating engine – and if not, you can easily write your own.</p>
<p><a href="/docs#/drivers">Learn more about drivers <i class="far fa-arrow-right"></i></a></p>
</div>
</div>
</div>
</div>
</section>
<section class="section is-light">
<div class="container">
<h1 class="title">Quick start.</h1>
<div class="columns mt-6">
<div class="column">
<div class="content">
<h3 class="title is-5 has-text-success">Install the CLI</h3>
<p>Run <code>npm install -g @sapling/cli</code> to install the command line tool globally. The command line tool helps you create and manage Sapling projects.</p>
</div>
</div>
<div class="column">
<div class="content">
<h3 class="title is-5 has-text-success">Create your first project</h3>
<p>Run <code>sapling create</code> to run a wizard for creating a new blank project. It will automatically create the files and folders needed, and install any dependencies.</p>
</div>
</div>
<div class="column">
<div class="content">
<h3 class="title is-5 has-text-success">Start developing</h3>
<p>Navigate to the folder and run <code>sapling run</code> to turn on the server. Read the <a href="/docs">documentation</a> to learn the basics of Sapling.</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Sapling</strong> by <a href="https://groenroos.fi" target="_blank" rel="noopener">Oskari Groenroos</a>. Licensed under
<a href="https://opensource.org/licenses/MPL-2.0" target="_blank" rel="noopener">MPL-2.0</a>.
</p>
</div>
</footer>
</div>
<script src="https://kit.fontawesome.com/b8ff1e101d.js" crossorigin="anonymous"></script>
<script src="/build/js/main.js?v=2.0.0"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>