Visit the famo.us page on the PropertyCross website for screenshots and code sharing metrics.
The PropertyCross implementation depends on Famo.us to handle the rendering, animations and event signalling. A custom MVVM architecture has been used to reduce coupling in the code and the theming does not vary across platforms. The PhoneGap Build service is used to package up the application and has been tested on iOS 7, Android 4.4 and Window Phone 8.
###Interesting Observations with Famo.us
Mobile pages with Famo.us
Famo.us does not define a mobile page, or a mechanism to navigating between them. This meant the implementation took responsibility for tracking the routing and page transitions.
Libraries like 'crossroads.js' may be a good provide a good fit for handling the routing of pages and state, however these were not considered when this app was initially implemented.
With the event system in Famo.us providing some useful features (such as event piping and event mapping), a Model - View - Presenter or Model - View - Adaptor architecture might provide a better mapping. For an implementation as complex as PropertyCross, this did not seem to be worth the effort, but for more complex applications this architecture may be a more suitable / scalable solution.
####Native LAF with Famo.us Famo.us does not provide a set of libraries or tools for native theming.
####Layout with Famo.us There were a few layout issues which were needed that we not natively supported in Famo.us, which have been implemented in PropertyCross:
#####Margin Layout When the application needs to be response to screen size you need to be able to add margins to items, rather than calculated the screen width one and setting a static size.
MarginLayout allows a margin to be added to a Surface or View. It is aware of the size of its parent, so can make the calculations to size its child nodes as needed.
#####Ratio Layout Some UI designs / guidelines require nodes to be sized at a particular aspect ratio.
RatioLayout resizes its child nodes so that they match a particular ratio, whilst taking as much of the parent area as possible.
VisibilityLayout as a modifier that allows nodes to be shown and hidden. Unlike the existing modifiers for opacity, a hidden node does not exist on the page therefore and does not receive mouse events.
assets/- resource files (i.e. images) used by cordova / phonegap
lib/- famo.us / third-party libraries
styles/- application css files
index.html- root html page for application
grunt/- contains build settings for Famous and PhoneGap Build service
##Building The Application
This project relies on grunt-cli, and bower to do all the heavy lifting for you
npm install -g grunt-cli bower
To get started, you run
npm install && bower install
##Running the Development Server
grunt serve and you will start a local development server and open Chrome. Watch tasks will be running, and your browser will be automatically refreshed whenever a file changes.
You can run serve with
--port=9001 to manually pick the port that the server will run on
This option is currently borked...
You can also change the port livereload is running on with the option
... if you think you can fix it check out the issue on github
If you would like to have your server be accessible to other devices on your local machine use the option
##Integration with PhoneGap Build service
Famo.us does not provide integration with the PhoneGap Build service out-the-box. The following files were added / modified to make this integration possible:
grunt/compress- creates a zip from the app directory and a generated cordova config xml file
configXMLsettings to generate and store cordova config xml file generated from a template
grunt/phonegap-build- uploads the zip to the PhoneGap Build service and downloads the built applications