Web development is moving fast driven by new technologies, trends, and so much more.
Last week hundreds of web developers converged yet again on Barcelona for Full Stack Fest (#FullStackFest) to learn about new trends in the fast-moving world of Web development. Full Stack Festis the international programming event in Barcelona, divided into two conferences: Barcelona Ruby Conference and Barcelona Future JS.
The conference showed that cool things are happening in Javascript. Each presentation was jam-packed with great advice, strategy and takeaways about the world of web development. I couldn’t get to all of them but here are the ten things that stuck with me during Barcelona Future JS:
#1 Power tools for frontend web develpment
Rachel Andrew started her keynote with the business of front-end development. Rachel reminded us that you shouldn’t rely on frameworks too much. Web developers must ensure a strong base of knowledge in JS, HTML and CSS. Use your web tools and frameworks lightly. Be ready to put them aside when they don’t suit a project. Make sure to understand JavaScript as well. Not just jQuery. In short, don’t become an expert in one brand of hammer. Become a master carpenter. Develop timeless skills. Rachel’s talk gave us a breath of fresh air in a world of a million new hot frontend frameworks. Rachel talks about what she thinks are superior grid frameworks like: Susy , Grid by Example, Flexbox
#2 VR experiences Will Transform the Web
An over-riding trend from the conference was that there is growing interest in real-time 3D graphics in the browser. With just a browser; web developers could plug in an Oculus Rift, type some JavaScript, and create VR experiences. Robin Hawkes from ViziCities shared his experiences creating a 3D map of London powered by JavaScript, WebGL and many other cutting-edge Web technologies. Think SimCity meets the real world!
#3 Transducers in Javascript
Massimiliano Mantione Worked in the V8 team in Google. He started as a Javascript hater but is now using his own language that transpiles to Javascript (Metascript). Massimiliano explained the use of transducers in Javascript and especially how they can help producing better code.
#4 Procedural content generation
Nick Heiner, a Web developer at @opower, showed the techniques used for procedural content generation, and the tools that we can rely on to take advantage of them in Javascript. You can create infinite worlds, songs that never end the same way or Twitter bots. Nick made a great case we still need designers.
#5 The Internet of Browsers
This presentation is perhaps the biggest “wow” for me at the conference because it showed a cool way to involve the audience in your presentation. Ben Foxall showed what he could do with browsers doing a very cool live demo of all the device APIs using audience’s devices.
Browsers do more than just presenting content; they allow us to gather information about our surroundings and make changes to our environment. Taking inspiration from the Internet of Things, we’ll think about our browsers as simple objects that can work together to create a closer interaction with the web.
#6 Algorithms for animation
Animation has become an increasingly important part of the UX design experience across many web applications. Moving elements are a powerful tool to attract users’ attention. Courtney Hemphill talked about the basic principles of animation design and the simple formulas that can be used to create robust animations.
With a quick introduction into interpolation, easing and sequencing Courtney showed how to create a lot of effects with just a little code. She showed some cool animations with use of Animate.css, cssanimate.com, Framer.js, Tween.js, Move.js, GSAP (Greensock).
#7 Natural Physics Simulations in JS
ES6 (ECMAScript 6, also known as ECMAScript 2015) is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.
Matt Keas showed some awesome new features in ES6 and talked about canvas drawings, simulations, animation techniques.
#8 What makes Ember’s rendering engine tick
The Ember community took on an audacious effort to rewrite the rendering engine powering Ember apps. Tom Dale shared details on this new engine, called Glimmer, which dramatically improved the performance of real-world apps in modern browsers.
Tom walked through the libraries that power Glimmer, giving insight into how a sophisticated framework like Ember works under the hood.
#9 The Pixel Factory
Steven Wittens is known for his amazing animation effects, using texture uploads that are really fast and efficient. Stevin went into great detail how each pixel is a virtual machine on its own, with math inside pushing the 3D boundaries in a WebKit browser.
#10 Hacking the Front-end
Unfortunately for everyone, there’s a huge attack surface on the client-side, and it can sometimes feel like a hopeless goal to ever patch up all the holes. Alex Sexton went through a bunch of ways that you might not expect hackers will attack your site. Hacking methods like CSRF, Frame Busting, Content injection, Link knocking. Alex showed what we can do about it, like CSP, SRI, HTTPS only and submit your domain to the HSTS list. Also looking into exciting new standard APIs out of the W3C to help address these problems.
And with that, it’s a wrap for 2015! What do you think? Were you there? What were your biggest takeaways from Full Stack Fest?