Hungry for knowledge - Scotland JS 2014 talks

Jo Liss: No more grunt watch: Modern build workflows with Broccoli

Broccoli is an asset pipeline (build tool) featuring a concise declarative syntax, and blazing fast rebuilds. In this talk you will learn how to use how to use Broccoli to define a modern build workflow for ambitious JavaScript MVC applications, harnessing preprocessors such as Sass and CoffeeScript, without foregoing sub-second rebuilds.

Jo Liss: No more grunt watch: Modern build workflows with Broccoli from Neo (UK) on Vimeo.

Jonathan Martin: The Realtime Web: We're Doing it Wrong.

Even with WebSockets, Server Sent Events, and WebRTC at our disposal, we continue to treat realtime interactions as a selective enhancement we can hack on to a subset of features after product launch. Our antiquated MVP design assumption has been to forgo realtime interactivity. As web apps become the next generation of desktop apps, this assumption is no longer acceptable: we need to take a realtime-from-the-onset approach. However, this mindset brings with it new architectural challenges that remain largely unaddressed. - What type(s) of software components should be realtime? - Could the realtime paradigm be reduced to a simple protocol? - Can we keep authorization code DRY while presenting both HTTP and WebSocket based APIs? - How can we stick with a fat client, but expose an extensive querying API without compromising on DRY or security? We’ll examine these problems from the client and server-side, consider potential solutions, then code a solution in JS for a concrete app. We've got the tools. We just need to stop monkey patching together one-off solutions.

Jonathan Martin: The Realtime Web: We're Doing it Wrong. from Neo (UK) on Vimeo.

Zeno Rocha Bueno Netto: A future called Web Components

Discover how this new concept formed by five new specifications (Templates, Decorators, Shadow DOM, Custom Elements, HTML Imports) will revolutionize the way we develop and interact on the web.

Zeno Rocha Bueno Netto: A future called Web Components from Neo (UK) on Vimeo.

Jaume Sanchez Elias: Getting started with three.js and WebGL

An introduction to real-time graphics in the browser using WebGL with three.js. An overview of the structure of a three.js web app, the main elements of the API and some useful examples to get started on the exciting world of 3D graphics, now on desktop and mobile. It's not required to have previous knowledge of 3D graphics, linear algebra or linear transforms.

Jaume Sanchez Elias: Getting started with three.js and WebGL from Neo (UK) on Vimeo.

Ron Evans: Cylon.js: The JavaScript Evolution Of Open Source Robotics

The robotics revolution has already begun. You can buy drones and robotic devices at local retail stores. It is easy to see how web connected hardware such as robotics and the "Internet of Things" are coming as the "next big thing". Unfortunately, it has been hard to develop code for robots, and nearly impossible to create solutions that integrate multiple different kind of devices. Simply put, the software has not kept up with the hardware. That is why we have introduced Cylon.js, a JavaScript framework for robotics and physical computing based on Node.js, that can communicate with many different kinds of hardware devices, and integrate them together. With surprisingly few lines of code, you can write interesting applications that tie together Arduinos, ARDrones, Spheros, and more... even all at the same time! The combination of open source software with open source hardware has resulted in the beginning of what could be a new renaissance in computing. The time has come for this next generation of open source robotics, and Cylon.js can help lead the way!

Ron Evans: Cylon.js: The JavaScript Evolution Of Open Source Robotics from Neo (UK) on Vimeo.

Mikeal Rogers: Keynote

Mikeal Rogers: Keynote from Neo (UK) on Vimeo.

Jan Monschke: Building a collaborative audio editor based on the Web Audio API

Ever since I saw Stuart Memo talk about the Web Audio API at JSConf.eu I was inspired to work with the API and see what was possible when Audio and Web collide. This resulted in a lot of experiments and demos in the last year. In the end I convinced my professor to let me experiment even more with it in my master's thesis, although he's never heard of that API. So the last months I spent working on a (minimal) web-based collaborative audio editor, similar to Apple's Garageband. In this talk I want to share my experiences, introduce you to the API, the editor and the synchronization algorithm and...if all goes well...record some music on stage ;)

Jan Monschke: Building a collaborative audio editor based on the Web Audio API from Neo (UK) on Vimeo.

Joe Pettersson: JavaScript Security: myths, fallacies and anti-patterns

