Creating HTML5 Applications with
jQuery Mobile, Ruby and
Database.com
Developer Track
Senior Technical Consultant, Appirio & Platform Architect, CloudSpokes
@jeffdonthemic
Safe harbor
 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
 intellectual property and other litigation, risks associated with 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-Q for the most recent fiscal quarter ended July 31, 2012. This
 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.
Jeff Douglas
Senior Technical Consultant, Appirio
Platform Architect, CloudSpokes
Co-Author, “Salesforce Handbook”
& “Beginning Java Google App Engine”


http://blog.jeffdouglas.com
@jeffdonthemic
Appirio Helps Enterprises Power Their Business with
    Public Cloud Solutions

                              Helping Enterprises Become:
                          Efficient      Effective     Agile
                                  Social          Mobile



                            Technology-enabled professional services,
                                supported by 500 cloud experts and
                              a 50,000+ cloud developer community
                      5 years, 300 enterprises, 1.5M users moved to the cloud




4
What to walk away with
  Strategies for building mobile applications with the Force.com platform.
  Mechanics on how to build a jQuery mobile application with
   Database.com and Ruby on Rails.
  Sample code for your mobile project.
  Best practices with Force.com mobile application with Ruby on Rails and
   Database.com.
  A deep love and appreciation for the Force.com platform.
Agenda
  Mobile development strategies
  Salesforce Mobile SDK
  The “Mobile Chow Finder” application
  Technology stack overview
      • Database.com
      • Ruby on Rails
      • jQuery Mobile
      • Databasedotcom gem
  Demo (aka “Show me the code!”)
Native vs. HTML5 vs. Hybrid
Native applications
  Pros
      • Feature rich, look & feel and performance
      • Objective-C & Java
      • Easy to find applications
      • Easy to monetize applications
  Cons
      • Limited to single platform
      • Objective-C & Java
      • Distribution via Apple App Store and Google Play
HTML5 applications
  Pros
      • A "write one, run many" solution that is cross platform and cross device
      • Low barrier to entry - HTML5, CSS3 & JavaScript skills
  Cons
      • Not up to par with the native app experience
  “Frameworks”
      • jQuery Mobile
      • Sencha Touch
      • jQTouch
Hybrid applications
  Pros
      • Application framework that enables you to build natively installed applications
        using HTML, CSS and JavaScript.
      • Supports accelerometer, camera, compass, contacts, geolocation, sotification,
        storage and more.
      • PhoneGap Build – no SDKs to install! Spits out binaries for 7 mobile platforms
      • Discover and monetize via App Store and Play
  Cons
      • PhoneGap: Doesn‟t look native
      • Titanium: Platform specific API via JavaScript for Android & iOS. No HTML or
        CSS support.
CloudSpokes HTML5 Apps
Salesforce.com Mobile SDK
  Suite of open-source technologies for iOS, Android, HTML5 and hybrid
   applications
  Sample applications, quick start and webinars
  Mobile components for Visualforce
  Easy to build jQuery Mobile Visualforce applications
Building the “Mobile Chow Finder”
  HTML5 application for service members to find the local “Chow Hall”
  Database.com
  jQuery Mobile
  Ruby on Rails
  Geolocation
  Store favorites using LocalStorage
jQuery Mobile - View
  Super easy! Uses web standard HTML5, CSS3, and JavaScript to easily
   develop user interfaces for mobile web apps
  Framework built on top of jQuery – EVERYONE loves jQuery!
  Provides custom events to detect mobile and touch specific actions like
   tap, tap-and-hold, swipe, and orientation change (i.e. rotating the device).
  We are just building web pages!!
Database.com - Model
  A secure, cloud database for building social and mobile enterprise apps.
  Slimmed down version of Force.com database (essentially the Setup
   section)
       • Only custom objects (no CRUD UI)
       • Apex classes, triggers & workflow
       • Identity & user management plus role and profile security
       • Oauth2 & REST baked in
  Utilize your favorite Force.com tools
  Pricing based upon user licenses, records and transactions
