Track: Modern Browser-Based Apps

Day of week:

It happened: Javascript and HTML have eaten the world. Or at least the GUI section of it. Widely used desktop applications like Slack, Atom, or Visual Studio Code are built using a combo of Javascript/HTML/CSS. Not to mention all the tools and sites we daily access from the browser.

In this track we'll look at modern client development - writing apps with Electron, building APIs to work with back-ends, improving performance, and much more.

Track Host: Phil Haack

Director of Client Apps @GitHub and shipped ASP.NET MVC/NuGet
Phil Haack (yes, it's pronounced "hack") works at GitHub as the Director of Client Apps - a group that consists of the Desktop, Atom, Electron, and Editor Tools teams. Prior to GitHub, he was a Senior Program Manager at Microsoft responsible for shipping ASP.NET MVC and NuGet. These projects were released under open source licenses and helped served as examples to other teams for how to ship open source software. He regularly writes for his blog http://haacked.com/ and tweets random observations on Twitter as @haacked. He also speaks at conferences here and there, and has quit writing technical books forever several times now.

Trackhost Interview

  • QCon: What’s the motivation for your Track?
  • Phil: The tools we use today for building browser-based applications are incredibly powerful. Frameworks like React, Aurelia, Angular, etc. provide powerful ways to build user interfaces in a maintainable way. And these same tools can now be used to build cross-platform desktop applications using Electron. Many of these tools help large teams work together to build applications. But all this power comes at the cost of a dizzying array of choices for tools and methods. In this track, I wanted to have folks with real-world experience talk about the choices they've made to build interesting applications.

  • QCon: What’s the level & core persona?
  • Phil: These talks assume you work with the web, but don't require deep mastery of these frameworks. They should appeal to software developers, leads, release managers, and technical software managers who are interested in learning new approaches they can bring back to their company.

  • QCon: What 3 actionable things do you want persona to walk away with?
  • Phil: I want attendees to walk away with at least one specific technique to improve how they build software (CI, etc.). Additionally, I hope attendees come back with an understanding of one new framework they didn't already know about. And finally, I hope attendees come back with an idea for a Desktop app they could build with web technologies, whether it be an internal app or something they deploy to the public.

  • QCon: Is this complexity worth it?
  • A lot of developers hearken back to a simpler time when all you needed was a rudimentary understanding of the DOM and jQuery to get things done. And it's true, the simplicity has a huge benefit. But the tools were also very limited when it came to building more interesting applications. I believe the complexity we're seeing is a natural result of an explosion of ideas on how to do things better. Over time, I do think some of the best ideas will win out and there will be less churn in this space. But for now, it's rather exciting to see all these new ideas and all these applications of old ideas in a new context. For your sanity though, it helps to pick one path for now and go with it? Angular vs React vs Ember? Go with the one that feels right to you and your team and stick with it. Keep an eye on the other tools, but try not to stress out about them. A lot of the underlying concepts and principles are pretty similar.

Mixing in React

JavaScript is everywhere and so are its frameworks. There’s tons of pressure and excitement to choose the right or cool tool to be used in your app but we don’t talk enough about how to use it in a production app that may or may not have an existing JavaScript structure. In this talk, I walk you through how I integrated React into an existing app with its own semi structure and talk about the lessons learned, improvements made along the way, and front-end standards that emerged for our codebase.

Rushaine McBean, Software Engineer @Agrilyst

Electron Apps, from Start to Production

Electron is the new in-vogue platform for writing cross-platform Desktop applications, and in this talk, we'll be demoing from end-to-end how to get started super quickly writing your own apps, via the new electron-forge tool that drastically simplifies writing and packaging apps. Without any boilerplate, we'll see how to integrate popular web UI libraries and languages such as React, Typescript, and Babel compilation, we'll go over some need-to-know things about how Desktop apps are distributed on different platforms, and we'll see how to set up an automatically updating packaged app that users can install.

Paul Betts, Electron Core Contributor & Open Source Guru

Exploring UI Composition in Aurelia

It’s long been said “favor composition over inheritance”. But how does that play out in a modern front-end framework? In this talk, we’ll look at Aurelia’s approach to UI composition through an exploration of its component model. We’ll see how both conventional and explicit configuration models work together to provide a clean system for developers, all based on modern JavaScript decorators and metadata. We’ll also see how Aurelia expands this approach by adding its own unique dynamic composition capabilities.

Rob Eisenberg, Sr. Program Manager @Microsoft / Creator of Caliburn.Micro, Durandal and Aurelia

React+Redux at Scale

Congratulations, you made a todo list! Now you're trying to write your next greenfield project in react+redux, but it seems the instant you step up a level in complexity the resources and advice are few and far between. You could succumb to JS fatigue and throw the whole thing out on your way to a life of farming in Kansas, or you could learn from my mistakes and (occasional) successes. Together we'll look at how React and Redux scale not just in terms of quantitative performance, but in terms of architecture and team participation. You should expect to learn a deeper understanding of idiomatic Redux, tips for manageable and efficient store structures, organizing your domain model, React patterns and anti-patterns, efficient and predictable builds, pain free deployments and easy rollouts, and even some Hot Takes™ on when to focus on which improvements and which "common knowledge" rules are meant to be broken. Attendees with basic working knowledge of React+Redux will get the most out of this talk, however anyone interested in maintainably scaling a single-page-app out to multiple developers should still find ideas worth considering.

Daniel Cousineau, Lead HTTPSter Engineer @Grovo

Refactor Frontend APIs & Accounting for Tech Debt

It can feel like a Shakespearean tragedy having to deal with technical debt when starting feature work - especially when the debt was accrued from a pair of star-crossed lovers - two teams working in parallel. Based on her recent work adding Apple Pay support to perk itemization at Indiegogo, Julia Nguyen will be talking about accounting for technical debt in feature work and best practices in refactoring front-end APIs. She will delve into serializer design, decorator pattern, and architecting client-side services. Technical debt, though ill-fated, is accrued when we lack the responsibility to keep codebases as clean as possible. The more time we dedicate to tackling technical debt in new projects, the cleaner the codebase becomes. It’s important to develop best practices for tackling technical debt and refactor work incrementally.

Julia Nguyen, Software Engineer @Indiegogo

Tracks

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.