Video

Rendering performance on the modern web is messy. We have fancy browsers on slow devices (think: phones) that let you create all sorts of snazzy effects, and most of it is really slow. The web was never designed to do real-time animation, but we’re trying to teach this old dog yet another round of new tricks so it can compete with the fluid, animation-heavy experiences the mobile touch device revolution (think: iPhones) has trained users to expect. Let’s blow the covers off of what’s going on when the browser renders your web page. Rather than do this by explaining all the complicated technology involved, your humble hosts from the Chrome rendering team will just take a few website and show you what it looks like when we do performance profiling. We’ll bounce from CSS all the way down to the GPU and back using the tools we’ve built to analyze Chrome performance.

Video

While module systems like AMD and CommonJS have become common place for Javascript, CSS has been lagging behind.

Why modular CSS? In large scale apps managing CSS dependencies is cumbersome. Lack of granular CSS deps leads to pulling in unnecessary CSS on page render causing bloat. When refactoring code, the CSS order can change disfiguring the rendered page. Also, since it’s hard to know which CSS effects which parts of the page, all of the CSS is bundled together and downloaded at initialization, so the initial page load time is slowed down.

This talk describes the CSS dependency system in Google+. It improves end user latency by initially loading only a small set of CSS, and late loading CSS modules, as needed. It improves maintainability, making refactoring easier. Finally, the dependency system enables packaging HTML, CSS and Javascript together into distinct UI elements for reusability, and fewer wiring points boost developer productivity.

Video

With nothing more than a baton, it is considered a conductor’s duty to be able to synchronise and shape the sounds of a given ensemble. Last year Stuart Memo rocked the house armed with only a guitar and the Web Audio API when he showed us that JavaScript is the new punk rock.

This year I hope to show mobile the same love and help create our very own JSConf Orchestra, as we join together as a community and play a symphony of sound. I will talk about working with sound ( both HTML5 Audio and the Web Audio API ) on mobile devices as well as how to synchronise sounds across several devices.

Video

Edward and I spent this summer teaching a full time Ruby on Rails and JavaScript course to a group of 30 students, many of whom had never programmed before. We’ll talk about growing pains in the curriculum, parts of JavaScript that are easy and hard to learn (and why!), why we decided to teach this glass, what we got out of it, and what the students got out of it. More importantly, we’ll talk about not just how we taught JavaScript, but how we used meta-JavaScript and JavaScript tools to facilitate the learning and the logistics of the course. What I mean to say is, how we used JavaScript in order to teach JavaScript.

Video

Designing with cognitively-impaired users in mind can be very illuminative, leading to a broader understanding of the role of UX/UI design in general. The perceptual issues involved for users with Asperger syndrome and high-functioning autism in fact pave the way for current web trends - their web experience can be the most sensitive test of good design.

Video

Its been 4 years since I started on the MongoDB driver and I’ll share my trip through frustration and excitement pointing out all the things I did wrong and some of the things I’m kind of certain that I got right (more or less). History of the driver, challenges, gotchas, performance.

Video

In 1993 we build successful applications like email servers and clients - successful because they were build on open protocols. In 2003 we built great web servers - successful for being distributed and runnable by anyone. In 2013 we build applications against APIs that came usage limits and that would shut you down if you were in the wrong “quadrant”. Where did we go so wrong?

Video

We spend our days creating large-scale applications byte by byte. But what happens at night when we get rid of bloated libraries and browser dependencies? What will we discover deep under the surface if we dissect the language of the web into its atomic parts?

In this talk we will hack tweet-sized games, write code in only six characters and create the self-modifying “Hello World” in less than 1024 bytes of JavaScript. All just for fun and without asking “Why?”.

Prepare yourself for 140 slides full of old-school ASCII art and crazy code golfing!

Video

