-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathlearn-more.html
425 lines (412 loc) · 23.5 KB
/
learn-more.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
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
---
layout: page
title: Learn more about Grasshopper
permalink: /learn-more.html
bodyid: services
navtype: normal
---
<div id="hero">
<div class="container">
<div class="row" style="overflow:hidden;">
<div class="col-md-6 image">
<img src="images/services1.png" class="img-responsive animated fadeInUp" alt="services1" />
</div>
<div class="col-md-6 info">
<h3>Leverage the platform</h3>
<h4>Reap the rewards</h4>
<p>
You will find that many concepts that modern applications need are built right into Grasshopper.
When you use the framework to the fullest extent, you are only limited by your own creativity.
</p>
</div>
</div>
</div>
</div>
<div id="grid-second" class="container">
<div class="row">
<div class="col-md-12">
<h3 style="margin-bottom: 15px;">Fast, scalable platform written in JavaScript for Node.js</h3>
<p>
The Grasshopper stack is modular and built on top of modern web developement technologies. It was written entirely in JavaScript and it
uses a NoSQL database system. File storage can either be local or in the cloud on a CDN.
</p>
<p>
Grasshopper will run in any environment that supports <a href="http://nodejs.org" target="_blank">Node.js</a> and <a href="http://www.mongodb.org/" target="_blank">MongoDB</a>. This is great news for users
hosting the application themselves or using services like <a href="http://heroku.com" target="_blank">Heroku</a>, <a href="https://www.engineyard.com/" target="_blank">Engine Yard</a> or any other <a href="http://en.wikipedia.org/wiki/Platform_as_a_service" target="_blank">PaaS</a> (Platform as a Service).
</p>
<p>Every implementation of the system is different but keep reading and you will start to get a sense of how the project is organized.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 style="margin-bottom: 15px;"><a name="stack"></a>Grasshopper Stack</h3>
</div>
</div>
<div class="row">
<div class="col-md-8">
<img src="images/stack.png" style="width:600px;" />
</div>
<div class="col-md-4">
<img src="images/nodejs.png" />
<img src="images/mongo-logo.png" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 style="margin-bottom: 15px;"><a name="requirements"></a>Requirements</h3>
<p>The Grasshopper framework uses all of the below software/services:</p>
<ul>
<li><a href="http://git-scm.com/" target="_blank">Git</a> version control system.</li>
<li><a href="Node.js" target="_blank">http://nodejs.org/download/</a>, a platform for easily building fast, scalable network applications.</li>
<li><a href="http://www.mongodb.org/" target="_blank">MongoDB</a>, an open-source document database that Grasshopper uses for data storage.</li>
<li><a href="http://gruntjs.com/" target="_blank">Grunt</a>, the JavaScript task runner</li>
<li><a href="http://bower.io/" target="_blank">bower</a>, a package manager for the web</li>
<li><a href="http://sass-lang.com" target="_blank">Sass</a>, Syntactically Awesome Style Sheets.</li>
<li>Sass Globbing Plugin (used to compile the admin), Sass globbing allows you to import many sass or scss files in a single import statement.</li>
<li>Sass CSS Importer (used to compile the admin): The Sass CSS Importer allows you to import a CSS file into Sass.</li>
<li>Access to local file system or CDN like <a href="http://aws.amazon.com/s3/" target="_blank">Amazon S3</a>.</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 style="margin-bottom: 15px;">Components</h3>
<p>
The Grasshopper system includes 3 parts, Core, API and Admin. Most deployments include all 3 of these parts and they build on top of each other. Core can run by itself, API is an HTTP wrapper of core and the admin uses the API. You can read more detail about each of these parts in the tabs below.
</p>
<p> </p>
</div>
</div>
<div class="col-md-12 tabs-wrapper">
<ul class="nav nav-tabs">
<li class="active"><a href="#admin" data-toggle="tab">Grasshopper Admin</a></li>
<li><a href="#api" data-toggle="tab">Grasshopper API</a></li>
<li><a href="#core" data-toggle="tab">Grasshopper Core</a></li>
<li><a href="#proxy" data-toggle="tab">Customer Proxy</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="admin">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 style="margin-bottom: 15px;">Grasshopper Admin</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="images/screen3.jpg" />
</div>
<div class="col-md-4">
<img src="images/screen2.jpg" />
</div>
<div class="col-md-4">
<img src="images/screen1.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="container" style="padding-bottom: 15px;">
<div class="row features">
<div class="col-md-12 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info">
<p>Fully functional administration application without running scaffolding commands or writting any code. Flexible and extensible environment.</p>
</div>
</div>
</div>
<div class="row features">
<div class="col-md-12 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info">
<p>Manage your content types and data entry forms using the provided application without writing any code. Quickly change the way your application works and the data-schema easily and effectively.</p>
</div>
</div>
</div>
<div class="row features">
<div class="col-md-12 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info">
<p>Easily extend the administration application to your project's needs without modifying the core source code.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row features">
<div class="col-md-12 feature">
<p><a href="documentation.html">See documentation</a> for more information.</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="core">
<div class="row">
<div class="col-md-12">
<h4 style="margin-bottom: 15px;">Grasshopper Core</h4>
</div>
</div>
<p>
Core is responsible for all the heavy lifting of the framework. Core includes methods for managing users
(data and access), content types, content, nodes (or folders) and assets.
</p>
<div class="container">
<div class="row">
<div class="col-md-12">
<h5 style="margin-bottom: 15px;">Users</h5>
<p>
Membership is a critical component to almost all applications. Grasshopper has the concept of membership built-in. Not only
does Grasshopper handle logins and user data (fully extensible), but it contains a robust permissions mechanism that allows you
to protect data based off of the application's requirements.
</p>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info">
<p>Support for basic authentication as well as 3rd party logins like Google and others.</p>
</div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info">
<p>User roles and permissions (global and folder level)</p>
</div>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info">
<p>Manages custom user profile data</p>
</div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info">
<p>Emitting events when actions are taken on users</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 style="margin-bottom: 15px;">Content Types === Schema</h5>
<p>
All content in Grasshopper is <code>typed</code>, meaning that it has a definition. Think of content types
like a database table schema, more or less, that is what they are. All <code>content types</code> contain a
a few metadata elements and a collection of <code>fields</code>. Fields are specific containers that you want to
store data (think of a database column). Values for fields can be a single value (number, string), a collection of values
(one-to-many), embeded content type, or a collection of embeded content types. IMPORTANT: <code>Content Types</code> define the
types of data that you can store in your application, they are NOT the actual data.
</p>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" />
<div class="info">
<p>Leverage the power of NoSQL, fully supports "one-to-many" and nested objects</p>
</div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" />
<div class="info">
<p>Fields can have default values and can also be required</p>
</div>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Fields can contain validation</p></div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Fields can nest other content types</p></div>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Fields can support a collection of values</p></div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Fields can reference other content objects</p></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 style="margin-bottom: 15px;">Nodes === Folders</h5>
<p>
Nodes provide you the ability to organize your content into logical groups. Grouping content
into these collections does a couple of things for you. #1 content can be queried based off of the
node it belongs to. #2 it makes it really nice to work with the data within the admin.
Many CMSs just list out all of the content that matches a content type but Grasshopper allows you to take
control of how many folders you can create and what kind of content will be stored within those folders.
</p>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" />
<div class="info">
<p>Organize your data so that it makes sense for the content administrators, not just the DBA</p>
</div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" />
<div class="info">
<p>Each node can be assigned permissions, perfect for sandboxing data in your application</p>
</div>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Content can be queried by node</p></div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Unlimited amount of nodes allowed</p></div>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Nodes can store more than one type of content</p></div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Assets can be assigned to a node</p></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 style="margin-bottom: 15px;">Content === Data</h5>
<p>
Content is what Grasshopper is all about. At the heart of it all, Grasshopper stores, manipulates, organizes and queries content.
A content's schema is determined by which <code>Content Type</code> that is associated with it.
</p>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" />
<div class="info">
<p>New content schemas can be created without writing any code</p>
</div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" />
<div class="info">
<p>Content can be organized into groups without writing any code</p>
</div>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>The SDK contains a very easy query API that gives you a super intuitive method of retrieving content</p></div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Content can contain references to other content</p></div>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Content can be a very complex object, think infinitely nestable</p></div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" alt="globe">
<div class="info"><p>Content can contain collections, single values, </p></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 style="margin-bottom: 15px;">Assets</h5>
<p>Data is great, but many applications require binary assets. Grasshopper allows you to fully
manage the assets that your application uses.</p>
</div>
</div>
<div class="row features">
<div class="col-md-6 feature">
<img src="images/checkmark.png" />
<div class="info">
<p>
Grasshopper allows you to store assets in nodes. You can either query out the assets that
are in a node, or you can link an asset to a piece of content.
</p>
</div>
</div>
<div class="col-md-6 feature">
<img src="images/checkmark.png" />
<div class="info">
<p>Store your files either locally or publish to a CDN. Amazon S3 integration is included and any CDN that provides an API is fully compatible.</p>
</div>
</div>
</div>
<div class="row features">
<div class="col-md-12 feature">
<p><a href="documentation.html">See documentation</a> for more information.</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="api">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 style="margin-bottom: 15px;">Grasshopper API</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Grasshopper API is an HTTP wrapper of core designed to run on HTTP or HTTPS protocols.
The API is required if you intend on using Grasshopper Admin.
</p>
<p><a href="documentation.html">See documentation</a> for more information.</p>
<p>
<img src="images/screen4.jpg" />
</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="proxy">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 style="margin-bottom: 15px;">Customer Proxy</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
The default Grasshopper end points that come out of the box are great, but most of us know that when you are creating a large
application default functionality doesn't cut it.
</p>
<p>
There are external demands that force us to write many hacks and work-arounds in most CMSs. Grasshopper handles customization a bit
differently. If you need custom end points for your application, it's super easy to create them. We let you "proxy" the Grasshopper API.
</p>
<p>
Since the API is built using the <a href="http://expressjs.com/" target="_blank">express</a> web application framework for node. Sharing routes
between your custom application and Grasshopper is trivial.
</p>
</div>
</div>
<div class="row features">
<div class="col-md-12 feature">
<p><a href="documentation.html">See documentation</a> for more information.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>