Skip to content

Latest commit

 

History

History
124 lines (100 loc) · 4.18 KB

gettingstarted.md

File metadata and controls

124 lines (100 loc) · 4.18 KB
Raw
title layout
Getting Started with BoltJS
default

Getting Started

Checking out the code

The first step to working with Bolt is to check out the code. Bolt will soon be available on GitHub, but for now you must be a Facebook developer to get it. Search for instructions on downloading it on the internal wiki.

Installing Node

Bolt uses a build script to create it's packaged files, and to build a single package file for individual HTML5 apps. This script is written in JavaScript and is executed using NodeJS. The current version of Node, v0.4.7, runs on Mac and Linux, and can work on Windows through CygWin. For this reason, it's easier to work with Bolt if you're not on Windows. This is a situation we're looking into, but Joyent (Node maintainers) are working hard to get it working on Windows too, so this issue might just solve itself soon.

So, go ahead and install Node.

Bolt Core

Views

  • View: base level view class that provides life cycle, configuration, data binding, and dom access
  • Container: base level view class that can contain other views and manage them as a set
  • CollectionView: Container view that can be data-bound to a Collection

Models

  • Model: Base level object with observable properties. These should be sub-classed to model the domain of your application
  • Collection: Manage a set of models and provide notifications of membership changes.

Controllers

  • Not yet defined in Bolt. Should be lightweight and provide the facility of connecting models and views prior to data-binding.

Utilities

  • Javelin: DOM, Ajax, Class Inheritance, Events (data/DOM)
  • Underscore: iterators
  • Build System: nodejs script provides CommonJS module api and packages resources into single files

Setting Up An Application

To build a standalone HTML5 app, first create a folder, let's call it MyApp, and create a file called bolt-build.json. This will be used to concatenate all of your source files into one JavaScript file and one CSS file. It also provides the CommonJS wrappers necessary to allow just-in-time execution of your code, which speeds up app startup time.

Create a folder called src, which is where you'll put your code.

Open bolt-build.json, and add the following:

{% highlight javascript %} { "sources": [ "src" ], "package_target": "pkg", "package_name": "myapp" } {% endhighlight %}

Go to where you have Bolt downloaded and type npm link. This uses the Node NPM tool to set up the Bolt build script to be used from anywhere

Go back to your new apps root folder. Type bolt-build. This builds your application, creating the files

  • pkg/myapp.js
  • pkg/myapp.css

These two files should be included in your index.html file for the app, along with bolt.js and bolt.css. One common layout for an app would be:

  • MyApp
    • index.html
    • bolt-build.json
    • src
      • someCode.js
      • someOtherCode.js
      • someStyles.css
    • pkg
      • myapp.js (generated file)
      • myapp.css (generated file)

As it would be tiresome to have to run a build step every time you change any JavaScript or CSS file, the Bolt build script has a watch mode, which looks for changes to any files and rebuilds your app code. To use this, type bolt-build -w in the root folder of your app.

Now any JavaScript or CSS files that you place in the src folder of your app will be built into a single file. See Building Bolt for more details on how to build an app.