Fronteers Conference 2014

October 15, 2014

On 9 and 10 october was the big event. Two days of inspiring talks and where you meet old friends and make new ones. This article gives a summary of most of the talks. The master of ceremony for this conference was Jake Archibald.

Day 1

The first day Heydon Pickering talked about best practises on developing with html and CSS. It is all about semantics, it is more readable, understandable and maintainable. For example use [role="tab"][aria-selected="true"] instead of .tab-active. He mentioned that the difference in performance is extremely minimal whether using attributes or class names.

Daniel Espeset gave a peak in how they set up their infrastructure for front end development at Etsy.

Arnout Kazemier's talk was about pushing the realtime web forward. He discussed the pro's and cons of the latest technology to use for realtime web. For example, Websockets, it is supported in IE10 Firefox 31, Chrome 37 safari 7.1, iOS Safari 8 and Android 4.4 and has a simple and understandable API. But at this time of writing it has also some serious bugs:

• Writing to a closed websocket connection can crash your phone. You have to add some latency to avoid crashing browsers.
• Pressing esc in Firefox closes the connection. (fixed in FF20)
• Firefox can create ghost connections.
• 4G, 3G and slower do not suppport Websockets. Fallback is to filter out the mobiles.
• Virus scanners, extensions, the user and network server firewalls can block Websockets

At this stage the newest technology is not really useful in production environment. It is something to keep an eye on, one day we can use the realtime web.

Rachel Nabors gave a visually beautiful styled presentation about the state of web animation. Animation improves adoption rate of new interfaces, change can be more easily comprehended when it’s gradual, especially for the young and elderly. You have 3 kinds of animations:

• Static animation: start --> finish
• Stateful animations: default state --> event --> predefined state
• Dynamic animations: current state: 1. factores + event + factors: 1a new state, 1b new state

Interesting animation libraries to check out: Greensock animation platform and Velocityjs

The mini sessions gave us a glance in game development for the web. There are hundreds of frameworks available, Thomas Palef recommended Phaser, a free open source HTML5 framework. If you want to get started with game development he advices to start making a really tiny game like ping, space invader or breakout. Once you have the hang of it, start creating another one with a little more complexity, and so on. Until you ar ready to create a real game you might think people want to play.

Day 2

Day two started with Nicholas Gallagher talking about making the Twitter UI infrastructure. The ui is split up in ui-components like: ui-icon, ui-ProductPage etc. Each component has its own file infrastructure and contains only the code necessary for the component, including tests. For the worksflow they created automatic tasks to test and run the new change: make install, build, test etc. They design for adaptability and define components as the unit of scale.

Dave Olsen shared his experience with optimizing web performance. (Check out slidesearch for the slides). Do you know that 1.8mb is the average weight of a web page today? 78% are images and javascript. RDW sites whose small screen design weighs the same as the large screen design? And 71% of the users expect your mobile site to load as quickly as your desktop site.

Mobile first means performance first - Dave Olsen

You can diagnose web performance issues with pagespeed insights of Google, Chrome dev tools and webpagetest.org. To optimize for mobile you can reduce asset size, reduce requests and speed up page-render. Try redbot.org to see if you're caching. Web performance for javascript:

• Avoid using bulky frameworks try microjs.com to find libraries that may be smaller. Javascript also blocks the rendering of the page.
• Avoid DOM reflows & repaints. they slow down page render time as well as burn battery.
• Use touch or fastclick.
• Use CDNs to serve common js libraries to help reduce RTT for requests.
• Use service like penthouse to find critical CSS.
• Also focus on getting a fast initial render.
• perf-tooling.today
• yahoo.github.io/boomerang/doc/

Sara Soueidan gave us a rollercoaster ride through animating SVGs with CSS and HTML. It was a great talk with lot of examples. Things to know about using svg:

• CSS animations only work inside the svg, when using an img, object, embed, iframe tag, or embedded in CSS as background, but CSS interactions won't.
• When you use inline svg both CSS animations and CSS interactions will work.
• SVG2 will contain more attributes which we can use in CSS.
• With SMIL you can e.g. animate attributes and do event handling. At this time of writing SMIL does not work in IE and Opera Mini.

Hell, is not understanding my own code - Kyle Simpson

Everyone at the conference has written code that worked without knowing why. First learn the language in depth and you also need better tools. Kyle Simpson gave us a list of handy tools to make your live as JS developer easier. He is working on a configurable two way formatting tool to end the discussion of whether or not using semi colons, whitespace vs tabs. Pick the tools that suits you, but be aware there is no such thing as a holy grail for the right toolset. The tools he recommended are:

• sweetjs.org provides macros to javascript developers. Currently being adopted by the Mozilla Foundation.
• esprima/acorn (parser)
• escodegen (code generator)
• escope/eslevels (scope analyzer)
• istanbul (code coverage)
• estraverse (analyze AST)
• eslint (pluggable code linting rules)
• jscomplexity.org

Petro Salema closed the conference with an inspiring talk, named "Dream big, think small".