Post on 11-May-2015
description
transcript
© 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
© Copyright FeedHenry Ltd.
Introduction & Background
3
© Copyright FeedHenry Ltd.
Mobile Internet - Growth
Mobile Internet Usage will overtake Desktop in 2014
4
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
Cross Platform Options
77
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.Photo: Peter Grogan
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
Using the Platform
14
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
Architecture of an App
17
© Copyright FeedHenry Ltd.
Cloud Platform Architecture I
18
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
Cloud Platform Architecture II
20
Redis
$fh.web ()
$fh.cache()
Node.js -App CloudBusinessLogic
$fh.act ()
© Copyright FeedHenry Ltd.
Cloud Powered Apps
21
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
Client Development
24
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
Buillding, Deploying & Testing Apps
• Depends on target platform
• Android is easiest to build & deploy• Dropbox
• 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
© Copyright FeedHenry Ltd.
Cloud Development
29
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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");
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
Practical Examples
34
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd.
Docs & Resources
38
© Copyright FeedHenry Ltd.
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
© Copyright FeedHenry Ltd. 40
Thank you
40 www.mc2bis.eu
● Contact:● matthias.verbeke@mc2bis.eu
● www.feedhenry.com
● Contact● joe.oreilly@feedhenry.com