Using Famo.us with the Ionic Framework

ionic_famous

Ionic and Famo.us are Javascript frameworks that aim to bridge the gap between the web and native app world, so that web technologies can compete with the native experience.

Ionic

Ionic is focused on on creating beautiful hybrid mobile apps in HTML/CSS, and their ecosystem, tooling and library provide a great experience that allows web developers to leverage their skills quickly and effectively in the mobile app space. But despite the cohesive and rich experience they can provide, extending their framework solely relies on the use of HTML5 and CSS3 – without their internal focus on performance and native feel, components you extend it with may not be the same quality or seamlessness as what the Ionic team can provide.

Famo.us

Famo.us is a framework obsessively concerned with making the browser interactive UI experience fluid, effortless, and fast. They haven’t provided the same kind of ecosystem and tooling that Ionic has (yet), but their competitive edge is definitely in the power their layout engine provides. Where Ionic has lots of built-in, native feeling components, Famo.us instead provides all of the tools you need to build a native feel yourself on a foundation that is designed to perform. They’ve worried about what makes the browser experience as fluid as possible, so if you manipulate it through their API, you don’t have to.

Working together

Most articles you see only want to compare the two and claim which is ‘better’. I think a more interesting and beneficial path is to see if we can use the two to play off each other: Use Ionic to scaffold your applications and easily achieve a native theme and feel, while using Famo.us to power more complex interactions that Ionic doesn’t provide an easy capability for.

Getting Setup

For this tutorial, we’re going to use the Ionic Beta 14 framework/tooling, and Famo.us 0.3.2. Since Ionic is an AngularJS project, we’ll use the Famo.us/Angular project which provides easy-to-use directives for controlling Famo.us from your HTML views.

To install the ionic tools, you’ll need npm. We’re also going to throw in bower for installing famo.us.

npm install -g ionic bower

Now that we have the ionic cli installed, we’ll use one of their starter templates as the base of our project. The sidemenu template provides a sliding side menu with routing and a modal example.

ionic start famously-ionic sidemenu
cd famously-ionic

You can run ionic serve to make sure everything installed correctly, and have a live-reloadable version of your code running in the browser.

ionic serve

Now to install famo.us and the angular integration, and save it to our bower.json file

bower install famous-angular --save

If asked which angular version to choose, choose from the 1.3.x releases.

In your www/index.html file, add in references to the famous code you installed with bower.





Go into www/js/app.js, and add famous.angular as a dependency.

angular.module('starter', ['ionic', 'starter.controllers', 'famous.angular'])

Now we’re ready to embed Famo.us content into our views. For this example, all we will do is embed a Famo.us Surface, which is the most basic piece of renderable content in the Famo.us layout engine.

Go into www/templates/playlists.html, and replace the entire content with this

<ion-view view-title="Famo.us">
  <ion-content>
    <fa-app style="height: 200px">
      <fa-surface fa-background-color="'red'">
        Famo.us, deep in the heart of Ionic.
      </fa-surface>
    </fa-app>
  </ion-content>
</ion-view>

What we’ve done here is setup one of the simplest Famo.us examples you can create. Each snippet of Famo.us content you display using their angular integration begins with the fa-app directive.

<fa-app>...</fa-app>

To display any actual content to the screen, it must be wrapped in a Surface. Using the fa-surface directive makes that very easy to do, and in our example simply contains a small snippet of text which will be rendered in the browser.

<fa-surface>...Content to render...</fa-surface>

Following these steps, you should have an embedded Famo.us surface in your Ionic app!

Ionic Famous Example

Conclusion

This hardly scratches the surface of what could be possible in using these two frameworks together, and i’ll be exploring each individually and combined in future posts. For now, head over to my Famo.us/Ionic Demo project on Github to get a fully working version of what you’ve read here with some additional examples. Feel free to comment if you have any suggestions or thoughts on what an Ionic/Famo.us combination could mean for you!

Resource Roundup – Week of 1/4

This is just a dumping ground for articles/books/tools that stuck out to me over the last week.

Most of the articles I read come from some excellent newsletter sources: Javascript Weekly, HTML5 Weekly, Ruby Weekly, Node Weekly, Database Weekly, and the Code Project Newsletter. Books are from a variety of sources, including Achieve Your Goals podcast, Entrepreneur on Fire and the Ameer Rosic Show (among many others and random internet discoveries).

Busy week – so I did a little less reading than usual. I’m also finally reading “Think and Grow Rich” by Napoleon Hill so that should have some notes in an upcoming week.

Articles

http://blog.phusion.nl/2014/12/22/phusion-passenger-5-beta-2

Beta 2 release of Phusion Passenger 5 (previously called “Raptor”). If their speed claims are really accurate, the RC and 1.0 releases could be game changers for some apps. I tried it out and hit issues with beta 1, so I may wait until an RC is available to try again.

Read More

Resource Roundup – Week of 12/28

This is just a dumping ground for articles/books/tools that stuck out to me over the last week.

Most of the articles I read come from some excellent newsletter sources: Javascript Weekly, HTML5 Weekly, Ruby Weekly, Node Weekly, Database Weekly, and the Code Project Newsletter. Books are from a variety of sources, including Achieve Your Goals podcast, Entrepreneur on Fire and the Ameer Rosic Show (among many others and random internet discoveries).

Articles

http://www.vanseodesign.com/web-design/html5-structural-elements

This is exactly how I feel about HTML5 elements. I’ve been reading about the benefits of a semantic web for years, but when will we actually see it being used consistently or being truly embraced by big players.

Read More

The context of “this” in Javascript

Understanding the different contexts of this in Javascript is an important step towards truly understanding the language. In addition to its importance, it’s also something that has been written about to death.

