Front-trends 2015

These days, being a front-end developer isn't easy. The time when our work was mostly writing HTML, CSS and some jQuery is long over. Hardly a month passes without a new JavaScript framework, new tools to ease our work, new template engines, new preprocessors, you name it. Is this bad? Well, in some ways it is, but this is more a side-effect of all the excitement in the community! This year's Front-trends conference is proof of how awesome front-end development can be and further proof of how much it has changed in recent years.

Organization

Before I detail more about the talks, I want to say something about the organization of the conference. For 3 days between 6-8 May, Warsaw's venue „Fabryka Trzciny”, once again became a place overrun by developers from all over the world. I must admit, the place is perfect for such events. It's spacious, close to the train station and has an old industrial feel. If buildings had souls, you would most definitely find one here. Probably that of an old jazz player. Each day started with a breakfast at 8:30 AM. The food was mostly fine, unless you're vegetarian and vegan. They probably weren't that happy as there was hardly anything for them. On the other hand, the lunches were simply great with lots of vege stuff. There were huge amounts of different, tasty food for everyone's tastes. A dream for all those who remember the starving portions at last year's Ng-Europe conference in Paris. And hey, did I mention that everything was free? Including coffee, tea and beer? That's correct. You could get wasted for free, but who would have done that with all those great talks to hear? There were, however, some shortcomings; most notably, really bad WiFi for the first day. Even if you finally managed to connect it was hardly usable. Hope it gets better next year.

Foreword

The conference began with a great talk by Damian Wielgosik, one of the most important talks in the whole conference. One that might have been a shock for some. One that was later referenced by other speakers. In „The Human Element”, Damian raised the issue of inequality in our community and how difficult it is for newcomers to become front-end developers. We pride ourselves on being one of the most open, fun and friendly professional groups out there, but have you ever wondered why women represent only about 5% of our community? It's not because of their lack of interest, trust me on that. Damian presented us with the results of his research, on how „developers” react to newcomers. It wasn't fun, nor open and surely not friendly. Quite the opposite – hostile comments and sexist jokes, making fun of people just starting. Now imagine being a woman and going to – let's say – a meet.js event full of such jerks. Ask questions and risk being laughed at? Open your eyes, observe your surrounding. This is something we all need to change. „Go out of our comfort zone!” This was the spirit in which the rest of the conference took place.

Day 1

The first day started with a fun talk by Tim Pietrusky and his improved version of NerdDisco. Kazzo, his cat, was also there. Well, at least on the slides. In short: running on node.js, using Web Audio API, it can analyze and visualize music in realtime on a LED cube. Apart from scaling it to make visualizations for your house or dance club, what mostly interests me, is that he showed us that more and more hardware can be controlled with JavaScript and moreover – from the internet.

Later on were talks concerning designing for kids, responsive design and accessibility - something I wasn't really expecting at a front-end conference. A great surprise, as I'm also a designer myself. Although I haven't worked on a web interface for kids yet, the talk by Trine Falbe made me think about how different people, from different backgrounds, at different ages may interact with different interfaces. The same idea was present in the talk about accessibility „This is for everyone” by Shaun Dunne, where he gave useful tips on how to make the web friendlier for everyone, like using tabindex, and native elements. He also mentioned the Chrome Accessibility Development Tools, go check it out! Thanks man!

Later, Inayalli de León Persson from Ubuntu's talk about making already existing websites responsive was also quite a nice case study on what to do when rails new and doing everything from scratch isn't an option. Nobody likes it, but it still has to be done and sadly, this is frequent in big business apps. Iterating in small steps and creating a style guide makes it less painful, Inayalli says and I completely agree with her.

Next came „JavaScript board games of your childhood” by Michał Budzyński. I was hoping the talk would be both entertaining and useful, but sadly it was merely funny and really lacking any usefulness. At least for me, who has been working with 3D printers over the past few years. It involved a very long background story, TV shows and a showcase of an improved tool for 3D modeling in JS. Sure it was funny, but I was hoping for more.

The day ended with a talk from Axel Rauschmayer about ECMAScript 6. Of course there is always a talk about ES6 at every JS-related conference. Still, it was quite good and highlighted some awesome possibilities that can be found in ES6. And with Babel we can harvest the power of the new iteration of JavaScript right now. Also, what I found great was the time made for questions about the cons of ES6.

Overall it was a very solid day, one that made me even more excited about the next two days.

Day 2

The second day began with a talk about WebRTC by Phil Nash, who explained the basics of how WebRTC works and its requirements and compatibility. The great part of his talk was the incorporation of an actual working example. The bad part – to make it work with such little effort, you have to pay for a service from his company. I wish it would be more tool agnostic.

