JavaScript Integration with Visualforce Description Visualforce has come a long way when with its ability to integrate with JavaScript. Developers are no longer limited to simply looping Apex functions via the actionFunction component, with Remote Objects live in the last Summer release it is possible to create fully functional HTML5 applications without writing any Apex for basic cread, read, update, delete and query functions. Join Developer Evangelist Josh Birk as he walks through the various aspects of Visualforce which makes it easy to build applications in a variety of HTML5 frameworks and libraries. Key Takeaways ::Visualforce now supports a fine level of control over how the page is constructed ::With JavaScript Remoting and Remote Objects you can easily integrate the data layer into your application ::Integrating existing HTML5 frameworks and libraries is easy with Visualforce Intended Audience ::Existing Visualforce developers looking to keep up to date on the latest features when using JavaScript. ::HTML5 Developers interested in leverage Visualforce to build their applications. Recommended Resources: https://developer.salesforce.com/en/events/webinars/JavaScript_Integration_with_Visualforce

1. Javascript Integration
with Visualforce
November 13, 2014

2. #forcewebinar
Speakers
Joshua Birk
Developer Evangelist
@joshbirk
Varun Dodla
SMTS
@varundodla

3. 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.
#forcewebinar

4. Go Social!
@salesforcedevs / #forcewebinar
Salesforce Developers
Salesforce Developers
Salesforce Developers
+Salesforce Developers
#forcewebinar
This webinar is being recorded!
The video will be posted to YouTube
& the webinar recap page
(same URL as registration).

5. Have Questions?
▪ Don’t wait until the end to ask your question!
– Technical support will answer questions starting now.
▪ Respect Q&A etiquette
– Please don’t repeat questions. The support team is
#forcewebinar
working their way down the queue.
▪ Stick around for live Q&A at the end
– Speakers will tackle more questions at the end, time-allowing.
▪ Head to Developer Forums
– More questions? Visit developer.salesforce.com/forums

6. Agenda
1. Making Visualforce JavaScript friendly
2. Leveraging JavaScript Remoting with Visualforce
3. Using Remote Objects with Angular.js
#forcewebinar

7. Setting up Visualforce for HTML5
Set the DOCTYPE
<apex:page
#forcewebinar
standardStylesheets="false"
showheader="false"
sidebar="false"
applyHtmlTag="false"
applyBodyTag="false"
docType="html-5.0"
>

8. Setting up Visualforce for HTML5
Control the HTML and BODY tags
<apex:page
#forcewebinar
standardStylesheets="false"
showheader="false"
sidebar="false"
applyHtmlTag="false"
applyBodyTag="false"
docType="html-5.0"
>

9. Setting up Visualforce for HTML5
Using HTML Pass-throughs
<apex:outputPanel layout="block" html-data-role="panel" html-data-id="
menu">
<apex:insert name="menu"/>
</apex:outputPanel>
#forcewebinar
<div data-id="menu" data-role="panel">
<!-- contents of menu -->
</div>

10. Reveal.js

