Content from May 2014
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:
importScripts()and event handlers
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.
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.
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.
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.
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.
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.
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/
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.
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.
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.
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.
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.
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."
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.
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:
What does a mouse drag event have in common with an Array of numbers?
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 talk will focus on the rationales behind the design of the API, show code examples, and present demos.
After the talk, you’ll know how to:
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.
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.
The main questions that will be discussed:
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.
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.
Design, implement, and deliver a successful modern web application project with three powerful tools in Yeoman workflow.
Create modern web applications with Yeoman, to save time and money by automating a developers workload using yo – the scaffolding tool.
Build, test and preview projects with Grunt, to ensure code is always ready for production using Grunt – the task management tool.
Search, install and update 3rd party application libraries using Bower – the package management tool.
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.
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.
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.
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.
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.
Content from May 2014
being a sponsor?