Learnings from HTML5 Dev CONFerence

October 2014

Stats

thousands of attendees
dozens of sponsors
2 days
155 sessions

New impressions:
- no one talked about HTML5
- all things Front End UI
- about 1/3 dedicated to IOT
-about 1/3 dedicated to mobile

Implementing Web COmponents

  • Speaker: Chris Danford, Pinterest 
  • (2/5)
    • large scale production; 
    • SEO concerns; 
    • how to migrate large  application; 
    • performance; 
    • fallback for old browsers;
    • background: templates, shadow DOM, Polymer.js

Evolution of JavaScript

    • Speaker: Jafar Husain, Netflix 
    • (5/5)
    • Quick review of JS history
    • EcmaScript 6 features review: 
      • Classes, Inheritance, 
      • Assigns to an array, default function arg values,
      • Iterators, Generators, for...of loop;
      • Symbols, Arrow functions, Modules, 
      • Block scope, Promises
      • Many browser engines already implement ES6

cont'd

  • EcmaScript 7 features review: 
    • Async data load is similar to generators, 
    • for...on loop;
    • Object.observe() - huge for data binding.
    • Array.contains()
    • Array comprehensions (make new array from existing)

IntegratiNG require.js

    • Speaker: Paris Khachi, Eventbrite 
    • (1/5)
    • why it is useful; pitfals; how to introduce it to your company

dump sass and less for JS driven css

    • Speaker: Michael Mikowski, Qualaroo
    • (2/5)
    • Use case for Dynamic CSS;
    • self-promotion; 

Icons and the web

    • Speaker: Bear Travis, Adobe 
    • (2/5)
    • Graphics design; importance of icons

the next leap in JAVASCRIPT performance

    • Speaker: Moh Haghighat, Intel 
    • (1/5)
    • Parallel processing and threads in javascript based on Intel architecture

what's coming in node.js

    • Speaker: Bert Belder, StrongLoop 
    • (2/5)
    • New ES6 and ES7 standards, new implications for node.js

angular or backbone: go mobile

    • Speaker: Doris Chen, Microsoft 
    • (4/5)
    • Objective comparison of two 'frameworks' with lots of stats, graphs. 
    • Go mobile with Apache Cordova: develop in html/css/js, convert into native across multiple devices. 

data structures in JAVASCRIPT

    • Speaker: Rajesh Kumar, Uber 
    • (1/5)
    • Array, map, stack, (all native)
    • set (a map with string keys and boolean values)
    • BT, BST, Binary Heap, Bloom filter ... (look up online!?)

well designed development: 

SAss for engineers

    • Speaker: Smith Schvartz, Say Media 
    • (3/5)
    • Good practice of organizing css to help both designers and FE engineers
      • level names, 
      • alphabetize properties in each class,
      • //comments
      • sassmeister (like plunkr for css) 
      • workshops for engineers on design
      • designer/engineer jamboree

responsible responsive

    • Speaker: Jameson MacArthur, LockerDome 
    • (4/5)
    • CSS best practices
      • Flat selector hierarchy, util classes, name-spaced components
      • Bourbon - lighter than compass sass compiler, 
      • atomic-ish design
      • mixins with a target attribute
      • performance: scrolling and speed
      • grunt-sass: speed up sass compilation
      • jamesonmacarthur.com/slides102114

seo for single page apps

    • Speaker: Jason Moore, Use All Five 
    • (2/5)
    • Five approaches:
      • snapshot for crawlers with Phantom.js
      • run js on server i.e. with react.js
      • ...

Stop abusing bootstrap

    • Speaker: Eric Beeson, shelv.es 
    • (3/5)
    • Install via bower
    • Configure your own LESS file
    • Use mixins to use semantic way

Angularjs: customized directives

    • Speaker: Sarada Pachalla, GE 
    • (1/5)
    • ???

functional reactive javascript

    • Speaker: Pete Hodgson, ThoughtWorks 
    • (4/5)
    • Learn new ways to think and code in js
    • streams vs. variables
    • bacon.js: http://baconjs.github.io/
    • useful reference on learning FRP: 
    • https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

high performance interactive venue maps at seatgeek

    • Speaker: Chris Perkins, Intel 
    • (2/5)
    • Interactive SVG images; outlines; markers, popups, performance

different.JS

    • Speaker: Pete Hodgson, ThoughtWorks 
    • (3/5)
    • pragmatic programming book,
    • change how we use js (e.g. this --> closure)
      • no return values
      • only 1 parameter
      • all functions less than 5 lines long
      • test first everything (or no tests at all)
      • immutable objects
      • functional reactive

freeing the floats of the future from tyranny of rectangle

    • Speaker: Bem Jones-Bay, Adobe 
    • (2/5)
    • Web layout - all rectangles
    • css regions, shapes (safari only at this time)
    • css shapes (not in FF, but there is a polyfill)
    • base shapes (circle, ellips, polygon, box)
    • chrome store css shapes editor for polygons
    • example : http://bemjb.github.io/freeingfloatstalk/

server side templating or front-end templating? get the best of both!

    • Speaker: Jon Abrams, OUYA 
    • (4/5)
    • - page with pre-fetched json
    • - apiPrefetched.js in the client
    • - map page urls to api urls
    • - avoid #-type urls
    • - api request handlers can be invoked by the server
    • - synthjs.com - server side for node
    • github.com/JonAbrams/apiPrefetch.js

angular and rails: marriage or divorce?

    • Speaker: Christian Vuerings, UC Berkeley 
    • (!?/5)
    • Tools to improve integration
    • christianv.github.io/presentations/angular-rails-marriage/
    • twitter.com/denbuzze

Questions & Answers (MAYBE)

  • slides are posted on Confluence: Engineering Brown Bags page

HTML5Dev October 2014

By pbosin

Made with Slides.com

HTML5Dev October 2014

  • 681

More from pbosin