HTML5DevConf
Autumn 2014

Conference: October 20 & 21, 2014

Training: October 22, 23, & 24

Moscone Center, San Francisco

Content from May 2014

Sessions

We are currently in the process of adding sessions. Thank you for all of the wonderful submissions. You will see current sessions for spring soon, and we will be adding more over the coming weeks.

Click the session titles below for more details.


HTML Service Workers present new opportunities -- and challenges -- for mobile and offline application development on the web by offering the equivalent of a programmable client-side proxy for network traffic from your application.

This talk by the editor of the Service Worker spec explores:

  • The install process and the First Load Problem (TM)
  • The programmable cache model
    • Populating caches
    • Background updates
    • Matching cache entries to Requests
  • Request-by-request network control
    • What requests get set to which SW? What about iframes?
    • Cross-origin vs. Same-origin opportunities
    • What can be cached, where, how much, and for how long
    • Request routing
    • Composing SW-based apps with importScripts() and event handlers
  • The Offline-First application model
    • How apps differ from pages
    • Thinking about shell vs. content; what's in a URL?
  • The application upgrade process
    • wait-for-restart vs. immediate takeover
    • upgrade gotchas, version skew, and schema migrations
  • Performance considerations
    • Will using SWs slow my app down?
    • Network vs. disk performance
    • Request ordering and priority
    • Streaming response content
    • SPDY/HTTP2.0 and Service Workers
    • Memory concerns
    • Interaction with the browser preload-scanner
  • Future Service Worker-based APIs

Viewports are hard. Don't let anyone tell you they aren't. Although desktop browsers have only one, and it works pretty intuitively, mobile and tablet browsers have three. And sometimes they don't work intuitively - or at all.

What are the three viewports? (Spoiler: layout, visual, and ideal.) Why do we need all three? Why does responsive design work? (Not how. Why.) What happens when you set the meta viewport? How do browsers go wrong? (Spoiler: in plenty of innovative ways.)

And what about resolution, or DPR? (Spoiler: it is not what you think it is.)

In this session PPK, who spent more time on the mobile viewport than anyone not working for a browser vendor, answers these questions and more.

Being a developer for the web is becoming increasingly amazing but also increasingly confusing. We have all the tools at our disposal we might ever need but instead of using and collating them we seem to be too busy to create the next big thing to impress another. In this talk Chris Heilmann of Mozilla will show some of the amazing things we do use, some we should use and things we keep forgetting that make what we create craft rather than just released code.
How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join this discussion of the synchronous and asynchronous nature of web components, and how they can impact the rendering of the entire page.

Mobile messaging is one of the most important applications of the smartphone era. Messaging apps are, by their nature, more intimate than traditional social media channels, and give both developers and brands the chance to be part of the conversation.

Ted Livingston and Chris Best are the co-founders Kik, the biggest cross-app messenger in the US market. Kik has over 120 million users globally, and 275,000 new users join every day. Many people use Kik to connect with their friends and followers on Instagram, Tumblr, Clash of Clans, Soundcloud and many other apps.

Kik believes so much in the mobile web that they’ve spent the last 3 years building a browser right into Kik, and open-sourcing tools and libraries to help developers like you create web experiences that look and feel like native apps.

Join Ted and Chris for an insider’s look at the messaging space and a hands-on demo of the Kik browser APIs. You’ll hear how Kik views the future of messaging and the mobile web, and what this means for developers.

Fonts and typography are critical to good design, branding, and readability, plus they allow the text to be selectable, searchable, zoomable, and high-DPI friendly. In short, we need web fonts, and we need to optimize their delivery and use. In this session we'll survey the latest browser optimizations and APIs, plus share our experience of optimizing Google Web Fonts.
Famo.us is a Free and Open Source JavaScript platform for building mobile apps and desktop experiences. What makes Famo.us unique is its JavaScript rendering engine and 3D physics engine that gives developers the power and tools to build native quality apps and animations using pure Javascript. Famo.us runs on iOS, Android, Kindle and Firefox devices and integrates with Angular, Backbone, Meteor and Facebook React. Famo.us University is a Free Live Coding classroom that teaches all levels of developers how to utilize famo.us to build beautiful experiences on every screen.

I bet you've heard that "callback hell" is about function nesting and levels of indentation. Nope.

I bet you've heard that Promises take away the nightmares of callbacks. Not so much.

I bet you think the event loop is *the* model for concurrency in JS. Meh.

Clearly, we need some clarity on what async flow control is all about in JavaScript. We'll explore the perils of "Inversion of Control" patterns, and see just what hell that leads us to. Then we'll talk about promises as "continuation events" for function calls, and abstractions on top of promises that clean up our code.