I've worked on some very sensitive front-end codebases (finance, pharma, oil and gas, defence et al) and as a consequence I've come across virtually every type of bad practice (as well as lots and lots of good!). In this talk I'll share some of those experiences and talk about the part security plays in delivering high quality client-side JavaScript, including: Why you don't control your run-time environment and why that's your biggest problem Some inherent problems with JavaScript's security model and design Writing secure API's with that in mind Exposing and implementing countermeasures for common attacks in highly sensitive codebases Patterns and anti-patterns in front-end penetration testing and auditing Why security is so important to high quality code, and why you're probably not thinking about it enough Hopefully, by the end of the talk, you'll be able to take away some the lessons I've learnt from the best of these highly secure front-end codebases, and maybe how you can stop yours failing quite as spectacularly as some of the worst ones have.

Joe Pettersson: JavaScript Security: myths, fallacies and anti-patterns from Neo (UK) on Vimeo.

Amanda O'Connell: Let's talk... mental health

At least one in four people will experience a mental health problem in the course of a year. The unwillingness to talk about mental health often makes it difficult for individuals to seek help and obtain the support they need. In this talk, Amanda focuses on the importance of talking about mental health - a subject somewhat different from most of the other conference talks, yet one relevant to many. Amanda also speaks openly about her own lived experience of mental health problems - a story of hope and triumph, which provides her with a unique insight into mental health. This talk will look not just at mental illness, but at mental wellness and some steps which everyone can take to help keep themselves mentally well.

Amanda O'Connell: Let's talk... mental health from Neo (UK) on Vimeo.

Tero Parviainen: Build Your Own AngularJS

AngularJS is a powerful JavaScript framework with a steep learning curve. The inner workings of features like directives, transclusion, data binding, and dependency injection are shrouded in mystery. When you're trying to get things done, mystery is not helpful. This talk is all about demystifying the internals of Angular. We'll take some of the tricky aspects of Angular and build them from the ground up, live on the spot. In the process we'll gain a deep understanding of what makes this framework tick.

Tero Parviainen: Build Your Own AngularJS from Neo (UK) on Vimeo.

Sugendran Ganess: Refactoring Legacy Code

Legacy JavaScript can be the bane of your existence. It's not something you aim for but changes over time can leave the codebase in a less than ideal situation. I work in a repository that usually sees 30+ commits to master per day, with over 100 engineers having their fingers in it over the last 5 years. Recently I've refactored a portion of it. I want to talk about my recent experience refactoring the FeedList, one of the central features of Yammer that has been around for over four years. The ups, the downs, and the face palms.

Sugendran Ganess: Refactoring Legacy Code from Neo (UK) on Vimeo.

Stian Veum Mollersen: Making math come alive with JavaScript

With the web becoming more powerful and supporting a wider range of technologies we are now facing a new frontier of user interaction, previously only possible using Flash or Silverlight. The new tools at our disposal as frontend developers, CSS3 Transformations, SVG, Canvas and WebGL, all rely on linear algebra and trigonometry to make wonderous things happen. This talk will take a class of transformations, known as affine transforms, make them come alive with JavaScript and show how we can leverage this mathematical sorcery to amaze and enthrall our users.

Stian Veum Mollersen: Making math come alive with JavaScript from Neo (UK) on Vimeo.

Jason Frame: Beyond the AST - A Fr**ework for Learnable Programming

Programming languages have long been shackled to their ASTs, or abstract syntax trees; the formal representation of a program's structure. But what more can we get out of the AST? What if we flipped the notion on its head, and thought of an AST not as the primary driver of program execution, but as a model like any other we operate on when writing more conventional programs? What if we did away with the AST entirely - what consequences would this have for the learnability of programming? Drawing on the work of Bret Victor, we will explore the possibilities for making programming easier to learn and reason about using a simple visual environment and a subset of Javascript.

Jason Frame: Beyond the AST - A Fr**ework for Learnable Programming from Neo (UK) on Vimeo.

Coby Chapple: How design happens at GitHub

Get an insight into the design process at GitHub, some of the more interesting constraints we face, how we make difficult product decisions (without needing managers), and some actionable ideas for how to improve the way design happens in your organization.

Coby Chapple: How design happens at GitHub from Neo (UK) on Vimeo.

Phil Leggetter: Testing Ginormous JavaScript Apps

