Last week, I attended the HTML5Dev conference in San Francisco which was just across from Capital One SF office at 201 3rd St. The conference was split across a few building which made it hard to navigate and find talks.

Swanky espresso bar at @html5devconf. Smoothies will be later. Only in San Francisco tech. ;) @meteorjs pic.twitter.com/aBNEXsVdYx

— Azat Mardan (@azat_co) October 19, 2015

The whole conference was along the lines of React is amazing, ES6 is the future and Node.js is everywhere. There were a few talks on the Internet of Things, design, UX and HTTP/2 as well. Here’s the recap of the talks to which I went to.

ES6 for Everyone!

I started the conference with ES6 for Everyone! by Jamud Ferguson of PayPal. It was a great talk and a funny one too.

• ES6 makes everything simple, modular, and devs happier

• Default parameters

• Template literals

• Multi-line string

• Destructuring

• Arraw functions

• Promises

• Modules

• Understanding ECMAScript 6 by Nicolas Zakas book on ES6

ES6 for Everyone! Slides A video on React: https://www.youtube.com/watch?v=mrtwImsEq5s

Perfect explanation for ES6 class syntax sugar. #HTML5DevConf pic.twitter.com/KUd2FKtcvz

— Swizec (@Swizec) October 20, 2015

Hardware Hacking for JavaScript Developers

The Hardware Hacking for JavaScript Developers talk by Tomomi Imura of PubNub was a high-level overview of hardware devices for IoT.

• IoT: Amazon button to order Tide, smart cooking dadgets, scales, etc.
• MCUs: Arduino and others
• Raspberry Pi computer (touch screen with computer for $90)
• PIR sensor motion sensor for Raspberry Pi
• Poor man’s HUE with Raspberry Pi and Node.js

Hardware Hacking for JavaScript Developers slides

Saw a demo coded in JS running in a browser that sets the RGB value of an led bulb hooked up to an arduino. Wow! @girlie_mac #HTML5DevConf

— Adam Phillips-Silver (@phillipssilver) October 19, 2015

React–Not Just Hype!

The React–Not Just Hype! talk by Michael Jackson of ReactJSTraining was amazing deep dive on why React is better than MVC or templates!

How React.js lets you say yes by @mjackson at @html5devconf #ReactJS #javascript pic.twitter.com/FvU16TfAoh

— Azat Mardan (@azat_co) October 19, 2015

“It’s amazing how much you can do with the right abstraction”

• Problem: Building UI
• Problem: Updating UI/View
• Problem: Feature Parity

Rendering with right abstractions (describe UIs):

• DOM
• Server
• Art drawing library (custom renderer in 0.14)
• react-canvas (60fps on mobile)
• react-three (3D, WebGL)
• react-blessed (terminal bindings)

