/jqueryto2013

Notes from jQueryTO 2013

#jqueryTO2013 (feel free to add additional notes)

Promises: The Good, The Bad and The Ugly by Dan Heberden

  • jQuery’s .deferred implementation of the Promise API
  • underscore has a port (?) of .deferred in _.deferred()

Gone in 60 Seconds by Addy Osmani

  • optimal frame rate for smooth websites → 60Hz
  • CSS features like box-shadow / box-radius can have a negative impact on performance by lowering the frame rate and increasing the repaints needed
  • lots of tools (some experimental) to troubleshoot site performance in Chrome
    → show paint rectangles
    → show composite layer borders
    → continuous painting mode
  • do performance profiling in incognite mode → plugins can affect profiles
  • telemetry (?)
  • remote debugging in Chrome using ADB + Chrome Dev Tools

Holy Grail: Javascript on the Client and Server by Tim Branyen

Angular MVW (Model View Whatever) by Pearl Chen

  • Yeoman + Grunt + Bowser (Twitter)
  • Angular comes with unit testing integrated
  • appliness.com → digital magazine for web devs
  • I think Yelp uses Angular (ng- attributes)
  • What goes on under the hood in terms of DOM manipulation and how does it affect performance vs. jQuery?

Development and Prototyping by Monika Piotrowicz

  • including devs in the design process helps avoid headaches when it comes to implementation “stagger” approach is BAD → designers may create crazy interactions / ideas and devs have no idea
  • @ JetCooper they have ‘pods’ → a dev is paired with a designer for the whole process
  • collaborative!
  • revisit tools before each project (which have change, what other options are there etc.)
  • prototyping helps challenge assumptions, brings up problems early
  • bad idea to have designer present client with designers + UX without consulting developer
  • JetCooper has demo days where devs showcase what they have been working on
  • developer meetings where they just catch up with what they are working on / new stuff / etc.
  • “creative recess” → 2 days every month to do mini-hackathons, test new techs, etc.
  • when discussing issues with other developers become an ADVOCATE be CONSTRUCTIVE

Offline Mobile Wed App Arch + Design by Boaz Sender

  • “traunch” data into separate units instead of trying to pipe it in all at once
  • Leafleft.js was most performant on mobile browsers
  • Appache → pain to use
    → define what gets cached
    → appcache-internals → Chrome bookmarklet
  • DON’T try to copy native design over to mobile web

Fixing Broken Windows by Sam Breed

  • book: “The Pragmatic Programmer”
  1. Mixed spaces / tabs / trailing whitespace
    → decide on a convention to use!
  2. Have a style guide
    → jQuery style guide
    → idiomatic.js
  3. Know your VCS
    → use pull requests for code reviews
  4. Avoid monolithic files!
    → leverage the module pattern
  5. Modules
    → requireJS / AMD
  6. Leave $.fn alone unless you really mean it
  7. Dead code → have a ‘remove commit’ instead
  8. Writing testable code
    → structure app around ojbect
  9. Don’t retest jQuery
  10. Have a build step! Only ship the code that changes (i.e. not jQuery / big libraries)
  11. Don’t modify native objects with prototype (i.e. String.prototype)
    → multiple doc readys? NO!
    → don’t UA sniff
- THINK CRITICALLY!

Developing with Grunt by Dan Heberden

  • gruntjs.com/plugins → good repo for all sorts of plugins minimatch?
  • Grunt devtools plugin for Chrome
    → sits in your Dev Tools
  • #grunt on Freenode IRC
  • you can create a Grunt task to run nodemon

Front-End Diaspora by Paul Irish

  • use the timeline trace for performance
  • new browser feature → requestAutocomplete() → pops up an auto-complete dialog
    → useful for ecommerce solutions
    → see the auto-complete input attribute
  • see Alex Mccaw’s article on a browser API for one-click checkouts
    → http://blog.alexmaccaw.com/one-click-signups-and-purchasing
  • checkout OnePassword for password management

Scrolling Performance

  • scrolling is important, especially on mobile
    → root of some mobile vs native debates
  • always serve images @ proper size
  • -webkit-transofrm = translateZ(0)
    → paint hack that avoids unnecessarily repainting objects
  • Paul Lewis’ article: On Translate3D & Layer Creation Hacks
    → http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  • checkout the Chrome console doc on Google
  • XCode’s Network Link Conditioner Tool
    → simulates shitty connections, good ones etc.
  • multi-device testing
    → BrowserStack, DeviceAnywhere
  • load http://en.wikipedia.org/wiki/Wikipedia and behold the ‘layout thrashing’ (constant repaints) in the timeline
  • chrome://flags → turns on dev tool experiments
  • Snippets → cool feature that saves JS snippets
  • styled console logs are possible

Web References
http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
http://blog.alexmaccaw.com/one-click-signups-and-purchasing
http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
https://github.com/tbranyen/previewcode.com