Skip to content

Latest commit

 

History

History
139 lines (113 loc) · 5.16 KB

gettingstarted.md

File metadata and controls

139 lines (113 loc) · 5.16 KB
Raw
title layout section
Getting Started with BoltJS
default
gettingstarted

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 package.json. This file describes your application, as per the CommonJS Spec. Bolt has added an extra parameter, bolt_build_manifest which is 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 package.json, and add the following:

{% highlight javascript %} { "name": "MyApp", "version": "0.0.0", "bolt_build_manifest" : [ { "sources": [ "src" ], "package_target": "pkg", "package_name": "myapp" } ] } {% endhighlight %}

The first two lines, name and version, are the minimum parameters required by the CommonJS spec. The bolt_build_manifest parameter specifies sources, which is a list of the folders and files that are required in your application. Both JavaScript and CSS files are included in the build process. The package_target parameter specifies the name of the folder into which the built files will be placed. The package_name parameter specifies the name of the files to be created, e.g. myapp.js and myapp.css.

Note that double quotes must be used for each part of the package.json file, otherwise Node complains about it not being sytactically correct JSON.

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.