Image showing Lithium, Red and Stack at the Frontend Conference Zurich

Frontend Conference Zurich 2013: new technology and innovations

02.09.13

The Frontend Conference Zurich 2013 offered interesting new approaches on both design and technology. A recap of the highlights of the technology-oriented talks.

Innovative new technologies and improvements

From the 29th to the 30th of August, the third edition of the Frontend Conference Zurich took place. The presentations were grouped into two streams of talks: one focussing on design, the other on technology.

The highlights in the technology stream of the conference were Kim Joar Bekkelund’s lesson on how to improve our use of JavaScript, Roger Dudler vision on how the future of web design, Rodney Rehm’s talk about how to deal with the broken web and Chris Mill’s explanation of how CSS3 helps us improve the use of images.

Kim Joar Bekkelund - Patterns of Large-Scale Javascript Apps

When using JavaScript, even if we start with a small feature, as we add more and more functionality, we end up with lots of code and an impenetrable jungle of jQuery. If we then change the HTML, we end up breaking the JavaScript. To depart from this unpleasant state, we must learn to decouple ourselves from the DOM.

As websites and applications became ever more complex, more and more was pushed from the backend to the frontend, leading us to create code which is more complex and harder to maintain. To successfully handle this problem, we have to unlearn our DOM-centric approach to JavaScript, unlearn how we use jQuery and separate the data from the DOM.

To get the testable, scalable and maintainable JavaScript which we want, we can learn from the backend and put structure into our code. By organising the code we make it more maintainable: We need more files with less code in them. We need to split our applications into separate modules for individual features which can run independently from one another and are decoupled from the overall system. These modules can then be tested and used separately. What’s important is that you make sure you don’t access the DOM outside the modules; you don’t use global, non-native objects and don’t use global variables.

JavaScript frameworks like Angular, Ember and Knockout support two way data-binding, so that changes to the model update the view and vice versa. Thus, we can create templates which are in sync with the data without using jQuery, build frontends which are connected to the logic while remaining immune to markup changes.

Further useful tools are Require, which can automatically load dependencies in the right order, as well as Component or Bower, which automatically update third-party libraries, making it easy to check that all your dependencies are still up to date.

To further improve your JavaScript skills and keep up to date, check out Superhero.JS, which offers a collection of great articles, videos and presentations on the topic.

Roger Dudler - Building the Web in 2018

Roger Dudler held a visionary talk about the future of web design, daring to muse what our work might look like in five years. “Today, everyone expects everything to be up-to-date everywhere.” So where are we heading from here?

In-browser design is already a hot topic today. Tools like Webflow or Divshot allow us to depart from Photoshop and explore new approaches. While it might not yet be applicable to large, complex projects, it is certainly an interesting approach for small websites. But it is not just the design that’s moving into the browser, in-browser development might soon become reality as well. Examples like Trivid, allowing you to create 3D models directly in the browser, show that we can already create comprehensive applications in the browser.

Regarding backends, there seems to be a tendency towards the abstraction of backends. Firebase, offering a real-time scalable backend, and Parse, offering a similar service focused on mobile, enable you to focus solely on your application while they take care of the complete infrastructure. This shows that in the future, we might not have a backend any more, or have backend as a services provided by another party.

Another trend are web components, which allow us to handle modules and components in the web more easily and give us more freedom regarding visual richness and interactivity. Roger mentioned the Polymer project, a library based on web components which enables you to get to know and test web components, as well as Brick, a bundle of reusable UI components which enable quick and flexible building of HTML5 applications.

Roger further envisioned the future of screens. In a few years, we may have gone beyond single-screen devices and design for instance for smart phones whose sides are used as a secondary screen, where additional, secondary information could be presented. Furthermore, it is likely that our screens will be interconnected, so when using one device, additional information will be displayed other devices which are around: For example, whilst watching television, your smart phone would automatically display background information on the programme you’re watching.

The great challenge ahead of us is to find out how we can prepare ourselves for these coming trends. At the moment, this means that we need to deal with the constantly rising variety of devices. Thankfully, there seem to be promising tools out there, and in the meantime, we can prepare ourselves by keeping up to date. Kickstarter, the world’s largest funding platform for creative projects, is a great source of inspiration. Web and Mobile TRENDS 2013 is another great resource for keeping up with trends. Furthermore, we need to look beyound our product and observe what is happens around them. Read, learn, experiment, use, teach – with your own ideas and actions, you can help build the future!

Rodney Rehm – Coping With The Broken Web

As the web is growing rapidly, we constantly face the challenge of new proposals, specifications and implementations. Browser differences are growing rapidly, as are the inconsistencies between the different browsers. We make assumptions, but we have to make sure that we check those thoroughly and in advance, especially if we are dealing with new specifications.

To figure out if our solutions are holding, we need tests. You could use any testing framework, Rodney recommends using testharness.js, W3C’s framework. To aggregate the collected data, he proposes Firebase. It is of course always of benefit to use real devices for testing, but you can also draw back on virtual machines like BrowserStack if needed.

While we are facing many problems with the web today, there is also hope: We are not alone. WebPlatform.org is an open community of developers who build resources for a better web. Sauce Labs is another interesting reference, offering cloud-based testing tools. And Test the Web Forward is an initiative to make the web better involving the community in web standards. The movement aims to move the web forward with better tests: The tests contributed are run by W3C and browser vendors. The web may not always behave the way you want it to and appear to be broken, but you yourself can get involved and change it!

Getting rid of Images using CSS3

Images may be pretty, but they are quite inflexible and HTTP-heavy. Back in the days, they were our only option for creating shadows, round corners or gradients. There was also a lack of fonts, meaning that we had to use image replacements techniques like SiFR and Cufòn instead. Thankfully, we now have new tools and features which make live easier.

With SVG, Web Fonts, CSS3 and the like we have the option to move away from images and towards the browser, which allows us to create scalable, flexible assets. Web Fonts enables us to include whichever font we want on our website. SVG, allowing you to create vector images using markup, is a further new option. Gradients, multiple background, border-images and shadows are just some of the possibilities which no longer require images, and to put the cherry on top, we mostly have great cross-browser support with these new approaches.

CSS3 gives us further new ways of dealing with images and visuals. We can create fragments of images, use filters on them, blend modes – all without actually having to change the original image. We obviously cannot do anything yet, but it appears to be very likely that even things like masks can be done with a simple CSS declaration in the future. Other than images, this way of dealing with visuals allows us to create responsive solutions which can be scaled according to the accessing device and gives us the opportunity to guarantee great experiences everywhere.