Finally, we'll reveal generators for synchronous-looking async, and even how we can create cooperative concurrency with coroutines.

Yield those confused async notions and control your flow. I promise we'll get your thoughts in order.

The shining gem in the treasure chest of new Web functionality is WebSocket. With the advent of this disruptive innovation, the world now has a persistent, high-performance connection that does not require anyone to open ports other than 80 and 443.

This IETF-ratified protocol and W3C-blessed API effectively give us a "TCP for the Web" that is as secure as HTTPS with the native performance of a client-server system on a LAN. Your DevOPS and InfoSEC friends will remain your friends when you use WebSocket in your applications!

WebSocket is an engine for innovation that will make traditional web applications significantly more dynamic and allow novel bi-directional, event-based services to be developed and deployed for all types of devices.

This talk will start with a brief history of WebSocket, its current state, what is needed for production development and deployments. We will then discuss some possibilities for the real-time web future and show some wicked cool demos.

"Designers should learn to code!", "Developers should learn to design!"

Why not find a tool that works for both?

In this talk we’ll look at how to solve the designer-developer split using Polymer and Web Components. We’ll get back to our roots, when designing web applications was just a matter of bolting together elements, like Legos. And we’ll also show some projects that you can start using today to improve your team’s workflow. If you want to build great products, or if you’re just curious to learn how Polymer and Web Components work, come join us for an awesome session.

Rendering performance on the mobile web -- it's hard. This talk will provide an overview of the challenges for building a snappy, interactive, touch-based application, including both best practices and a few of the latest changes to Chrome to make it shinier.

How to tackle real-world web platform performance problems in modern websites and apps? This session starts with a basic understanding of the web platform and then explores to a set of problem/solution pairs built from industry-standard performance guidance. In the talk, we will demonstrate performance tips and tricks that will help you improve the performance of your apps and sites today. We will discuss the following respond to network requests, speed and responsiveness, optimizing media usage, and writing fast JavaScript. These performance tips and tricks apply equally to web sites that run on standards based web browsers, as well as to modern apps.

WebGL brings amazing 3D graphics to the web. But to build even the simplest application requires JavaScript skills, a third-party toolkit, and fiddling with JSON. In their infinite wisdom, the developers of WebGL gave us unlimited power but no easy way to access it. There is no DOM, no markup, no CSS. It’s all on us, and it’s all a big pain.

Let’s say you want to put a spinning cube with photos on your web page. Using Three.js, you’re talking 40 lines of JavaScript code. Forty! There’s got to be a better way! What about good old markup and CSS? Wouldn’t it be nice to be able to author that <cube> with zero lines of code, using tags like ? And be able to style and animate it using a style sheet?

glam (GL And Markup) is a new declarative language for creating 3D content in web pages. With glam, you can easily create a 3D application in markup, style it with CSS and program it, when needed, using standard DOM methods and events. No new toolkits to learn, no steep learning curve, and no fuss. glam is 3D development, web-style.

Join Tony Parisi, the guy who created the first declarative 3D language for the web, as he attempts to restore sanity to 3D development. Tony will describe the glam open source project, the 3D tag set and DOM API, integration with other web technologies, and its implementation and polyfills using Three.js, Web Components, and Google Polymer.

