I have been programming for 9 years now, mostly focused on Java EE development. One area that I’m always interested in exploring is front-end web development and web apps.
One thing that interests me a lot on the front-end side of development are frameworks. A framework can give you everything you need to get up and running and prototyping.
In this article I will show you how to get up and running with ZURB’s Foundation for Apps.
Foundation for Apps is a front-end framework for developing fully responsive web apps. It is built on AngularJS, and they have templatized Angular. One can make a simple app without writing any Angular code. The framework also uses Motion UI to add motion to views so users can see content changes.
Install
Foundation for Apps has two ways to get up and running. If starting from scratch you can use the CLI for a quick install. If you have an existing project that you would like to add Foundation for Apps to there is also the manual install. For my purposes I will be using the CLI install.
The CLI install downloads a template project that will include everything to get you up and running. To get started with Foundation for Apps make sure you have both Node.js and Git installed. If you already have Node installed, make sure that npm is up to date.
With everything installed that is needed, run the following command from the command line.
$ npm install -g foundation-cli bower gulp
This will give you access to `foundation-apps` and also install Bower and Gulp.
To build a new project navigate where you would like the new project to live and run the following command from the command line.
$ foundation-apps new myApp
Where `myApp` is the name of your app. In my case I will be using myTraining.
Once you are done with that navigate into the directory using:
$ cd myTraining
The directory structure will look something like this:
+-- myTraining | +-- bower_components | +-- bower.json | +-- client | +-- etc | +-- gulpfile.js | +-- node_modules | +-- package.json | +-- readme.md
Now just run:
$foundation-apps watch
This assembles all of the the pieces into a build directory. The command also sets up a temporary server that will point to your app and display the template in the browser. Now all you need to do is start building your next web app.
Final Thoughts
Currently I have been wanting to build a mapping app. I was looking for a framework I could get up and running quickly with a layout that I liked, and Foundation for Apps has delivered for me.
There are other frameworks out there – probably the biggest competitor would be Bootstrap. Both frameworks are comparable and I am not sure I could 100% pick one or the other. To me it is a matter of personal preference to which may suit your needs better. That being said, give Foundation for Apps a try and see what you think of it.
| Reference: | Getting Up and Running With Foundation for Apps from our WCG partner Keyhole Software at the Keyhole Software blog. |
