Front-End Development Is Where Details Matter
Part 2 of the 3 from: The Technologies We Use for Great Causes
The front-end is one of the most important pieces of the puzzle when developing web applications. We make great efforts to ensure that we’re delivering a great user experience when building software.
Which Tool To Use: Front-end Frameworks
Not only do we aim around supporting the best user experience possible, but we believe in delivering that experience as soon as possible to users of our applications. We try to provide a consistent experience across all browsers, typically employing the latest and greatest in HTML5 and other leading-edge technologies.
There have been huge advances in frontend code frameworks in the last couple of years. Standard tools in our toolbelt include Twitter Bootstrap and Modernizr, just to name a couple. We tend to approach responsive design using mobile-first tactics to provide the best experience across as many devices as possible.
We’ve also been known to play with Meteor for some fast prototyping of concepts. Having both server and client code interspersed is a different paradigm, but keeping everything in a single language sure reduces the skillset requirements.
Building Things Out
No longer constrained to just the backend, compilers and dependency management have made their way to our frontend toolbelt as well. Grunt and Gulp run a lot of our build tasks, including script concatenation, validation, minification, and string replacements between staging and production. Bower and npm help with dependency management. We’re continually exploring new tools in this arena, as new ones pop up all the time.
Javascript
While we definitely have some Javascript aces on our team, we’re always on the lookout for quality libraries to aid in providing an awesome user experience.
Often, the foundation of our Javascript interactions rests with none other than jQuery and jQueryUI, although we are more frequently utilizing client-side templating libraries like AngularJS when it makes sense. We also like Underscore.js as well as Harvest’s “Chosen” plug-in for drop-down menu searching and normalization.
For sites that utilize large amounts of tabular data, we often rely on DataTables (with some heavy customization) for its power and extensibility. If there are other aggregate data presentation needs, we look to Highcharts or Chart.js/ChartNew.js (for graphing), Sparklines (for inline graphing), and MarkerClusterer (for Google Maps location clustering). Don’t forget some other normalization and validation plugins, like Numeral.js and jQuery Validation.
CSS
We take great efforts to make sure that our CSS styles are easily maintainable and look great, but trying to keep track of raw CSS on our projects is daunting and unwieldy. You’ll often find us utilizing tools like LESS or SASS to develop our styles (complete with source maps). We make heavy use of our browser’s Inspector, too!
This three-part series breaks down our favorite tools used for:
Part 1 — Operations and administration
