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.
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 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.
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.
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.
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?
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?
Prepare yourself for 140 slides full of old-school ASCII art and crazy code golfing!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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)
- Asynchronous Code
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.
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.
Topics: ES6, ES7, Object.observe, emscripten, asm.js, value objects, operator overloading, SIMD, Threads
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).
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.
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.
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.
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.
In the era of information overload, simple slides just don’t cut it.
How do you get the browser to render arbitrary HTML to a canvas? Sounds easy? We would beg to disagree.
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.
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.
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!
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!
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.
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.