Meemoo.org is a sandbox for making creative image and animation hacking apps. The framework has a collection of modules (custom elements) that can be connected with wires (event listeners) that represent the data flow. The design of the framework encourages experimentation in different ways than working with code. It also enforces strict modular software design. Meemoo can be wired to make a stop-motion GIF maker, VJ software, textile pattern design, and more.

Examples: http://meemoo.org/hack-our-apps/

Video

I will talk about how ES6 generators can help you make your asynchronous code easier to understand in terms of synchronous concepts. I will discuss the alternative values you can use to represent a future and how they are all ultimately promises. Finally, I will discuss how you can get some of the same benefits in thought processes by using promises today.

Video

Sometimes you are tasked with building great things by yourself or in a small team. Bootstrapped start-ups don’t always have the budget for a dedicated Uxer to help you design the best apps, software or websites. So how do design great things without a Uxer? This is not a definitive guide or to even to be used instead of getting professional UX help but it will get you started developing the right way and stop you making classic mistakes.Before you even consider touching your dev environment I will show you how to “Start with one idea”, “Think like a user” and set out your user journeys. From this solid foundation I will show you how to wireframe your logic and build it as rough a prototype as you can manage. We then consider how to evaluate and iterate on your designs and what tools you can use. Finally, I outline the importance of never being afraid to scrap anything which doesn’t work. All without a single line of code being written.

Video

Touch screens, physical sensors and hardware miniaturization have greatly enhanced the personal connection between ourselves and our digital devices. Mapping physical input to UI/UX, operating systems now simulate natural systems. We swipe, shake, push and pinch as willing participants in a simulation meant to mirror our physical world.

In this talk, we’ll examine in detail the special qualities of natural looking motion and how a simple combination of forces can lure our perception. We’ll focus specifically on natural coding in a web browser and how we can overcome the challenges browsers present. Finally, we’ll look at how applying a natural coding approach to prototyping can expand the creative possibilities of the products we create on both desktop and mobile platforms.

Video

The audio sprites idea is similar to images sprites – it is a way to combine different files into one to get a lot of advantages like a solution for mobiles and other limited browsers, less requests and even smaller files.

All this sounds like the ‘Holy Grail’ of <audio> feature and an awesome solution to implement in any browser game or app. But is it really perfect in every case?

The Grepolis team always wants to deliver the best user experience as possible to every user – even to browsers with their limitations. Therefore we decided to implement audio sprites in our game. In the meantime we made tests and measurements of CPU and memory usage which demonstrated a meaningful use of them – and I wanted to show it to you.

Video

Regular expressions are used in many places to filter and validate input. While they are cute and powerful, they are usually hard to write and debug. So why not implement the entire RegExp object in JavaScript, such that each execution step can be visualized and debugging becomes easy? And what happens if you build a RegExp JIT in JavaScript that gets JITed by the JavaScript JIT … ;)

Video

The way frontend coders work with data is still very much determined by historical technical necessities and sentiments instead of by how they would like to work. We’re proposing a friendlier, more frontend-centered approach to building data-driven applications, where the backend adapts to the frontend developer’s dream code. At the end of this lies the wish many frontend devs have: “I wish I wouldn’t have to worry about the backend anymore.” Well, your time is coming.

Video

So you probably have heard that Javascript cryptography is to be considered “harmful”. Is it now? Let’s take a closer look at why it has such a bad rep, but also at how recent events and developments such as PRISM, asm.js and the W3C Web Cryptography API may dramatically change the odds. Find out why privacy and, as a consequence, cryptography, may influence your future even if you “got nothing to hide”!

Video

In the early 20th century Hollywood invented a new visual language, and the way we think about and understand stories was changed forever. Today, a similar shift is happening - stories are becoming non-linear, rich in media and crossing over into the real world. From transmedia theatre to games and interactive narratives, the way we tell stories is changing, and JavaScript is emerging as an essential tool for storytellers.

I will talk about how JavaScript is increasing the possibilities of interactive storytelling and media art experiences, such as enabling the manipulation of sound with libraries such as Buzz, and delivering transmedia narrative through mobile devices using PhoneGap and HTML5. You’ll learn about how others are using JavaScript to re-imagine what a story an be and how it can be told, and how you can use it too.