Following this was a talk about CSS fractals by Gregor Adams, who stunned the public with his awesome work. -webkit-box-reflect – this is something you should jot down right now if you're interested in creating fractals using CSS. Sadly, the performance isn't quite as good as it would be with WebGL or canvas. To finish up, Gregor presented us with a modified version of the NerdDisco (with the help from Tim) that animated the fractals! Now how much cooler can it get?

My favorite talk that day, however, was from Robert Haritonov about Source.js, a complex style guide platform. This is something that we, as Monterail, have been trying to include in our projects for quite some time. Most recently, we've used the Hologram gem which does the job, but sadly it gets out of sync quite fast. And this is what Robert is trying to solve with his platform.

• Visual regression tests for components?
• Designers can check the implementation and comment?
• One platform as a reference for developers?
• Complex components with JavaScript?
• And more...

Like Frank Underwood would have said –Check, check, check!. Now let's make it happen!

As front-end developers, we're proud of how many different tools we use nowadays to ease our work. HTML? Haven't you heard of Jade already? CSS? Forget it, there is SASS for that! Javascript? Coffeescript has a much cleaner syntax! Creating a robust structure for your SPA app? Just yo angular it man! In need of this fancy slider for your site? Open console and type: bower install yet-another-fancy-jquery-slider-with-extra-sugar --save-dev. Or npm if you're a hardcore node.js fan. Hey, doesn't a web app need a server to run? Sure it does, but you have node.js. Just start an express server instance. Optimize your current code for production? Why even bother? Grunt or Gulp is already doing that for you since you used yeoman remember? And according to Damian Wielgosik's research – those are often the answers you will hear as a newcomer.

This is also the subject of the „Friendlier, More Powerful” talk by Glenn Maddern. Like he said – nowadays you have to go through about 47 steps before you even write your first line of HTML. Sure the dark age of writing HTML, CSS and JS code in notepad is gone forever, but it is often where one starts learning to code the web. But then, when you want to do some serious coding it's not enough. What if the tools we use could be as simple as installing a browser and still be so powerful? Thankfully there are things like codepen and jsfiddle where you can just start typing and have all those fancy tools work their magic. Glenn has proposed JSPM to solve this problem - it's supposed to be accessible for newcomers, but also powerful enough for professionals. And I'm looking forward to it. Make the powerful things more friendly ~ Make the friendly things more powerful.

Do you like zombies? You know, the ones that want to eat your brains. Well, I actually do! At least those seen in the movies or games, but definitely not those those found in our code. This is what Marco Cedaro from Shazam talked about in his „Zombie Code” presentation. How do you identify dead code? The methods are long, complex and often depend on a fixed html/css structure. Marco provided some smart hints about how to deal with legacy code and technical debt. One of them is the single responsibility principle - your functions should only fulfill one simple task. This way your code becomes clear, self-explicable, easy to unit test and available for further re-use. Developing code style guidelines helps a lot. So do unit and functional tests (even better if you include them in your continuous process). Further abstract your code to work regardless of the structure, because you never know how your app will grow later. Appreciate the work of your QAs. Review each others code and help juniors understand best practices. Share your knowledge with the team. Make the requirements and designs clear, because just like Louis Srygley said: „Without requirements or design, programming is the art of adding bugs to an empty text file”.

The second to last talk by Zach Saucier was about animations, which I personally enjoyed a lot as it is something I have great interest in myself. This was also a presentation that should have been viewed by all those designers still working with static environments like Photoshop or Sketch. There is so much more you can do to make the user experience even better! Just like Zach said – animations aren't only for making the interface fancy. They also add a new layer of interaction and, by reference to known patterns, additionally help users use our application. Something that we see a lot in mobile apps, but only sometimes on the web.

The last talk was called „UX terror. Know your rights” by Natalia Różycka and it was about the problems in communication between UX designers and front-end developers. Honestly? In my opinion it kind of missed the problem. The source might be found in bad communication in a team rather than just between those two professions. I imagine this might often be the case in large corporations. But for me and my coworkers, she just stated what is obvious. Obvious for everyone who's working closely on a mixed team where everyone knows each others competences. I think this is the real solution to the problem. To understand that we all have to work together to make the product as good as it can be. Agile teams are extremely good at this. Here at Monterail, we often sit together and talk about what we can do, how we can do it and most importantly – why should we do it this way. No waterfall, no one-way flow, every opinion counts. Just teamwork with lots of fun in between!

Day 3

