FeedHenry Applications

What's Provided?

• A standard Cordova / Native application
• No "magic" or "voodoo"
• Your code is yours, we don't wrap it
• You can use any library, plugin etc.
• FeedHenry provides easy cloud integrations
• Star of the SDK is $fh.cloud(opts, successFn, failFn)

The rest is up to you!

Hybrid UI "Gotchas"

Tap Highlight

Disable Tap Highlight

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* Required for certain Android devices */
}

The 300ms Delay

300ms Delay?

• Mobile Browsers implement a ~300ms delay on "click"
• Enables them to determine "tap" vs "hold"
• Provides a poor experience in Cordova applications
• Fix it using the fastclick library or custom overrides

Sizing the Viewport

Sizing the Viewport

• Use a <meta> viewport tag
• Automatically sets zoom of page
• Sets zooming options (usually disabled)

Meta Viewport Tag

<!-- In HTML -->
<meta name="viewport" content="width=device-width; 
    initial-scale=1.0; maximum-scale=1.0;">  


/* In CSS */
@-viewport {  
    width: device-width;  
}  

Meta Viewport Tag

iOS 7/8 Status Bar

• The new Status Bar is translucent
• It overlays your application content
• Can be of annoyance
• Fixing is easy!

iOS 7/8

iOS 6

iOS 7/8 Status Bar Fix #1

var iPhoneRegex = /iPhone OS [0-6]/
var iPadRegex = /iPad; CPU OS [0-6]/
var ua = navigator.userAgent;

if (!ua.match(iPhoneRegex) && !ua.match(iPadRegex)) {
  // Device version is greater than 6
  document.body.style.marginTop = "20px";
} else {
  // Apply possible iOS 6 styles
}

iOS 7/8 Status Bar Fix #2

// Cordova "device" plugin required to get device information

if (window.device.platform === 'iOS' && window.device.version >= 7.0) {
  document.body.style.marginTop = "20px";
}

UI Frameworks

Styling a Hybrid Mobile Application

Multiple Options

• Write your own CSS and JS (time investment)
• Use an existing framework
• Modify an existing framework

• jQuery, the most famous JavaScript library.
• jQuery Mobile - an attempt to target mobile
• Poor performance in the past
• Can trigger unpredictable DOM changes
• Not recommended for Mobile Applications

• Major contender in the early days of HTML5 apps
• Can build an entire application and UI with JS
• AngularJS, Ember etc. plus UI framework nowadays
• Performance on Android <= 4.0 is poor
• Has fallen out of favour recently

• Modern native looking UI Framework
• Compatible exclusively with AngularJS applications
• Lightweight with good performance
• Mobile friendly flexible grid system for layouts
• Supports iOS 6+ and Android 4+ (2.3 should work)
• Theming is very iOS friendly, less Android friendly

• Exclusively for use with AngularJS
• Provides flat modern design
• Provides a mobile friendly and very flexible grid
• Proivdes documentation for applying custom themes
• Doesn't favour iOS or Android theming
• Only recently released

• Arguably the most famous UI Framework
• Bootstrap 3 adds Mobile as a first class citizen
• Provides a mobile friendly grid system for layouts
• Has Angular integration via Angular-UI
• Wide variety of themes available
• Can produce custom builds

Logging

Server-Side

FeedHenry & Logs

• Accessible in the Studio via Log tab of Cloud applicaiton
• Uses standard Unix program output streams
• Platform captures stdout and stderr
• Keeps log history indefinitely
• New stdout and stderr file per deploy/restart
• Platform doesn't interfere with your log content

Logs in the Studio

Log Archives in the Studio

So. How do I write logs?

...by using one of 3 methods

Method #1

The console object

The Console Object

• The easy, but not the best, approach
• Global variable in Browsers and Node.js
• Exposes info and error methods (plus many more)
• Write to stdout with console.info
• Write to stderr with console.error

Console Example & Output

var user = {
    name: 'Evan',
    age: 24
};

console.log('We have a user object!')
console.dir(user);

if (user.age < 25) {
    console.error('User "%s" is under 25', user.name);
}

eshortiss@Evans-MacBook-Pro:~/$ node console.js 
We have a user object!
{ name: 'Evan', age: 24 }
User "Evan" is under 25

Method #2

The process object

The Process Object

• Global object in Node.js
• Provides access to environment details
• Two streams attached, stderr and stdout
• Write logs using the write function on either
• Does not add line breaks
• Does not support format strings like console

Process Example

var user = {
    name: 'Evan',
    age: 24
};

process.stdout.write('We have a user object!\n')
process.stdout.write(JSON.stringify(user) + '\n');

if (user.age < 25) {
    process.stderr.write('User ' + user.name + ' is under 25\n');
}

Method #3

Logging Modules (Libraries)

Logging Modules

• Logging modules provide "sugar"
• Enable writing logs to multiple locations
• Provide formatted and timestamped logs
• Implement functionality you would need to
• Are strongly advised; so checkout NPM

Example Logging Modules

• winston - The most popular and feature packed
• bunyan - Close second to winston, very popular
• log4js - Port of the browser favourite
• fhlog* - Simple logging library for client & server

* Shameless self promotion