Video

Refreshing your Twitter feed is such a drag over 3G, taking forever to connect and fetch those precious kilobytes. The reasons for this go deep into the architecture of the internet: making an HTTPS connection simply has terrible latency.

So let’s fix the internet! MinimaLT is an exciting new network protocol that connects faster than TCP, is more secure than TLS (crypto by DJ Bernstein), and allows mobile devices to keep connections open as they change IP addresses. This talk presents the MinimaLT protocol and a Node library that allows JS hackers to experimentally build a new Internet.

Video

This talk is going to shed some light on different techniques that help to authenticate users in your service via methods such as Basic Authentication and more advanced technologies like OAuth 2.0 and OpenID Connect. Best practices will be presented and (dis-)advantages are going to be discussed.

Choosing the right identity provider (like Facebook, Twitter, PayPal or Google Plus) can be difficult and there are different scenarios where it makes more or less sense to implement them. After leaving this session, the audience will have a broad overview of this topic and should be able to provide their users with a nice experience.

Video

In this talk we will look at the difference in how two-way bindings are implemented and used in three popular JS frameworks: AngularJS, EmberJS and KnockoutJS. We will see how they are used, how they can be extended and how the three frameworks implement the binding with the HTML. We will explore what the implementation means for performance and ease of use.

This is not a talk about which framework is best, or which one you should use in your projects. The focus is on the strengths and weaknesses of the different implementations and finding out what the different frameworks have in common and what they can learn from each other.

Video

There are lot of tools (CoffeeScript, Typescript, Dart, JSLint / JSHint etc..) that we can use to help us write better JavaScript and many frameworks (Backbone, Ember, Angular etc..) that can help us structure large applications. But…

What if you already have a large code base and are not able to re-write your whole application in a new way?

What if your organisation does not want to depend on some open source or third party tool or framework?

I am going to talk about some of the key things that most of these tools / frameworks do and how you can apply them to your existing or new project. Topics covered will include:

• Type checking
• Data hiding (Public, Private, Static)
• Inheritance
• Asynchronous Code
• Performance

Video

The 80s spawned a plethora of novel yet elegant programming tools, with environments such as Smalltalk, Oberon, Self and Boxer arguably being well ahead of their time. Several of such tools were dubbed “microworlds”, sandboxed canvases in which users’ computational creations could be sculpted, evolved and mashed together with ease. With the availability of modern systems and browser technology, perhaps their time has finally come.

Using a hybrid visual programming environment, I will demonstrate how the humble web browser can be used to create ad-hoc, reusable environments suitable for a variety of tasks across various disciplines.

Video

In 2011 I quit my job at Last.fm, clinging to what was left of my ability to make things – which, at the time, wasn’t a hell of a lot. Since then, I’ve spent the majority of my personal time working on this as a design problem. Not just fixing what was broken, but redesigning the architecture to prevent it from happening again.

As makers, burnout is something we all face. It might be big, it might small. Mine was pretty big. This is the story I’m going to tell you.

Video

Topics: ES6, ES7, Object.observe, emscripten, asm.js, value objects, operator overloading, SIMD, Threads

Video

One of Silicon Valley’s most accomplished internet veterans, Marc Andreessen, declared software as a driving factor of innovation and economic growth with the famous statement: “In short, software’s eating the world”.

As software quickly innovates, we witness a growing shift in the way humans interact with software applications. The most obvious trend is the shift from consumer and enterprise grade desktop applications to the mobile/smartphone platform.

My talk will outline a comprehensive approach for tackling the key challenges attached to the delivering smartphone users with a reliable and continuously tested mobile experience. My toolkit relies on emerging and exciting new open source components (some of which to be announced for the first time at JSConf.eu).

