The document discusses various JavaScript tools and techniques for developing mobile HTML5 applications. It lists Node, Backbone, Underscore, Handlebars and Redis as popular frameworks. It also provides tips on debugging mobile apps, optimizing for battery usage, addressing HTML5 limits on mobile, and using features like web workers, offline storage and geolocation.

1. Fluent – Most Popular (#FluentConf)
• Node
• Backbone – liked because its light, doesn’t do too much, expect to extend
• Underscore
• handlebars
• Redis

2. Breaking HTML5 limits on mobile
JavaScript
. mobilehtml5.org
. iwebinspector.com
. mobilexweb.com
. perfectomobile.com
. deviceanywhere.com
debug
. think about battery usage
. who killed my battery mobilexweb.com/go/battery
. firt.mobi/material – a nice little web based testing environment
. blaze.io

3. Breaking HTML5 limits on mobile
JavaScript
. 1 large file for js/css not entirely true on mobile
- inline can be better
- but have issue of caching
-- can solve cache with offline storage
. can add link rel with js to reduce preamble
. pixel density
. using png base 64 for img src (has broad support)
. png string base64 encoder
. can use vendor prefix css transforms via js
. window.standalone - detect fullscreen – to add to homescreen

4. Breaking HTML5 limits on mobile
JavaScript
. webworkers - developer.mozilla.org/en/navigation_timing
. orientation - window.orientation
. offline events - document.addEvenetListner("offline", "online")
. data management - localstorage.setItem, getItem, only stores strings
. new = eventSource
. Localstorage gotchas

5. Trello - show your stack
. less
. coffeescript
. mustache templates
. Libs (jQuery, underscore, backbone)
. compiled to a cloudfront?
. backbone (model cache on client side)
> public rest api (iphone, android, other)
> Node
> redis - mongoDB

6. Soundcloud - show your stack
. Nick Fisher
. Infrastructure
. node (AMD?)
. uglify
. require js
. almond JS (production)
. backbone
. handlebars
. underscore
. jquery
. some sound library
. uses css like require

7. Soundcloud - show your stack
Build
. node.js - combine/converts code?
. minify using uglify - minifies & removes debug code
Serve
. front end served by nginx
Runtime
. backbone
---- used as base then extended
. Handlebars /
Views
. if it has markup & behavior it is a view
. views make no assumptions about other views
. views must be independent
. proactive about garbage collection

8. Backbone
Why
. lightweight
. not mvc
. helps to keep code organized (called them cubbies)
. Models / Templates / Views
. Backbone is good candidate for single page apps
. Model mirroring
. Views handle dom events
. A view in backbone is like ios view controller
.. controlls a piece of UI
.. handles events
.. handles rendering

9. Backbone
Basics
. get data from server
. render
. mark events
. set up app

10. Backbone
Rest
. Most code tends to live in views
Templates
. ERB style syntax
Events
. Input Events . low level
. Data Change Events .
. Application Events . high level
. Plays well with other js Frameworks (ex. jQuery)
. cool thing is it will allow you to fire events on a collection of (in
example) messages or views

11. Backbone
Testng
. Presenter uses jasmine. Finds that new tests tend to be a bit
integration like.
HTML Fixtures
. jasmine - jquery gem
. downside - need server side support

12. Device APIs
• http://rng.io - web-based test suite that measures how well a mobile browser
supports the capabilities that modern mobile web apps require
• http://www.w3.org/2009/dap/
• wiki.mozilla.org/webapi
• Privacy is the biggest challenge ahead

13. Maintainable Code
@slicknet
5 year mark for code life, for properly crafted code
. intuitive or is readable
. Understandable
. Adaptable - be able to change w/o breaking
. extenable - code can be build upon to do more stuff
. debuggable - setting up to be able to step thru
. Testable

14. Maintainable Code
. code conventions
. style - syntax / spacing
. code style guilds
. google js style guide
. spacing out code is better for multi user coding evirons
. comments, like seasoning, put just enough
.. leave post it notes for future self
.. if the code looks wrong, and its for a purpose, leave a comment to
explain why
. naming, use logical names, don't shorten unnecessarily
. avoid foo/temp var names, they are useless
. use camel casing, similar to native api
. be consistent with acronyms with regards to casing
. constants - uppercase, underscore

15. Maintainable Code
Programming Practices
. don't override objects you don't own as it causes confusion
. throw your own errors.
. avoid null comparisons, better to use instance of
. use config data for:
.. URLs
.. strings displayed to user
.. settings
.. any value that can change in future.

16. Maintainable Code
. Anatomy
. Build Process
.. run checks on code
.. concat files
.. validating code
.. minifying
. JS build tools
.. c style

17. Maintainable Code
. Documentation
. js doc
. yui doc
. Decco ??
. validate
.. js lint
.. js hint
. minify
.. yui compressor
.. newer one: uglify
.. Closure complier (google)
. Apache Ant
.. build tool (read julien Li*ult)
..grunt (js hasel?)

18. Web Dev Workflow - Paul Irish
Presenter: Paul Irish
. Video
. Adventures in JS development
. baseline js front-end
. dotfiles.github.com
. iterm
. Paul uses sublime2
. Real-time feedback in browser
.. live entry, compile, reload. Replacement

19. Web Dev Workflow - Paul Irish
. modules/dependencies
.. amd
.. common js
.. es harmony
.. minispade require (ember)
.. template precompliation
.. custom built
.. alex sexton - MVWTF
.. package management - coming soon to ecmascript
.. in browser tools
.. sourceURL
.. source maps (very cool)
.. mobile
... browser stack
... chrome - emulate touches map to click

20. Web Dev Workflow - Paul Irish
gurnt, qunit - headless browswer (phantom, bunnyup, yeti, bunyip-
browser stack
. build systems
.. use grunt
.. bocoup
. client side error tracking
.. errorception
.. live reload – app to watch files
.. codekit
.. brunch
..webstorm

21. HTML5 video
. order of source is important for ios
. videojs
. jwplayer
. mediaElement.js
. video SWS see what sucks
. video/canvas - getImageData
. web RTC - real time communication (still in dev)
. getUserMedia

22. HTML5 video
. high processor power so a battery drain.
.. good to work on a small canvas as a large canvas is slow
. popcorn.js
. dmv nodejitsu
. osx photobooth js
. ro.me
. chrome experiments
. augmented reality JSAR toolkit
. bocoup

23. Ember.js
. Backbone is always a small piece of the stack
. knockout more template focuesed dom ?
. ember data not yet stable
. size is largish
. ember object (is everywhere)
. inheritance
. computed properties
. property bindings
. observers
. Natively uses handlebars
. ember.bire
. keep display logic out of data model
. hodes events
. finds or creates templates
controllers
... is really only ember.Object create.
.. binds or crates templates

24. Ember.js
Controllers
. is really ember.Object create
. if you give it a contnt prop - act as an enumerable
. seems like a lot is changing with ember
. debug helpers

25. Fluent Highlights
• http://www.youtube.com/view_play_list?p=PL75AC4484E6866741
• http://www.youtube.com/watch?v=Rj49rmc01Hs&list=PL75AC4484E6866741&ind
ex=4&feature=plpp_video
• iwebinspector.com – app to remote inspect ios simulator
• http://ender.no.de/ - a full featured package manager for your browser
• https://kanban2go.com/ - video
• https://github.com/cowboy/talks