The single thread uniting FOAM is the goal to work at a higher level: of abstraction, of productivity, and of performance. The front page has more information about FOAM’s philosophy.
This tutorial is a hands-on introduction to how FOAM can help you build fast apps fast.
No familiarity with FOAM is assumed: we’re starting from scratch here.
git and a local web server. We suggest Python’s built-in web
server module, which is easy to use and probably already installed.
If you’re on Windows, you probably don’t have Python already installed. You should install a simple web server to host your FOAM app for development.
Note that the commands given throughout the tutorial are for Unix-like platforms and won’t work on Windows. Their meaning is explained, so you should be able to perform the same actions (new directory, etc.).
Let’s dive right in.
Create a new directory for your project. (We’ll call it
PROJECTin this tutorial. Just replace
PROJECTwith the actual directory you’re using.)
Go into that directory:
And download FOAM into it:
git clone https://github.com/foam-framework/foam.git
Your directory structure should look like this so far:
PROJECT/ |- foam/
FOAM is also available on
npm install foam-framework. If you choose
that route, several of the links in this tutorial are going to be broken. You
can fix that by doing
mv node_modules/foam-framework foam to get the same
structure shown above.
Any Server Will Do
Note that FOAM web apps require no server support. FOAM web apps consist only of static files, so any web server will work.
FOAM can also be used to build servers. Indeed, this tutorial includes sections on creating a server and adding authentication to it.
FOAM works in Chrome, Opera, Firefox, Safari, and IE11+. It works on Chrome for Android, the Android WebView, and on iOS Safari.
Development vs. Deployment
During development, you can reload the page to get the latest code. FOAM includes scripts that will load the core FOAM files, and then load your app and its dependencies on demand.
(You may have problems with caching. Most browsers’ dev tools can disable caching.)
Serving FOAM and loading apps
FOAM includes a generic
index.html page that will load any model you specify
model_ parameter. See here for
PROJECT directory, let’s start our web server:
python -m SimpleHTTPServer # Python 2 python -m http.server # Python 3
Just leave that server running throughout the tutorial.
PROJECT directory is served from
Load the Completed App
The final version of the tutorial app we’re about to build lives in the FOAM repository as a demo. Let’s load it up now, and see where we’ll be going.
The app is a fairly basic Todo list. You can create new Todo items with the red
- button. Tap a Todo to edit it. It supports search-as-you-type and more.
On a desktop-sized browser, it splits into multiple columns. On mobile (or a narrow desktop window) it has a single column.
Go to http://localhost:8000/foam/index.html?model_=foam.tutorials.todo.TodoApp to see it in action.
We’ll introduce a few of FOAM’s key concepts in Part 1: Models and Metaprogramming.