Ruby on Rails - Controller
  Great for quickly building social and mobile applications
  Leverage thousands of open source packages and frameworks to build
   amazing applications.
  Databasedotcom Ruby gem
       • Open source ruby client for accessing REST and Chatter APIs
       • Supports OAuth2
       • ActiveRecord syntax
       • Should be called „Forcedotcom‟ gem
  Host the application on Heroku – WINNING!
Let’s code this sucker up!
Recap – What did we just see?
  Strengths and weaknesses of mobile application development strategies.
   When to use one versus the other.
  The Salesforce.com Mobile SDK embraces all three development
   approaches.
  Advantages of using Database.com as a data store.
  How to quickly and easily develop HTML5 mobile applications using open
   source technologies.
  Best practices for developing mobile applications.
Additional Resources
  Mobile Framework Comparison
  HTML5 vs Native: The Mobile App Debate
  Force.com Mobile SDK
  Getting Started with jQuery Mobile
  Sample Application Code (github)
  Databasedotcom Gem (github)
Jeff Douglas
Senior Technical Consultant, Appirio
 Platform Architect, CloudSpokes
          @jeffdonthemic
Creating HTML5 Applications with jQuery Mobile, Ruby and Database.com

Creating HTML5 Applications with jQuery Mobile, Ruby and Database.com

  • 1.
    Creating HTML5 Applicationswith jQuery Mobile, Ruby and Database.com Developer Track Senior Technical Consultant, Appirio & Platform Architect, CloudSpokes @jeffdonthemic
  • 2.
    Safe harbor Safeharbor 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 intellectual property and other litigation, risks associated with 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-Q for the most recent fiscal quarter ended July 31, 2012. This 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.
  • 3.
    Jeff Douglas Senior TechnicalConsultant, Appirio Platform Architect, CloudSpokes Co-Author, “Salesforce Handbook” & “Beginning Java Google App Engine” http://blog.jeffdouglas.com @jeffdonthemic
  • 4.
    Appirio Helps EnterprisesPower Their Business with Public Cloud Solutions Helping Enterprises Become: Efficient Effective Agile Social Mobile Technology-enabled professional services, supported by 500 cloud experts and a 50,000+ cloud developer community 5 years, 300 enterprises, 1.5M users moved to the cloud 4
  • 5.
    What to walkaway with  Strategies for building mobile applications with the Force.com platform.  Mechanics on how to build a jQuery mobile application with Database.com and Ruby on Rails.  Sample code for your mobile project.  Best practices with Force.com mobile application with Ruby on Rails and Database.com.  A deep love and appreciation for the Force.com platform.
  • 6.
    Agenda  Mobiledevelopment strategies  Salesforce Mobile SDK  The “Mobile Chow Finder” application  Technology stack overview • Database.com • Ruby on Rails • jQuery Mobile • Databasedotcom gem  Demo (aka “Show me the code!”)
  • 8.
    Native vs. HTML5vs. Hybrid
  • 9.
    Native applications Pros • Feature rich, look & feel and performance • Objective-C & Java • Easy to find applications • Easy to monetize applications  Cons • Limited to single platform • Objective-C & Java • Distribution via Apple App Store and Google Play
  • 10.
    HTML5 applications Pros • A "write one, run many" solution that is cross platform and cross device • Low barrier to entry - HTML5, CSS3 & JavaScript skills  Cons • Not up to par with the native app experience  “Frameworks” • jQuery Mobile • Sencha Touch • jQTouch
  • 11.
    Hybrid applications Pros • Application framework that enables you to build natively installed applications using HTML, CSS and JavaScript. • Supports accelerometer, camera, compass, contacts, geolocation, sotification, storage and more. • PhoneGap Build – no SDKs to install! Spits out binaries for 7 mobile platforms • Discover and monetize via App Store and Play  Cons • PhoneGap: Doesn‟t look native • Titanium: Platform specific API via JavaScript for Android & iOS. No HTML or CSS support.
  • 12.
  • 13.
    Salesforce.com Mobile SDK  Suite of open-source technologies for iOS, Android, HTML5 and hybrid applications  Sample applications, quick start and webinars  Mobile components for Visualforce  Easy to build jQuery Mobile Visualforce applications
  • 15.
    Building the “MobileChow Finder”  HTML5 application for service members to find the local “Chow Hall”  Database.com  jQuery Mobile  Ruby on Rails  Geolocation  Store favorites using LocalStorage
  • 16.
    jQuery Mobile -View  Super easy! Uses web standard HTML5, CSS3, and JavaScript to easily develop user interfaces for mobile web apps  Framework built on top of jQuery – EVERYONE loves jQuery!  Provides custom events to detect mobile and touch specific actions like tap, tap-and-hold, swipe, and orientation change (i.e. rotating the device).  We are just building web pages!!
  • 17.
    Database.com - Model  A secure, cloud database for building social and mobile enterprise apps.  Slimmed down version of Force.com database (essentially the Setup section) • Only custom objects (no CRUD UI) • Apex classes, triggers & workflow • Identity & user management plus role and profile security • Oauth2 & REST baked in  Utilize your favorite Force.com tools  Pricing based upon user licenses, records and transactions
  • 18.
    Ruby on Rails- Controller  Great for quickly building social and mobile applications  Leverage thousands of open source packages and frameworks to build amazing applications.  Databasedotcom Ruby gem • Open source ruby client for accessing REST and Chatter APIs • Supports OAuth2 • ActiveRecord syntax • Should be called „Forcedotcom‟ gem  Host the application on Heroku – WINNING!
  • 19.
  • 20.
    Recap – Whatdid we just see?  Strengths and weaknesses of mobile application development strategies. When to use one versus the other.  The Salesforce.com Mobile SDK embraces all three development approaches.  Advantages of using Database.com as a data store.  How to quickly and easily develop HTML5 mobile applications using open source technologies.  Best practices for developing mobile applications.
  • 21.
    Additional Resources Mobile Framework Comparison  HTML5 vs Native: The Mobile App Debate  Force.com Mobile SDK  Getting Started with jQuery Mobile  Sample Application Code (github)  Databasedotcom Gem (github)
  • 22.
    Jeff Douglas Senior TechnicalConsultant, Appirio Platform Architect, CloudSpokes @jeffdonthemic

