Flu3nt highlights


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flu3nt highlights

  1. 1. Fluent – Most Popular (#FluentConf)• Node• Backbone – liked because its light, doesn’t do too much, expect to extend• Underscore• handlebars• Redis
  2. 2. Breaking HTML5 limits on mobile JavaScript. mobilehtml5.org. iwebinspector.com. mobilexweb.com. perfectomobile.com. deviceanywhere.comdebug. 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. 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. 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. 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. 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. 7. Soundcloud - show your stackBuild. node.js - combine/converts code?. minify using uglify - minifies & removes debug codeServe. front end served by nginxRuntime. 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. 8. BackboneWhy. 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. 9. BackboneBasics. get data from server. render. mark events. set up app
  10. 10. BackboneRest. Most code tends to live in viewsTemplates. ERB style syntaxEvents. 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 (inexample) messages or views
  11. 11. BackboneTestng. Presenter uses jasmine. Finds that new tests tend to be a bitintegration like.HTML Fixtures. jasmine - jquery gem. downside - need server side support
  12. 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. 13. Maintainable Code@slicknet5 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. 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 toexplain why. naming, use logical names, dont 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. 15. Maintainable CodeProgramming Practices. dont override objects you dont 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. 16. Maintainable Code. Anatomy. Build Process.. run checks on code.. concat files.. validating code.. minifying. JS build tools.. c style
  17. 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. 18. Web Dev Workflow - Paul IrishPresenter: 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. 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. 20. Web Dev Workflow - Paul Irishgurnt, 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. 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. 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. 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. 24. Ember.jsControllers. 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. 25. Fluent Highlights• http://www.youtube.com/playlist?list=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