I’m looking forward to taking JSConf EU attendees on a ride into the future of mobile app delivery, to spread some of my excitement around the powerful coordination of emerging open source services and javascript technologies.

Video

The Brackets open source project is a sandbox for experimenting with new ideas in web tooling. In this session, lead Brackets developers will explain how two of them work: Live HTML Development, and a new approach to debugging JavaScript codenamed Theseus. We’ll discuss the guts of as-you-type HTML preview: correlating the HTML in your editor to the DOM in your browser, tracking diffs, and applying them as incremental DOM updates. We’ll also talk about Theseus, a project we’ve built in partnership with MIT. Theseus provides an “omniscient” view of your JavaScript’s execution flow, spanning code executing in the browser and Node. Everything is open source, so you can use these techniques and code in your own applications.

Video

React, the new open-source JS library from Facebook and Instagram, is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304

At Facebook and Instagram, we’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.

Video

Playing with Arduino and Johnny-five makes creating something from practically nothing amazingly easy. Come tinker with robots for a bit, we’ll make things roll, we’ll make things light up, we’ll make things input and output. All with just a few lines of Javascript and a bunch of super cheap parts.

Video

In June, we published the Extensible Web Manifesto, declaring that the web platform should be built a series of extensible layers. Low-level capabilities, like hardware access, cryptography, or the parser, should be exposed to web developers through JavaScript, and higher-level features, like HTML tags or animations, should be explained in terms of those primitives. This allows JavaScript developers to extend the web platform without rewriting it from scratch in JavaScript, customizing it for the needs of their applications and creating a virtuous cycle wherein web developers prototype higher-level features that implementers can later pull in.

In this talk, I want to explore the concrete meaning of the extensible web. What initiatives already under way can we see through this lens? What ideas are still gestating, and need your input as a web developer? How will this new philosophy end up impacting you? I want to show you the future of the web platform, where developers like you are involved from the beginning in designing and prototyping APIs, and have enough low-level tools at your fingertips to solve any problem you face. And I want to bring it all back to our favorite language, JavaScript, which is the glue that makes this all work together.

Video

Some people say that when a butterfly lands on you it means good luck. However, in parts of England, people would traditionally rush around to kill the first butterfly of the year that they see, or else face a year of bad luck. The moral of the story is that people can be crazy.

They can also surprise you, a lot like Object.observe() - a proposed feature for listening to any JavaScript object that gets called whenever that object, or its properties, change - surprised me. In this session, I’ll walk you through everything I thought I knew about Object.observe() but didn’t, while profiling it for V8 this year.

Video

Learn how to use compilers and parser generators to remove boilerplate, build DSLs, and generally do the impossible.

I’ll explain the basics of how compilers work, and give an overview of some popular JS tools & libraries. I’ll demonstrate how they can help you do all kinds of useful things, like:

• presubmit checks for style guide violations
• extracting strings requiring translation in your code
• automatically inserting logging statements around certain function calls

Finally, for the budding language designers, I’ll explain how to create your own compiled-to-JS language in five minutes using a parser generator.

Video

It’s funny the way dog owners look like their pets, but how much do we resemble our language? In my art project, poetry.js, I use the execution and semantics of JavaScript to explore different aspects of humanity, and from those explorations, I hope to show you that underneath, despite our share of bad parts, there’s a very elegant core to people. We have insecurities and overconfidence - common problems to avoid - but I’ll discuss strategies for resolving them. All this through a series of executing poems. You’ll hoist. You’ll loop forever. And hopefully, you’ll come away with a better understanding of our need for community.

Video

We all know that when it comes to gaming, keyboards are rubbish and gamepads are fun. Alas, for browser based games we are still stuck with the old typewriter and rodent combo.. or are we? Let’s have a look at getting started with the GamepadAPI, bringing some input device fun to your browser.

Video

You know that smartphone in your pocket? The one with gigahertz of processing power, a surprisingly good camera, and the ability to instantly access the whole of human knowledge? Despite all of that high technology, if I want to call you, I still have to punch in a phone number—a technological relic that remains integral to our telecommunication infrastructure.

