Over the course of the next two days, I got to hear some big names in the industry give talks, meet peers doing some amazing work, and have my interest in web development reinvigorated.
There were so many talks on great topics, and I couldn’t hear them all, but here are breakdowns of the ones I found most-interesting.
Reative, Composable UIs with React.js
Ben Anderson gave a great talk on Facebook’s React.js and how it’s simplifying the single-page app landscape by introducing the concept of virtual DOM diffs. Data is not 1:1, which helps to avoid “data flying in all directions.” Data goes down the DOM hierarchy, and events flow up.
Automate Front-End Performance
Kitt Hodsden spent her talk teaching the audience about the benefits of performance budgets and how to get started. First, we have to determine key metrics, then establish baseline, (the folks at Etsy have some great examples.) When you make a change, make sure you measure the effects. This is especially important when “40% of users will abandon a site that takes more than 3 seconds to load.”
We can do this by setting a performance budget, determining key metrics on a per-project basis, and establishing a baseline using the waterfall metric. Tools, like Grunt and Gulp, can help make this easier and Kitt lists out a handful of helpful packages:
- Remove HTML comments: grunt-contrib-htmlmin
- Concatenate/minify CSS files: grunt-contrib-cssmin
- Remove duplicate CSS: grunt-csscss
- Remove unused/broken CSS: grunt-uncss or grunt-cssstats
- Generate a sprite: grunt-montage
- Minimize images (removes metadata): grunt-contrib-imagemin
- Clean up svg files: grunt-svgmin
- Responsive images: grunt-responsive-images
She then goes into the benefits of using tools like webpagetest.org, where you can specify test locations around the world. You have the ability to set up your own instance of Webpagetest on your own server, where you aren’t limited to 200 page loads per day. Using this, combined with the grunt-perfbudget package, you can enforce your defined performance budget that can be integrated into CI builds. Additionally, you can track your performance over time using the Webpagetest Monitor and the grunt-wpt package.
Other tools included grunt-yslow, grunt-pagespeed, PSI, sitespeed.io. At the end, Kitt walked us through creating a private Webpagetest instance on Amazon EC2 and consequently blew our minds. This was probably the most eye-opening talk I saw at the conference.
My favorite example was the “
this abyss,” where he walks through ways to avoid caching the
this keyword. I’ll let the rest of his slides speak for themselves (they include more examples that we didn’t have time to get through), but I left the room enlightened and excited to implement what I had learned.
Henrik Joreteg gave an entertaining talk on the history of web sites and apps. He outlined a story that many of us could relate to and posed the question “What service are we providing?” He encouraged the audience to build modular systems that strive to be as simple as possible (easy to test!) and to optimize for change, as change is the only constant.
Divya Manian walked us through another consistent theme of the conference: how to bridge the gaps between designers and developers. She outlined a handful of things we should consider while designing:
- Which web-safe font should be chosen
- What if there’s a poor internet connection?
- What if CSS3 is too slow?
- Is the design possible to replicate?
- Are there other resolutions we should consider?
- Link Smart Objects
- Utilize Photoshop CC grids
- Collaborate on the same units (pixels, points, etc.)
- Inventory features you will use
- Use Responsive Frameworks
- Rough prototype before design
She suggests using the features of design tools that make designing responsive websites easier and suggests leveraging html5please.com and caniuse.com.
O’Reilly puts on a great conference. There are few places I can wander around a complex full of people just as into web development as I am. Here are my high-level takeaways:
- React.js is the new hotness
- Learn ES6 today
There were plenty of little things that made the experience so enjoyable. The job board was full of companies hiring and I got to talk shop with people at big-name companies in the halls and at lunch. I was so entrenched in conversation with a peer involved in a healthcare startup that I barely noticed Eric Meyer signing copies of his new book across the table from us.
O’Reilly even created a game to engage attendees with a prize of a FluentConf hoodie. They handed out different stickers at various talks/events. We had to collect all the stickers, which contained snippets of code, put the snippets in the proper order, and run the code on the FluentConf site to get back a number. At the designated time, we had to bring the stickers and the number to the O’Reilly booth to receive our prize. I made sure to introduce myself to the members of the O’Reilly Community Partners group who helped get me there, finally putting faces to names. I even found Denver Code Club on the community partners board!
I had a great time and I’ll be back next year.