We’re also always on the lookout for new and interesting technologies, so when Google unveiled their new Material Design guidelines and the Paper Elements for Polymer we were excited to try those out in a real project. As Web Components aren’t really an option in customer projects (yet), we needed a internal project to implement with Polymer to gain some hands-on experience with the library.
SUPER (Salesforce Upcoming Projects Evaluation Rankings) is the service we created to answer this need for transparency regarding upcoming projects. This was also the perfect opportunity to try out Polymer and Material Design.
SUPER in use at Cats Inc.
Polymer is a library that makes the future advancements of web development available today. First and foremost it is about Web Components and Custom Elements, which provide a huge leap forwards in the web development scene. Using the new technologies, reusable and composable modules become a reality in the frontend, too. Polymer binds the different pieces of the puzzle together in an easy-to-use manner, making things like two-way asynchronous communication - or Google Maps inclusion - dead simple. All components contain their own functionality and styles, and can expose a public API. Sounds awesome? It is.
One of the most essential and difficult aspects of a tool like SUPER is how to keep the data up to date. Having users input the data manually was not an option, as the data was already available in some shape or form in Salesforce and having people input the same data again when they could instead be drinking coffee or playing pool is just silly. Fortunately Salesforce has an API which enables our service to connect to Salesforce and query for possible upcoming projects, called Opportunities. This Salesforce integration also has the added benefit of giving people an extra incentive to keep the data in Salesforce up to date because people will actually see it.
The data gathered from Salesforce is displayed in the Polymer frontend and users can browse projects for all the tribes and vote on projects they find interesting or feel would be good for the company. The exact meaning of the voting, or favoriting, is left vague by design to encourage communication directly between interested parties. We also did not want users to downvote projects that they personally don’t like, but could be interesting to others. Finally, there are filters to show or hide certain types of projects.
Polymer turned out to be well suited for this service. We used the available paper elements extensively to achieve a Material Design styled layout which scales for different screen sizes. Polymer does a lot of the heavy lifting for you, especially when using the Paper Elements, but it’s not production ready quite yet. Fortunately for us we had the luxury of supporting only the latest modern browsers as this is an internal tool and most of our users would be using the latest and greatest anyway. Support for Web Components is not widespread yet, even among the evergreen browsers. It is, however, quite possible that within a year or two Polymer could be a viable technology in some cases. It is, at the very least, a good way to do prototyping of Material Design apps.
SUPER has now been in use for about a month and it has gotten a fair bit of feedback. What’s even better is that the feedback has been almost entirely positive. Our own tribe is already using it to drive sales in the direction indicated by our developers’ favorites and the tool has gotten a lot of company wide attention. All in all SUPER seems to be doing its job of making the company as transparent as possible and empowering developers to influence their future.
SUPER is open source and available on GitHub. A publicly accessible demo is available at super-demo.herokuapp.com.