URLs are the same thing. The web is URLs and URLs are the web. Unfortunately, for the past few years, many JavaScript developers have started treating the URL as an afterthought, or a nice-to-have. In this talk, I’ll show why URL neglect happens at your own peril, and how making JavaScript apps that respect the URL can be, well, downright pleasant.

Video

In the era of information overload, simple slides just don’t cut it.

Brace yourselves, for you’re going to experience a never-seen-before JavaScript talk. Or rather, a meta-talk: a continuous, seamless display of rich media content where I’ll describe how you can build this kind of engaging, hypnotic talks that involve the speaker, audio, visuals and a good dose of beats. All it takes is a little bit of rhythm.

Video

How do you get the browser to render arbitrary HTML to a canvas? Sounds easy? We would beg to disagree.

While implementing an “HTML renderer” in pure JavaScript we will visit various areas of the modern browsers. Some ugly, some hacky, some really perverted, but definitely intriguing and powerful.

Video

For twenty years, we’ve forced all our physical interactions with web pages through a simple interface that was designed in an era where the only option was a mouse. In this talk, I’ll cover Pointer Events, the W3C candidate recommendation for bringing the events and attributes needed for a web where interact with pages through touch, pens, and in ways that we can’t even yet imagine.

Video

JavaScript was developed as a simple language for adding dynamic effects to one-paged sites. With the emerging complexity of contemporary web applications, non-strictness of JavaScript becomes problematic. The Web development community has created a number of technologies to statically check the correctness of JavaScript code, however, there’s a limit to what those tools can infer from the code, and their efficiency can be greatly improved by adding type annotations to your code, either through JSDoc or by using a language that compiles to JavaScript and supports optional typing.

In my presentation I’ll give some examples showing which errors can be prevented using these tools. Also I’ll show how a modern JavaScript IDE can improve your coding experience when it has some information about types.

Video

Technology is often seen as somehow objective, especially by people who don’t know much about how it’s made.

But like everything that involves human decision-making, it’s riddled with biases.

In search of profit (or sometimes innocent simplification) we have the choice to for example reduce human friendship, with all their nuances, to a boolean: friendship is approved or it isn’t.

I want to tell stories which will make it clear how we shape technologies with our belief and value systems.

Among them, a story of a London university which built a computer system to deal with the first round of admission, presumed to be objective and based on logic. It was later discovered to inherit all biases of the people who were doing its job in previous academic years, because that’s what the system was based on.

Or another story, of the biggest encyclopaedia ever created, one that removes barriers to entry and truly democratises knowledge. Only it doesn’t quite achieve that despite the ambition, as the participants are largely a self-selected group that lacks involvement of huge swaths of society.

How we look at these biases will be crucial in building a better world, one where we acknowledge and address the issues we build into technology in the first place. The decisions we make in designing the tools of tomorrow are necessarily political and I want to leave you examining your own.

Video

Cross-site scripting attacks are pervasive and dangerously exploitable threats to modern web applications, undermining the critical assumption that your app’s code is actually under your control. But you know that already; you’re likely playing whack-a-mole right now with one of the dozens of potential attack vectors your app exposes.

Happily, we’re this close to eradicating XSS with some new tools like Content Security Policy. Come spend a half-hour of your life learning how you can stop worrying about maliciously injected script. You’ll be glad you did!

Video

Computing an average, a max, or a median of a finite state is easy and we all know how to achieve it. However, computing an average, a max or a median for a stream is much more complex. Even solutions like ‘sliding windows’ who only consider a subset of the stream at any given time may be too expensive to us.

Scientists (yay!) have been working on such problems for years and we will introduce you to some of these techniques, including the secretary algorithm, lossy counting, or the greedy algorithm!

Video

