Building mobile apps with famo.us and angular material

Marrying famo.us and Google Material Design projects is ideally the future of building cross-platform mobile apps using angular. Earlier this year Google introduced Material Design, and around the same time famo.us introduced a fresh way of thinking and building web apps. Google inroduced Material Design project as

a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science

Google also introduced angular bindings for Material Design in angular/material project. Famo.us on the other hand, has been introduced as

the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL.

That being said, I wanted to build a demo/POC with the two projects. You can find the finished code here. I have used thaiat's yeoman generator with gulp which I highly recommend. After generating the base project, make sure to add the required ngMaterial bower packages.

"material-design-icons": "~1.0.1",
"angular-aria": "~1.3.8",
"angular-material": "~0.6.1"

Once added, we have to also modify package.json for browserify shims.

"angular-aria": "./bower_components/angular-aria/angular-aria.min.js",
"hammerjs": "./bower_components/hammerjs/hammer.min.js",
"ngMaterial": "./bower_components/angular-material/angular-material.js"

....

"ngMaterial": {
  "exports": "ngMaterial",
  "depends": [
    "hammerjs",
    "angular",
    "angular-animate",
    "angular-aria"
    ]
}

Now that ngMaterial is available, let's add a module and contoller using the gulp generators.
We now have a route to hit in our app, let's modify the index.html to be a famo.us app.

<body>  
...
    <fa-app class="full-screen">
        <ui-view></ui-view>
    </fa-app>
...
</body>

Next, let's modify the generated view html file with <fa-surface>

<fa-view>  
    <fa-modifier fa-translate="[20, 20, 0]">
        <fa-surface>
            <md-button class="md-primary" ng-click="vm.openBottomSheet()">
                Open a Bottom Sheet!
            </md-button>
            <md-content class="md-padding">
                Lorem ipsum dolor sit amet, ne quod novum mei.
                <form style="padding: 20px;">
                    <md-text-float label="Company" ng-model="user.company" disabled> </md-text-float>
                </form>
            </md-content>
        </fa-surface>
    </fa-modifier>
</fa-view>

Any rendered content on the screen has to be within <fa-surface> angular module, so that's why we have all of the ngMaterial contents within famo.us surface.

Let's also make sure you have required the ngMaterial in index.js

require('ngMaterial');  
...
var app = angular.module(fullname, [  
        'ui.router', 'ionic', 'famous.angular',
        'ngCordova', 'ngMaterial'
    ]);
...

That's it. If you now run the gulp browsersync you should see a ngMaterial module running within famo.us 3D redering engine. Running in iOS with ios-sim is as simple as running;

gulp dist  
cd dist/app/dev  
cordova platform add ios (one-time)  
cordova build && cordova emulate ios

Clone the finished code to see how you can easily add the Bottom Sheet module for ngMaterial to your page. Leave any questions or comments below.

Menu