Crossplatform and HTML5 Deck from 13/5 training session during Mobilemonday Brussels Competence Center by Trainer: Joe O Reilly "head of services" of Feedhenry at MC2BIS.eu

1. Developer
Training
23rd April 2012
Winner 2012
Predictions:
HTML5 Will Cross the
Enterprise Tipping Point
Company Confidential
Information
Company Confidential Information
1

2. Contents
• Introduction & Background
• Using the platform
• Architecture of an App
• Client Development
• Cloud Development
• Practical Examples
• Docs & Resources
2

3. Introduction & Background
3

4. Mobile Internet - Growth
Mobile Internet Usage will overtake Desktop in 2014
4

5. 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

6. 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

7. Cross Platform Options
7

8. 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

9. 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

10. Photo: Peter Grogan

11. Powering Enterprise Apps
from the Cloud
Mobile Platform-as-a-Service for Business
to
Build, Integrate and Manage -
Secure Enterprise Apps from the Cloud
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.
1
11

12. Develop, Integrate, Stage
…all in the Cloud
DEVELOP INTEGRATE STAGE
HTML5/ X-Platform client side Node.js Staging/Deployment
Backend-as-a-service to “Any Cloud”
1
12

13. End-to-end PaaS
App Development & Server-side Integration
AppStudio AppCloud
Develop Integrate
Build Farm
Build & Deploy Execute & Store
Cross platform apps for all devices Server-side execution, caching & storage
Discover & Distribute Integrate & Connect
Via Public, Private App stores & OTA Connect to APIs and backend systems
HTML5, Hybrid, Native
Mobile
Web
1
13

14. Using the Platform
1

15. 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
1

16. 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
1

17. Architecture of an App
1

18. Cloud Platform
Architecture I
1

19. 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()
1

20. Cloud Platform
Architecture II
Node.js
- Redis
App
Cloud
Busines
s
Logic
2

21. Cloud Powered Apps
2

22. 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

23. 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…
2

24. Client Development
2

25. 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/
2

26. 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
2

27. 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
2

28. 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_submission.html
• http://docs.feedhenry.com/nodejs/deploying_apps.html
2

29. Cloud Development
2

30. 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
3

31. Node.js - Sample
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");
3

32. 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-Node.js
3

33. 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-App
3

34. Practical Examples
3

35. 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 cloud
accessible config.
• Update in-app contents on app
start up / on the fly from cloud.
3

36. 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.
3

37. 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
3

38. Docs & Resources
3

39. 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
3

40. Thank you
40 www.mc2bis.eu
● Contact:
● matthias.verbeke@mc2bis.eu
● www.feedhenry.com
● Contact
● joe.oreilly@feedhenry.com
40