FoBo <...data-lift="Front-End Toolkit Module"/>
This pages demonstrates FoBo, an generic front-end toolkit module for Lift, that, quickly and easily, will integrate some of the industry leading web-centric open source front-end toolkits (like Twitter Bootstrap, angularJS and more) into your Lift application, giving you the flexibility and choice of setting up and use the toolkits of your liking without cluttering your applications source base.
FoBo provides smooth toolkit upgrades and easy fallback/downgrade by simultaneously supporting several versions of the included toolkits and by minimizing the point of change with uniform template declarations that also provides debug-able js and css files in development and minimized files otherwise. A toolkit upgrade/downgrade can be as easy as changing the toolkit initiation code line in Lift boot.
Added to this is a growing number of FoBo API functions that give you even more ease of usage, power and control.
Other from reading the FoBo - Bootstrap Setup and Usage specific page or the more general Setup and usage section below, and the FoBo API, the most up to date way to explore and learn how to use the FoBo module is to fork and/or study the Lift v2.6 Template Applications with Bootstrap v3 or the Templating With Twitter Bootstrap. They are Lift starter template project's that includes FoBo for its Bootstrap support. You can also study this demo code on Github.
Also check out the integrated toolkit documentation for a comprehensive list of the toolkit’s features included in this demo.
Responsive Design with FoBo
FoBo comes with setup options for several front end toolkits including ZURB/Foundation, Twitter Bootstrap and JQuery Mobile. ZURB/Foundation and Twitter Bootstrap are both great responsive and media scalable toolkits. The JQuery Mobile toolkit is an awesome Touch-Optimized Web Framework for Smartphones & Tablets.
What is Lift?
If you ended up on this page and don’t know what Lift is, I will sum it up for you by quoting:
Lift is the most powerful, most secure web framework available today.liftweb.net
and if you ask me, I will add Lift simply Rocks!. As David Pollak, Lift’s founder, will show you in the video, there are Seven Things that distinguish Lift from other web frameworks and here is a Hot New podcast by David Across Time and Address Space: Lift 3.0 over at SkillsMatter, Functional Programming eXchange 2013.
- Lift applications are:
- Secure -- Lift apps are resistant to common vulnerabilities including many of the OWASP Top 10
- Developer centeric -- Lift apps are fast to build, concise and easy to maintain
- Scalable -- Lift apps are high performance and scale in the real world to handle insane traffic levels
- Interactive like a desktop app -- Lift’s Comet support is unparalled and Lift’s ajax support is super-easy and very secure
- Modular -- Lift apps can benifit from, easy to integrate, pre built modules
- Designer friendly -- Lift apps can be developed in a totally designer friendly way
The Twitter Bootstrap toolkit
The Twitter Bootstrap toolkit is a great toolkit with lots of components and candy. It’s simple and flexible and has popular user interface components and interactions. FoBo inculdes both the v2.x and v3.x series of Bootstrap
Font Awesome is a iconic font designed for use with Twitter Bootstrap but it can be used as-is with other toolkits. You can see it used in this demo as a replacement of Bootstrap’s icon glyphs.
AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. It is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries.
- FoBo has support for AngularJS and several Angular components including:
- AngularJS - AngularJS framework.
- UI Bootstrap - Bootstrap components written in pure AngularJS.
- ng-grid - Angular Data Grid written in AngularJS and jQuery by the AngularUI Team.
- Some of Knockouts key concepts is:
- Declarative Bindings - Easily associate DOM elements with model data using a concise, readable syntax.
- Automatic UI Refresh - When your data model’s state changes, your UI updates automatically.
- Dependency Tracking - Implicitly set up chains of relationships between model data, to transform and combine it.
- Templating - Quickly generate sophisticated, nested UIs as a function of your model data.
For user convenience FoBo wraps the Lift juery module and embeds it into the FoBo namespace.
Google Code Prettify
Pace Automatic page load progress bar, you get a beautiful progress indicator for your page load and ajax navigation. You can see it in action when loading these pages using one of it's simplest css stylings.
Responsive Web - If you have not done it already open this demo in your favorite smart device. Get the url quick and easy by pointing your barcode reader to the barcode image.
Scroll the page to see the navbar scrollspy function provided by bootstrap.
Drag the window to see bootstraps (and foundations) fluid and reactive grid with mobile scalabilty in action.