es6-in-production

ES6 in Production Pramendra Gupta

ES6(ES2015)

const test = ({id, user}) => <h1><span>{id}</span>{user}</ h1>; ES6(ES2015)

We ship fallback to support legacy browser

Browser Support

Disadvantage of ES5 File Size Parse Time big large Debug
hard

async/await Classes Arrow functions Promises Map Set ES6 modules support
lands in browsers <script type="module" />

Advantage of ES6 version size(min+gzipped) parse time ES5 40k 360ms
ES6+ 20k 170ms File Size Parse Time small low Debug easy

ES6 Rocks

How do we use <!DOCTYPE html> <html> <head> <title>ES6 in
Production</title> <script type="module" src="bundle.js"></script> </head> <body> <div id="app"></div> <script nomodule src="bundle-legacy.js"></script> </body> </html>

Demo https://github.com/pramendra/es6-in-production

es6-in-production

es6-in-production

pramendra

More Decks by pramendra

Other Decks in Technology

Featured

Transcript