Rapid Web Development Tips and tricks for Front End Development - PowerPoint PPT Presentation

Rapid Web Development Tips and tricks for Front End Development

Javascript versions - ECMA 3 [Most successful yet] - ECMA 4 [Most unsuccessful] - ECMA 5 [Latest approved and live version] - ECMA 6 [Under development]

Javascript cool parts

what is prototype and __proto__ - Its native (not related to any library) - Usage + Lightweight instances + Used for inheritance

How does it work

hoisting - All variable declared anywhere in the current scope always reach at the top

how does it work ?

Performance Optimization

Closures

why do closures leak? - Activation object is the state when a function is being created. - Calling a function means pushing execution context on top of activation object - In case of closures, leak happens because execution context remains alive in the form of activation object of closure function. - Solution - define closure function seperately - copy the variables you need from parent.

Visualize the leak

DOM Access is costly

Reduce DOM Access

Do it offline - and then push it - use document.create() - use element.cloneNode() - use document.createDocumentFragment()

Don't use window.setInterval - use requestAnimationFrame - a performance optimization tip - Pauses the timer when the page is inactive

Reflow and Repaint

Reflow and Repaint - DOM Tree and Render tree are maintained for every HTML document - Layout changes cause reflow + repaint - Color changes cause only repaints

Reflow and Repaint - How to minimize cost - setAttribute("style", "....") - use className - hide it - position absolute - copy -> change -> replace node

Cool Development Tools

Chrome Dev Tools (Tips) - Drag and drop in Elements panel - Undo (Ctrl+z) and Redo (Ctrl+Shift+z) in elements panel - Open files list (Ctrl + o) - Open member (Ctrl + Shift + o) - Recently touched nodes ($0 - $4) - Conditional breakpoints - View pseudo classes and add new - Multiline console (Press shift) - Prettify the scripts - Pause on error/exception - Dock to right - Console in any panel - Search in all scripts - Preserve log on navigation

Sublime Text - 2 - Bird eye view - Easy package installer - Really fast - Web Dev plugins (ZEN coding, etc.) - Accepts textmate plugins - Accepts custom build process - Supports VIM!

Use ZEN coding

Write test cases - Really good code practice - Slows down development in short term but you won't regret writing it later - Avoids bugs - Prevents kids from changing your code's behaviour - Your are more confident about your code - Yeah, makes you better than others :-)

Cooler stuff in JS

New DOM API - querySelector, querySelectorAll - classList - matchesSelector - Element.focus() - outerHTML - insertAdjacentHTML - scrollIntoView - contains()

Questions? Amit Agarwal Web Developer, Google http://www.amitagrwal.com