Libraries we use about development HOT 20 CLOSED

Owning a Home

JS

• jQuery
• React
• Handlebars templates
• Highcharts

CSS/JS

• Capital Framework
• Bootstrap (for tooltips, not sure what else)

Testing

• Mocha
• Chai
• JSDom
• Istanbul for coverage

@virginiacc am I missing anything? @contolini can add testing stuff

from development.

Retirement

JS

• jQuery
• Raphael

CSS

• Capital Framework

from development.

Paying for College

JS

• jQuery
  • decisionStacker (custom plugin)
• Raphael

CSS

• Capital Framework (kind of. Various aspects of CF were implemented the last time the site was rebuilt, but it was an early version. Notable exception: the "Repaying Student Debt" portion of the site uses the latest CF.

from development.

eRegs

JS

• Backbone
• jQuery
• Underscore
• jquery-scrollstop for tracking when scrolling starts/stops and updating the wayfinding subhead
• Unveil for lazy loading images
• Mocha

CS

• normalize.css

shim, shivs, polyfills, feature detection, etc.

• modernizr
• html5shiv
• respond.js
• indexOf polyfill

Testing

• Mocha/Chai

Tooling

• Grunt
• Browserify
• Less

from development.

Wiki Search

• JQuery
• Handlebars

Testing

• Jasmine

from development.

Dash

JS

• React
• Backbone (collections and models are used as Flux stores)
• lodash
• react-router
• react-typeahead

CSS

• Capital Framework

Tooling

• Browserify
• Gulp

Testing

• Jest 😑 (built on top of Jasmine)
• ESLint

HMDA Explorer

JS

• jQuery
• ZeroClipboard
• Highcharts
• Bootstrap tooltips
• Chosen

CSS

• Font Awesome
• cf-icons

Polyfills

• html5-shiv
• normalize-css
• es5-shim
• jquery-jsonp
• json3

Tooling

• Grunt

Testing

• Jasmine

from development.

Mapusaurus

JS

• jQuery
  • Typeahead
  • Easing
  • Tablesorter
  • Tooltipsy
• Underscore
• Leaflet (0.8 Dev)
  • Leaflet-hash custom implementation
  • Leaflet-MiniMap
  • Leaflet-Rrose (tooltip alignment)
  • Leaflet-UTFGrid (because we're using Leaflet 0.8dev)
• Mapbox.js (Standalone)

CSS

• Normalize
• Capital Framework

Tooling

• Grunt
• LESS

Testing

• Behave / Selenium

from development.

cfgov-refresh

JS

• jQuery
  • Easing
  • History.js
• String_Score
• Slick Carousel
• Chosen

CSS

• Normalize
• Capital Framework

shim, shivs, polyfills, feature detection, etc.

• HTML5Shiv
• Browserify Shim
• box-sizing polyfill
• normalize legacy addon
• polyfills:
  • box-sizing (for cf-grid support)
  • addEventListener (IE8 support)
  • querySelector (IE8 partial, IE7-)
  • array functions:
    • forEach (IE8 support)
    • map (IE8 support)

Tooling

• Browserify Webpack
• Grunt Gulp
• Less

Testing

• Mocha with Chai and Sinon
• JSDom
• Istanbul for coverage

@anselmbradford, @jimmynotjim, @sebworks: feel free to edit to add anything I missed.

*I added tooling, not sure if we should include handlebars and validate.js yet but they'll most likely be included shortly - Jimmy

from development.

HDMA Pilot

JS

• Angular
• jQuery

CSS

• Normalize
• CF

Tooling

• Browserify
• Grunt

Documentation

• JSDoc

Testing

• Cucumber
• Protractor

from development.

HDMA - Reports (Prototype)

JS

• Mustache.js
• jQuery

CSS

• Normalize
• Custom Sass

Tooling

• Jekyll

from development.

HDMA - Grasshopper UI

JS

• jQuery
• Mapbox.js

CSS

• Normalize
• Custom Sass

Tooling

• Grunt
• Browserify

from development.

HMDA - Technical Data Specification

JS

• jQuery
• Handlebars

CSS

• Custom Sass (again)

Tooling

• Grunt
• Browserify
• jsondiffpatch

from development.

We should find a home for this long-term and tally the common libraries.

from development.

18F has a great little bit on libraries and frameworks in general that we could fork as part of that.

https://github.com/18F/frontend/blob/master/pages/recommended_dependencies.md

from development.

Writing something for this. Do we have consensus on these as our "common" libraries

JS Libraries

• jQuery
• Handlebars and Mustache.js
• Chosen
• Mapbox.js

JS Framework

• Backbone
• Angular - Someone may need add more details about how both are used in the Bureau. I think there's been discussion about using Angular on future projects.

CSS

• Normalize
• Capital Framework

Testing

• Mocha or Jasmine

Tooling

• Browserify
• Grunt
• Less

from development.

That looks pretty accurate to me @KimberlyMunoz. Nicely done!

One note: We only use Backbone in one production application and I'm not sure if there's interest in using it in any new apps. I don't see us moving eRegs to another JS framework any time soon, so it's probably still worth including.

In terms of Angular, so far we've only used it on internal facing projects. Though, that hasn't necessarily been an intentional choice.

from development.

Flapjack is now using gulp instead of grunt as of cfpb/consumerfinance.gov#797

from development.

I don't think I'll add that to our "common" libraries, but feel free to edit my post above for what Flapjack is currently using. I think y'all added some new polyfills too, right?

from development.

Based on today's meeting, let's codify the above and maybe create some sort of decision tree for when we want to break away from one of our recommended libraries.

That might include things like:

• Can you articulate why your chosen library is a better fit for your project?
• Do we have the in-house capabilities to support this library?
• Is the library well tested and used widely by the development community outside of CFPB?

from development.

Let's document and close this issue.

from development.