concussionjs alpha

Sign up / Sign in

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

The web app platform for the impatient hacker.

You provide the HTML. Concussion will use the markup to generate the web services, javascript, and admin tools to make your app work.

Follow this 8 step tutorial, and in 5 minutes you will have a working contacts app. You will define the basic view, create, edit, and delete functionality in the app. You can register your ConcussionJS cloud account via Facebook by clicking to persist your contacts app, receive higher transaction volume support, and get free static file hosting services.

To start, copy and paste the following markup into the editor, then press the refresh button in the preview (or push “Just do it for me”).

<!DOCTYPE html><html>
<head><title>Contacts</title><meta charset="utf-8"><link rel="stylesheet" href="http://testdrive.concussionjs.com/css/contacts-style.css"></head>
<body>
	<div id="contacts">
		<div class="vcard">
			<input class="fn" value="First Last">
			<input class="email" value="address@email.com">
			<input class="tel" value="+1.818.555.1212">
  		</div>
	</div>
</body>
</html>

Just do it for me»

You should see a sample contact appear in the preview.

Connect to the Concussion back-end

Next you will add special Concussion attributes to the elements in the markup that represent application data. These are called data-binds, and they tell Concussion how to wire up data from the back end to the user interface.

First, paste this reference to the Concussion javascript file in the head tag, after the stylesheet link.

<script src="http://api.concussionjs.com/concussion.js"></script>

Just do it for me»

Next, replace the contacts div with the following markup, then press the refresh button in the preview.

<div id="contacts" data-bind="foreach:contacts.read">
	<div class="vcard">
		<input class="fn" data-bind="value:name">
		<input class="email" data-bind="value:email">
		<input class="tel" data-bind="value:phone">
	</div>
</div>

Just do it for me»

You should see the original static data defined in the HTML disappear. That data has been replaced with data from the backend, and in this case there is no data so no contacts show up.

Add contacts in admin

The Concussion admin app allows you to manage application data. It shows the objects and values specified in the markup, and the list of records for each object.

Add a contact by pressing the New button in the List. Fill out the fields below in the Details, then press the Save button.

Add 2 or 3 more records to show more data in the contacts app.

Add contacts directly from the app

You should see the contacts that were added from the admin.

Now add a form so contacts can be added directly from your app. Copy and paste the following markup into the editor, between the body element and the contacts div. Then press the refresh button in the preview.

<form data-bind="submit:contacts.create">
	<div class="new-contact">
  		<input class="fn" placeholder="Contact Name" data-bind="value:contacts.name">
		<input class="email" placeholder="Email Address" data-bind="value:contacts.email">
		<input class="phone" placeholder="Phone Number" data-bind="value:contacts.phone">
  		<button>Add record</button>    
	</div>
</form>

Just do it for me»

You should see the add contacts form in the preview.

Now add a few more contacts using the new form. You should see the contacts appear in the list.

Add a new field

Concussion makes it easy to update the data used in the application. Let's add a birthday field to the contacts. First paste the following markup into the editor, in the new contact div below the phone input.

<input class="bday" placeholder="Birthday" data-bind="value:contacts.birthday">

Just do it for me»

You should see the new field in the add contact form.

Next paste the following markup into the editor, in the contacts div below the phone input. Then press the refresh button in the preview.

<input class="bday" data-bind="value:birthday">

Just do it for me»

In this case you will not see anything in the existing contacts, because they have no birthday data.

Add a few contacts using the new field. These should display all the data.

Update contacts in admin

In the admin app you can add birthdays to the existing contacts. Select a contact from the list, then enter the birthday in the field below and press save.

Update contacts directly from the app

You should see the updates to the contacts made in admin.

Now add save and delete buttons so that edits to contacts can be saved, and contacts can be deleted directly from your app.

Paste the following markup in the editor, in the contacts div below the birthday input. Then press the refresh button in the preview.

<button data-bind="click:update">Save</button><button class="secondary" data-bind="click:remove">Delete</button>

Just do it for me»

Edit a few contacts and click save to persist the changes. Press the delete button to remove the contact.

You've been Concussed!

Now go to the page to learn how to install Concussion.

