Feed Herny developer training : crossplatform and HTML5

© Copyright FeedHenry Ltd. 11

Winner 2012 Predictions: HTML5 Will Cross the Enterprise Tipping Point Company Confidential Information

Company Confidential Information

Developer

Training

23rd April 2012

© Copyright FeedHenry Ltd.

Contents

• Introduction & Background

• Using the platform

• Architecture of an App

• Client Development

• Cloud Development

• Practical Examples

• Docs & Resources

2


Introduction & Background

3


Mobile Internet - Growth

Mobile Internet Usage will overtake Desktop in 2014

4


Smartphones - Growth

• Pre iPhone (Android and Windows Phone 7) 90% of the systems that connected to the web were PCs (only 5 years ago!)

• In 2012 • PC sales worldwide will reach ~400 million units

• Smartphones will surpass 600 million units.

• Tablets will sell about 100 million units.

• By 2015• Tablet sales will triple to about 300 million.

• Smartphones sales will leap past 1.1 billion.

5


Gartner Predictions...

• By year-end 2014, 185 billion applications will have been downloaded from mobile app stores.

• By 2014 Over 80% of mobile front-ends for existing applications and up to 70% of new mobile apps will rely on HTML5 for client user interface

• By 2015, mobile application development projects targeting smartphones and tablets will outnumber native PC projects by a ratio of 4-to-1.

• By 2015, PC sales will grow to over 500 million, but tablets will triple to about 300 million and smartphones will leap past 1.1 billion.

• By year-end 2016, more than 50 percent of Global 1000 companies will have stored customer-sensitive data in the public cloud. 6


Cross Platform Options

77


FeedHenry – A Brief History

• Founded in Waterford, Ireland as a research spin-out – 2008

• Customers & Revenue – 2009 & growing rapidly

• Venture capital funded – 2010

• US headquarters near Boston, MA – 2010

• Partnership with VMware’s Cloud Foundry – 2012

8


FeedHenry – The Name!

• Started as a research project – mid 2000’s

• Researcher got to name the project

• Initial focus was RSS feed technology

• Researcher loved hurling• http://en.wikipedia.org/wiki/Hurling

• Big fan of hurler called “Henry Shefflin”• http://en.wikipedia.org/wiki/Henry_Shefflin

+ =9

http://en.wikipedia.org/wiki/Hurling

http://en.wikipedia.org/wiki/Henry_Shefflin

© Copyright FeedHenry Ltd.Photo: Peter Grogan


Powering Enterprise Apps from the Cloud

11

Our Vision:

Low cost enterprise mobility solutions on all major smartphones & tablets, powered

and managed from the cloud and integrated securely with existing IT systems.

Mobile Platform-as-a-Service for Business

to

Build, Integrate and Manage -

Secure Enterprise Apps from the Cloud

11


Develop, Integrate, Stage…all in the Cloud

12

STAGEStaging/Deployment

to “Any Cloud”

DEVELOPHTML5/ X-Platform client

side

INTEGRATENode.js

Backend-as-a-service

12


End-to-end PaaS App Development & Server-side Integration

13

AppCloudIntegrate

13

Build & DeployCross platform apps for all devices

Discover & DistributeVia Public, Private App stores & OTA

Execute & StoreServer-side execution, caching & storage

Integrate & ConnectConnect to APIs and backend systems

MobileWeb

AppStudioDevelop

Build Farm

HTML5, Hybrid, Native


Using the Platform

14


Two ways to access

• FHC – Command Line Client• http://docs.feedhenry.com/rhino/fhc_command_line_tool.html

• Requires Node.js & npm

• sudo npm install -g fh-fhc

• App Studio – Web Based Graphical User Interface

• https://training.feedhenry.com/

• Studio Demo

• Task – Install Node.js, npm & fhc

15

http://docs.feedhenry.com/rhino/fhc_command_line_tool.html

https://mobilecf.stg1.feedhenry.com/docs/fhc_command_line_tool.html


Getting started with FHC

Build & deploy an app in 3 easy steps

• fhc target training.feedhenry.com

• fhc login <username> <password>

• fhc apps create my-first-app git://github.com/feedhenry/App-Anatomy.git

• fhc stage <app-id> dev

• fhc build app=<APP-ID> config=debug destination=android version=2.2 download=true

16


Architecture of an App

17


Cloud Platform Architecture I

18


APIs

https://docs.feedhenry.com/nodejs/api_reference.html

• On Device

• Call cloud Functions/Actions - $fh.act()

• Data Persistence - $fh.data()

• Web Call (Ajax) - $fh.web()

• Geo/Maps - $fh.geo() / $fh.map()

• Audio - $fh.audio()

• Security - $fh.sec()

• Cloud

• Web - $fh.web()

• Cache - $fh.cache()

• Security - $fh.sec()

19




Cloud Platform Architecture II

20

Redis

$fh.web ()

$fh.cache()

Node.js -App CloudBusinessLogic

$fh.act ()


Cloud Powered Apps

21


Directory Structure

/client

• Contains all files which may be included when an app is built.

• Divided into packages – incremental units of functionality and configuration.

/cloud

• Contains all server-side JavaScript.

• Must contain a file called main.js

• All functions in main.js are public & can be called from client side

/shared

• contains files which can be included as client side files and also referenced as server-side files 2

2


Packages

• Represented as directories within /client

• “default” package is required & always applied

• Keep as much code as possible in here

• Custom packages applied to destinations under Configuration section

• Multiple packages can be applied• Each package is layered on top of previous one

• Used to incrementally add functionality, configuration, look & feel…

23


Client Development

24


Basics

• HTML (5), CSS (3), JavaScript

• Hand rolled or UI library

