Feed Herny developer training : crossplatform and HTML5

  • Published on

  • View

  • Download

Embed Size (px)


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


  • 1.DeveloperTraining23rd April 2012Winner 2012Predictions:HTML5 Will Cross theEnterprise Tipping PointCompany ConfidentialInformationCompany Confidential Information1

2. Contents Introduction & Background Using the platform Architecture of an App Client Development Cloud Development Practical Examples Docs & Resources2 3. Introduction & Background3 4. Mobile Internet - GrowthMobile Internet Usage will overtake Desktop in 20144 5. Smartphones - Growth Pre iPhone (Android and Windows Phone 7) 90% ofthe systems that connected to the web were PCs (only5 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 frommobile app stores. By 2014 Over 80% of mobile front-ends for existing applications and up to 70% ofnew mobile apps will rely on HTML5 for client user interface By 2015, mobile application development projects targeting smartphones andtablets 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 300million and smartphones will leap past 1.1 billion. By year-end 2016, more than 50 percent of Global 1000 companies will havestored 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 VMwares Cloud Foundry 2012 8 9. FeedHenry The Name! Started as a research project mid 2000s 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_Shefflin9 10. Photo: Peter Grogan 11. Powering Enterprise Appsfrom the CloudMobile Platform-as-a-Service for BusinesstoBuild, Integrate and Manage -Secure Enterprise Apps from the CloudOur Vision:Low cost enterprise mobility solutions on all major smartphones & tablets, poweredand managed from the cloud and integrated securely with existing IT systems.1 11 12. Develop, Integrate, Stageall in the CloudDEVELOPINTEGRATESTAGE HTML5/ X-Platform client sideNode.jsStaging/DeploymentBackend-as-a-serviceto Any Cloud 112 13. End-to-end PaaSApp Development & Server-side Integration AppStudioAppCloudDevelopIntegrateBuild FarmBuild & Deploy Execute & StoreCross platform apps for all devicesServer-side execution, caching & storage Discover & Distribute Integrate & Connect Via Public, Private App stores & OTAConnect to APIs and backend systemsHTML5, Hybrid, NativeMobile Web 113 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 UserInterface https://training.feedhenry.com/ Studio Demo Task Install Node.js, npm & fhc 1 16. Getting started with FHCBuild & deploy an app in 3 easy steps fhc target training.feedhenry.com fhc login fhc apps create my-first-appgit://github.com/feedhenry/App-Anatomy.git fhc stage dev fhc build app= config=debugdestination=android version=2.2download=true 1 17. Architecture of an App 1 18. Cloud PlatformArchitecture I 1 19. APIshttps://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 PlatformArchitecture 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 andconfiguration./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 alsoreferenced 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 underConfiguration section Multiple packages can be applied Each package is layered on top of previous one Used to incrementally addfunctionality, 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-Sencha2 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.html2 29. Cloud Development2 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 - Samplevar fs = require(fs); // include file-system module// This is synchronous. Its 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, its non-blocking!fs.readFile(README.md, utf8, function(err,data){// Hello, Callbackif(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 Dont use web framework modules handled automatically Sample App: https://github.com/feedhenry/FH-Training-App-Business-Node.js3 33. Develop & Test Cloud code can be developed independentlyfrom client Use fhc to call cloud functions fhc act Use expresso to exercise test cases on cloudcode http://visionmedia.github.com/expresso/ Example App https://github.com/feedhenry/Node.js-Smoke-Test-App3 34. Practical Examples 3 35. App AnatomyGitHub : https://github.com/feedhenry/App-AnatomyTutorial : http://docs.feedhenry.com/training-labs/app-labs/app- anatomy/ Use Packages to control lookand feel. Use shared config file to defineinitial in-app config and cloudaccessible config. Update in-app contents on appstart up / on the fly from cloud. 3 36. Client API TesterGitHub : https://github.com/feedhenry/FH-Sample-Sencha-Device-API-TesterTutorial : http://docs.feedhenry.com/rhino/sencha_touch_tutorial.html Sencha Touch UI Sample code for client APIs/client/default/script/controller Sencha UI definitions storedin cloud for post-deploy mods.Retreived via getUI functionin main.js. 3 37. Server API TesterGitHub : 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.html3 40. Thank you40www.mc2bis.eu Contact: matthias.verbeke@mc2bis.eu www.feedhenry.com Contact joe.oreilly@feedhenry.com 40