Questions and Answers from Roost Chicago 2014 Hipchat

roost-chicago-QA.md

#Roost Chicago 2014 Q&A

• Is there any reason you're using the require() inside a define() rather than simply declaring the dependencies in the define(), such as define('backbone', function(backbone) { ... });

  the problem with using requires inline rather than declaring dependencies that a race condition for loading may happen. define() and require() are slightly different

  in app code, it's really a matter of style. listing deps in an array is the AMD format, using require is the CommonJS style. A script loader has to parse the CommonJS format to build up the AMD-style array before it runs, but otherwise they behave the same

• Can someone please remind me what $el refers to in `this.$el.empty()'?

  the parentNode is actually going to be the el of whatever view rendered this child view.

• what was that tmpl!modules?

  https://github.com/bocoup-education/roost-chicago-2014-app/commit/daa8c40f4375cbbdfe95fb4801e30ee0cdb25852

• would use guys use some type of grunt script to copy the correct api.js file for dev vs production

  the api.js file is going to be the same in dev and production - location.hostname will grab whatever the current server is - so it will go with the rest of our deployment as-is

• Do we ever clean up these var statements to a single chain? Or are you using a minifier that automatically does this?

  minifier, also ben wrote a blog post on why we think multiple var statements are more maintainable http://benalman.com/news/2012/05/multiple-var-statements-javascript/

  FWIW, it's generally understood that choosing a single var declaration with many comma-separated declarations over multiple separate var declarations is a matter of style, and shouldn't necessarily impact how you author code. That said, it does make for a smaller minified file, so we use a minification tool to di that.

• Is there any reason why we leave it up to minifier to clean up as opposed to having us maintain it as we go along?

• can't we require backbone somewhere globally?

  to require it globally, you'd have to rely on it being loaded before you need it - the purpose of require is to handle your dependency management for you otherwise you're juggling script tags in your index.html file

• can someone comment on why applying prototype in update but not in constructor?

  there's no constructor method on the prototype that we want to run before our code - we DO want to run BaseView's update method before our overridden version

• does the connect middleware only work on a node.js server?

  yes

• what is the difference between using prototype.call and prototype.apply in the destroy/update functions?

  call takes individual arguments, apply an arrary, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

• if anybody noticed (and is wondering about) her HTML shortcuts, check out: http://docs.emmet.io/

• probably a silly question, but how do you install git hooks? either pre or post commit

  git hooks => http://git-scm.com/book/en/Customizing-Git-Git-Hooks

• for the $el, the container you pass in, is it only CSS class? Can you pass id's?

  Yep! You can if you have them set that way in the template. there's no reason for me to use classnames vs ids. I could have used either one.

• A bit of a broader question, but it came to mind during your session... as we build more layers of abstraction and things get more complicated client side... how do we address performance?

  that's an awesome question. That absolutely becomes a problem. We should have mentioned it, but I would say the biggest rule is, don't break down views if you don't need to. The layouts/pages don't add a lot, but the biggest mistake I see is creating individual views when rendering lists. For example, if we were to create 16 Photo Detail views instead of one gallery view.

  Listeners is another way in which that has a major impact. right now we have one listener on the ul, listening for clicks on thumbnails, so it's not bad. but if we rendered those 16 photo detail views and listened in each one of those, that's 16 listeneres instead.

• is there a cleaner way of keeping track of classes/ids in templates that are used by viewController? Or are they always scattered about in the 'afterRender'?

  I can imagine a few approaches that might be cleaner if you have a lot of them. Maybe for example you'd define a var containers = { content : '.content', toolbar: 'tow-row' ....} then you can just use containers.toolbar and containers.content when you initialize your views.

• Is there a way to have grunt check which environment we're in (dev / QA / Prod ) and run the appropriate task (stylus:dev stylus:prod)?

  a lot of the time you'd define high level tasks that would let you run grunt dev or grunt prod and those would proxy to the appropriate sub tasks.

  you could set environment variables and probably set up Grunt to watch for that - good question for Ben when he's done

• what does the ** mean in the src/**/*. ....?

  its a regexish statement to look at any file under that folder

• are there any big differences between stylus and less?

  stylus uses a different whitespace significant syntax, http://code.tutsplus.com/tutorials/sass-vs-less-vs-stylus-preprocessor-shootout--net-24320

• what's the benefit of using stylus + grunt for parsing as opposed to a tool like CodeKit?

  Both tools end up doing the same thing. It could be argued you have more control with Grunt. stylus and grunt are both opensource... and free

• what does the 'nib' refer to again?

  Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier.

• So I get that we don't need to commit built files and package dependencies, but are there any other benefits besides you don't need to?

• is there a thing like nib for less?

  http://lessprefixer.com/ http://docs.mixture.io/autoprefix can be added as a grunt task Another browser prefix option is Lea Verou's Prefix Free (http://leaverou.github.io/prefixfree/) it's a browser-based solution so better suited for small projects or prototyping

• Does anyone know if you you can have grunt run shell commands?

• URI and URL seem to be used interchangeably. Anyone care to be pedantic about their usage?

  URI and URL are interchangeable. Purely context/preference based. URI is more technically accurate, but URL is more generally understood http://stackoverflow.com/questions/176264/whats-the-difference-between-a-uri-and-a-url

• what's FileReader

  https://developer.mozilla.org/en-US/docs/Web/API/FileReader

• confusing that the root route is just an empty string. is there a way to name the routes?

  http://stackoverflow.com/questions/9820277/backbone-route-to

• I missed how we are eliminating the # from showing up in the URL. How do we do this again?

  we need the # to block the request from hitting the server... the middleware eliminates that need by hijacking the request before it hits the server and attempts to deal with it with client slide code before passing it on https://github.com/bocoup-education/roost-chicago-2014-app/commit/e97455f1a0e550cf5b97b4a10f7204dde366d2c0

  you might checkout https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

  because oldIE doesn't support pushState, you'd need to either use # fragment-based routes in the whole app or develop some kind of fallback system that uses pushState in browsers that support it and fragments in other browsers. it's more complex, but people have done it

Does anyone know if you you can have grunt run shell commands?: Yes, you can. Just like in any other 'normal' node app. This plugin integrates it a bit better in grunt: https://github.com/sindresorhus/grunt-shell

So I get that we don't need to commit built files and package dependencies, but are there any other benefits besides you don't need to?

• Cleaner, more reliable build
• faster upload to github
• clear separation of concerns

Is there any reason why we leave it up to minifier to clean up as opposed to having us maintain it as we go along?:

• Ease of use
• Readable and maintainable source code
• Consistency