Last Thursday Chartbeat hosted the Frontend Innovators Meetup group at our office. The focus was Angular.js, and my co-workers and I had the good fortune of being presenters. Our goal was to share some of the experiences and insights we’ve gained over the past year working with Angular.js.
From Closure To Angular
I presented first, focusing on how and why Chartbeat began using Angular.js for all of our front-end applications in the first place. I discuss our decision to migrate from Google Closure Library to Angular.js after weighing all the options we had available. I then shared how we actually develop with Angular.js, focusing on how we layout our directories, files, and applications, and discussing our multiple applications at Chartbeat and our need for a system that allows for growth, flexibility, and sharing between all applications.
Reusable Components
Danny presented next, discussing the merits and pitfalls of developing reusable components. He first discussed the advantages of working with components, which give us the ability to quickly throw together entire new applications by using existing components, allowing us to rapidly develop new applications by leveraging existing components. Danny then dove into the trade-offs that accompany the creation and maintenance of components: if it is more “expensive” to create a component than it is to simply duplicate code then perhaps it isn’t worth the time and effort to create it as a component. It was a nuanced talk with some great points. Worth watching in full, I think.
Graphing Chartbeat with Angular + SVG + D3
Nick then presented about SVG, D3, and Chartbeat’s use of D3 within Angular. He began by giving a solid background on SVG and the pitfalls you can encounter when trying to use Angular’s templating functionality with SVG elements (spoiler alert: there are a few!). Nick then discussed our internal library called C3 that he developed. He showed the design decisions that shaped C3 and the places where he’s found some shortcomings that he hopes to fix in the future.
Frontend Testing and Build Process
Jem rounded out the night with a thorough talk on Chartbeat’s test practices and build process. He talked about our testing stack, consisting of Jasmine, Karma, Protractor, Jenkins, and Selenium, and the best ways to put these systems to work. Jem also shared some good practices to keep in mind when using these tools. He then turned his focus to how we compile our applications for a production environment, discussing our move from Grunt to Gulp and why we’re finding it a better fit — it’s cleaner and clearer to work with, as it’s mostly vanilla JavaScript, which makes reasoning with it easier.
We had a great time presenting and hope everyone learned something from our talks.
Angular.js is still pretty new and we’re all still learning the best way to do things. Over the past year we’ve learned a lot about the right way to do things and the wrong way to do things. If you have too, please chime in. Sharing what we’ve learned is the best way for our whole front-end community to continue building better and better things.