Fuel UX at IndyJS

Introduced the group to Fuel UX and presented a concept for using Handlebars templates to streamline Fuel UX usage.

Fuel UX on GitHub:

https://github.com/ExactTarget/fuelux

Live documentation:

http://exacttarget.github.com/fuelux (current release)
https://dl.dropbox.com/u/2202802/fuelux2.2-pageswip/index.html (2.2 preview)

Fuel UX Roadmap:

http://fuelux.uservoice.com

Fuel UX Handlebars concept:

https://github.com/adamalex/fuelux-hbconcept
http://fuelux-hbconcept.cloudfoundry.com

Follow for Fuel UX updates:

https://twitter.com/adamalex
https://twitter.com/ETfuel

Transcript

1. Fuel UX Adam Alexander, ExactTarget @adamalex
2. Fuel UX • Web UI control library for consistent cross-browser UI • Established 2010 with AMD modules and solid design patterns • AMD = asynchronous module definition (pioneered by RequireJS) • Version 2 moved from jQuery UI to Twitter Bootstrap • Uses Grunt and RequireJS for unit tests, build, optimization, packaging • Open source (MIT license) as of October 2012
3. Fuel UX includes Bootstrap • Scaffolding, grid system, basic layouts • Normalized CSS, typography, code, buttons, icons • Rich CSS tabs, pills, navigation, alerts, progress bars • JavaScript modal, popover, content collapse, carousel, more • Uses LESS for CSS, easy to customize with variables • Allows for a complete “style guide” for any web site
4. Fuel UX adds additional JS controls • Combobox combines input and dropdown for easy and flexible data selection • Datagrid renders data in a table with paging, sorting, and searching • Pillbox manages selected items with color-coded text labels • Search combines input and button for integrated search interaction • Spinner provides convenient numeric input with increment and decrement buttons
5. Fuel UX 2.2 adds more JS controls • Checkbox consistent UI cross-platform and cross-browser • Radio consistent UI cross-platform and cross-browser • Select consistent UI cross-platform and cross-browser • Tree renders data in an expandable tree structure • Wizard supports step-by-step navigation and content switching
6. Fuel UX is quality open source • Live documentation combines documentation and example code • Unit tests cover all functionality, automated with Travis CI • GitHub issues are monitored and fixed • Pull requests are accepted • Roadmap is on UserVoice for voting on new features • Contributions are welcome
7. Fuel UX project demo • Live Documentation • GitHub project walkthrough • Customization
8. Markup-driven UI • Fuel UX follows conventions from Bootstrap • Most JS controls can be auto-instantiated from markup • Drop markup on page, control just works • The markup can be verbose (example)
9. Fuel UX is modular • Fuel UX is a core standalone library • Basic markup method fits some use cases and developer preferences • Or, use with Handlebars • Or, use with other template libraries • Or, wrap with a JavaScript API to generate markup using code • Fuel UX supports these use cases and more, semantically versioned
10. ExactTarget is hiring top JavaScript engineers • Impressed with Fuel UX? • Enjoy this type of frontend development and research? • Like Node.js? We use it a lot and will be using it even more • Contact aalexander@exacttarget.com or @adamalex on Twitter
11. Questions? Adam Alexander, ExactTarget aalexander@exacttarget.com @adamalex