1. Look Ma, No Apex Mobile Apps with RemoteObjects and Mobile SDK Barry Hughes Senior Developer Barry.hughes@bluewavegroup.eu @barryhughes

2. ​ Safe harbor statement under the Private Securities Litigation Reform Act of 1995: ​ This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. ​ The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. ​ Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements. Safe Harbor

3. Based in the UK and Ireland 30+ Employees IBM Premier Partner (since 2000) Salesforce Cloud Alliance Partner (since 2009) IBM Principal Certified Developer (since 2000) Salesforce Certified Advanced Developer (since 2013) Certified App Builder & Platform Developer I & II Co-organiser of Salesforce Developer Group in Dublin, Ireland Salesforce Certified Instructor – EMEA (since 2012) Hello DEV501 people! About Blue Wave Group and Me Barry Hughes

4. ‘Extra Topics’ in DEV501 classes Visualforce Remote Objects Could I build a hybrid remote app with no Apex? ​ Needed an idea for an app ​ Internal Blue Wave Requirement ​ Filling out my Project Timesheets Inspiration for an App ​ …and a presentation OpportunityProject Project Timesheet

5. Salesforce Mobile Development ​ There are many options! Native Apps (Mobile SDK) 3rd Party Frameworks Hybrid Apps (Mobile SDK)

6. ​ Our Brand, Our Logo, Our Icon ​ Focused on a Specific Task The Goal for the Project Timesheets app Fast, inexpensive development ​ Minimize development learning curve ​ Use existing skills ​ Single Page Application Architecture

7. What I will use ​ Keeping it simple Hybrid Remote App (Mobile SDK) Visualforce with HTML5 and CSS3 Bootstrap Angularjs JQuery C3.js for Charting ​ What features and functionality could be delivered in a SPA using these tools?

8. Demo Project Timesheets Mobile App

9. The app on a phone

10. ​ <apex:remoteObjectModel name=”Project_Timesheet__c" jsShorthand=”ts" fields=”Id, Project__c, Date_of_Work__c, … "/> ​ ​ <!– JavaScript object (JSON) representation of a Salesforce object with the fields specified above  ​ var oSfProject = new RemoteObjectModel.Project__c(); ​ var oSfTimesheet = new RemoteObjectModel.Project_Timesheet__c(); ​ or ​ var oSfTimesheet = new RemoteObjectModel.ts(); Code Snippets Remote Objects component remoteObjects Allows for proxy objects that enable basic Querying and DML operations on sObjects directly from JavaScript remoteObjectModel generate JavaScript model classes, one per sObject, which can be used to make data access calls directly from your JavaScript code. -require Object and field API names -Fields are accessible in JavaScript if they are defined here Javascript Object creates a Javascript object object from a defined remoteObject’s data model jsShorthand -maps the full Salesforce APIname to a simpler, shorter name to use in your JavaScript code. -In managed packages, eliminates the use of your organization’s namespace in the packaged code