No slides were provided or found on the internet. ;(

I put together this React.js v0.14 cheatsheets. What do you think? Did I miss anything? What?… https://t.co/pQXOe0NFYw

— Azat Mardan (@azat_co) October 23, 2015

Modern UI Development With Node.js

The Modern UI Development With Node.js talk by Ryan Anklam of Netflix was a good overview of how his team handles build processes and what best practices they use. He made fun of isomorphic vs. universal JavaScript conversation. Overall, it was a good overview of the tools and practices.

• One unified workflow

• Use modules: IIFE is not a module, use ES6 and CommonJS modules on browser and server

• Build: Your build process is the foundation for all of your development. Treat it that way.

• Code Quality: eslint, csslint

• Serve (have a server for development)

• Webpack&browserify: a holy grail of isomorphic javascript

• Automate mundane tasks (add user to github, git hooks) – gulp tasks, dev configurations in gulp tasks!

• Keep your code clean

• The code you write today is the code that will be copy&paste tomorrow.

• UI components as classes, let go of your mixins and extends (they are dangerous, e.g., two mixins with the same method in React component)

• Make testing easy: fast, automated, easy to bootstrap, have culture of testing

 

ES6 modules pros:

• Named exports

• Strict mode by default (use strict)

ES6 modules cons:

• Specs under churn

• Browser support is coming

• No conditional loading

CommonJS modules pros:

• Conditional loading

• No cognitive load when switching between Node.js modules (same syntax)

CommonJS modules cons:

• No strict mode by default

• Different syntax for browser and server

Testing, run unit tests in:

• As you code

• Before you push

• CI server (after you push)

eslint:

• Catch common errors

• Enforce code standards

• Catch oops moments (debugger, console.log)

csslint: nesting is the worth thing that happen to CSS Slides are on Slideshare.

The code you write today is the code that will be copy&paste tomorrow @bittersweetryan #HTML5DevConf @html5devconf pic.twitter.com/Zgo5kDUaIJ

— Azat Mardan (@azat_co) October 19, 2015

Node.js Authentication and Data Security

The Node.js Authentication and Data Security talk by Tim Messerschmidt of PayPal was very general. There was things like XSS or weak passwords… mentioning of 4.0–4.1 vulnerabilities and some widely-known tools like helmet and resources like Node Security project.

• Authentication – who and authorization – what resources
• OWASP TOP 10
• OAuth 1 – broken and OAuth 1.0A fixed
• MongoDB ObjectIDs are not necessarily unique, they are sequential, use node-uuid
• Express turns two query strings with the same name into an array – sanitize!
• bcrypt – salt in a hash
• helmet and lusca

node goat

Node.js Authentication and Data Security slides

You Type Too Much

I liked the You Type Too Much talk by Brandon Weaver of Sabre, because there were some actionable tips to boost developers productivity.

• Alfred: free but workflows cost $
• Dash search documentation, integration with Sublime
• Unix Power Tools book
• The linux command line book
• Vim mode bindings
• The silver searcher
• Create sublime/atom snippets
• Macros in sublime are weak
• tmux
• Emmet for HTML generation
• Don’t automate what can be abstracted.

Some new to me shell commands

• !!: last command
• !$
• !ssh
• !!:3-4
• ^stauts^status^
• oops command
• Alias and functions for thell
• unalias command

Some new to me Sublime Text shortcuts:

• cmd+shift+space
• ctrl+shift+u/D
• cmd+D
• ctrl+cmd+G
• cmd+shift+V

You Type Too Much slides, macros, code and scripts.

UX Super Powers

The UX Super Powers talk by Demian Borba of Adobe was a mix between a sales pitch for his Project Comet and some inspiration to pay attention and value User Experience.

• UX is about emotions
• Don Norman coined term UX
• http://blogs.adobe.com/creativecloud/defining-ux/
• Adobe comet is design and prototype
• Mindset the new psychology of success book:
• Fixed vs. growth mindsets (growth mindset is GOOD)
• Praising abilities vs. efforts (praising abilities is BAD)
• Design Thinking: product, service, experience

Which hats to wear? Ten Faces of Innovation book

Empathy: go to companies and watch people working instead of asking

Don’t fall in love with your idea-hard.

Stages:

• empathize
• define
• ideate
• prototype
• test
• repeat any of 1–5

Everyone on the team works on the same stage.

UX Super Powers slides

Welcome to Mordor! Hunting Performance Issues and Memory Leaks in Node.js

The Welcome to Mordor! Hunting Performance Issues and Memory Leaks in Node.js by Daniel Khan of Dynatrace Austria was the last talk of the conference. It was in small room with an old style projector called Screening room at Yerba Buena Center for the Arts.

Node consists of C++ and JavaScript:

• V8 (C++)
• Thread pool (C++)
• Event loop (C++)
• Node bindings (C++)
• Node standard library (JavaScript)
• Node code (JavaScript)

Memory:

• resident set size
• cod, stack

Heap:

• objects, closures
• used heap -process.memoryUsage()

GARBAGE collector removes when there’s no references, the whole process is interrupted
two types:

• scavenge compact
• mark sweep

node-gc-profiler to watch for GC

closure keeps outer scopes – sneaky memory leak
long running process- everything stays in memory

profiler->load-> compare what is rising (delta)

readFile goes thru:
* main thread
* event loop
* thread pool
* system

• Don’t block main thread (calculate fibonacci), use flame chart/graph to track it
• Run profiler every 5 min for CPU tracking (load in dev tools, sort)
• Use NODE_ENV=production to improve performance (caching)

Build your own dashboard:

• v8-profiler
• heap dumps
• cpu dumps
• memory usage
• process
• chrome dev tools

Do load testing:

• ab
• jmeter
• keynote
• SOASTA

Use other tech in background for heavy apps

Khan has the slides on Slideshare.

Node.js memory leaks. The last talk of the @html5devconf #HTML5DevConf CC @dkhan pic.twitter.com/5QxVWFYZss

— Azat Mardan (@azat_co) October 20, 2015

Others

Slides from other interesting talks to which I didn’t have a chance to go to:

• https://github.com/loganfsmyth/babel-howto–2015

• http://www.slideshare.net/AlexLiu24/to-err-is-human–54101650

Fixed grid layouts are fairly faster than dynamic grid layouts #HTML5DevConf pic.twitter.com/Px6YMrXjMO

— Rory Hardy (@gneatgeek) October 20, 2015

This was a big conference with three days of training after the main event. I would say it’s a good event for UI developers!