Skip to content

Commit

Permalink
mockup split into core package and collection of patterns
Browse files Browse the repository at this point in the history
Main reason for this split is that anybody developing nes pattern can only
depend on minimal set of tools that are needed.

- create mockup-core package which will include: pattern registry, base
  pattern, docs app.
- mockup-core parts should be tested
- new design and code for docs app (Bootstrap+Backbone+ReactJS)
- update all bower and npm dependencies to latest
- simplify Gruntfile.js
  • Loading branch information
garbas committed Jan 23, 2014
1 parent 7c974f3 commit 7bc74f8
Show file tree
Hide file tree
Showing 82 changed files with 6,504 additions and 10,601 deletions.
1 change: 0 additions & 1 deletion .travis.yml
Expand Up @@ -8,7 +8,6 @@ env:
- secure: "CyxPivnm/mpBX5Def/VlFHthxjMTjlThgd07tiGvd0vtDG1PPNzD0Y0q+4AmBilWZeIu1O1bP1vYMgMQ0rvcXr5K7+wZqoyss+ynRzMzdGLYQSU73zN5THKNeClioR90stsTr9GxX43VvgEIX9W3Zx1eSnmzT+ddnLYL94bAP9Q="
- SAUCE_CONNECT_READY_FILE=/tmp/sauce-connect-ready
install:
- npm cache clean
- make bootstrap
- echo "Host github.com" >> ~/.ssh/config
- echo " StrictHostKeyChecking no" >> ~/.ssh/config
Expand Down
Empty file added ABOUT.md
Empty file.
143 changes: 143 additions & 0 deletions GETTING_STARTED.md
@@ -0,0 +1,143 @@
# Quick-start

Install Git.

Install Node (v0.10.20) / NPM.:

$ git clone git://github.com/plone/mockup.git
$ cd mockup
$ make bootstrap

And your environment is ready to start working on testable, modular,
JavaScript!

# Slower-start

## Step 1: Get the tools

Download and install the latest versions of [git](http://git-scm.org "git") and
[Node/NPM](http://www.nodejs.org/ "node and npm").

Also make certain your system supports the `make` command. Right now
development of this project is being done primarily on Linux and OS X, so
setting up the tooling on MS Windows might be an adventure for you to
explore -- though, all of the tools used have equivalent versions for that
platform, so with a little effort, it should work!


## Step 2: Checkout the Mockup project from GitHub

This will give you a starting point, and a lot of example code. It's used to
build *bundles* which are then added to various Plone products. You do
not need to develop code for the existing Plone products when you use the
Mockup project.:

git clone git://github.com/plone/mockup.git

## Step 3: Bootstrap the environment

Run the following commands::

cd mockup
make bootstrap

This will use Node/NPM to download and install all the requirements for
building and bundling, as well as all the external libraries needed to build
the patterns developed within the framework of the mockup project.

## Step 4: Get hacking!

### Mockup Project Structure

* `build/` : All combined, optimized, and minimized JavaScript code, as well
as compiled less and media are copied and placed here

* `docs/` : Documentation files built with `make docs`

* `js/` : This directory contains all of the modularized JavaScript code

* `js/config.js` : This file contains the RequireJS configuration

* `js/bundles` : This is where a bundle is defined -- it is a set of
requirements and code that provide the features being packaged into
a Plone product

* `js/patterns` : This is a directory that contains all individual,
encapsulated patterns (i.e. widgets/JavaScript)

* `less/` : This directory contains all the [less](http://lesscss.org/) code
for all the patterns and bundles

* `lib/` : This directory contains external libraries not necessarily found in
the bower repositories

* `tests/` : This directory contains all tests for patterns and bundles,
including general setup and configuration code

* `Gruntfile.js` : This file contains the directives for compiling less, and
combining/optimizing/minimizing JavaScript for the defined bundles

* `index.html` : This is the main source of documentation for the mockup
project.

* `Makefile` : This is the Makefile used to define what tasks should run when
you want to build a bundle, or bootstrap the environment

### What's a Pattern? What Are Bundles? How do they relate?

`Patterns` are units of JavaScript, defined by a RequireJS/AMD style module.
Patterns may require other patterns to operate, and may require third party
libraries. Think of patterns as a module -- encapsulated and separate, and
providing a widget or tool to use by other patterns or in html.

`Bundles` are defined similar to <em>Patterns</em> -- they are encapsulated
bits of JavaScript that define requirements for a bundle, and have some extra
code in them that's useful for integrating the required patterns into Plone
products.

So, the end result is that a front-end developer might spend their time
creating patterns, while a Plone developer might create a bundle and integrate
it into a Plone product.

For more information how to create patterns please read [Hello
world](#hello-world) example.

## Step 5: Bundling

To build bundles::

make compile

## Step 6: Testing

You can run tests with::

make test

This will start a continuous process that will rerun the tests when you change
any of the js files.

If you want to run tests on once and then quick::

make test-once

If you have Chrome installed you can alternatively run your tests with::

make test-dev

Running tests in Chrome is useful when you want to debug them.

If you want to just run the tests for the pattern you are working on you can
run tests with::

make test pattern=foobar

or:

make test-once pattern=foobar

or:

make test-dev pattern=foobar

These will run only the tests that end with foobar-test.js

0 comments on commit 7bc74f8

Please sign in to comment.