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.

comments powered by Disqus