Using Lavaca to Start a New Mobile App: Part 1

It goes without saying, so I’m going to say it - there are a lot of frameworks out there to handle front end (JavaScript) MVC. For every Backbone there is an Angular or Ember... but my current go-to is the relatively new Lavaca. I aim to show you how to get your own Lavaca project up and running (I'll be basing this from Lavaca 2.1), but let’s start with some basic reasons why I currently use Lavaca over other options.

  • Great Integration with Cordova/PhoneGap: I only consider using JavaScript at an architecture level on the front end when I can guarantee it is present. This is not the case in a web browser, so I usually am packaging up my code as a hybrid app for mobile.
  • Use of Promises: Once I understood the Promise concept and broke out of passing callbacks, I never wanted to go back. Check out Lavaca's introduction to Promises
  • Built for Mobile First: Ever since “Mobile first” was first muttered it clicked with me, and now drives how I approach every project. It’s a continuation of the mindset of progressive enhancement.

Starting a Project

There are a few prerequisites, but if you have dabbled with another MVC library or Node, then you likely will already have everything you need.

You’ll want the latest stable version of Node and NPM. Oh, and a Mac.

Then it’s a matter of grabbing the Lavaca CLI tool in a Terminal window

curl
https://raw.github.com/mutualmobile/lavaca/master/getlavaca >
/usr/local/bin/getlavaca && chmod +x /usr/local/bin/getlavaca<

Once everything is installed...

  1. In the Terminal, go to the directory where you want your project and run: 
    getlavaca
  2. Use the master branch unless you can find a reason not to
  3. Name your main app directory
  4. Go to your newly created app’s directory 
    cd
        directory-name
  5. Install Lavaca’s Node dependencies 
    npm install
  6. Start a server via grunt 
    grunt server
  7. In a browser go to http://localhost:8080

You now have an example project running!

But we don’t want to just run in a browser... we want to build this as a hybrid application. Lavaca doesn’t assume anything at creation, so we need to tell Lavaca we want to build for specific platforms with Cordova.

This consists of installing the Cordova CLI and then initializing a fresh iOS/Android/etc. project as needed. Running the below commands by default will create a blank iOS project and a blank Android project. Read the Lavaca Guide to find out how to change that. 

npm install -g cordova grunt cordovaInit

This will sync Lavaca’s commands with the Cordova CLI and create source folders for both projects. The last command needed is 

grunt build

This will merge your HTML/CSS/JS with the Android and iOS src projects, by creating a new folder in your app’s directory called build. If dealing with an iOS project, for example, open build/ios/AppName.xcodeproj ... hit run... and you’ll see your app as packaged by Cordova. Part 1 is now complete.

Part 2 will review the basic structure of an app, and what it takes to replace the example app with your own.