/
index.html
180 lines (153 loc) · 8.69 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
---
layout: default
title: BladeRunnerJS (BRJS) - Divide & conquer complex web apps
template: home
---
<div class="brjs-jumbo">
<div class="container intro">
<div class="row">
<div class="col-lg-10 col-md-offset-1">
<a href="/" class="active clear-link"><img src="/img/bladerunner-js-white-trans-lrg.png" width="555" alt="BladeRunnerJS logo" class="main-logo-img"></a>
<h1>Divide & conquer complex web apps</h1>
<p class="overview">
<strong>BladeRunnerJS</strong> (BRJS) is an open source development toolkit and framework for modular construction of large single-page HTML5 apps. It consists of a set of conventions, supporting tools and micro-libraries that make it easier for teams to develop, test, deploy and maintain complex JavaScript apps.
</p>
<p><a class="btn brjs-btn btn-large btn-lg btn-success btn-home" href="/docs/use/getting_started/">Get started</a></p>
</div>
</div>
</div>
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row primary-features">
<div class="col-lg-4">
<img src="/img/blades-featurette.png" height="160" alt="Blades">
<h2 title="modular development using Blades">Blades</h2>
<p>A <strong>Blade</strong> is a module that encapsulates all the required resources – JavaScript, HTML, CSS, XML, images, etc – to implement a high level feature within an app.</p>
<p>For example, a blade might implement a map UI, a chat window, a charting module or an alerting mechanism. A blade usually corresponds to a particular area of the display.</p>
<!-- <div><a class="btn btn-primary" href="#">View details »</a></div> -->
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img src="/img/workbenches-featurette.png" height="160" alt="Workbenches">
<h2>Workbenches</h2>
<p><strong>Workbenches</strong> allow Blades to be developed, debugged and run independently of the application.</p>
<p><strong>Workbench Tools</strong> allow you to interact with the Blade through stubbed services and the EventHub. For example, you can view your Blade in different states by sending it mock events via a mock events Workbench Tool.</p>
<!-- <div><a class="btn btn-primary" href="#">View details »</a></div> -->
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img src="/img/code-featurette.png" height="160" alt="Clean Code">
<h2>Focus on Features</h2>
<p>With BRJS <strong>the first line of code you write is feature code</strong>. No need to setup and configure a development environment, build processes or spend time evaluating and integrating libraries your app will use.</p>
<p>BRJS comes with a proven set of development tools and micro libraries to let you focus on writing application functionality. Of course, if you want to modify the setup, you can.</p>
<!-- <div><a class="btn btn-primary" href="#">View details »</a></div> -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</div>
<!-- CALL TO ACTION -->
<div class="container call-to-action">
<div class="row">
<div class="col-lg-6 right">
Take a look at the <a href="/docs/use/getting_started" class="btn brjs-btn btn-success btn-home-cta">Getting Started Guide</a>
</div>
<div class="col-lg-6 left">
or {% include register_form.html %}
</div>
</div>
</div><!-- /.container -->
<div class="container marketing">
<div class="row secondary-features">
<h2>More Features & Concepts</h2>
<div class="col-lg-4">
<h3>Scaffolding</h3>
<p>Build out the structure of your app quickly and efficiently using the special BRJS scaffolding feature. Create Apps, Blades, BladeSets, Aspects, Classes, Interfaces, Tests and more via the CLI or, even more easily via the web dashboard.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h3>Dependency Analysis</h3>
<p>The smart BRJS bundling system analyzes your code down to the last colon and ensures that only the JavaScript files that are used within your application are bundled during the build and deployment steps. Saves you time, and makes your build even faster!</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h3>Scale to Multiple Teams</h3>
<p>One of the main benefits of using BRJS is that is ensures your application will scale to multiple teams. By seperating functionality into Blades and libraries, and by using the EventHub and Services, it massively reduces the likelihood of feature incompatibility and code conflicts.</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<div class="row secondary-features">
<div class="col-lg-4">
<h3>Efficient UI Testing</h3>
<p>When developing complex UIs you can end up with several hundred detailed behavioural tests. By using MVVM within a BRJS application you can test the UI via the "view model", without having to touch the DOM. Hundreds of UI tests can be executed in minutes.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h3>Web Dashboard</h3>
<p>Not everybody wants to spend all their time on the command line. So, BRJS ships with a web dashboard which offers most of the functionality that the CLI offers via a simple web user interface that is super-efficient and most importantly easy for everyone to use.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h3>Plugins</h3>
<p>BRJS gives you everything you need out of the box. However, it's great to be able to extend & customise functionality to meet different needs. Plugins provide a framework to extend the BRJS toolkit with your own commands, file transforms, bundling and minimization strategies & more.</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
<!-- CALL TO ACTION -->
<div class="container call-to-action github">
<div class="row">
<div class="col-lg-2 right">
<img src="/img/github-mark-white.png" height="65" class="github-mark" />
</div>
<div class="col-lg-10 left">
<a href="{{ site.social.github_link }}" class="btn brjs-btn btn-success btn-home">Get involved</a> with <img src="/img/bladerunner-js-white-trans.png" height="45" class="brjs-logo" /> on <img src="/img/github-logo-white.png" height="45" class="github-logo" />
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
<div class="container content">
<div class="row home-get-started">
<div class="col-lg-6 explore">
<h3>Documentation</h3>
<p>
Find out more about BRJS in the <em>work in progress</em> documentation.
</p>
<p>
Explore the concepts:
</p>
<ul>
<li><a href="/docs/concepts/blades">Blades</a></li>
<li><a href="/docs/concepts/workbenches">Workbenches</a></li>
<li><a href="/docs/concepts/workbench_tools">Workbench Tools</a></li>
<li><a href="/docs/concepts/aspects">Aspects</a></li>
</ul>
<p>
Discover how the BRJS coding conventions help teams work in a scalable way:
</p>
<ul>
<li><a href="/docs/concepts/classes">Classes</a></li>
<li><a href="/docs/concepts/interfaces">Interfaces</a></li>
<li><a href="/docs/concepts/services">Services</a></li>
<li><a href="/docs/concepts/service_registry">ServiceRegistry</a></li>
<li><a href="/docs/concepts/event_hub">EventHub</a></li>
</ul>
<p>
Or, find out how to extend BRJS by writing your own plugins:
</p>
<ul>
<li><a href="/docs/extend/command_plugin_tutorial">CommandPlugin</a></li>
<li><a href="/docs/extend/model_observer_plugin_tutorial">ModelObserverPlugin</a></li>
</ul>
<p>And checkout the <a href="/docs/roadmap/">Roadmap</a> to see what's coming up.</p>
<p>Still got some questions, have a look at the <a href="/docs/reference/faq/">FAQ</a>.</p>
<a href="/docs/concepts/" class="cta-round">Explore</a>
</div>
<div class="col-lg-6 get-started">
<h3>Get Started</h3>
<p>Create your BRJS app:</p>
<pre><code>$ ./brjs create-app brjs-todo brjstodo
Placeholder jsdoc generated for app 'brjs-todo'.
Successfully created new app 'brjs-todo' /brjs-apps/brjs-todo
Successfully deployed 'brjs-todo' app</code></pre>
<p>Start the development server:</p>
<pre><code>$ ./brjs serve
BladeRunnerJS server starting
Application server started on port 7070
BladerunnerJS server is now running and can be accessed at http://localhost:7070/
Press Ctrl + C to stop the server</code></pre>
<p>Start developing features.</p>
<a href="/docs/use/getting_started/" class="cta-round">Go</a>
</div>
</div>
</div><!-- /.container -->