You can register your ConcussionJS cloud account via Facebook by clicking to persist your sample application, receive higher transaction volume support, and get free static file hosting services.

Have fun!

Editor

Contacts

Admin

How it works infographic

Try it out

The easiest way to get started is to add the JS file to your HTML:

<script src=“http://api.concussionjs.com/concussion.js”> or

Once you add your first Concussion data-bind you will see a ribbon added to the top right edge of your browser window. Clicking the ribbon brings you to your Concussion Admin console where you can view and edit your data records.

Create account

Create an account with your Facebook credentials to get more requests per minute.

VirtualBox VM

Download a virtual appliance to run ConcussionJS locally as a VM.

Debian package

Download the Debian package to install on Ubuntu or Debian Linux.

AWS image

Run ConcussionJS on AWS.

Concussion Sample Apps

Sample apps

Concussion complements all of the UI frameworks you know and love. Integrate Concussion effortlessly into your existing front-end workflow. Check out the sample apps below:

Concussion with Twitter Bootstrap

Concussion and Bootstrap

Concussion is a great addition to the popular front-end framework from Twitter.
Concussion with Foundation

Concussion and Foundation

Use Concussion as the back-end foundation for this UI framework from Zurb.

Learning ConcussionJS

Concussionjs was built to minimize the work required to turn your HTML into a dynamic, database driven web application. Learning how to use Concussionjs is really simple, all you need to know is HTML and few cutom HTML attributes.

By adding the Concussion attributes described below to your HTML, you can tap into the Concussion API for persistence, security, reporting, and application administration.

The ConcussionJS stack

Managing Your Account

There are three types of user accounts:

  • Anonymous
  • Registered
  • Premium

If you have not registered via Facebook yet, then you are likely operating as an Anonymous user. To protect against abuse of the system, we put limits on the number of requests per minute:

  • Anonymous users - 500 requests/minute
  • Registered users - 2000 requests/minute
  • Premium users - 5000+ requests/minute
Note: An anonymous user should be able to build and test an application without hitting the 500 requests/minute threshold

Creating Data

Persisting data with the Concussion API

Let's say you have a Contact form with three fields: Name, Email Address and Phone Number, something like this:

					
<form>
 <input placeholder="Name">
 <input placeholder="Email">
 <input placeholder="Phone">
 <input type="submit">
</form>

Hook this static form up to the Concussion API:

					
<form data-bind="submit:contacts.create">
 <input data-bind="value:contacts.name">
 <input data-bind="value:contacts.email">
 <input data-bind="value:contacts.phone">
 <input type="submit">
</form>

Notice a data-bind attribute has been added to the parent form as well as the nested input fields. Concussion knows the input fields are part of the Contacts data object because they reference the object in the data-bind=“value:objectName.propertyName”

Reading Data

Retrieve records through the Concussion API.

Lets say you had previously persisted Contacts through the Concussion API, and wanted to display them. You could start off with the HTML below:

					
<div>
 <div>Name</div>
 <div>Email</div>
 <div>Phone</div>
</div>

And then add the below data-binds to bind the form to the retrieved records:

<div data-bind="foreach:contacts.read">
 <div data-bind="text:name()"></div>
 <div data-bind="text:email()"></div>
 <div data-bind="text:phone()"></div>
</div>

Notice that data-bind attributes have been added to the root <div> element as well as its child elements. Concussion knows the text fields are part of the Contacts data object because they are children of the root <div> element

Updating Data

Updating records through the Concussion API.

Let's say you had previously persisted Contacts through the Concussion API, and now you want to update those records. You could start off with the HTML Below

					
<div>
 <div>Name</div>
 <div>Email</div>
 <div>Phone</div>
</div>

And then add the below data-binds:

					
<div data-bind="foreach:contacts.read">
 <input data-bind="value:name()">
 <input data-bind="value:email()">
 <input data-bind="value:phone()">
 <button data-bind="click:update">Update</button>
</div>

Deleting Data

Delete records through Concussion API's data layer.