If you’re using Javascript, and don’t fully understand how the this keyword in javascript works, here are some great articles that will give you the understanding you need.

this Resources

A brief overview of different “this” scenarios, from a good general Javascript overview called “Javascript Garden”

http://bonsaiden.github.io/JavaScript-Garden/#function.this

A longer, but still higher level overview

http://davidshariff.com/blog/javascript-this-keyword/

Another long-form explanation, with some additional technical detail

http://unschooled.org/2012/03/understanding-javascript-this/

And a step by step, in-depth article

http://www.2ality.com/2014/05/this.html

Checking your understanding

If you think you understand this, make sure you understand why each of the following work the way they do. If the examples make sense, you probably have a pretty decent understanding! If after those articles you still don’t fully understand, leave a comment or contact me for more explanation.

var global = 'global example'; 
function globalExample() {
  return this.global;
}
console.log(this.global);     //outputs 'global example'
console.log(globalExample()); //outputs 'global example'
    
var obj = {
  global: 'obj example',
  example: globalExample
};
console.log(obj.global);    //outputs 'obj example'
console.log(obj.example()); //outputs 'obj example'
    
var obj2 = {
  global: 'obj2 example'
};
console.log(globalExample.call(this)); // outputs 'global example'
console.log(globalExample.call(obj));  // outputs 'obj example'
console.log(globalExample.call(obj2)); // outputs 'obj2 example'

Knowledge Roundup – Week of 12/21

This is just a dumping ground for articles/books/tools that stuck out to me over the last week.

Most of the articles I read come from some excellent newsletter sources: Javascript Weekly, HTML5 Weekly, Ruby Weekly, Node Weekly, Database Weekly, and the Code Project Newsletter. Books are from a variety of sources, including Achieve Your Goals podcast, Entrepreneur on Fire and the Ameer Rosic Show (among many others and random internet discoveries).

Articles

Nasa Wants to Colonize Venus

I feel like i’ve read and listened to this topic a few times recently – but this is the first i’ve heard of NASA talking about it. Not just talking about it – but having a pretty established plan for how they will do it, and what it means. It’s exciting that these endeavors could bear fruit in our lifetime.

Read More

Prototyping quickly with the PHP built-in server

Sometimes you want to get a server up and running as quickly as humanly possible. Whether it’s trying out a js library where the demos only work with a server, developing a static front-end (stand-alone or for integration with an API) or getting a PHP app up and running without setting up apache or nginx – being able to quickly start a local server is a nice convenience. Here’s one of my goto approaches for getting up and running quickly.

PHP Built-in Server

Since the release and general use/availability of PHP 5.4, there’s been a built-in PHP server available from the PHP CLI. To run it, from the terminal/command line all you need to type is

php -S localhost:8000

and boom, you’re done! You can now access anything in that directory or subdirectories as you would from a normal web server. Naturally, getting to this point has two main pre-requisites – your PHP version must be 5.4+ (php -v), and PHP must be on your path.

Command Explained

Breaking it down, this is taking advantage of the (very not-production ready) built-in server that PHP 5.4+ offers. If you were to type

php -h

in the terminal, one of the instructions provided would be

php [options] -S <addr>:<port> [-t docroot]

This specifies the structure of starting the built-in PHP web server. In reference to our example: the -S specifies that you’re trying to start the built-in server, localhost is the address and 8000 is the port. We’re not using the -t docroot option here, but when specified you could use it to create a routing script (for more information on that, see the PHP docs here).

Accessing the server remotely

If you want to access the web server from a remote machine (useful for trying it on your phone, or letting other people on your network access it using your IP), you can specify the address as 0.0.0.0 instead of localhost. For example

php -S 0.0.0.0:8000

More Examples

For more one-line server starters, there’s a helpful Github gist here. It doesn’t provide any specifics or explanations of the examples, but it gives examples in multiple languages including node.js, ruby, and python.

Knowledge Roundup: Week of 12/14

This is just a dumping ground for articles/books/tools that stuck out to me over the last week.

Most of the articles I read come from some excellent newsletter sources: Javascript Weekly, HTML5 Weekly, Ruby Weekly, Node Weekly, Database Weekly, and the Code Project Newsletter. Books are from a variety of sources, including Achieve Your Goals podcast, Entrepreneur on Fire and the Ameer Rosic Show (among many others and random internet discoveries).

Articles

http://arstechnica.com/security/2014/12/critical-git-bug-allows-malicious-code-execution-on-client-machines/

The official git clients for Mac and Windows are vulnerable to an attack. Time to update. If you’re using homebrew, this article will help – http://artarmstrong.com/blog/2014/12/18/install-and-update-to-git-2-2-1-on-mac-osx-10-10-yosemite-using-homebrew/

Read More

Previewing your Github README

grip-example

When you’re deploying to Github, crafting a helpful and well-formatted README file is a great starting point for people interested in your project. There are lots of Markdown preview tools available (just check for plugins or bundles in your favorite editor/IDE, or an online tool like http://markable.in/editor/), but Github does things a little differently with their Markdown flavor and it can be difficult to get it the way you want it without pushing to Github and seeing what needs to be changed.

That’s where i’ve found a tool called grip to be really helpful. From their documentation, it is a “command-line server application written in Python that uses the Github Markdown API to render a local readme file”.

To install Grip you first need a python package manager called pip. If you are on Mac OS X or Linux, you probably already have Python installed and pip should be available. If on windows, you’ll need to install Python. If you’re having trouble getting setup, try the installation instructions here.

Once you have pip, it’s as simple as pip install grip.

Now that you have it installed, simply run grip in the same folder as your README and it’ll be served up and available in your browser. The default is http://localhost:5000. Now enjoy previewing your Github Markdown before pushing to the repo!