Create Engaging Apps with Visualforce and Bootstrap

Editor's Notes

1. 2 years ago SF introduce my favorite feature called JS remoting. And this feature open a new world of possibilities for you VF apps. This was ground breaking! Earth Shattering! Why? It bypasses the Visual force rendering engine and returns raw JSON objects from the controller. ( before we needed to create a dummy VF page and build JSON) This was important for two reasons. 1.) Our apps run faster if we can avoid VF engine to pass us full html, and let our browsers to do the heavy lifting 2.) Modern web frameworks are JS based and they like there data as Javascript objects called JSON All the common UI patterns have be catalogued and classified with painstaking detail. Fortunately for us they fit nicely into the Object Orientated Programming concept we learned about in college. Cascading Style sheets and Javascript are very conducive to store these Classes. Because this effort has been already done by others this gives us the opportunity to focus on what is important and what is hard. The business logic! I like Bootstrap (others are HTML5 boiler plate, Zurb Foundation, skeleton HTML Kickstart) are all HTML5 responsive frameworks
2. Why we selected bootstrap, there are other good ones out there. The important lesson here is to pick a framework and stop using disparate JS libs Highlight just a few features that illustrate the power Give a little background for the project that I will demo
3. If you just use the css, your app will look better. You should shop for features not build them. (grid system, modal, carousels come default) This is a framework library so plugins are widely available (search for bootstrap plugins), jquery is included but if you app is already using it you may omit it from the bundle. Just load as a static resource Due to its popularity you can’t throw a rock at the internet and not find a tutorial on using bootstrap. The providers (getboostrap.com) documentation is fantastic. Due to it market penetration and wide acceptance by developers it is here to stay Developers love it and love to show hat they can do with it = many blog articles and tutorials Using a framework like bootstrap will allow you to focus on the things that are important. It commoditizers the common web UI components so you can foucs on what matters, The logic.
4. For most this is the ahh ha moment of why to use a framework like boostrap We start with a simple unorder list, which generates a bulleted list, basic html 101 stuff Next we add three class the first tells us or UL should now be a navigation the second tells us that we want to use tabs the third makes the first item active This is Huge! You don’t need to be a coder to do this, You don’t need to be able to write Javascript to do this.
5. Change tabs to pills Stack them and apply 2 cols to the object You don’t need to be a code, you just need to follow directions More shopping less coding! Glyphs are icons stored as fonts, font-awesome, since they are SVG and not images they scale without distortion
6. Definition from gettbootstrap From twitter Set of core JS libries and matching css Shop don’t code
7. Background for the demo. Users are mostly retired volunteers with a background in diabetes They triage cases from standard web to case and ‘assign’ them to other volunteers who respond to the requestors via email and bcc a email handler that will log the response and close the case. It had to mimic the screens of the existing app so the service console was not an option. There are two types of volunteers, VM and CV. CVs don’t have SF accounts and they respond to the requests using email, and email handlers (bcc) are used to log the response and close the case The majority of the time was spent on the business logic and not the UI.
8. This slide illustrates complexity behind the business logic. We only had 8 weeks to complete this project, and the logic was complex. We couldn’t dedicate too much time to the front end which is why we used bootstrap.
9. Before we jump into the demo I just wanted to point out some ‘landmarks’ to watch for. In all my projects I take screenshots of the UI and label certain regions and call this mapping landmarks. ( nav bar, sub nav, list view) This way I can communicator with the beta testers better and we can be sure we are talking about the same thing.
10. This modal drops in from the bottom, this is yet another feature of boostrap that can be achieved by simply adding a class. The backdrop shading is a default behavior of a modal and most people like it because it turns the focus on what the user needs to do next. Many input types achieved by classes. This uses js remoting to get the picklist values The search button does not close the modal, this was a modification to the default behavior and was achieved by simply adding a class.