<`>HTTP/2 is the next generation HTTP protocol standard, and it offers the Web an awesome opportunity to improve performance, scale, and security.When you put HTTP/2 together with HTML5, good things happen to end users! This talk will introduce HTTP/2, describe its essential features, and discuss how it will rock our world! HTML5+HTTP/2 = Amazing!

This session will compare debugging methods available for working with hybrid HTML5 mobile apps (aka Cordova/PhoneGap apps) on a variety of devices and operating systems, including iOS, Android and Windows 8.
Utilize various programming patterns to streamline development of a 100% JavaScript tech stack, end-to-end, with node.js on the backend. We'll cover data modeling and code sharing on client and server, as well as automatic API generation for resources with meta-programming. We'll dive into modules and components designing a scalable, state-based, front-end application architecture, synthesizing a number of programming patterns to keep your product agile and moving forward.

Ember.js is an exceptionally powerful and exciting technology for building rich, native-feeling experiences on the web. It combines some of the best ideas from classic UI frameworks like Cocoa and UIKit with cutting-edge HTML 5 standards like web components. The result is something truly extraordinary: a fresh, powerful approach to building truly ambitious applications on the most universal runtime the world has ever known, the web. In this talk, we'll explore some of the elements of Ember that will help you build your next ambitious idea and delight your users.

As more and more people start using CSS libraries like Bootstrap, our CSS files are full of unused rules. Not only they take away unnecessary bandwidth (which matters a lot on mobile), they also slow down the browser since it has to parse all the rules and test to see if they apply to the current page.

Through this talk, I'll show how you can use node-uncss and grunt-uncss to automate the process of removing CSS rules that are not used in your pages.

See also: http://xdamman.com/website-optimization-grunt-uncss

Have you ever wanted to expand your web app to enable a multi-screen experience leveraging large display devices like a television? Google Cast allows you to share content with a Google Cast receiver device, such as a Chromecast. Google Cast web senders use the familiar controls of your desktop browser to control the experience of your application on the big screen. In this talk, Google Developer Advocate Kevin Nilson will talk about Chrome Sender App Development and HTML5/JavaScript Receiver Development. Kevin will also cover some of the best practices to keep your Cast experience simple, intuitive, and predictable.

This talk will cover how to effectively organize and compose UI components in JavaScript, HTML, and CSS, as well as give an overview of identifying UI patterns. We'll cover some common UI components and identify similarities between them. This sheds light on the construction of these components and how to effectively decouple code so that it can be reused effectively across projects.

With a solid understanding of UI patterns, and best-practices for reusable code, rolling your own UI components is awesome and enjoyable. And for those who don't have to time to write a widget framework from the ground-up this talk will give an excellent outline of what to look for in 3rd party components.

This talk is based on a blog post that can be found here: http://tybenz.com/post/widgetize-all-the-things/

Throughout the talk we'll discuss the architecture we used for building Mural.ly (+280K users). We'll go in depth in each high level component and share the lessons learnt while building it.
Understand everything that is needed to create cross platform mobile applications using Cordova for iOS, Android and BlackBerry 10 devices. We will go through all the steps for configuring your machine (Mac or Windows), as well as inspect a sample app containing Connection, Alerts, Device Info, Local Storage, Maps, Accelerometer, Contacts, App In Browser, Photos and Photos using the Cloud (with Parse). In the end, we will see how to package, deploy and debug the application on a BlackBerry 10 device.
CSS methodologies and best practices such as CSS Semantics, OOCSS, Grid Systems, SASS, LESS, (and more) exist to guide us towards making more efficient and more maintainable CSS. However some of these tools and ideas have conflicting ideas and when their methodologies are not understood well enough, we can even do more harm with them then without. This talk aims to expose the pros and cons of some of the most widely accepted CSS best practices, which ones contradict others, and which ones compliment others.
Insomniac Games has been making AAA console games with an in-house suite of browser-based tools for the last few years. This talk will be a whirlwind review of the architectural choices, lessons learned and and other tidbits picked up along the way in supporting multiple large production teams and titles. Talk will include notes on server design, mixing native code and javascript, asset databases and real boots-on-the-ground production trade-offs.

Node.js is getting extremely popular for creating web applications lately. It's not just a server-side technology, though. Node.js is really a platform for making awesome stuff that has nothing to do with serving web pages.

I'll look at how to use Node.js for creative endeavors. Yes, we can talk Grunt, Less, and Bower for web development, but I'll gloss over those tools and jump straight to building desktop applications with Node WebKit, 3D sensing cameras, Bluetooth hardware, and other fun things.

Node.js offers endless possibilties, not just because of Javascript, but also because of the ability to use existing libraries or command line tools. I'll cover both and speak a little bit about creating your own Node add-on in C++ to tap into the power of your favorite library.

In the end, I hope to inspire folks to use Node as creative platform for graphics, graphical applications, and interacting with the physical world.

This presentation will show some good practices, solution for gotchas and examples for building 2D games using WebGL technology.

The audience will be introduced to general concepts like batching, CanvasRenderingContext2D for webgl, dynamic geometry, and well as more general animation purpose ones like scene graph, director and key framing with a series of running examples that will showcase the power of WebGL on desktop and mobile devices.

The session will include a bit of hands-on coding, so some small examples will be modified to make them more appealing.

We will just scratch the surface but the atendee will get strong general concepts useful to build his next generation of webgl based games.

New web developers have trouble distinguishing jQuery from JavaScript. We frequently point developers to three.js for doing 3D on the web, but what is raw WebGL and what tools do we have for debugging 3D web applications?

In the summer of 2013, Wikia had no JavaScript style guide. The JS code base was inconsistent and long philosophical discussions were breaking out during code reviews about how things should be done. There was no one place to point to and say "here, that's the right way to do it!" So we formed a team, and 6 months later, we had a style guide.

This talk will go over what it takes to build a JavaScript style guide for your organization. It will go into why coding conventions are important, provide resources to help you in your process, provide insight on how to build a consensus in a mid-sized engineering team, and how to get your boss to agree to give you time every week to work on it. It will also touch on tools you can use along the way and how to enforce style rules once they are created.

In this session, we’ll walk through the essential building blocks of SVG (Scalable Vector Graphics). Then we’ll dive into transforms and matrices and how to manage the transform stack. We’ll also learn how to script against SVG with JavaScript libraries like Raphaël and D3 to make interactive web applications.

  • Introduction to SVG elements
  • Benefits of using SVG
  • The different ways to embed SVG
  • Scripting SVG
  • Using SVG links
  • SVG filters
  • Using CSS Animation with SVG
  • CSS Transforms and Transform Matrices
  • RaphaelJS – Primitives, Attributes, Events, Animation and Easing, Sets and Transforms
  • Other Cool SVG Stuff (Links and Demos)
With the growing number of HTML5 games and applications its important for web developers to understand basic AI algorithms. In this session I'll cover the golden pathfinding solution known as A* (A Star). This will teach you how to make items move from any point on the screen to another while avoiding obstacles. The algorithm will be covered step-by-step in JavaScript so you'll know enough to create your own custom AI pathfinding solutions.

Dart is a language designed for the modern web. It is a simple object oriented language that’s instantly familiar to C++, Java and C# developers. It provides optional static types, allowing for programmer’s and their tools to easily reason about a program; a strict runtime and analysis tools that will inform the programmer when they make mistakes; and a more constrained language that is better suited for optimizing. All of these things can be used to build robust scalable applications on the web, especially for game developers targeting the web.

Games continually push what’s possible on a platform, and HTML5 coupled with WebGL, makes the browser a compelling platform for game developers to target. With Dart, game developers can rapidly create their games using its rich tooling. The ecosystem around Dart is meant to provide greater performance than what is currently possible on the web, either through the Dart Virtual Machine or by being compiled to JavaScript. This is integral to getting more work done in a single frame, and pushing the boundaries of game development within the browser.

This presentation will provide a primer to the Dart programming language and how it can be used by game developers. An overview of the language and its capabilities will be discussed, within the context of a developer targeting WebGL.

Mobile JavaScript development requires focus on different strategies and methodologies, than traditional web applications. The processing power (both CPU and GPU) is limited, memory is limited. Latency is a killer. Memory leakage is a problem. Dealing with cache manifests and offline browsing is also an important thing to consider.

On top of all these, emory leakage is also a problem, because the application will most probably be a single page fat-client app, that will not be switched off for hours, or even days. Dealing with cache manifests and offline browsing is also an important thing to consider.

Therefore, to create a fast (near 60fps) mobile javascript application that uses less memory as possible; you might need to **unlearn** what you've learned before. -- In that regard, my presentation will be roughly around the following subject matters:

  • A multi-tiered architecture may be shooting yourself in the foot
  • Not using a library/framework should be the way to go, if you can.
  • The less objects you create, the better.
  • The less the size of DOM, the better (and you might need special techniques like DOM-sharding)
  • Being minimalistic is your friend. If you need a banana, don't pass a gorilla that holds the banana and the entire jungle with it.
  • You can create applications that perform quite like their native counterparts, if you pay some extra attention to details.

In the presentation I will be talking about the best practices to make your single page, fat client, hybrid JavaScript web application as snappy as its native counterpart.

Some of the techniques that I offer might seem arguable, and open to discussion. And I won't be talking about "the only way" that works; per contra I will be discussing "a way that works all the time."

While the JavaScript event loop and asynchronous callbacks provide a powerful, easy-to-understand concurrency model - writing applications in continuation-passing style introduces problems of legibility, exception management, and composability. With the introduction of generators in the ECMAScript 6 Draft Specification, programmers can continue to leverage the power of the single-threaded event loop while writing expressive, simple code in a direct, top-down style.
Frameworks are a very important foundation that we learn, rely and build on. They need to amplify our power of expression, enable us develop faster and smarter so that we can easily reuse what we did and share it with others, so they can reuse it too. But is a framework enough?

Security is usually an afterthought but is an important part of building a production-ready app.

You're probably using plain vanilla Express. Fail. You're probably using a templating library like Underscore or Handlebars. Ha, sorry! You're probably only sanitizing user data. Nope, won't save you.

In this talk, I plan to identify even more anti-patterns and share best practices for securing your apps (focusing on Node.js and SPA libraries like backbone). I'll show actual security holes found in code and how you can patch them, too!

I hope to inspire others to care about security and take the extra step to secure their app and their users. Thanks!

Techniques and approach involved to build Google Racer, a multi-device web based mobile game.

www.g.co/racer

The ability to deploy code should be predictable. Running your build should take no time when theres nothing to do. You should be able to split your code base up into as many components as possible to optimize reuse. With npm and grunt it is possible to achieve those goals, but not without lots of effort!

This talk will go through how Eventbrite:

  • Broke apart its monolithic Gruntfile
  • Wrote builds for a component based architecture
  • Set up a large build that takes nearly 5 seconds to run when there's nothing to do
  • Propped up a private npm registry and proxy using kappa, nginx and reggie

What does a mouse drag event have in common with an Array of numbers?

The answer to this question may surprise you: they are both collections. This key insight holds the key to dramatically simplifying asynchronous programming in Javascript. In this talk you will learn how you can use the familiar Javascript Array methods to create surprisingly expressive asynchronous programs. Using just a few functions, you will learn how to do the following:

  • Declaratively build complex events out of simple events (ex. drag n' drop)
  • Coordinate and sequence multiple Ajax requests
  • Reactively update UI's in response to data changes
  • Eliminate memory leaks caused by neglecting to unsubscribe from events
  • Gracefully propagate and handle asynchronous exceptions
  • In this talk we'll be exploring the Reactive Extensions (Rx) library (https://rx.codeplex.com/) which allows us to treat events as collections. You'll learn about how Netflix uses Rx on the client and the server, allowing us to build end-to-end reactive systems. We'll also contrast Rx with Promises, another popular approach to building asynchronous programs in Javascript.

PhoneGap is an awesome tool for building mobile apps. The barrier to entry is low and allows more flexibility and creativity. Still, attempting to build a successful mobile app with PhoneGap can be daunting. The various types of devices, platforms, and even platform versions can be confusing. And even though PhoneGap allows you to use HTML, CSS and JavaScript to program, JavaScript in particular can present challenges for beginners.

However, things are getting better. CSS and Javascript are becoming more mature than ever, and many modern JS frameworks are now more focused on creating mobile apps than websites. Being a developer myself, I know the struggles and frustrations that can arise from HTML5 hybrid app development. In my talk, I will cover the exact tips and tricks you need to quickly master PhoneGap development. I’ll focus on getting started, and building a better UX. You’ll find out how and why PhoneGap is such an awesome tool for building mobile apps.

The old paradigm of rendering static templates on the server and patching them up using jQuery is no longer viable in this world of rich web apps, because it means manually writing the update logic for your views. Web devs are instead drawn to frameworks like Angular, Ember, and more recently React, which provide mechanisms for writing views that update reactively when data changes. But each of these require leaving behind the familiar templating languages like Handlebars and Jade.

This talk will show off Blaze, the reactive template engine I wrote for Meteor that offers a far easier approach. You just write normal-looking templates (HTML or SVG!) in a familiar style, and Blaze handles updating the DOM in a fine-grained way when data changes. Dependencies between the view and the model are automatically tracked, with no need to declare them explicitly. In addition, unlike most UI frameworks, Blaze assumes your view model is backed by a real server-side database which may be edited collaboratively. And the Blaze runtime supports arbitrary template compilers: Meteor ships with a Handlebars-like language, but you can also use reactive Jade or any other syntax.

This session discusses the bad habits you may have picked up from those “web school” pages on the internet and shows how to break them with some simple-to-follow rules. By simplifying your JavaScript, thinking about your web page holistically rather than pieces/parts, optimizing your server-client communications, and considering the security aspects of your page, this session will show you how to cook up lean, mean, speed machines for your web pages. No Heisenberg uncertainty involved either, you’ll understand and use the developer tools provided with your browser to tweak performance, shave time, and optimize bandwidth.

Creating mobile apps is tough enough. Now try supporting a native look and feel for the top mobile platforms (iOS, Android, Windows Phone 8, and Tizen). This session will show you how HTML5 and JavaScript can create cross-platform and native-style apps using PhoneJS, Knockout, & Cordova. You'll also see how to use a powerful client-side grid with AngularJS and Bootstrap.

The leaps in JavaScript performance that has taken place over the past 5+ years has made JavaScript and HTML5 a viable platform for running many types of applications that previously required 'natively' compiled code in order to achieve acceptable performance. However, there are certain application domains that rely on clever use of SIMD (Single Instruction Multiple Data) programming for good performance. Examples of such domains are: 2D/3D graphics, physics engines, audio processing, fluid dynamics, and possibly others. These domains all require effective execution of vector/matrix operations and non-trivial vector math, such as trigonometric operations, which is why availability of SIMD operations is essential for good performance. Today, it is not possible to write JavaScript programs that utilize SIMD features in modern CPUs, without relying on various plugin solutions that interfaces to natively compiled code.

We have defined a set of low-level JavaScript SIMD APIs, which is only a slight abstraction of existing C/C++ intrinsics for doing SIMD programming directly in JavaScript. The main benefit of this API is a straightforward way for the JavaScript Virtual Machines (VMs) to map these operations to the powerful SIMD instructions in modern CPUs. A secondary benefit is reuse of existing algorithms. All the time and effort that has gone into implementing efficient algorithms utilizing SIMD via intrinsics can be reused with little effort; either through straightforward manual conversion of such algorithms or via automated translation using Emscripten. Also, the API is architecture neutral and will allow for efficient execution on different architectures that support a SIMD set of instruction; e.g. x86 and ARM.

In 2013, a joint Intel/Mozilla/Google effort successfully prototyped this SIMD JavaScript API in both Google’s V8 and Mozilla’s Spidermonkey JavaScript VMs, demonstrating impressive performance gains for kernels extracted from some of the application domains mentioned above.

It is the intent to include this JavaScript SIMD API in future versions (ES7?) of the EcmaScript standard (ECMA-262).

This talk will focus on the rationales behind the design of the API, show code examples, and present demos.

References:

EcmaScript strawman proposal
Recent blog post by Axel Rauschmayer
Bringing SIMD to JavaScript

Most developers know that it's important to test their JavaScript, however there are a plethora of reasons why they don't. This session will give attendees the tools to get started with JavaScript unit testing. Attendees will learn: how to setup a testing environment, how to write testable JavaScript code, how to solve some common JavaScript testing issues such as testing the DOM, and how to save time by automating running tests with tools like, Grunt and Testem.

Writing clean, testable JavaScript can be a daunting task for front-end developers. Many find it difficult to get into and thus discard it. This leads to untested front-end code going into production, merely depending on manual human testing. The problem is, the human error factor plays a role here, and as humans we often tend to make mistakes. Bearing that in mind, not having test automation on JavaScript code can lead to trouble. Test automation is an essential part of modern web applications, especially when it comes to maintainability. In this talk, I show how easy and straightforward testable JavaScript code can be written. Practicing test driven development and combining the power of AngularJS and TypeScript. With the use of tools such as Jasmine, Karma test runner and Istanbul code coverage. And finally automating the whole process with TeamCity.

After the talk, you’ll know how to:

  • Practice test driven development with JavaScript
  • Combine AngularJS with TypeScript
  • Use AngularJS’ test design capabilities
  • Use JavaScript testing tools; Jasmine, Karma and Istanbul
  • Automate testing with TeamCity

Learn how to build a new breed of always-available mobile apps that are responsive even when the network is not. See how easy it can be to build apps, and sync data with the cloud, using the all-new embedded JSON database, Couchbase Lite.

Be ready to use your laptop and participate in our interactive demo. We’ll be showing off Couchbase Lite's web-server capabilities with an HTML5 push-to-talk video chat app hosted on attendee's phones. We’ll also be sharing links to the demo source code and other resources to help get you started building mobile apps faster and easier than ever before.

Joining us on stage, Jon Udell will share how Couchbase Lite is powering the Microsoft project, code-named Thali. The Thali project is a visionary experiment to determine what it would take to make the web truly peer-to-peer.. Some of the areas being explored are, security, authentication, discoverability, shared data, and multi-master synchronization.

Web Applications are in an age where they look and feel like native applications. Yet, many of these beastly web applications seem to be reined in by one major obstacle: they require an internet connection. This catastrophic hindrance has taken the web app community by storm and leaves us pondering a simple question: how on earth do we get them to work more like their native equivalents which are not vexed by this very limitation? This talk will explore just how we can catapult web apps into a new era by enabling offline scenarios so we can level the playing field with those all-powerful native applications. We will discuss the mobile-friendly APIs backing these offline scenarios – Web Storage, IndexedDB, AppCache, and File API – and what they have to offer for both web apps and web sites. In addition, we will discuss where these individual APIs are headed in the future and how we can expect them to flourish and support much richer experiences.

Looking at how you can use both Static and Dynamic WebGL to push the performance of your 2D game, and how you can use shaders to give it some extra bling while also using their power to increase it even further.
THAT is the question! This talk will be all about the world of 2D on the web and how with today’s current HTML5 tech it can be pushed to create some stunning and unique creative opportunities. Technologies such as webGL can now do so much more than simply moving images around on the screen. Part of my interest in webGL is the idea of ‘subverting’ it from its ‘true’ 3D application. After all 3D is really such a load of well organised 2D shapes! This talk will explain and show examples of some of the cool effects and techniques that leverage the power of webGL to really kick 2D into the next dimension. Just not the third dimension ;)

Initially Steve Jobs invited developers to create web 2.0 ajax apps on top of the safari browser, a few weeks before the iphone launch. Then in 2008 he did a 180° turn and opened the native appstore. Why ? Simply because the technology (browsers, devices) & the networks weren’t ready (and also because the 30% appstore cut would become a nice revenue line).

At that time, in 2008, Steve Jobs was right from a commercial point of view. But what about today & tomorrow?

My speech will address the 7 main reasons why I think the appstores are doomed in the long run.

WebRTC allows for a simple way to include real time video and audio communications directly in the browser with no plugins needed - only javascript. This bleeding edge part of the HTML5 standard has lots of applications from video chats to encrypted P2P data exchanges, but it is bleeding edge. In this interactive session, our team will share the best practices we've learned from a coding and UX perspective so that you can reduce your learning curve.
WebRTC allows for a simple way to include real time video and audio communications directly in the browser with no plugins needed - only javascript. This bleeding edge part of the HTML5 standard has lots of applications from video chats to encrypted P2P data exchanges, but it is bleeding edge. In this interactive session, our team will share the best practices we've learned from a coding and UX perspective so that you can reduce your learning curve.

The topic will be useful for everybody who works with JavaScript and HTML on mobile devices (mobile websites, hybrid apps, PhoneGap, native HTML5 (Ubuntu Touch, Tizen, FireFox OS))

The main questions that will be discussed:

Mobile Performance

  • File loading (data, js, css)
  • Ender tree optimization (reflow, repaint)
  • DOM optimization (excess DOM, custom events, DOM manipulation)
  • JS Optimization (GC, Object Pools)

We will talk about the key moments that should be considered while using JavaScript, HTML and CSS for mobile development; typical mistakes and the most appropriate methods.

An introductory look into how to use Apache Cordova's new command line interface (new in version 3.x) to create hybrid mobile applications using the standard web technologies we have grown to love: HTML, css, and JavaScript.
HTML5 is everywhere. We say this a lot, but web tech is now embedded into almost all our daily electronics. The next frontier for the web is wearable technologies. Wearables present a completely new design target for developers. And understanding their features and limitations on a technical level is essential to building strong interfaces that users will want to return to again and again. In this session we will look at developing HTML5 applications for wearable technologies with a focus on Google Glass. Specifically, we'll use Sencha Touch and Apache Cordova to build an application that is both cross platform and cross device. Although this talk will be code heavy, there will still be good material for designers and UX'ers. So stop in and join us as together we go beyond the frontiers that we were told we could never cross.
The intent of this talk is to give a short introduction about Web accessibility and the benefits for people with disabilities and how to use the most important W3C Guidelines (WCAG and ARIA) to make your web project more accessible.

Data analysts must navigate increasingly large data sets, sometimes with billions or more records. I present methods for interactive visualization of big data, following the idea that perceptual and interactive scalability should be limited by the chosen resolution of the information, not the scale of the data.

I first describe methods for interactive querying using binned plots through a combination of multivariate data tiles and parallel query processing.

I then present a design space of scalable visual summaries that use data reduction methods (such as binned aggregation or sampling) to visualize a variety of data types.

We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.

When shipping web applications, developers usually worry about backend performance and scaling. With tools like YUI and Page speed, front end performance engineering was brought into spotlight.

However, even today, developers have to look at render/paint timelines and the confusing about:tracing tabs to see if their sites are smooth and jank-free. Developers look at these graphs and try to identify known patterns that slow down a site.

Can this all be automated? Even better, can it be made a part of a continuous integration system so that a developer just pushes code, and knows if something is wrong?

During this talk, I would like to discuss my experiments with porting the Chromium telemetry smoothness and loading benchmarks into Node, how the data can be collected and how it can be integrated into a continuous system. I would be exploring the new set of tools that developers can create to ensure that no website is janky again.

Tagline

Design, implement, and deliver a successful modern web application project with three powerful tools in Yeoman workflow.

Key feature 1

Create modern web applications with Yeoman, to save time and money by automating a developers workload using yo – the scaffolding tool.

Key feature 2

Build, test and preview projects with Grunt, to ensure code is always ready for production using Grunt – the task management tool.

Key feature 3

Search, install and update 3rd party application libraries using Bower – the package management tool.


Topic

With so many modern tools for web developers to leverage, creating web applications ends up being a never ending struggle on deciding on which tools and workflows to use for that project, meet Yeoman - a workflow composed of three tools that enables developers to save time when creating modern web applications, with a module for just about any task and a code generator for just about any project, getting starting with projects using community best practices has never been easier.

Hardware Acceleration is the act of utilizing hardware to perform tasks faster than it is possible to perform in Software.

CSS3 Introduced a way to hackishly offload some of our visual rendering tasks that had previously been performed by the CPU, to the fast-and-furious GPU. While overtime many engineers have begun to utilize hardware acceleration, many still don't understand the full potential, especially in mobile.

This presentation is a behind-the-browser introduction to the GPU, and the performance enhancements it can provide mobile applications.

When you are tasked to build a web application, there is a number of decisions that need to be made in order to accomplish this task.

  • What JavaScript framework to use?
  • When to use third party plugins and when to create our own?
  • Who owns the design and styles?
  • Twitter bootstrap, foundation, or none?
  • How to set proper UI framework standards for all to follow?

This presentation is about the experience of not relying on major frameworks and building a UI framework by using parts of some frameworks and building custom components at other times. Also the presentation covers the reason behind some decisions, why AngularJS was used, how did we handle package management, how did we persuade an enterprise to adopt open source software mentality, etc...

Smartphone messaging is one of the hottest phenomenon of the mobile era. Messaging apps are, by their nature, more intimate than traditional social media channels, and give both developers and brands the chance to have one-on-one conversations with their audience – and to be part of the conversation between their users too.

Kik Messenger operates as a mobile web platform and is the first smartphone messenger with a built in browser. Kik has over 100 million users globally, and 275,000 new users join every day. We’re also the biggest cross-app messenger in the US market: many people use Kik to connect with their friends and followers on other social networks like Instagram, Tumblr, Ask.fm, and Vine. Using Kik's browser, our users can already find and share your company’s website. Why not make it a better experience?

Join Kik’s technical experts for a full-day session to learn how Kik approaches building mobile web apps that look and feel native – and deliver a truly mobile-first experience. You’ll gain a better understanding of how to build mobile webpages and how to optimize mobile web apps. You’ll learn about the fastest-growing platform space out there – mobile messaging. You’ll learn how to integrate with Kik Messenger, the #1 cross-app messenger in the US market. We’ll share our tools and processes, and we’ll help you get started on building your own mobile-first experience. And we’ll show you how to get your new-and-inproved mobile webpage discovered and shared by our 100 million users.

What if you could use JavaScript to control stuff in your home like lightning, garage doors, HVAC, TVs and audio systems? Although the most popular products and solutions like the Apple AirPlay, Google Chromecast and Nest Termostat rely on proprietary protocols, there are plenty of devices that support the UPnP standard, which should allow cross-vendor compatibility.

The W3C Device APIs Working Group released a draft of a JavaScript API for Network Service Discovery aiming those devices. Opera already released an experimental build that implements the proposed API which hopefully it would be soon supported by Firefox and Blink.

In this talk, we will know more about UPnP/DLNA and explore some of the possibilities to integrate them with our current technology stack. We will run some demos through experimental browsers and we will learn how to use Node.js and a Raspberry Pi to build a low-cost UPnP gateway to bridge the gaps for the current browsers and empower the audience to come up with their own crazy applications.

HTML5 presents a great opportunity to create browser based games that work across the array of tablet and smartphone based devices. In the near future, as the device environment becomes more diverse, developers will begin to adopt standards that work across all devices. With HTML5, Javascript and the free createJS engine, surprisingly sophisticated games can be created.

In this workshop session, you'll be invited to code along with the instructor as you create a basic game and deploy it to a mobile environment. The games graphical and audio assets will be provided to you as you learn the techniques to create HTML5 based game that includes sprite-based graphics, audio, animations and more.

Responsive is here. With the explosion of devices, we've realized that we have to design responsively and with mobile firmly in mind. But are we actually doing it well? In this talk, will delve into how to make optimized responsive sites with a mobile-first approach. Not only do we get serious about mobile first, we'll take a look at what the future has in store for us.

Meteor offers a better and faster way to build modern applications: realtime apps with engaging interfaces that are equally at home in a browser or on a mobile device. First introduced in 2012, the Meteor framework integrates all the parts of a modern stack you need to build these kinds of apps: a realtime data layer that runs over websockets, a live template engine to manage updates to the screen, consistent APIs that work on both the client and server, support for pushing new client code into a running browser tab without interrupting the user, and a new package system designed from scratch for thick-client apps.

While it's easy to get started with Meteor, there are fewer blueprints and technical resources for developers who are building larger production applications. This interactive course will give attendees a closer look under the hood at *how* Meteor works, and through live-coding an app, arm you with everything you need to know to be able to use Meteor for a weekend hack or a significant production undertaking.

Nobody loves their charts more than the finance team! This presentation is a step by step walk through of using D3 to create real time visualizations for a financial application. We’ll cover the basics of getting started with D3 and the gotchas involved when applying D3 to an enterprise application.
We'll cover the fundamentals of practical JavaScript usage in a browser, with a focus on language features that tend to confuse people most in their first year or so of front-end work. This will be an extremely hands-on session, drawing on the accelerated curriculum we use for rapid on-boarding at Hack Reactor, the JavaScript immersion school.
Session summary
Sponsors