Mobilizing your Visualforce Application with jQuery Mobile and Knockout.js
Download as PPT, PDF1 like2,179 views
The document presents strategies for mobilizing Visualforce applications by transitioning to a modern web application framework. It emphasizes the importance of client-side business logic, efficient data handling, and the integration of various JavaScript libraries to enhance performance and user experience. Additionally, it outlines best practices and lessons learned from experiences in developing mobile applications.
Mobilizing your Visualforce Application with jQuery Mobile and Knockout.js
- 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 Checkbox Start Survey Start Survey Retrieve Question Retrieve Question Radio Buttons Radio Buttons Text Area Text Area Update Question Update Question Response Response Complete Survey 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 Jquery Jquery Mobile Mobile Cross device 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 Jquery Jquery Mobile Mobile JavaScript JavaScript Reduced round trips JavaScript JavaScript Remoting 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 Jquery Jquery Mobile Mobile Knockout Knockout JavaScript JavaScript JavaScript JavaScript Remoting Remoting Automatic refresh JavaScript “controller” Fast!
- 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
Editor's Notes
- #10: Options – native, hybrid,htm5. Users not going to install an application to take the odd survey.
- #15: JQM and Visualforce fight for control of navigation and form postbacks. It ends up feeling like a regular web site, as every action requires a round trip with a full page reload. Mention server side view state pilot in winter 14 – this will help with point 2, but latency is still the killer for round trips. Network interfaces go to sleep to conserve battery life. Mobile devices Packet loss is inevitable in mobile networks – this is interpreted as congestion and the transmission speed is decreased.
- #16: Lots of large viewstate consumes bandwidth and makes things slow Server side is back to the future – I have to work with what is GA.
- #22: Extracting list of responses from the database.
- #23: Everything is asynchronous.