Sounds gets better after 2:40. Automatic garbage collection in JavaScript isn’t a substitute for effective memory management, especially in large, long-running web apps. Memory leaks, frequent garbage collection pauses, and overall memory bloat can really drag you down. Come take a trip down memory lane with us and learn how we tackled these performance issues in Gmail. We’ll share best practices for memory management and demonstrate how to use the Chrome DevTools Heap Profiler like a wizard to optimize your site.

Video

Node.js is really suitable for realtime network application, and game server is a typical one. However, game server technology is not as open as other technology, there is almost no open source framework and standard about it. Pomelo framework is a fast, scalable, distributed game server framework for node.js, which we open sourced 6 months ago and gained a lot of attention. We believe it’s going to change the whole industry of network game. This topic is about the design of pomelo framework(abstract, scalability, performance etc.), and how to develop game server with it.

Video

Security isn’t one of those things you just bolt on after the fact. It’s not another department or third-party that takes care of those things for you. Security of an app is a developers responsibility. Your responsibility.

This talk will discuss the cross roads between security and development, the security of features you are going to build into almost every app, common pitfalls, examples of bad implementations and of course recommendations of how to do them right.

Video

JavaScript is the number one language in the world; it’s the language of the web, and a starting point for so many new developers – but how are they coming into the fold? How do we convert new developers or new JavaScripters from jQuery fumblers to prototype obsessed?

I’ll talk about techniques and strategies for teaching JavaScript at the beginner level, drawn from years of teaching JS and other topics, how we can get these beginners into our community, how we can foster their growth, and what we have to learn from other open source communities. Sound like a lot? It is! But it’s so important to talk about how we’re consciously building the next generation of JavaScripters to ensure a better JavaScript future.

Video

When using pattern based music composition software, especially the old genre of the Tracker I grew up with, the composition process is quite comparable to coding. So why not pushing this analogy to the max and actually program the music in JavaScript? In a browser? Live? That’s exactly what I’m planning to do in this talk, using a little web app I wrote. I’ll also talk briefly about other livecoding environments, how my (simple) approach works and if all goes well, by the end of the session, you’ll all be shakin’ yer asses to the beat.

Video

Large JavaScript applications are facing new challenges on mobile devices, where it is not possible to guarantee interactivity and responsiveness with raw throughput alone. Traditionally, JavaScript implementations focused on improving execution speed of JavaScript applications on desktop machines, where high-performance virtual machines allowed application developers to write JavaScript applications of several million lines of code that ran well on them. However, on mobile devices, low latency rather than throughput is key to keep the user happy and make web applications ubiquitous.

Video

JavaScript is misunderstood. It looks like C, acts like Lisp, but deviates in important and confusing ways. It can mimic classical behavior but is built on prototypes. It has blocks but doesn’t provide block scope. Then, throw in the magical “this” keyword and we have a recipe for interpreted disaster. Understanding how JavaScript creates and executes function objects is key to understanding JavaScript. In this talk we’ll walk through the JavaScript interpreter in an easy-to-follow no-confusing-jargon manner. You’ll leave with a better understanding of vanilla JavaScript!

Video

All the ECMAScript standard says about Numbers in JavaScript is that they are represented by “the double-precision 64-bit format IEEE 754 values as specified in the IEEE Standard for Binary Floating-Point Arithmetic” and, while understanding the binary representation of JavaScript numbers is not necessary in your day-to-day programming, it’s really worth digging into as it opens up the brave new world of questions you never thought you could ask (why is 0.1 not exactly what it is? how does Infinity look like? is there more than one zero? why the hell it’s called floating point?) and, more importantly, allows us to find answers to them.

Video

Users want to use a native mobile UI, and developers want to write JavaScript. I’ll be discussing ways of embedding a JavaScript engine in your native app instead of going all-web or all-native. Get the best of both worlds: logic in JavaScript and a slick native UI. I’ll demonstrate what’s new on iOS and the Mac that makes this approach easier, and look at how this turns out to be an interesting way to build cross-platform apps that have a wonderful user interface.