11. Code Snippets Returning a list of records ​ <!-- JavaScript to make Remote Objects calls (Queries)  aTimesheet = []; ​ var oSfTimesheet = new RemoteObjectModel.Project_Timesheet__c(); var QueryParam = { where: { Consultant_Name__c: {eq: '{!$User.FirstName} {!$User.LastName}’} }, ​ orderby: [ {Date_of_Work__c: "DESC"}, {Customer_Name__c: "ASC"} ], ​ limit: timesheet_PageSize }; ​ QueryParam.offset = 100; ​ ​ oSfTimesheet.retrieve( QueryParam, function( err, records ) { // error } ​ angular.forEach( records, function( oTimesheet ) { ​ var sId = oTimesheet.get( 'Id' ); ​ if( sId ) { ​ aTimesheetList.push( { Id: sId, Name : oTimesheet.get('Name' ) ​, Date_of_Work__c : oTimesheet.get('Date_of_Work__c' ) ​, Project_Name__c : oTimesheet.get('Project_Name__c' ) ​, Project_Name_Text__c : oTimesheet.get('Project_Name_Text__c' ) ​ …… ​ } ); Project Timesheet Object JavaScript object that will now allows data querying Build Query Parameters JavaScript object that builds a filtered, ordered, limited and offset query (JSON) Execute the Query RemoteObjectModel has a retrieve method that executes SOQL queries and returns an array of data (JSON) Collect the Data The records variable can be looped over to push record data into the aTimesheet array.

12. Code Snippets ​ var fSave = function( oTimesheet ) { ​ var bNew = ( oTimesheet.Id == null ); ​ ​ // Cannot do a complete copy as we are referencing non-writeable fields ​ // var c = new RemoteObjectModel.Project_Timesheet__c( angular.copy( oTimesheet ) );  Not a good idea!! ​ ​ // instead we create a new timesheet object and set it up with the current timesheet values ​ var c = new RemoteObjectModel.Project_Timesheet__c(); ​ c.set('Id', oTimesheet.Id); // Not setting the Id - used as part of the upsert ​ c.set('Date_of_Work__c', oTimesheet.Date_of_Work__c); ​ c.set('Billable__c', oTimesheet.Billable__c); ​ c.set('Consultant_Name__c', oTimesheet.Consultant_Name__c); ​ c.set('Duration__c', oTimesheet.Duration__c); ​ ​ c.upsert( function( err, results ) { if( err ) { return; } ​ if( bNew && !err ) { ​ oTimesheet.Id = results[0]; ​ aTimesheetList.push( oTimesheet ); ​ bLoaded = false; ​ } else if( !bNew && !err ) { bLoaded = false; } A gotcha! Saving a Record Javascript code calls Save function passing the Project Timesheet object. If the object’s ID field is null, we know it is a new record Formula Fields If the remoteObjectModel has included formula fields, saving the passed in Timesheet object will fail (can’t save those). DML Using upsert here (Summer 14) to cater for inserts and updates. insert, update, delete also available New Object A new remoteObjectModel object can be created and populated using.set

13. Pros (1) No Apex – no tests! Less skills required. Faster to develop. s Good Response time – like @RemoteAction methods. No Controller == No View State Easy and fast to plug into other javascript frameworks (AngularJS, C3.js) Available via Salesforce on desktop via Visualforce Tab Keeping it simple

14. Pros (2) Keeping it simple Authentication is via oAuth and a Salesforce Connected App. s Changes immediately ‘distributed’ Can be added to Salesforce1 via tabs Simplest implementation of an app via the Mobile SDK (less skills required)

15. Cons (1) Where there are issues Requires a programmatic solution outside of the Setup Menu (SF1) s Security access to functionality must be coded into the Visualforce Page Nothing to stop errors – changing a field can break the app Javascript skills are required and knowledge of Javascript frameworks (AngularJS, Jquery) is necessary. Debugging Javascript is required (not at compilation time of VF Page)

16. Cons (2) Where there are issues Queries limited to 100 records per call s Performance (Speed) is not quite native No off-line access to application Adding Datatables.net JQuery library is tricky – I didn’t do it. Useful for CRUD operations and Querying – not as flexible as Apex

17. ​ A worthwhile exercise Easy to use and focused on a need – our consultants really like it Its is a very fast way to create a simple app – development time is less as there are no apex classes required (Though AngularJS tests should be considered). Kept the SPA in a single Visualforce Page – should have created a suite of js files Ionic uses similar skillset to create this app. forcetk.js, sforce.js could also be used in a Visualforce page to create the same app. A good app to recreate to learn other skill sets (Heroku, Native, Lightning) Thumbs Up! Opinion

18. ​ How relevant are Visualforce Remote Objects now we can create Lightning Components? Elephant in the room? Speaking of Lightning “Visualforce as a JavaScript Application Container …. is a perfectly good way to build interactive applications today. It’s the reason we originally built toolkits like Remote Objects and JavaScript remoting. If you’re a confident AngularJS or React or other JavaScript framework developer, your expertise will take you a long way developing apps for Salesforce with the tools you know.” Trailhead ‘User Interface Development Considerations’

19. ​ A wishlist….. Can we have a set of Lightning Component tags that allow for the same functionality as Visualforce Remote Objects? Can we remove the need for Apex in Lightning?(@AuraEnabled != @RemoteAction) But one thing we can do….. The Mobile SDK DOES allow us to open a Lightning Application as a hybrid remote application! Elephant in the room? Speaking of Lightning

20. ​ All code and step-by-step instructions are at ​ http://devinthecloud.wordpress.com(including all of the code!!) ​ All about Visualforce Remote Objects: ​ https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_remote_objects.htm https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_remote_objects.htm ​ and an excellent blog post here ​ https://developer.salesforce.com/page/Building_Single_Page_Apps_with_JavaScript_and_Visualforce _Remote_Objects https://developer.salesforce.com/page/Building_Single_Page_Apps_with_JavaScript_and_Visualforce _Remote_Objects The great code giveaway….. Useful Links

21. ​ Mobile SDK and Trailhead ​ https://developer.salesforce.com/trailhead/trail/mobile_sdk_intro https://developer.salesforce.com/trailhead/trail/mobile_sdk_intro ​ Add charts to your Visualforce pages http://c3js.org/ ​ Create icons and splash screens for your app: http://ticons.fokkezb.nl/ http://makeappicon.com/ The great code giveaway….. Useful Links (2)

22. Any Questions?

23. Thank you