The last day was kickstarted with a talk by Felix Palmer about WebGL. When most developers hear the keyword „WebGL”, all they see is 3D graphics in the browsers. This is of course true, but not limited to just this. You can also work with traditional 2D graphics. This is what Felix proved in his talk, recreating some popular effects from Photoshop or Photo Booth (OS X selfie app) live in his browser. Changing colors, scaling, twisting, blurring, changing fragments depending on the color or even creating waves. Of course while using some funny images. As much as it was entertaining and full of useful knowledge, the presentation was doomed to be forgotten, at least for the rest of the day.

Why would I say that? Because the next talk, by Mark Robbins was simply the best talk at this year's Front-Trends. His „Punched card coding – Javascript functionality with CSS” literally melted my mind. And not just mine – the whole audience looked shocked by what he presented. Could you imagine an interactive, multipage e-commerce service with things like animated slide gallery, where you could simply add stuff to the shopping cart and it would actually sum up the price? And did I already mention that it was all in an email? Not an attachment. Just a regular HTML email, you send to others every other day. 0kB of Javascript, just <100kB of pure CSS Magic. How does it work? Rip off the magic CSS dust and you will see a hell of a lot of radio and checkbox inputs and labels. The rest is mostly a combination of :checked and element ~ element selectors. Sure, not all email clients support that kind of interactive stuff, but guess what – Mark prepared fallbacks for those clients (like the old Outlook for example). But that's not all... At the end it came out that the whole powerpoint-like, animated presentation was also an email opened in the Apple Mail app. Don't believe me? See for yourself!

Getting back to earth... The next talk by Leonie Watson was about ARIA, which felt like a continuation of the talk by Shaun Dunne on the first day. What I think I should mention is that Leonie is in fact blind and was using a screenreader throughout the whole presentation and did awesome work! This definitely deserves big kudos! Once again we learned a lot about how to make the web a friendlier place for everyone. It came out that the software that helps disabled people use the web has become quite smart, however it is us – developers – who tend to break stuff. For example – using incorrect DOM elements in wrong places or changing the default behavior of other elements. Like simulating a button or link using a span. Screen readers will ignore those (just fast read through) since divs and spans are semantically neutral elements. Things like the new-old HTML5 <article> elements also count. Or because we tend to be lazy and forget to fill those important alt="" attributes for images. The consequence? The screenreader would then read the image filename. Now imagine (or try it yourself online and let google read it for you) hearing something like this a634016a87f415c71668aa605f0c22ff.jpg per each image on page, but with Stephen Hawking „voice” (that's a perk actually). But seriously – not nice at all.

As you surely know, besides traditional imperative programming there are lots of other paradigms, among others: functional and reactive paradigms which you can also implement in Javascript. Those two were the subject of another solid talk, presented by Berlin based, Nokia HERE maps engineer Dmytrii Shchadei. He mentioned some of the cons of value-based programming like the ever growing number of states and therefore also closure variables. Often, going functional (think recursion for example) helps with those problems, also making the code easier to test. Dmytrii also mentioned some of the reactive programming libraries like RxJS and Bacon.js you can use in your projects. Everything after that is kind of hard to explain so you better check out his presentation here.

Since hardware is becoming cheaper and more powerful each year, more and more developers jump into the world of sensors, detectors and robotics in general. Sayanee Basu with her awesome „Let’s mashup the web and the real world”, showed us some simple, yet great possibilities of mixing web technology with hardware, including the one found in your pocket or bag! Sayanee's talk also included lots of interactions with the audience which (combined with her own charm) made it a lot more entertaining and fun! 

Sadly I'm not a hardcore JS programmer thus the talk about creating a streaming parser by Peter von der Zee didn't really catch my attention. There is hardly anything I can tell you about it, aside from that his parser is the fastest parser in the world (given that it has limited functionality). You can view his slides here

„Making development workflows simple” by Peter Muller is an attempt to simplify the development workflow which often becomes quite complex as a developed app becomes larger. It's an impassable barrier for all newcomers. His answer — Fusile. Something that combines lots of other tools including: coffee-script, less, node-sass, stylus, and babel into one easy to use tool. It's based on Fuse, which makes it possible to use a separated filesystem for all the precompiling work. The project is still in early alpha though. You can see the roadmap on the github page linked above.

Sadly I wasn't present at the last talk by Gunnar Bittersmann named nuqjatlh, because we had to catch our train back home. As far as I understand his (quite funny) presentation was about having a functionality at every event website, that allows to export it stright to your calendar. It's presented in the final few slides. See for yourself!

Summary

Some last words – I must say that Front-trends has overall been a great and inspiring experience, surely worth the time and price. What I personally loved is the diversity of the selected subjects, which included accessibility concerns and design, rather than being focused only on the new technical stuff. Sure some talks could be better, but then again this review would become even longer. If you, however, managed to read to the last letter, let me know in the comments section! How did you like the conference? Will you participate in Front-trends next year? Because I most probably will!