• UI Libraries• Sencha Touch - http://www.sencha.com/products/touch/demos/

• jQuery Mobile - http://jquerymobile.com/

25

http://www.sencha.com/products/touch/demos/

http://jquerymobile.com/


Sencha Touch

• UI Defined in JavaScript/JSON

• More “native” look & feel out of the box

• Good support for iOS & Android

• Basic support for BlackBerry

• No (official) support for Windows Phone 7• Better chance on WP 7.5

• Sample Apps:• API Tester:

https://github.com/feedhenry/FH-Sample-Sencha-Device-API-Tester

• Training App: https://github.com/feedhenry/FH-Training-App-Sencha

26


https://github.com/feedhenry/FH-Training-App-Sencha


jQuery Mobile

• UI Defined in HTML

• Look & feel not as “native” as Sencha• Can be styled to look more native using packages

• Decent support for all major smartphones.

• UI Builder available• http://codiqa.com/

• Sample App:• Training App:

https://github.com/feedhenry/FH-Training-App-JQM

27

http://codiqa.com/

https://github.com/feedhenry/FH-Training-App-JQM


Buillding, Deploying & Testing Apps

• Depends on target platform

• Android is easiest to build & deploy• Dropbox

• Email

• Android Developer Tools

• iOS Requires uploading credentials• Private Key, Certificate & Provisioning Profile

• Resources:• http://docs.feedhenry.com/nodejs/app_building_and_submissio

n.html

• http://docs.feedhenry.com/nodejs/deploying_apps.html

28

https://mobilecf.feedhenry.com/docs/app_building_and_submission.html

https://mobilecf.feedhenry.com/docs/app_building_and_submission.html

https://mobilecf.feedhenry.com/docs/deploying_apps.html


Cloud Development

29


Node.js - Intro

• http://www.nodejs.org

• Server Side JavaScript

• Built on top of V8 (C++)• JavaScript Rendering Engine from Google Chrome

• Non Blocking!!!!• Uses callbacks for I/O operations

• Event Driven• Same idea as client side JS – click event, mouse

event….

• Light Weight

30

http://www.nodejs.org/


Node.js - Sample

31

var fs = require('fs'); // include file-system module

// This is synchronous. It's blocking!var data = fs.readFileSync('README.md', 'utf8'); // This might take a while. Waiting, waiting...console.log("Sync File read success \n" + data);

// This is asynchronous, it's non-blocking!fs.readFile('README.md', 'utf8', function(err,data){ // Hello, Callback if(err) { console.error("Could not open file %s", err); } else { console.log("Async File read success \n" + data); }});console.log("After Async File Read");


Node.js - App Basics

• Define public functions in main.js

• No need to build boilerplate web server• Added automatically when staged

• All standard Node modules available to use

• https://github.com/joyent/node/wiki/modules• Don’t use web framework modules – handled

automatically

• Sample App:• https://github.com/feedhenry/FH-Training-App-Business-N

ode.js

32

https://github.com/joyent/node/wiki/modules

https://github.com/feedhenry/FH-Training-App-Business-Node.js

https://github.com/feedhenry/FH-Training-App-Business-Node.js


Develop & Test

• Cloud code can be developed independently from client

• Use fhc to call cloud functions• fhc act <app-id> <server-function> <params>

• Use expresso to exercise test cases on cloud code

• http://visionmedia.github.com/expresso/

• Example App• https://github.com/feedhenry/Node.js-Smoke-Test-A

pp

33

http://visionmedia.github.com/expresso/

https://github.com/feedhenry/Node.js-Smoke-Test-App



Practical Examples

34


App Anatomy

GitHub : https://github.com/feedhenry/App-Anatomy

Tutorial : http://docs.feedhenry.com/training-labs/app-labs/app-anatomy/

• Use Packages to control look and feel.

• Use shared config file to define initial in-app config and cloudaccessible config.

• Update in-app contents on app start up / on the fly from cloud.

35

https://github.com/feedhenry/App-Anatomy

http://docs.feedhenry.com/training-labs/app-labs/app-anatomy/

http://docs.feedhenry.com/training-labs/app-labs/app-anatomy/


Client API Tester

GitHub : https://github.com/feedhenry/FH-Sample-Sencha-Device-API-Tester

Tutorial : http://docs.feedhenry.com/rhino/sencha_touch_tutorial.html

• Sencha Touch UI

• Sample code for client APIs /client/default/script/controller

• Sencha UI definitions stored in cloud for post-deploy mods.Retreived via getUI function in main.js.

36


http://docs.feedhenry.com/rhino/sencha_touch_tutorial.html


Server API Tester

GitHub : https://github.com/feedhenry/Node.js-Smoke-Test-App

• Sample code for Server APIs in /cloud directory

• Sample code for expresso tests in /test directory• Edit test/test.js and set correct App Id

• Run expresso test/test.js to execute tests

• Client UI for manual testing

37



Docs & Resources

38


Resources

• This slide deck : http://bit.ly/fhwdhackdocs

• FeedHenry on GitHub : https://github.com/feedhenry

• On line docs : https://docs.feedhenry.com

• API Guide : http://docs.feedhenry.com/nodejs/api_reference.html

• App Tutorials : http://docs.feedhenry.com/nodejs/app_labs.html

39

http://bit.ly/fhwdhackdocs

https://github.com/feedhenry

https://docs.feedhenry.com/


http://docs.feedhenry.com/nodejs/app_labs.html

© Copyright FeedHenry Ltd. 40

Thank you

40 www.mc2bis.eu

● Contact:● [email protected]

● www.feedhenry.com

● Contact● [email protected]

http://www.mc2bis.eu/

mailto:[email protected]

Technology

Feed Herny developer training : crossplatform and HTML5