Let's say you had previosly persisted Contacts through the Concussion API. You could retrieve the list of contacts by adding Concussion attributes as depicted below:

					
<div data-bind="foreach:contacts.read">
 <input data-bind="value:name()">
 <input data-bind="value:email()">
 <input data-bind="value:phone()">
</div>

And add a delete button that calls the Concussion "remove" record function:

					
<div data-bind="foreach:contacts.read">
 <input data-bind="value:name()">
 <input data-bind="value:email()">
 <input data-bind="value:phone()">
 <button data-bind="click:remove">delete</button>
</div>

Why is it so hard to build apps?

We are awash in frameworks, patterns, libraries, architectures, and platforms. But it still takes teams of developers months to put together a basic application. Worse still, for beginners there is a step change in complexity moving from writing HTML to building even the most basic database backed apps.

Why it matters

Modern web and mobile applications have redefined our expectations for how easy software should be to use. Unfortunately, most software companies still spend the majority of their time focusing on just getting their app to work, not on meeting the needs of their users.

Designing useful, usable products is a numbers game. Developers and designers need to try many different solutions and evaluate them with users to see what works and what doesn't. The more design iterations you can do, the faster you can figure out what works and what doesn't. By radically reducing the time it takes to build apps, ConcussionJS will free up organizations to spend their time on the design, not the implementation.

The ConcussionJS Community's Mission

Our mission is to bring down the barriers to creating, and learning how to create, modern applications and drive platform adoption by:

  • Applying a model-driven, rather than code driven, approach
  • Reducing the technical expertise required (e.g., web server, app server, database, web services, JavaScript) to build apps
  • Increasing the power of HTML and CSS skills
  • Ensuring that learnability for first time users is sacred, and that time to learn a task is proportional to its complexity
  • Providing a way for people to interact with the platform at all points along the interest curve (e.g., "I just heard about the platform and am still skeptical" to "I love the technology and want to deploy it behind my firewall" to "I have drunk the kool aid, and now want to contribute to the codebase") that only requires a level of effort proportional to the interest level

Our Platform Roadmap

The platform's initial target usecases are:

  • Building simple, graphically rich web applications
  • Rapid prototyping (e.g., turning a static HTML prototype into an interactive, database backed application)
As the community grows and platform matures, the goal is to support increasingly sophisticated use cases, and ultimately support both enterprise-ready business applications and web-scale, consumer facing apps.

In addition, we believe that to become a dominant platform ConcussionJS must be able to:
  • Run on-demand and on-premises
  • Operate on-line and off-line
  • Deploy as both a multi-tenant and single-tenant solution
  • Deploy as a self-installable package, a virtual appliance, an AWS image, and even be run without deploying anything at all (e.g., a hosted JavaScript include + freely available backend services)
  • Support apps for native mobile, web mobile, tablet, desktop, and, eventually, TV and larger formats
  • Incrementally scale at all layers of the stack
  • Provide application QA, integrity verification, and remediation
  • Offer built-in analytics, dashboards, and performance management
We are just at the beginning of this journey, and there is much to do to fully realize this vision. If you've been frustrated with the inefficieny of building apps and want to take up arms against the encumbant platforms, please join us on github and contribute.

Immediate areas we would like your help with include, but are not limited to, the following:

  • Adding support for KnockoutJS alternatives, in particular AngularJS (www.angularjs.org)
  • Integrating better security and identity management
  • Improving admin console's support for data object model and instance management, including searching and displaying large record sets
  • Building examples of ConcussionJS in action

The People Behind ConcussionJS

Ben Frenkel

Ben F. leads the product design and development of the ConcussionJS platform. Currently a consultant at McKinsey & Co., and holds an MBA from MIT. He has 13 years of experience with model driven systems specializing in cloud platforms.

Brian Jamieson

Brian J. leads ConcussionJS' platform UX design. He has 15 years of enterprise UX experience in healthcare, financial services, human capital management, and software development. He has founded user experience teams in multiple organizations. He has a Ph.D. in cognitive/experimental psychology.

Brian Del Giudice

Brian D. leads ConcussionJS' platform visual design. He has 12 years of design experience at software, marketing and advertising companies. He created the pixeless open source icon library, and has experience working at multiple start-ups.

comments powered by Disqus
Settings