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

• 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

Chrome Dev Tools (Tips)

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

• querySelector, querySelectorAll
• classList
• matchesSelector
• Element.focus()
• outerHTML
• insertAdjacentHTML
• scrollIntoView
• contains()

New DOM API

Questions?

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