We all agree that having well tested apps is important, right? In an agile environment it gives you the confidence to iteratively refactor as requirements change. And the larger your application, the more important this becomes. Not only does it promote quality, but also a scalable application architecture that's essential when building "Ginormous JavaScript Apps". In this talk I'll discuss and demonstrate how testing has been core to Caplin Systems successfully building and maintaining a 100k+ LoC front-end JavaScript SDK and multiple 50k+ LoC apps. In particular, the application architecture required to enable testing apps of this size.

Phil Leggetter: Testing Ginormous JavaScript Apps from Neo (UK) on Vimeo.

Tom Ashworth: ServiceWorker & the offline web

Native platforms hold something over the web: we do not have a meaningful way to ensure that, no matter what the connection of the user is like, we can always deliver an experience. ServiceWorker aims to fix this, allowing developers to take control of all resource requests from their pages before they go to the network, and save assets and content in a durable cache. We'll go through the state of the offline web today, look at the ServiceWorker proposal, discuss UX and technical implications and touch on the polyfill that enables experimentation today. Solving the offline problem moves us a huge leap towards the web being a truly viable application platform.

Tom Ashworth: ServiceWorker & the offline web from Neo (UK) on Vimeo.

Gabe Hollombe: Build Games with JavaScript and Phaser

These days, we're spoiled for choice when it comes to HTML5 game frameworks. But with so many frameworks out there, it's easy to feel like you might be picking the wrong one for your next project. Each framework has their own way of doing things, and it can feel like a big commitment to spend time learning a framework before you know everything it's capable of and if you like its API enough to stick with it. I've tried out a few of the popular HTML5 frameworks over the last few years, and Phaser is my current favorite. It's got everything you're likely to need (sprites, tilemaps, sound, animation, canvas/webgl, etc), a very active community (20 releases in the last 10 months), and an extensive suite of examples (over 160 playable demos). A 20 minute conference talk isn't enough time to show off everything, but my hope is to give you a tour of Phaser's features that you're most likely to care about if you're interested in making games with JS. I want to leave you with enough familiarity that you'll feel comfortable starting your first game, and excited by the possibilities.

Gabe Hollombe: Build Games with JavaScript and Phaser from Neo (UK) on Vimeo.

Angelina Fabbro: Keynote

Angelina Fabbro: Keynote from Neo (UK) on Vimeo.

Jonathan Lipps: Yield! How ES6 Generators and Monocle-js Can Bring Async Into Line, Literally

"Callback hell" is an oft-bemoaned state of Javascript programs. Some developers have seen their code trapped in its Ninth Circle and have lost all hope of getting it out. Others are callback agnostics and don't believe this so-called hell even exists. And most of us are probably somewhere in between: working in that pyramid-shaped purgatory where, we think, if we do our Good Parts penitence, we will eventually get our code to the heaven of Readability and Maintainability. While smart practices and async helpers can limit the pain of callback-based control flow, ES6 generators make possible new approaches that result in code which is much easier to read, maintain, and reason about. Monocle-js is one such project. In this talk, we'll look at some of the control flow situations which are particularly ugly in callback-based approaches, then discuss ES6's new generator support and yield keyword. With a basic understanding of generators in hand, we'll explore how Monocle-js can drag the aforementioned examples out of callback purgatory and set them on the straight and narrow path to Readability and Maintainability.

Jonathan Lipps: Yield! How ES6 Generators and Monocle-js Can Bring Async Into Line, Literally from Neo (UK) on Vimeo.

Matt Field: Don't Go Changin'

JavaScript is a flexible, dynamic programming language, but along with this flexibility comes a cost: ubiquitous mutability. Trying to keep track of the internal state of your JavaScript application can be an endless source of confusion. As our applications get bigger and bigger, it only gets worse. In fact, mutable state is the cause of enough confusion and complexity that entire languages have been written around the idea of avoiding it! We're taught to write our programs like they're a step-by-step set of instructions. We say "do this" and it happens; "change that", and it changes. We're encouraged to reassign variables and change the contents of our data structures at will, for example. In fact, ever since we wrote our first line of JavaScript, we've been taught that this dynamism is a good thing, but the problems mutability introduce are just something that we just have to put up with. What if there was a better way? What if we could go a long way towards solving these problems and make our programs much easier to build, maintain and test? We can! In this talk, we'll revisit exactly what we think we understand about 'state', look at the concept of 'values' as our core orientation, and look at how we can pull ourselves out of the complexity quagmire by taming our applications using immutability.