Editor's Notes

  • #3 So this is the safe harbor that we all know and love. Feel free to read it at your leisure.
  • #4 OK… so this is me.
  • #5 Appirio helps enterprises power their business with cloud solutions like Salesforce, Google, Workday and AmazonBy adopting, connecting and extending these and other cloud platforms, we can help customers to become more efficient, agile and effective than ever beforeWe do this with professional services that are delivered by our 500+ cloud experts and supported by a 40,000 person developer community and unique technology built from over 1000 projects We’ve been in business for 5 years, have worked with 300 enterprises and have moved more than 1.5M users to the public cloudWe’ve been privileged to work with many of the world’s largest and most forward thinking companies – Genentech, Dell, Home Depot, DeVry, PayPal, Facebook, Japan Post and many more
  • #6 So what’s my goal today? Here’s what I want you to walk away with. After this session I’d like you to walk away with…CHECK TO SEE IF ANYONE HAS jQuery Mobile experience or Rails experience
  • #7 I hate powerpoint so I’m going to try to get through these slides as quickly as possible and dive into code.
  • #9 The choice is getting harder with each passing day. Depends on the type of application, development skills and target audience:First person shooter… native. A lead entry system…. HTML5If you have a lot of hard-core Java guy… go native Android. More web developers… go HTML5If you are like Instagram and only targeting iPhones… go native iOS. If you want your app to run “everywhere”… go HTML5.You see more and more companies like salesforce.com, Facebook and LinkedIn going hybrid. Don’t want to support multiple builds for different platforms.
  • #12 This slide should be called, “What is PhoneGap so AWESOME!”Think of it as a native wrapper around web apps that provides access to native functionality
  • #16 So now that we know a little more about mobile app dev, let’s build something.LinkedInHackday finalist