11. Know your viewstate
<apex:form>
nb20PkvDuyhYKej7X7Yg0WPs9EwUp3k+Cvicdkns390SDL3ZDt3y/ZO82y4DlZmA3ng37FZAkRbDv8lMHSWO7v8e8AEtPHfX6fTHA5Gn+0hMmY2U0RX2BpYZy/rE0Xf2870KV01kde5ubUja3+mZG/bFGiTJO91qgYvs9Z617jl2Uj1r58aDjpjB3WqWr0InDPjiKoinADwje/76ruit5vEzfMzzJ+2XIb9eoeo1l4iRfre234PSUL1
vGJYcM5Xk/woa5Z2dBjotK4DEgPzZ22Q8nbC8qTZVh3MyiebCUgP1yFWDo7hCRzenxwpP26ORu4ISSryWFZKJZ+7F/3kh8T8biSxSC4rE2zjBzUL63ndxssXTMlnx
+mwRDEnEJ+LtiEfgfaluiSGabe8+hRRapYnkcAl3LH6QSAAGLKL8CRP+xbBmmjcghxTQ6TuhUDqskjRbW6pOpC15MvPw5kBwxWr/EaCRdXCmHw6S8RNv2SvjsdWdH
/lnQLDXTZlIXeNLmzBmfGFkJ18InyEiJ9cvRZ8z2aZyG3AI/UoBdXfm5CGp0+5p2klBYpxuxLILJHBejsWZ7nEJDkqAYaVLirhuDc0lLKkgELB/Y7b1M4yt/1MJCxHWVdc5bzD7VbLjWrXIO5Svf1tCUUR9GgYi4Mog1cDWAlLRSxqQTweuwN1bCWxZzMgC/NfhTdxfCv5WV2h8ak1jTDDiWYn6HUfpV3qeiiUY67MmvSpcSgcMOW
dzSADWNIQNiyMVVWW8KqYnV35bcaxJkPZBRKrdC4Ppye/X217jlkJxoP8IcRG7kNmAsg0DBlLZmDU56/qNU3Od1PMOMjtNI/Cyw8pVvAJxCvPtbG0dV/nf75kbSLdTTlsaFa4xXq23Gb1tiFgo3ujSVVXuUbViNh13pAC39fnQ7uxoaf9H9/EGZYhJW7SrR9HVPPUswq2dEmJpauTNNcoJvVeoMeEmk1UuP0EQxBJ7q9XLEcT
eOUMyIY9/YbulAtlsIP9nC5EWEZnXWexBFOQtFBOShaoUBWDfubIVrJPytEoXEZpSBXdrvXof6n9iY7X+xaq9YE9XOUx9VQW/zG+9UwCS0/Asq8n/yXgoT6dXRYg+xizPB1A7MrTtuVuJsONzr71ff2Opbf83K0lquX+ZrM4yy68ue3wtxMDSA0q9FaU3zb9kFP7MaRN5mMyzKtsliaze+KZojInnJ1qFUFY0VfTjLEI6NC2UYHK
</apex:form>
#forcewebinar

12. Integrate JavaScript directly with Apex
Using JavaScript Remoting
@RemoteAction
global static Contact makeContact
Visualforce.remoting.Manager.invokeAction(
#forcewebinar
'{!$RemoteAction.ContactExtension.makeContact}',
“003i000000cxdHP”, “Barr”
function(result, event) {
//...callback to handle result
alert(result.LastName);
});
(String cid, String lname) {
return new Contact(id=cid,Last_Name=lname);
}
Visualforce Apex

13. JavaScript Remoting Advantages
1. No viewstate, performs better with larger data sets
2. Direct integration with existing JavaScript
3. No use of the API scope
#forcewebinar

14. Remote Objects for integrating directly with data
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" jsShorthand="contact"
#forcewebinar
fields="FirstName,LastName,Id,Email"/>
contacts.retrieve({},function(error, records) {
if(error) { console.log(error.message); }
else {
data = records;
});

15. Remote Objects Advantages
1. Same advantages of JavaScript Remoting
2. No Apex Required
3. Can reference multiple data models
4. Can replace specific functions with JavaScript Remoting
#forcewebinar

16. #forcewebinar
Remote Objects with
d3.js

17. #forcewebinar
Remote Objects with
Angular.js

18. Get the code
▪ Reveal / C3.js / JS Remoting / D3.js
▪ https://github.com/joshbirk/VFWebinar
▪ Angular.js / Isotope / Streaming API
▪ https://github.com/unvar/remote-object-ops-dashboard
#forcewebinar

19. The Frameworks
▪ jQuery
▪ Reveal.js
▪ C3.js
▪ D3.js
▪ Angular.js
▪ Isotope
▪ ngRemote
#forcewebinar

20. BRAND NEW! Introducing Trailhead
• Interactive learning paths
• Earn badges and points
• Declarative and Programmatic
#forcewebinaCr hallenge Yourself! http://developer.salesforce.com/trailhead

21. #forcewebinar
New App Builders
http://www.udacity.com/salesforce
Experienced App Builders
Developer Workshop
Fast Track Tutorial for Experienced
Developers
http://ccoenraets.github.io/salesforce-developer-
workshop
More Free Online Tutorials

22. Join us in the Developer Zone
#forcewebinar
Salesforce World Tour
New York City
Wednesday, November 19, 2014
Register here: http://sfdc.co/nyc2014

23. Join us at the
Developer Workshop
December 5, 2014
London, United Kingdom
Register early, seating is limited!
https://bit.ly/elevate-london

24. #forcewebinar
Next Webinar
Using Lightning Process Builder
to clean up Existing Workflows
December 3, 2014

25. #forcewebinar
Survey
Your feedback is crucial to the success
of our webinar programs. Thank you!
http://bit.ly/javascriptVF

26. #forcewebinar
Q & A
Joshua Birk
Developer Evangelist
@joshbirk
Varun Dodla
SMTS
@varundodla
Survey Link: http://bit.ly/javascriptVF

27. Thank You