Matt Field: Don't Go Changin' from Neo (UK) on Vimeo.

James Coglan: Make: the forgotten build tool

Since Node.js came along, we've seen an explosion of build tools to support JavaScript developers. Jake, Cake, Grunt, Gulp, Fez, I've even invented one or two myself. Every language ecosystem seems doomed to reinvent Make, and many often miss what makes it great. Make has been around for decades and has evolved all sorts of features to express complex file operations quickly. It even knows when files don't need rebuilding, saving you time by skipping unnecessary work. In just a few lines of code, you can specify all sorts of common JavaScript build tasks that take hundreds of lines of plugin code and config in other frameworks. In this talk, we'll learn the basics of Unix's forgotten build tool and see how to set it up to deal with all our common JavaScript tasks with ease.

James Coglan: Make: the forgotten build tool from Neo (UK) on Vimeo.

Ryan Sandor Richards: High Performance Visualizations with Canvas

Over the last few years there has been a growing demand for web based real-time data visualization. HTML5 Canvas is a natural choice for implementing these types of displays, but the sheer number of shapes that must be animated can quickly turn a laptop into a portable space heater. In this talk we'll dig into the nuts and bolts of canvas and explore techniques for implementing beautiful, smooth, and efficient visualizations.

Ryan Sandor Richards: High Performance Visualizations with Canvas from Neo (UK) on Vimeo.

Dave Kennedy: Foundations for Assemble

You may have used a static site builder in the past, Jekyll, Octopress, Pelican. A new kid on the block is Assemble. It's written in JS, its grunt based, has great features out of the box and is easily extended for your own purpose. In this talk lets have a look at what it does, what it can be used for, how to extend it and most importantly why you should be using it! For a static site generator it sure comes in handy for a myriad of other tasks.

Dave Kennedy: Foundations for Assemble from Neo (UK) on Vimeo.

Justin Searls: JavaScript Testing Tactics

Too few people test their JavaScript, and examples of good tests are too rare. I've spent years publishing testing tools and encouraging people to test JavaScript with as much rigor as they would in any other language. Yet, a handful of tools and a 101-level tutorial of the requisite testing libraries has proven insufficient: many struggle to write tests for the sorts of situations they primarily use JavaScript for (DOM interactions, AJAX, and other asynchronous behavior). I've overcome that in my own practice, and I'd like to do a better job helping others. In this session, I'll start each topic by explaining what I don't do, and why the straightforward approaches to JavaScript testing are rife with pitfalls and frustration. It's only fair that I'd pivot to demonstrating how I write tests that clearly specify common needs like events handling, sending XHRs, and DOM manipulation. By working through examples, I'll illustrate how the pain we encounter in our tests can encourage us to improve the design of our code.

Justin Searls: JavaScript Testing Tactics from Neo (UK) on Vimeo.

John Sutherland: A Humane Introduction to Functional Programming

We'll take a gentle look at what functional programming is. You'll see how your code can be shorter, more reusable, and easier to test. How problems can be described by the "what" rather that the "how". And hopefully learn how to begin "thinking functionally" to attack problems from new angles. All of this from within the comfort of JavaScript, a language well suited to functional programming, and without having to retreat to a cabin in the woods with a stack of academic papers.

John Sutherland: A Humane Introduction to Functional Programming from Neo (UK) on Vimeo.

Philip Roberts: Help, I'm stuck in an event-loop.

Us JavaScript programmers like to use words like, "event-loop", "non-blocking", "callback", "asynchronous", "single-threaded" and "concurrency". We say things like "don't block the event loop", "make sure your code runs at 60 frames-per-second", "well of course, it won't work, that function is an asynchronous callback!" If you're anything like me, you nod and agree, as if it's all obvious, even though you don't actually know what the words mean; and yet, finding good explanations of how JavaScript actually works isn't all that easy, so let's learn! With some handy visualisations, and fun hacks, let's get an intuitive understanding of what happens when JavaScript runs. Beginner or veteran, I'm sure you'll learn something!

Philip Roberts: Help, I'm stuck in an event-loop. from Neo (UK) on Vimeo.