Bootstrap vs Polymer: Everything you Should Know

This blog post gives a brief overview of the most prevalent trends in web UI development, by comparing two key UI frameworks: Bootstrap and Polymer, with some recommendations.

Responsive Web Design

Responsive Web Design (RWD) is the modern web design standard that provides an optimal viewing experience across different kinds of devices. It provides easy viewing, navigation, scrolling, and panning features, and supports a wide range of devices from desktop computers and laptops to tablets and smartphones.

Some of the popular HTML, CSS frameworks available for users are:

• Bootstrap (getbootstrap.com): Bootstrap is a HTML, CSS, and JavaScript framework for developing responsive, mobile-friendly website projects.
• Polymer (polymer-project.org): Polymer is an innovative development library that makes it faster and easier than ever before to build beautiful web apps. Polymer is built on the basis of a set of powerful modern web building tools known as Web Components. Web Components come with unprecedented composability, interoperability, and consumability, all of which result in unprecedented productivity for the developers.
• Yahoo! Pure: This is a Yahoo! project, a set of small, responsive CSS components that can be used in every web project.
• Foundation: Foundation also includes HTML, CSS, and JavaScript for developing responsive projects on the web. Foundation includes a global CSS module, jQuery plugins, common elements, and a few set best practices.
• YAML: The YAML Ain’t Markup Language project aims at creating a human-readable data serialization standard. It has a modular CSS framework for flexible and responsive web designs. It has a complete set of building blocks for complex websites, including navigation forms, grids, typography modules, and add-ons that work seamlessly together. They are made for HTML5 and CSS3.
• Adobe Topcoat: This is similar to Yahoo! Pure, a set of tiny, responsive CSS modules for your web projects.
• Toast: Toast is a simple CSS framework with a plain-English responsive grid helping you get simple layouts done in a breeze. It’s easy to add padding and borders to the grids without any trouble at all.
• Gumby: Gumby 2 is built with the powerful Sass (a powerful CSS preprocessor) that imparts its extra speed to Gumby.
• Less: Less provides a CSS design for adaptive sites. It comes with 4 layout options and 3 sets of typographical presets based on a single grid.
• Columnal: Columnal is a CSS grid system that is a remix of some others with a little bit of code added. Columnal is an elastic grid with some code inspiration taken from 960.gs.
• Kube: Kube is a minimal, responsive framework with a revolutionary, flexible grid and typography. It gives a lot of freedom to web developers.
• MontageJS: MontageJS is a modern, full-stack HTML5 framework designed for single-page web apps quickly. It uses popular design patterns and development methodologies to create modular architecture and deliver better user experience.

Choosing the Best Framework

Our experience working on some of these frameworks over several years has given us some really trustworthy insights in identifying the right framework for adoption, readiness and value proposition. Bootstrap and the relatively new Polymer are among the most advanced UI frameworks with some really cool features to offer.

Bootstrap and Polymer come with their own advantages and disadvantages, which are discussed further down, and it should be noted that this write-up is not for precluding any one framework based on the features offered.

Bootstrap vs. Polymer

In the following table, let’s analyze the capabilities of Bootstrap and Polymer:

Aspect Description Bootstrap Polymer MaturityPolymer is still in developer-preview phase while Bootstrap has been in the game for quite some time. Bootstrap also has better community support. Polymer is growing fast though.HighMediumSizeThe size of both Bootstrap and Polymer is large, making the first request time-consuming. Bootstrap also requires such libraries as JQuery to make it functional. Polymer, while it is large in size right now due to high size of web components and no support for native APIs, is expected to lower the sizes as they remove polyfills.MediumMediumWeb StandardsBoth Bootstrap and Polymer support most of the web standards. Some are new such as custom elements, templates, etc., which are supported only by Polymer.MediumHighDesigning ToolsOnly Polymer provides design tools used to easily build prototypes and UI screens.NoYesBrowser SupportBoth are built to work with most of the desktop and mobile browsers. Bootstrap has full support for older browsers as well although the components may be styled differently.

Polymer supports evergreen browsers.HighMediumUI ComponentsBoth Bootstrap and Polymer come with very good CSS libraries. While Bootstrap depends on other libraries, Polymer has its own set of UI componentsNoYesOut-of-the-Box SolutionPolymer has everything to get started easily. It has a set of modern web components (custom as well as in-built); good support for custom elements; templates; and APIs, which can help meet demands of web apps. Bootstrap on the other hand requires dependency on libraries such as JQuery.NoYesData BindingPolymer scores well over Bootstrap, which does not support data binding. Polymer implements data binding using template, which is not yet supported by all browsersNoYesInteroperabilityBoth frameworks work well with other technologies, although Polymer discourages the use of external libraries and provides its own libraries instead.EasyEasy

Conclusion

It may seem that both Bootstrap and Polymer are neck to neck in features. These frameworks have already been used to build multiple web projects, which can be viewed from their respective websites. In order to properly make a distinction between them, consider the following aspects.
Bootstrap is perfect if flexibility and customizability are two key needs of your project. Bootstrap’s ready framework lets you work with multiple libraries that can be added as required. It’s built on responsive layouts, components, and 12-column grids. Switching between fixed-grid and responsive-grid designs is only a matter of a few modifications. Bootstrap’s CSS framework is perfect for most of the common uses, and its common elements have some advanced JavaScript functionalities built-in.

Polymer framework is based on new web standards such as custom elements, templates, HTML imports, polyfills, and others to make these features available on other browsers. While you can use JS to build custom elements, Polymer builds over it for better developer experience and removing unnecessary code.

Web is evolving to incorporate custom tags which can be used to obfuscate the functionality of a complex implementation consisting of HTML, CSS, and JS (or Dart). In your HTML code, simply add the tag with the actual code elsewhere to get the full functionality of the code. Polymer.dart is a Dart port