Mobilizing Your Visualforce Application With JQuery and KnockoutJS
•
0 gostou•887 visualizações
Join Force.com MVP Keir Bowden (aka Bob Buzzard) to learn how to mobilize your Visualforce applications. We'll take an existing survey application and make it mobile by creating pages based on the JQuery Mobile framework, replacing stateful controllers with Javascript remoting, and using Knockout.js to manage client-side data.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Semelhante a Mobilizing Your Visualforce Application With JQuery and KnockoutJS
Semelhante a Mobilizing Your Visualforce Application With JQuery and KnockoutJS (20)
Mais de Salesforce Developers
Mais de Salesforce Developers (20)
Último
Último (20)
Mobilizing Your Visualforce Application With JQuery and KnockoutJS
- 1. Mobilizing Your Visualforce Application Keir Bowden, BrightGen, CTO @bob_buzzard
- 2. About me ▪ CTO of BrightGen ▪ 5 years Force.com ▪ Force.com MVP ▪ Enterprise Java background
- 3. Styling isn’t mobilizing! “Mimicking a mobile device UI turns my slick Visualforce pages into slick HTML5 web applications” – me, circa. Dreamforce 2010 It doesn’t. Here’s why (and how it should be done) ...
- 4. Sample application ▪ Native ▪ Survey ▪ Multiple answer types ▪ Back/forward navigation
- 6. Flow Checkbox Start Survey Retrieve Question Radio Buttons Text Area Update Question Response Complete Survey
- 7. Demonstration The desktop version of the application ...
- 9. HTML5 Web Application ▪ Web pages ▪ Accessed via browser ▪ Basic device features ▪ Transactional
- 10. Part 1: jQuery Mobile ▪ Mobile UI framework ▪ Touch optimized ▪ Cross device Jquery Mobile ▪ Built on jQuery
- 13. Mobilizing the wrong way ▪Replace Visualforce markup with jQuery Mobile markup ▪Set viewport to device size ▪Leave controller in place
- 14. Competition not co-operation ▪ Page navigation ▪ Form submission ▪ Ajax rerendering
- 15. View state ▪ Mobile bandwidth ▪ Heavy for device ▪ Server side in pilot
- 16. Latency ▪ Power saving ▪ Packet loss ≠ congestion ▪ TCP backs off ▪ “Nobody wants to wait while they wait.” - Mike Kreiger, Co-founder Instagram
- 17. Demonstration The desktop version with jQuery Mobile markup
- 18. Visualforce
- 19. Rebuild the app for mobile ▪ Mobile experience ▪ Animated transitions ▪ Reactive
- 20. Part 2: JavaScript ▪ Business logic ▪ Executes client side ▪ Reduced round trips Jquery Mobile JavaScript JavaScript Remoting ▪ No API calls
- 21. JavaScript Remoting ▪ Controller method
- 22. JavaScript Remoting ▪ Invoke via JavaScript ▪ Callback function
- 23. Part 3: Knockout ▪ Reduce DOM manipulation ▪ Declarative binding ▪ Automatic refresh Jquery Mobile Knockout ▪ JavaScript “controller” ▪ Fast! JavaScript JavaScript Remoting
- 26. Advanced binding Question 1 Question 2 Question 3 •Type=‘Text Area’ •Type=‘Text Area’ •Type=‘Checkbox’ •Response=‘Great’ •Response=‘Okay’ •Response=‘true’
- 27. Progressive enhancement jQuery Mobile enhances markup ▪HTML -> CSS -> JavaScript ▪Only runs once ▪Knockout updates the DOM
- 28. Demonstration The survey application rebuilt for mobile.
- 29. Lesson 1: Storyboard the application ▪Especially single page applications! ▪Map pages to functionality ▪Identify swipe transitions
- 30. Lesson 2: Client side business logic ▪ On device - faster ▪ Eases transition to hybrid ▪ Don’t mix with server side!
- 31. Lesson 3: Professional JavaScript ▪ Avoid anonymous functions ▪ Use your own namespace ▪ Don’t tie behaviour to content
- 32. Lesson 4: Combining frameworks ▪ Rarely as simple as combining resources ▪ You are the conductor ▪ Persevere!
- 33. Competition ▪ Quiz on this session ▪ QR code/link in chatter feed ▪ Closes 8pm ▪ Win my book